/* ═════════════════════════════════════════════════════════════════
 *  Riwaq Al Quran — Course Template Main Stylesheet
 *  Async-loaded via /inc/enqueue.php
 *
 *  Section order matches the template:
 *    1.  Utilities (section header, eyebrow, buttons full, container variants)
 *    2.  About (4 pillars + journey)
 *    3.  About Video block
 *    4.  Sample Lesson (dark full-bleed)
 *    5.  Learning Outcomes (3×2 grid)
 *    6.  Benefits (3-4 cards)
 *    7.  Curriculum (expanding cards)
 *    8.  How It Works (3 numbered cards)
 *    9.  Tutors (3-4 cards)
 *    10. Mid CTA (cream banner)
 *    11. Pricing (3 cards)
 *    12. Testimonials (stacked carousel)
 *    13. FAQ (accordion)
 *    14. Related Courses (3 cards)
 *    15. Final CTA + App Download
 *    16. Video modal (single instance)
 *    17. Sticky mobile CTA
 *    18. Reduced motion
 * ═════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
 *  1. UTILITIES & SHARED ELEMENTS
 * ───────────────────────────────────────────────────────────────── */

.riwaq-container--narrow  { max-width: 720px; }
.riwaq-container--content { max-width: var(--rwq-width-content); }

.riwaq-section--alt   { background: var(--rwq-bg-alt); }
.riwaq-section--cream { background: var(--rwq-bg-cream); }
.riwaq-section--dark  { background: var(--rwq-primary-dark); color: #fff; }
.riwaq-section--tight { padding-top: 2rem; padding-bottom: 2rem; }

/* Section header (eyebrow + title + lede pattern) */
.riwaq-section-header {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.riwaq-section-header--center {
	text-align: center;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}
.riwaq-section-header--on-dark .riwaq-section-title,
.riwaq-section-title--on-dark {
	color: #fff;
}
.riwaq-section-header--on-dark .riwaq-section-lede,
.riwaq-section-lede--on-dark {
	color: rgba(255,255,255, 0.75);
}

.riwaq-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--rwq-font-heading);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rwq-accent-hover);
	padding: 0.5rem 1rem;
	background: rgba(235, 173, 71, 0.10);
	border-radius: var(--rwq-radius-pill);
	margin-bottom: 1.25rem;
}
.riwaq-eyebrow--on-dark {
	background: rgba(235, 173, 71, 0.15);
	color: var(--rwq-accent-light);
}
.riwaq-eyebrow--pill svg {
	width: 14px;
	height: 14px;
}

.riwaq-section-title {
	font-size: var(--rwq-fs-h2);
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--rwq-primary-dark);
	margin-bottom: 1rem;
}
.riwaq-section-title-sm {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--rwq-primary-dark);
	margin-bottom: 0.75rem;
}

.riwaq-section-lede {
	font-size: clamp(1rem, 1.2vw, 1.0625rem);
	color: var(--rwq-text-muted);
	max-width: 580px;
	margin: 0 auto;
	line-height: 1.6;
}

/* Button variants — beyond the critical primary */
.riwaq-btn--secondary {
	background: transparent;
	color: var(--rwq-primary-dark);
	border: 1.5px solid var(--rwq-border);
}
.riwaq-btn--secondary:hover,
.riwaq-btn--secondary:focus-visible {
	background: var(--rwq-bg-cream);
	border-color: var(--rwq-accent);
	color: var(--rwq-primary-dark);
}
.riwaq-btn--secondary-light {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255,255,255, 0.35);
}
.riwaq-btn--secondary-light:hover,
.riwaq-btn--secondary-light:focus-visible {
	background: rgba(255,255,255, 0.1);
	border-color: #fff;
	color: #fff;
}
.riwaq-btn--lg {
	padding: 1.05rem 1.875rem;
	font-size: 1rem;
}

/* Focus states — keyboard accessibility */
.riwaq-course-page :focus-visible {
	outline: 3px solid var(--rwq-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Icon helper (used in inline SVGs) */
.riwaq-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
}


/* ─────────────────────────────────────────────────────────────────
 *  2. ABOUT — Pillar Tabs + Journey Timeline
 * ───────────────────────────────────────────────────────────────── */

.riwaq-about {
	background: linear-gradient(180deg, #fff 0%, var(--rwq-bg-cream) 100%);
}

.riwaq-pillars {
	max-width: var(--rwq-width-content);
	margin: 0 auto;
}

.riwaq-pillars__tablist {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	background: rgba(255,255,255, 0.6);
	border: 1px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-pill);
	padding: 0.375rem;
	margin: 0 auto 2.5rem;
	max-width: 540px;
	box-shadow: var(--rwq-shadow-card);
}
.riwaq-pillars__tab {
	flex: 1;
	min-width: 110px;
	padding: 0.625rem 0.875rem;
	border: none;
	background: transparent;
	font-family: var(--rwq-font-heading);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--rwq-text-muted);
	border-radius: var(--rwq-radius-pill);
	cursor: pointer;
	transition: all 0.25s ease;
	white-space: nowrap;
}
.riwaq-pillars__tab:hover {
	color: var(--rwq-primary-dark);
}
.riwaq-pillars__tab.is-active {
	background: var(--rwq-primary-dark);
	color: #fff;
	box-shadow: 0 4px 12px rgba(31, 29, 13, 0.2);
}

/* Pillar panel */
.riwaq-pillars__panel {
	display: none;
}
.riwaq-pillars__panel.is-active {
	display: block;
	animation: rwq-fade-slide-up 0.35s ease-out;
}

.riwaq-pillar-card {
	background: var(--rwq-bg-cream);
	border: 1px solid rgba(235, 173, 71, 0.25);
	border-radius: var(--rwq-radius-xl);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	box-shadow: 0 16px 40px rgba(31, 29, 13, 0.06);
	position: relative;
	overflow: hidden;
}
.riwaq-pillar-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 140px;
	height: 140px;
	background: radial-gradient(circle at top right, rgba(235, 173, 71, 0.15), transparent 70%);
	pointer-events: none;
}

.riwaq-pillar-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--rwq-font-heading);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	color: var(--rwq-accent-hover);
	text-transform: uppercase;
	margin-bottom: 0.875rem;
}
.riwaq-pillar-card__badge-dot {
	width: 6px;
	height: 6px;
	background: var(--rwq-accent);
	border-radius: 50%;
}

.riwaq-pillar-card__heading {
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--rwq-primary-dark);
	margin-bottom: 1rem;
	max-width: 30ch;
}

.riwaq-pillar-card__lede {
	font-size: 1.05rem;
	color: var(--rwq-text);
	line-height: 1.6;
	margin-bottom: 1.25rem;
	max-width: 60ch;
}

.riwaq-pillar-card__content {
	color: var(--rwq-text);
	line-height: 1.7;
	margin-bottom: 1.5rem;
	max-width: 65ch;
}
.riwaq-pillar-card__content p {
	margin-bottom: 0.75rem;
}
.riwaq-pillar-card__content p:last-child {
	margin-bottom: 0;
}
.riwaq-pillar-card__content em {
	color: var(--rwq-accent-hover);
	font-style: italic;
	font-weight: 500;
}
.riwaq-pillar-card__content a {
	color: var(--rwq-accent-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.riwaq-pillar-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.25rem;
}
.riwaq-pillar-card__tag {
	font-size: 0.78rem;
	font-weight: 500;
	padding: 0.375rem 0.875rem;
	background: rgba(255,255,255, 0.7);
	border: 1px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-pill);
	color: var(--rwq-text);
	transition: all 0.2s ease;
	animation: rwq-fade-up 0.4s ease-out both;
}
.riwaq-pillar-card__tag:nth-child(1) { animation-delay: 0.05s; }
.riwaq-pillar-card__tag:nth-child(2) { animation-delay: 0.10s; }
.riwaq-pillar-card__tag:nth-child(3) { animation-delay: 0.15s; }
.riwaq-pillar-card__tag:nth-child(4) { animation-delay: 0.20s; }
.riwaq-pillar-card__tag:nth-child(5) { animation-delay: 0.25s; }
.riwaq-pillar-card__tag:nth-child(6) { animation-delay: 0.30s; }
.riwaq-pillar-card__tag:hover {
	background: var(--rwq-accent);
	color: #fff;
	border-color: var(--rwq-accent);
}

/* Journey timeline */
.riwaq-journey {
	margin-top: clamp(3rem, 6vw, 5rem);
}
.riwaq-journey__intro {
	text-align: center;
	margin-bottom: 2rem;
}
.riwaq-journey__lede {
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	font-family: var(--rwq-font-heading);
	font-weight: 700;
	color: var(--rwq-primary-dark);
	letter-spacing: -0.01em;
}

.riwaq-journey__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	position: relative;
	counter-reset: rwq-journey;
}
/* Connecting line behind steps */
.riwaq-journey__steps::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--rwq-accent) 0,
		var(--rwq-accent) 8px,
		transparent 8px,
		transparent 16px
	);
	opacity: 0.4;
	z-index: 0;
}

.riwaq-journey__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 0.5rem;
	animation: rwq-fade-up 0.5s ease-out both;
	animation-delay: calc(var(--riwaq-step-index) * 0.08s + 0.1s);
}
.riwaq-journey__step-number {
	width: 64px;
	height: 64px;
	background: var(--rwq-bg-cream);
	border: 2px solid var(--rwq-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rwq-font-heading);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--rwq-accent-hover);
	margin-bottom: 1rem;
	box-shadow: 0 4px 12px rgba(235, 173, 71, 0.15);
}
.riwaq-journey__step-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--rwq-primary-dark);
	margin-bottom: 0.375rem;
}
.riwaq-journey__step-desc {
	font-size: 0.85rem;
	color: var(--rwq-text-muted);
	line-height: 1.5;
}

@media (max-width: 768px) {
	.riwaq-journey__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
	.riwaq-journey__steps::before {
		display: none;
	}
}


/* ─────────────────────────────────────────────────────────────────
 *  3. ABOUT VIDEO (inline)
 * ───────────────────────────────────────────────────────────────── */

.riwaq-about-video__caption {
	text-align: center;
	font-style: italic;
	color: var(--rwq-text-muted);
	margin-top: 1rem;
	font-size: 0.95rem;
}

/* Lite video player (inline, smaller) */
.riwaq-lite-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--rwq-secondary-dark);
	border-radius: var(--rwq-radius-lg);
	overflow: hidden;
	cursor: pointer;
	box-shadow: var(--rwq-shadow-card);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.riwaq-lite-video--inline {
	max-width: 720px;
	margin: 0 auto;
}
.riwaq-lite-video:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(31, 29, 13, 0.18);
}
.riwaq-lite-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.riwaq-lite-video:hover .riwaq-lite-video__poster {
	transform: scale(1.03);
}
.riwaq-lite-video__poster--placeholder {
	background: linear-gradient(135deg, var(--rwq-secondary-dark) 0%, var(--rwq-primary-dark) 100%);
}
.riwaq-lite-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--rwq-primary-dark);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.25s ease, background 0.25s ease;
	box-shadow: 0 8px 24px rgba(0,0,0, 0.3);
}
.riwaq-lite-video__play-icon svg {
	width: 26px;
	height: 26px;
	margin-left: 3px;
}
.riwaq-lite-video:hover .riwaq-lite-video__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--rwq-accent);
	color: #fff;
}


/* ─────────────────────────────────────────────────────────────────
 *  4. SAMPLE LESSON (Dark Full-Bleed)
 * ───────────────────────────────────────────────────────────────── */

.riwaq-sample-lesson {
	background: var(--rwq-primary-dark);
	color: #fff;
	padding-top: clamp(4rem, 7vw, 6rem);
	padding-bottom: clamp(4rem, 7vw, 6rem);
	position: relative;
	overflow: hidden;
}
.riwaq-sample-lesson__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(235, 173, 71, 0.18), transparent 35%),
		radial-gradient(circle at 85% 80%, rgba(235, 173, 71, 0.12), transparent 40%);
	pointer-events: none;
}
.riwaq-sample-lesson .riwaq-container {
	position: relative;
	z-index: 1;
}

.riwaq-lite-video--feature {
	max-width: 920px;
	margin: 0 auto;
	border-radius: var(--rwq-radius-xl);
	border: 1px solid rgba(235, 173, 71, 0.25);
}
.riwaq-lite-video__play--feature {
	width: 96px;
	height: 96px;
	background: var(--rwq-accent);
	color: #fff;
}
.riwaq-lite-video__play--feature .riwaq-lite-video__play-icon svg {
	width: 34px;
	height: 34px;
}
.riwaq-lite-video__play-ring {
	position: absolute;
	inset: -6px;
	border: 2px solid var(--rwq-accent);
	border-radius: 50%;
	animation: rwq-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
.riwaq-lite-video--feature:hover .riwaq-lite-video__play--feature {
	background: var(--rwq-accent-light);
}

.riwaq-sample-lesson__cta-row {
	text-align: center;
	margin-top: 2.5rem;
}


/* ─────────────────────────────────────────────────────────────────
 *  5. LEARNING OUTCOMES
 * ───────────────────────────────────────────────────────────────── */

.riwaq-outcomes__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.riwaq-outcome-card {
	background: #fff;
	border: 1px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-lg);
	padding: 1.75rem 1.5rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.riwaq-outcome-card[data-rwq-in-view] {
	animation: rwq-fade-up 0.5s ease-out both;
	animation-delay: calc(var(--riwaq-stagger) * 0.06s);
}
.riwaq-outcome-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(31, 29, 13, 0.10);
	border-color: rgba(235, 173, 71, 0.5);
}
.riwaq-outcome-card__icon {
	width: 48px;
	height: 48px;
	background: rgba(235, 173, 71, 0.12);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	color: var(--rwq-accent-hover);
}
.riwaq-outcome-card__icon img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}
.riwaq-outcome-card__icon--default svg {
	width: 24px;
	height: 24px;
}
.riwaq-outcome-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rwq-primary-dark);
	margin-bottom: 0.375rem;
	letter-spacing: -0.01em;
}
.riwaq-outcome-card__desc {
	font-size: 0.9rem;
	color: var(--rwq-text-muted);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.riwaq-outcomes__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.riwaq-outcomes__grid {
		grid-template-columns: 1fr;
	}
}


/* ─────────────────────────────────────────────────────────────────
 *  6. BENEFITS (Why Choose This Course)
 * ───────────────────────────────────────────────────────────────── */

.riwaq-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.riwaq-benefits__grid--four {
	grid-template-columns: repeat(4, 1fr);
}
.riwaq-benefit-card {
	background: #fff;
	border-radius: var(--rwq-radius-lg);
	padding: 2rem 1.5rem;
	text-align: left;
	position: relative;
	transition: background 0.3s ease, transform 0.3s ease;
	overflow: hidden;
}
/* Gradient border via pseudo-element */
.riwaq-benefit-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(135deg, rgba(235, 173, 71, 0.6), transparent 50%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.riwaq-benefit-card[data-rwq-in-view] {
	animation: rwq-fade-up 0.5s ease-out both;
	animation-delay: calc(var(--riwaq-stagger) * 0.06s);
}
.riwaq-benefit-card:hover {
	background: var(--rwq-bg-cream);
	transform: translateY(-3px);
}
.riwaq-benefit-card__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(235, 173, 71, 0.10);
	border-radius: 14px;
	margin-bottom: 1.25rem;
	color: var(--rwq-accent-hover);
}
.riwaq-benefit-card__icon img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}
.riwaq-benefit-card__icon--default svg {
	width: 22px;
	height: 22px;
}
.riwaq-benefit-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--rwq-primary-dark);
	margin-bottom: 0.5rem;
}
.riwaq-benefit-card__desc {
	font-size: 0.9rem;
	color: var(--rwq-text-muted);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.riwaq-benefits__grid,
	.riwaq-benefits__grid--four {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.riwaq-benefits__grid,
	.riwaq-benefits__grid--four {
		grid-template-columns: 1fr;
	}
}


/* ─────────────────────────────────────────────────────────────────
 *  7. CURRICULUM (Expanding Cards)
 * ───────────────────────────────────────────────────────────────── */

.riwaq-curriculum__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}
.riwaq-cur-card {
	background: #fff;
	border: 1px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-lg);
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.riwaq-cur-card.is-open {
	border-color: rgba(235, 173, 71, 0.5);
	box-shadow: 0 12px 32px rgba(31, 29, 13, 0.08);
}
.riwaq-cur-card__heading {
	margin: 0;
}
.riwaq-cur-card__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--rwq-font-heading);
}
.riwaq-cur-card__title-group {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	min-width: 0;
}
.riwaq-cur-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--rwq-primary-dark);
	letter-spacing: -0.005em;
}
.riwaq-cur-card__duration {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--rwq-text-muted);
	background: var(--rwq-bg-cream);
	padding: 0.25rem 0.625rem;
	border-radius: var(--rwq-radius-pill);
}
.riwaq-cur-card__duration svg {
	width: 13px;
	height: 13px;
}
.riwaq-cur-card__toggle {
	width: 32px;
	height: 32px;
	background: var(--rwq-bg-cream);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rwq-primary-dark);
	transition: transform 0.3s ease, background 0.3s ease;
	flex-shrink: 0;
}
.riwaq-cur-card__toggle svg {
	width: 16px;
	height: 16px;
}
.riwaq-cur-card.is-open .riwaq-cur-card__toggle {
	transform: rotate(45deg);
	background: var(--rwq-accent);
	color: #fff;
}
.riwaq-cur-card__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s ease;
}
.riwaq-cur-card.is-open .riwaq-cur-card__panel {
	max-height: 1500px;
}
.riwaq-cur-card__panel[hidden] {
	display: none;
}
.riwaq-cur-card.is-open .riwaq-cur-card__panel[hidden] {
	display: block;
}
.riwaq-cur-card__inner {
	padding: 0 1.5rem 1.5rem;
	border-top: 1px solid var(--rwq-border-light);
	padding-top: 1.25rem;
	margin: 0 0 0;
}
.riwaq-cur-card__summary {
	color: var(--rwq-text-muted);
	margin-bottom: 1rem;
	font-size: 0.95rem;
}
.riwaq-cur-card__topics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.625rem 1.5rem;
}
.riwaq-cur-card__topic {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.92rem;
	color: var(--rwq-text);
	line-height: 1.5;
}
.riwaq-cur-card__topic-bullet {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	background: var(--rwq-accent);
	border-radius: 50%;
	margin-top: 8px;
}
@media (max-width: 700px) {
	.riwaq-cur-card__topics {
		grid-template-columns: 1fr;
	}
	.riwaq-cur-card__title-group {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}


/* ─────────────────────────────────────────────────────────────────
 *  8. HOW IT WORKS
 * ───────────────────────────────────────────────────────────────── */

.riwaq-how__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	counter-reset: rwq-how;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.riwaq-how__step {
	background: #fff;
	border: 1px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-xl);
	padding: 1.5rem 1.75rem;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.riwaq-how__step[data-rwq-in-view] {
	animation: rwq-fade-up 0.5s ease-out both;
	animation-delay: calc(var(--riwaq-stagger) * 0.08s);
}
.riwaq-how__step:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(31, 29, 13, 0.10);
}
.riwaq-how__step-number {
	margin-bottom: 0.5rem;
	display: flex;
	align-items: flex-start;
}
.riwaq-how__step-number-text {
	font-family: var(--rwq-font-heading);
	font-weight: 800;
	font-size: clamp(4rem, 7vw, 5.5rem);
	line-height: 1.1;
	padding: 0.05em 0.06em;
	background: linear-gradient(135deg, var(--rwq-accent) 0%, var(--rwq-accent-light) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: -0.04em;
}
.riwaq-how__step-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--rwq-primary-dark);
	margin-bottom: 0.5rem;
}
.riwaq-how__step-desc {
	color: var(--rwq-text-muted);
	line-height: 1.55;
	font-size: 0.95rem;
}

@media (max-width: 768px) {
	.riwaq-how__list { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────
 *  9. TUTORS (Meet Your Tutors)
 * ───────────────────────────────────────────────────────────────── */

.riwaq-tutors__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.riwaq-tutors__grid--four {
	grid-template-columns: repeat(4, 1fr);
}
.riwaq-tutor-card {
	background: #fff;
	border: 1px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-xl);
	padding: 2rem 1.5rem;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.riwaq-tutor-card[data-rwq-in-view] {
	animation: rwq-fade-up 0.5s ease-out both;
	animation-delay: calc(var(--riwaq-stagger) * 0.08s);
}
.riwaq-tutor-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(31, 29, 13, 0.10);
	border-color: rgba(235, 173, 71, 0.4);
}
.riwaq-tutor-card__photo-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}
.riwaq-tutor-card__photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--rwq-bg-cream);
	transition: transform 0.3s ease, border-color 0.3s ease;
}
.riwaq-tutor-card:hover .riwaq-tutor-card__photo {
	transform: scale(1.05);
	border-color: var(--rwq-accent);
}
.riwaq-tutor-card__photo--initials {
	background: linear-gradient(135deg, var(--rwq-accent) 0%, var(--rwq-accent-light) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rwq-font-heading);
	font-weight: 700;
	font-size: 2.5rem;
	letter-spacing: 0.05em;
}
.riwaq-tutor-card__name {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rwq-primary-dark);
	margin-bottom: 0.375rem;
}
.riwaq-tutor-card__brief {
	font-size: 0.875rem;
	color: var(--rwq-text-muted);
	margin-bottom: 1rem;
	line-height: 1.5;
	min-height: 2.6em;
}
.riwaq-tutor-card__stats {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--rwq-border-light);
	margin-bottom: 1rem;
}
.riwaq-tutor-card__stat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: var(--rwq-text);
}
.riwaq-tutor-card__stat svg {
	width: 14px;
	height: 14px;
	color: var(--rwq-accent);
}
.riwaq-tutor-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--rwq-font-heading);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--rwq-accent-hover);
	text-decoration: none;
	transition: gap 0.2s ease;
}
.riwaq-tutor-card__link svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}
.riwaq-tutor-card__link:hover {
	color: var(--rwq-primary-dark);
}
.riwaq-tutor-card__link:hover svg {
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.riwaq-tutors__grid,
	.riwaq-tutors__grid--four {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.riwaq-tutors__grid,
	.riwaq-tutors__grid--four {
		grid-template-columns: 1fr;
	}
}


/* ─────────────────────────────────────────────────────────────────
 *  10. MID CTA
 * ───────────────────────────────────────────────────────────────── */

.riwaq-mid-cta {
	padding: clamp(2rem, 4vw, 3rem) 0;
}
.riwaq-mid-cta__banner {
	background: var(--rwq-bg-cream);
	border: 1.5px solid rgba(235, 173, 71, 0.25);
	border-radius: var(--rwq-radius-xl);
	padding: clamp(2rem, 5vw, 3rem);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.riwaq-mid-cta__ornament {
	position: absolute;
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(235, 173, 71, 0.2), transparent 70%);
	pointer-events: none;
}
.riwaq-mid-cta__ornament--left  { top: -50px; left: -50px; }
.riwaq-mid-cta__ornament--right { bottom: -50px; right: -50px; }
.riwaq-mid-cta__content {
	position: relative;
	z-index: 1;
}
.riwaq-mid-cta__headline {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 800;
	color: var(--rwq-primary-dark);
	letter-spacing: -0.015em;
	margin-bottom: 0.75rem;
}
.riwaq-mid-cta__subtext {
	color: var(--rwq-text-muted);
	font-size: 1.05rem;
	margin-bottom: 1.5rem;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}


/* ─────────────────────────────────────────────────────────────────
 *  11. PRICING (3 cards)
 * ───────────────────────────────────────────────────────────────── */

.riwaq-course-page ul.riwaq-pricing__grid,
.riwaq-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch;
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
	justify-content: center;
}
.riwaq-price-card {
	background: #fff;
	border: 1.5px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-xl);
	padding: 2rem 1.5rem;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.riwaq-price-card--popular {
	background: var(--rwq-bg-cream);
	border-color: var(--rwq-accent);
	transform: scale(1.04);
	box-shadow: 0 20px 40px rgba(31, 29, 13, 0.1);
	z-index: 1;
}
.riwaq-price-card__ribbon {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--rwq-primary-dark);
	color: var(--rwq-accent-light);
	padding: 0.375rem 0.875rem;
	border-radius: var(--rwq-radius-pill);
	font-family: var(--rwq-font-heading);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.riwaq-price-card__ribbon svg {
	width: 12px;
	height: 12px;
}

.riwaq-price-card__duration {
	font-family: var(--rwq-font-heading);
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.375rem;
	margin-bottom: 1rem;
}
.riwaq-price-card__duration-value {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--rwq-accent-hover);
	text-transform: uppercase;
}
.riwaq-price-card__duration-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--rwq-text-muted);
	text-transform: uppercase;
}

.riwaq-price-card__price {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	font-family: var(--rwq-font-heading);
	color: var(--rwq-primary-dark);
	margin-bottom: 0.25rem;
}
.riwaq-price-card__price-currency {
	font-size: 1.5rem;
	font-weight: 700;
	margin-right: 4px;
	margin-top: 0.5rem;
}
.riwaq-price-card__price-value {
	font-size: clamp(2.75rem, 4vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}
.riwaq-price-card__price-meta {
	font-size: 0.82rem;
	color: var(--rwq-text-muted);
	font-style: italic;
	margin-bottom: 1rem;
}

.riwaq-price-card__divider {
	height: 1px;
	background: var(--rwq-border-light);
	margin: 0.5rem 0 1.25rem;
}
.riwaq-price-card--popular .riwaq-price-card__divider {
	background: rgba(235, 173, 71, 0.3);
}

.riwaq-price-card__monthly {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.25rem;
}
.riwaq-price-card__monthly-label {
	font-size: 0.85rem;
	color: var(--rwq-text-muted);
}
.riwaq-price-card__monthly-value {
	font-family: var(--rwq-font-heading);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--rwq-primary-dark);
}
.riwaq-price-card__monthly-meta {
	font-size: 0.78rem;
	color: var(--rwq-text-muted);
	margin-bottom: 1.5rem;
}

.riwaq-price-card__cta {
	margin-top: auto;
	justify-content: center;
	width: 100%;
}

.riwaq-pricing__footer {
	text-align: center;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px dashed var(--rwq-border-light);
}
.riwaq-pricing__group-note {
	color: var(--rwq-text-muted);
	font-size: 0.95rem;
	margin-bottom: 0.75rem;
}
.riwaq-pricing__calculator-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--rwq-font-heading);
	font-weight: 600;
	color: var(--rwq-accent-hover);
	text-decoration: none;
	font-size: 0.95rem;
	padding: 0.5rem 1rem;
	border-radius: var(--rwq-radius-pill);
	transition: background 0.2s ease;
}
.riwaq-pricing__calculator-link:hover {
	background: rgba(235, 173, 71, 0.10);
	color: var(--rwq-primary-dark);
}
.riwaq-pricing__calculator-link svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 900px) {
	.riwaq-pricing__grid {
		grid-template-columns: 1fr;
		max-width: 380px;
	}
	.riwaq-price-card--popular {
		transform: none;
	}
}


/* ─────────────────────────────────────────────────────────────────
 *  12. TESTIMONIALS (Stacked Carousel)
 * ───────────────────────────────────────────────────────────────── */

.riwaq-testimonials__carousel {
	max-width: 720px;
	margin: 0 auto;
}
.riwaq-testimonials__viewport {
	position: relative;
	overflow: hidden;
	min-height: 280px;
}
.riwaq-testimonials__track {
	position: relative;
}
.riwaq-testimonials__slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}
.riwaq-testimonials__slide.is-active {
	opacity: 1;
	transform: translateY(0);
	position: relative;
	pointer-events: auto;
}

.riwaq-testimonial-card {
	background: #fff;
	border: 1px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-xl);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	box-shadow: var(--rwq-shadow-card);
	position: relative;
}
.riwaq-testimonial-card::before {
	content: """;
	position: absolute;
	top: -10px;
	left: 1.5rem;
	font-family: Georgia, serif;
	font-size: 5rem;
	color: var(--rwq-accent);
	opacity: 0.25;
	line-height: 1;
}

.riwaq-testimonial-card__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 1rem;
}
.riwaq-testimonial-card__star {
	color: var(--rwq-border);
}
.riwaq-testimonial-card__star.is-filled {
	color: var(--rwq-accent);
}
.riwaq-testimonial-card__star svg {
	width: 16px;
	height: 16px;
}

.riwaq-testimonial-card__quote {
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	color: var(--rwq-text);
	line-height: 1.65;
	margin: 0 0 1.5rem;
	font-style: italic;
	quotes: none;
}

.riwaq-testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}
.riwaq-testimonial-card__photo-wrap {
	position: relative;
	flex-shrink: 0;
}
.riwaq-testimonial-card__photo {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
}
.riwaq-testimonial-card__photo--initials {
	background: linear-gradient(135deg, var(--rwq-accent) 0%, var(--rwq-accent-light) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rwq-font-heading);
	font-weight: 700;
	font-size: 1rem;
}
.riwaq-testimonial-card__video-badge {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 24px;
	height: 24px;
	background: var(--rwq-accent);
	border: 2px solid #fff;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease;
	padding: 0;
}
.riwaq-testimonial-card__video-badge svg {
	width: 10px;
	height: 10px;
}
.riwaq-testimonial-card__video-badge:hover {
	transform: scale(1.15);
}
.riwaq-testimonial-card__name {
	font-family: var(--rwq-font-heading);
	font-weight: 700;
	color: var(--rwq-primary-dark);
	font-size: 0.95rem;
}
.riwaq-testimonial-card__location {
	font-size: 0.82rem;
	color: var(--rwq-text-muted);
}

/* Carousel controls */
.riwaq-testimonials__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.75rem;
}
.riwaq-testimonials__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--rwq-border-light);
	color: var(--rwq-primary-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}
.riwaq-testimonials__arrow svg {
	width: 16px;
	height: 16px;
}
.riwaq-testimonials__arrow:hover {
	background: var(--rwq-accent);
	color: #fff;
	border-color: var(--rwq-accent);
}
.riwaq-testimonials__dots {
	display: flex;
	gap: 0.5rem;
}
.riwaq-testimonials__dot {
	width: 8px;
	height: 8px;
	background: var(--rwq-border);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: all 0.25s ease;
}
.riwaq-testimonials__dot:hover {
	background: var(--rwq-text-muted);
}
.riwaq-testimonials__dot.is-active {
	background: var(--rwq-accent);
	width: 24px;
	border-radius: var(--rwq-radius-pill);
}


/* ─────────────────────────────────────────────────────────────────
 *  13. FAQ (Accordion)
 * ───────────────────────────────────────────────────────────────── */

.riwaq-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.riwaq-faq-item {
	background: #fff;
	border: 1px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-md);
	overflow: hidden;
	transition: border-color 0.25s ease, background 0.25s ease;
}
.riwaq-faq-item.is-open {
	background: var(--rwq-bg-cream);
	border-color: rgba(235, 173, 71, 0.4);
}
.riwaq-faq-item__heading {
	margin: 0;
}
.riwaq-faq-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.375rem;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--rwq-font-heading);
}
.riwaq-faq-item__question {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--rwq-primary-dark);
	letter-spacing: -0.005em;
	flex: 1;
}
.riwaq-faq-item__toggle {
	width: 28px;
	height: 28px;
	background: rgba(235, 173, 71, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rwq-accent-hover);
	flex-shrink: 0;
	transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.riwaq-faq-item__toggle svg {
	width: 14px;
	height: 14px;
}
.riwaq-faq-item.is-open .riwaq-faq-item__toggle {
	transform: rotate(45deg);
	background: var(--rwq-accent);
	color: #fff;
}
.riwaq-faq-item__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s ease;
}
.riwaq-faq-item.is-open .riwaq-faq-item__panel {
	max-height: 1000px;
}
.riwaq-faq-item__panel[hidden] { display: none; }
.riwaq-faq-item.is-open .riwaq-faq-item__panel[hidden] { display: block; }
.riwaq-faq-item__answer {
	padding: 0 1.375rem 1.25rem;
	color: var(--rwq-text);
	line-height: 1.65;
	font-size: 0.95rem;
}
.riwaq-faq-item__answer p {
	margin-bottom: 0.5rem;
}
.riwaq-faq-item__answer p:last-child {
	margin-bottom: 0;
}
.riwaq-faq-item__answer a {
	color: var(--rwq-accent-hover);
	text-decoration: underline;
}


/* ─────────────────────────────────────────────────────────────────
 *  14. RELATED COURSES
 * ───────────────────────────────────────────────────────────────── */

.riwaq-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.riwaq-related-card {
	background: #fff;
	border: 1px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-xl);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.riwaq-related-card[data-rwq-in-view] {
	animation: rwq-fade-up 0.5s ease-out both;
	animation-delay: calc(var(--riwaq-stagger) * 0.08s);
}
.riwaq-related-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(31, 29, 13, 0.12);
}
.riwaq-related-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.riwaq-related-card__thumb-wrap {
	position: relative;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--rwq-bg-cream);
}
.riwaq-related-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.riwaq-related-card:hover .riwaq-related-card__thumb {
	transform: scale(1.06);
}
.riwaq-related-card__thumb--placeholder {
	background: linear-gradient(135deg, var(--rwq-bg-cream), var(--rwq-bg-cream-deep));
}
.riwaq-related-card__badge {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	background: rgba(31, 29, 13, 0.85);
	color: var(--rwq-accent-light);
	font-family: var(--rwq-font-heading);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.3rem 0.625rem;
	border-radius: var(--rwq-radius-pill);
	backdrop-filter: blur(8px);
}
.riwaq-related-card__body {
	padding: 1.25rem 1.5rem 1.5rem;
}
.riwaq-related-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rwq-primary-dark);
	margin-bottom: 1rem;
	min-height: 2.4em;
	line-height: 1.25;
}
.riwaq-related-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--rwq-font-heading);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--rwq-accent-hover);
}
.riwaq-related-card__cta svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}
.riwaq-related-card:hover .riwaq-related-card__cta svg {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.riwaq-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.riwaq-related__grid {
		grid-template-columns: 1fr;
	}
}


/* ─────────────────────────────────────────────────────────────────
 *  15. FINAL CTA + App Download
 * ───────────────────────────────────────────────────────────────── */

.riwaq-final {
	background: var(--rwq-bg-cream);
	padding: clamp(4rem, 7vw, 6rem) 0;
	position: relative;
	overflow: hidden;
}
.riwaq-final__bg {
	position: absolute;
	inset: 0;
	background-image: url("../images/geometric-pattern.svg");
	background-size: 200px;
	opacity: 0.04;
	pointer-events: none;
}
.riwaq-final__content {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
	position: relative;
}
.riwaq-final__headline {
	font-family: var(--rwq-font-heading);
	font-size: clamp(1.875rem, 3.5vw, 2.75rem);
	font-weight: 800;
	color: var(--rwq-primary-dark);
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
	line-height: 1.15;
}
.riwaq-final__headline span,
.riwaq-final__headline em {
	color: var(--rwq-accent-hover);
	font-style: normal;
}
.riwaq-final__subtext {
	color: var(--rwq-text-muted);
	font-size: 1.0625rem;
	margin-bottom: 1.75rem;
	line-height: 1.6;
}
.riwaq-final__cta-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Final CTA dark variant for buttons */
.riwaq-final .riwaq-btn--primary {
	background: var(--rwq-primary-dark);
}
.riwaq-final .riwaq-btn--primary:hover {
	background: var(--rwq-secondary-dark);
}
.riwaq-final .riwaq-btn--secondary-light {
	color: var(--rwq-primary-dark);
	border-color: var(--rwq-primary-dark);
}
.riwaq-final .riwaq-btn--secondary-light:hover {
	background: var(--rwq-primary-dark);
	color: #fff;
}
.riwaq-final .riwaq-btn--secondary-light svg {
	color: #25D366;
}
.riwaq-final .riwaq-btn--secondary-light:hover svg {
	color: #fff;
}

/* App download row */
.riwaq-app-download {
	margin-top: 3rem;
	text-align: center;
	position: relative;
}
.riwaq-app-download__divider {
	width: 60px;
	height: 1px;
	background: var(--rwq-border);
	margin: 0 auto 1.25rem;
}
.riwaq-app-download__label {
	font-family: var(--rwq-font-heading);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	color: var(--rwq-text-muted);
	margin-bottom: 0.5rem;
}
.riwaq-app-download__text {
	color: var(--rwq-text);
	font-size: 0.95rem;
	margin-bottom: 1rem;
}
.riwaq-app-download__buttons {
	display: inline-flex;
	gap: 0.875rem;
	flex-wrap: wrap;
	justify-content: center;
}
.riwaq-app-download__btn {
	display: inline-block;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.riwaq-app-download__btn:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}
.riwaq-app-download__btn svg {
	display: block;
}


/* ─────────────────────────────────────────────────────────────────
 *  16. VIDEO MODAL
 * ───────────────────────────────────────────────────────────────── */

.riwaq-video-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.riwaq-video-modal:not([hidden]) {
	display: flex;
	animation: rwq-fade-in 0.25s ease;
}
.riwaq-video-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(4px);
	cursor: pointer;
}
.riwaq-video-modal__content {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16/9;
	background: #000;
	border-radius: var(--rwq-radius-lg);
	overflow: hidden;
	z-index: 1;
	animation: rwq-scale-in 0.3s ease;
}
.riwaq-video-modal__close {
	position: absolute;
	top: -3rem;
	right: 0;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	z-index: 2;
}
.riwaq-video-modal__close:hover {
	background: rgba(255, 255, 255, 0.3);
}
.riwaq-video-modal__close svg {
	width: 18px;
	height: 18px;
}
.riwaq-video-modal__frame {
	width: 100%;
	height: 100%;
}
.riwaq-video-modal__frame iframe,
.riwaq-video-modal__frame video {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}
@media (max-width: 560px) {
	.riwaq-video-modal__close {
		top: 0.5rem;
		right: 0.5rem;
	}
}


/* ─────────────────────────────────────────────────────────────────
 *  17. STICKY MOBILE CTA
 * ───────────────────────────────────────────────────────────────── */

.riwaq-mobile-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--rwq-primary-dark);
	padding: 0.75rem 1rem;
	z-index: 90;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
	display: none;
}
.riwaq-mobile-cta.is-visible {
	transform: translateY(0);
}
.riwaq-mobile-cta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.875rem 1.25rem;
	background: var(--rwq-accent);
	color: #fff;
	font-family: var(--rwq-font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	border-radius: var(--rwq-radius-pill);
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.riwaq-mobile-cta__button svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 768px) {
	.riwaq-mobile-cta { display: block; }
}


/* ─────────────────────────────────────────────────────────────────
 *  18. ANIMATIONS
 * ───────────────────────────────────────────────────────────────── */

@keyframes rwq-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes rwq-fade-slide-up {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes rwq-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes rwq-scale-in {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes rwq-pulse {
	0%   { transform: scale(1); opacity: 0.9; }
	100% { transform: scale(1.6); opacity: 0; }
}


/* ─────────────────────────────────────────────────────────────────
 *  19. REDUCED MOTION
 * ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.riwaq-course-page *,
	.riwaq-course-page *::before,
	.riwaq-course-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ═════════════════════════════════════════════════════════════════
 *  20. PATCH v1.0.1 — Astra parent overrides + Polish
 *  Added after first live test (May 2026 session).
 *  Don't merge these inline; keeping them as a patch block makes
 *  it easy to see what's a fix vs what's original styling.
 * ═════════════════════════════════════════════════════════════════ */

/* ─── Cursor: pointer on ALL interactive elements ──────────────── */
.riwaq-course-page .riwaq-btn,
.riwaq-course-page button:not([disabled]),
.riwaq-course-page a,
.riwaq-course-page [role="tab"],
.riwaq-course-page [role="button"],
.riwaq-course-page .riwaq-pillars__tab,
.riwaq-course-page .riwaq-cur-card__trigger,
.riwaq-course-page .riwaq-faq-item__trigger,
.riwaq-course-page .riwaq-testimonials__dot,
.riwaq-course-page .riwaq-testimonials__arrow,
.riwaq-course-page .riwaq-lite-video,
.riwaq-course-page .riwaq-lite-video__play,
.riwaq-course-page .riwaq-ayah-card__play,
.riwaq-course-page .riwaq-testimonial-card__video-badge,
.riwaq-course-page [data-riwaq-video-trigger] {
	cursor: pointer !important;
}

/* Astra adds some default cursor styles to anchors. Force the right one. */
.riwaq-course-page a[href] {
	cursor: pointer;
}

/* ─── Hero: spacing fixes ─────────────────────────────────────── */
.riwaq-hero__bullets {
	margin-bottom: 2.5rem; /* was 1.75rem; gives CTA more breathing room */
}
.riwaq-hero__cta-row {
	margin-top: 0.5rem; /* slight separation from bullets */
}

/* ─── Pillar tabs: widen + remove pill-container, use individual pills ── */
.riwaq-pillars__tablist {
	max-width: 100%;
	width: auto;
	display: inline-flex;
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	gap: 0.625rem;
	margin: 0 auto 3rem;
	/* Wrapper for centering */
}
.riwaq-pillars {
	text-align: center; /* centers the inline-flex tablist */
}
.riwaq-pillars__tab {
	flex: 0 0 auto;
	min-width: 130px;
	padding: 0.75rem 1.5rem;
	background: #fff;
	color: var(--rwq-text);
	border: 1.5px solid var(--rwq-border-light);
	border-radius: var(--rwq-radius-pill);
	font-size: 0.9rem;
	box-shadow: 0 2px 6px rgba(31, 29, 13, 0.04);
	transition: all 0.25s ease;
}
.riwaq-pillars__tab:hover {
	border-color: var(--rwq-accent);
	color: var(--rwq-primary-dark);
	transform: translateY(-1px);
}
.riwaq-pillars__tab.is-active {
	background: var(--rwq-primary-dark);
	color: #fff;
	border-color: var(--rwq-primary-dark);
	box-shadow: 0 6px 16px rgba(31, 29, 13, 0.25);
}
.riwaq-pillars__panel {
	text-align: left; /* reset; content inside should be left-aligned */
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* ─── Curriculum cards: explicit colors so Astra can't override ── */
.riwaq-cur-card,
.riwaq-cur-card.is-open {
	background: #fff !important;
	color: var(--rwq-text);
	border-radius: var(--rwq-radius-lg);
	overflow: visible; /* fix clipped corners */
}
.riwaq-cur-card.is-open {
	border-color: rgba(235, 173, 71, 0.5) !important;
	box-shadow: 0 12px 32px rgba(31, 29, 13, 0.08);
}
.riwaq-cur-card__trigger {
	background: transparent !important;
	color: var(--rwq-primary-dark) !important;
	padding: 1.25rem 1.5rem;
}
.riwaq-cur-card__title {
	color: var(--rwq-primary-dark) !important;
	font-size: 1.125rem;
	font-weight: 700;
}
.riwaq-cur-card__duration {
	color: var(--rwq-text-muted) !important;
	background: var(--rwq-bg-cream) !important;
}
.riwaq-cur-card__toggle {
	background: var(--rwq-bg-cream) !important;
	color: var(--rwq-primary-dark) !important;
}
.riwaq-cur-card.is-open .riwaq-cur-card__toggle {
	background: var(--rwq-accent) !important;
	color: #fff !important;
}
.riwaq-cur-card__panel {
	background: #fff !important;
}
.riwaq-cur-card__inner {
	background: transparent !important;
	color: var(--rwq-text) !important;
}
.riwaq-cur-card__summary,
.riwaq-cur-card__topic {
	color: var(--rwq-text) !important;
}

/* ─── FAQ accordion: same explicit fix ───────────────────────── */
.riwaq-faq-item,
.riwaq-faq-item.is-open {
	background: #fff !important;
	color: var(--rwq-text);
}
.riwaq-faq-item.is-open {
	background: var(--rwq-bg-cream) !important;
	border-color: rgba(235, 173, 71, 0.4) !important;
}
.riwaq-faq-item__trigger {
	background: transparent !important;
	color: var(--rwq-primary-dark) !important;
}
.riwaq-faq-item__question {
	color: var(--rwq-primary-dark) !important;
}
.riwaq-faq-item__toggle {
	background: rgba(235, 173, 71, 0.15) !important;
	color: var(--rwq-accent-hover) !important;
}
.riwaq-faq-item.is-open .riwaq-faq-item__toggle {
	background: var(--rwq-accent) !important;
	color: #fff !important;
}
.riwaq-faq-item__answer,
.riwaq-faq-item__answer p {
	color: var(--rwq-text) !important;
}

/* ─── How It Works: kill default OL numbering ─────────────────── */
.riwaq-how__list {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.riwaq-how__step {
	list-style: none !important;
}
.riwaq-how__step::before,
.riwaq-how__step::marker {
	content: none !important;
	display: none !important;
}

/* Also kill list-style on other ordered lists we use */
.riwaq-journey__steps,
.riwaq-journey__step {
	list-style: none !important;
	padding-left: 0;
}
.riwaq-journey__step::before,
.riwaq-journey__step::marker {
	content: none !important;
	display: none !important;
}

/* ─── Mid CTA: center the subtext ────────────────────────────── */
.riwaq-mid-cta__subtext {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}

/* ─── Pricing cards: better content layout ───────────────────── */
.riwaq-price-card__monthly {
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
	margin-bottom: 0.5rem;
}
.riwaq-price-card__monthly-label {
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
}
.riwaq-price-card__monthly-value {
	font-size: 1.5rem;
}
.riwaq-price-card__monthly-meta {
	text-align: center;
	margin-bottom: 1.25rem;
}

/* Add a "what's included" mini-list inside pricing cards */
.riwaq-price-card__includes {
	background: rgba(235, 173, 71, 0.05);
	border-radius: 10px;
	padding: 0.875rem 1rem;
	margin-bottom: 1.25rem;
	text-align: left;
}
.riwaq-price-card--popular .riwaq-price-card__includes {
	background: rgba(255, 255, 255, 0.6);
}
.riwaq-price-card__includes-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: var(--rwq-text);
	padding: 0.25rem 0;
}
.riwaq-price-card__includes-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: var(--rwq-accent);
	margin-top: 3px;
}
.riwaq-price-card__includes-icon svg {
	width: 14px;
	height: 14px;
}

/* ─── Pricing footer: prominent calculator CTA ─────────────── */
.riwaq-pricing__calculator-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	background: var(--rwq-primary-dark);
	color: #fff !important;
	border-radius: var(--rwq-radius-pill);
	font-family: var(--rwq-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: all 0.25s ease;
	box-shadow: 0 6px 16px rgba(31, 29, 13, 0.15);
}
.riwaq-pricing__calculator-link:hover {
	background: var(--rwq-secondary-dark);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(31, 29, 13, 0.25);
}
.riwaq-pricing__calculator-link svg {
	width: 14px;
	height: 14px;
	color: var(--rwq-accent-light);
}
.riwaq-pricing__calculator-link svg:last-child {
	color: #fff;
}

/* ─── Testimonials: replace dots with progress + counter ────── */
.riwaq-testimonials__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 2rem;
}
.riwaq-testimonials__dots {
	display: flex;
	align-items: center;
	gap: 0;
	background: transparent !important;
	padding: 0 !important;
}
/* Hide individual dots — we use the counter + progress instead */
.riwaq-testimonials__dot {
	width: 8px !important;
	height: 8px !important;
	background: rgba(31, 29, 13, 0.15) !important;
	border-radius: 50% !important;
	margin: 0 4px !important;
	padding: 0 !important;
	transition: all 0.3s ease;
}
.riwaq-testimonials__dot.is-active {
	background: var(--rwq-accent) !important;
	width: 32px !important;
	border-radius: 999px !important;
}
.riwaq-testimonials__dot:hover {
	background: rgba(31, 29, 13, 0.3) !important;
}

/* Arrow buttons — softer styling */
.riwaq-testimonials__arrow {
	background: #fff !important;
	border: 1.5px solid var(--rwq-border-light) !important;
	color: var(--rwq-primary-dark) !important;
	box-shadow: 0 2px 6px rgba(31, 29, 13, 0.06);
}
.riwaq-testimonials__arrow:hover {
	background: var(--rwq-accent) !important;
	border-color: var(--rwq-accent) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

/* ─── General: ensure no rogue dark backgrounds anywhere ───── */
.riwaq-course-page .riwaq-cur-card *,
.riwaq-course-page .riwaq-faq-item * {
	color: inherit;
}



/* ═════════════════════════════════════════════════════════════════
 *  21. PATCH v1.0.2 — Final polish round (second live test)
 *  Spacing, tutor languages, testimonial arrows, tablet layouts,
 *  hero video poster, eyebrow spacing globally.
 * ═════════════════════════════════════════════════════════════════ */

/* ─── (Pt 1) Hero: spacing heading → subhead → bullets → CTA ──── */
.riwaq-hero__title {
	margin-bottom: 1.75rem; /* was 1.25rem */
}
.riwaq-hero__subhead {
	margin-bottom: 2rem; /* was 1.5rem — more space before bullets */
}
.riwaq-hero__bullets {
	margin-bottom: 2.75rem; /* extra room before CTA */
}

/* ─── (Pt 1) Hero video play thumbnail — handled in critical-course.css ──
 * Play button + thumbnail + scrim styling consolidated into the critical
 * stylesheet to avoid specificity conflicts. Do not re-add here. */

/* ─── (Pt 2) Eyebrow → heading spacing — GLOBAL across all sections ── */
.riwaq-eyebrow {
	margin-bottom: 1.5rem; /* was 1.25rem; applies everywhere */
}
.riwaq-section-header--center .riwaq-eyebrow {
	margin-bottom: 1.5rem;
}
/* Ensure the title has clear separation from eyebrow */
.riwaq-section-header .riwaq-eyebrow + .riwaq-section-title,
.riwaq-section-header .riwaq-eyebrow + .riwaq-section-title-sm {
	margin-top: 0.25rem;
}

/* ─── (Pt 3) Tutors: equal-height cards + align top ──────────── */
.riwaq-tutors__grid,
.riwaq-tutors__grid--four {
	align-items: stretch; /* equal heights */
}
.riwaq-tutor-card {
	display: flex;
	flex-direction: column;
}
.riwaq-tutor-card__name {
	min-height: 2.6em; /* reserve 2 lines so 1-line & 2-line names align */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.riwaq-tutor-card__brief {
	flex: 1 0 auto; /* push stats/link to bottom uniformly */
}
.riwaq-tutor-card__stats {
	margin-top: auto;
}

/* ─── (Pt 3) Tutor language pills ────────────────────────────── */
.riwaq-tutor-card__langs {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.5rem;
}
.riwaq-tutor-card__langs-icon {
	display: inline-flex;
	color: var(--rwq-accent);
}
.riwaq-tutor-card__langs-icon svg {
	width: 15px;
	height: 15px;
}
.riwaq-tutor-card__lang-pill {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	background: rgba(235, 173, 71, 0.12);
	color: var(--rwq-accent-hover);
	border: 1px solid rgba(235, 173, 71, 0.3);
	border-radius: var(--rwq-radius-pill);
	font-family: var(--rwq-font-heading);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

/* ─── (Pt 4) Testimonial arrows: visible SVG icon ────────────── */
.riwaq-testimonials__arrow {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 1.5px solid var(--rwq-border-light) !important;
	color: var(--rwq-primary-dark) !important;
	box-shadow: 0 2px 8px rgba(31, 29, 13, 0.08);
	transition: all 0.2s ease;
}
.riwaq-testimonials__arrow svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	stroke: currentColor !important;
	fill: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.riwaq-testimonials__arrow:hover {
	background: var(--rwq-accent) !important;
	border-color: var(--rwq-accent) !important;
	color: #fff !important;
	transform: translateY(-1px);
}
.riwaq-testimonials__arrow:hover svg {
	stroke: #fff !important;
}

/* ─── (Pt 5 + 6) TABLET: single column for 3-card sections ───── */
@media (min-width: 601px) and (max-width: 900px) {
	.riwaq-outcomes__grid {
		grid-template-columns: repeat(2, 1fr); /* outcomes can stay 2-up */
	}
	/* 3-card sections → single column, centered, max-width for readability */
	.riwaq-benefits__grid,
	.riwaq-benefits__grid--four,
	.riwaq-how__list,
	.riwaq-tutors__grid,
	.riwaq-tutors__grid--four,
	.riwaq-related__grid {
		grid-template-columns: 1fr !important;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
	/* Pricing → single column centered (no orphan card on the side) */
	.riwaq-pricing__grid {
		grid-template-columns: 1fr !important;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
	.riwaq-price-card--popular {
		transform: none !important; /* avoid overflow when stacked */
	}
}

/* ─── (Pt 5) Scroll-to-top button: brand color, not blue ─────── */
/* Astra's scroll-top button */
#ast-scroll-top,
.ast-scroll-to-top,
.astra-scroll-to-top-wrapper {
	background-color: var(--rwq-accent) !important;
	color: #fff !important;
	border-radius: 50% !important;
}
#ast-scroll-top:hover,
.ast-scroll-to-top:hover {
	background-color: var(--rwq-accent-hover) !important;
}
#ast-scroll-top svg,
.ast-scroll-to-top svg {
	fill: #fff !important;
	color: #fff !important;
}



/* ═════════════════════════════════════════════════════════════════
 *  22. PATCH v1.0.3 — Third polish round
 *  Play thumb fit, ACF about-video heading, tutor view-profile center,
 *  clickable tutor photo, tablet card centering (real fix),
 *  FAQ corners, global subheading centering.
 * ═════════════════════════════════════════════════════════════════ */

/* ─── (Pt 1) Hero video play thumbnail — handled in critical-course.css ── */

/* ─── (Pt 3) Tutor: center View Profile + clickable photo ─────── */
.riwaq-tutor-card__link {
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}
.riwaq-tutor-card__photo-link {
	display: inline-block;
	border-radius: 50%;
	transition: transform 0.3s ease;
	cursor: pointer;
}
.riwaq-tutor-card__photo-link:hover {
	transform: scale(1.05);
}
.riwaq-tutor-card__photo-link:hover .riwaq-tutor-card__photo {
	border-color: var(--rwq-accent);
}

/* ─── (Pt 4) TABLET: TRULY center cards (justify-items + place) ── */
@media (min-width: 601px) and (max-width: 900px) {
	.riwaq-benefits__grid,
	.riwaq-benefits__grid--four,
	.riwaq-how__list,
	.riwaq-tutors__grid,
	.riwaq-tutors__grid--four,
	.riwaq-related__grid,
	.riwaq-pricing__grid {
		grid-template-columns: minmax(0, 420px) !important;
		justify-content: center !important;   /* centers the single column track */
		justify-items: center !important;
		width: 100%;
	}
	/* each card fills the centered track */
	.riwaq-benefit-card,
	.riwaq-how__step,
	.riwaq-tutor-card,
	.riwaq-related-card,
	.riwaq-price-card {
		width: 100%;
		max-width: 420px;
	}
	/* outcomes can stay 2-up but also centered */
	.riwaq-outcomes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		justify-content: center !important;
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ─── (Pt 5) FAQ corners — clearly rounded ───────────────────── */
.riwaq-faq-item {
	border-radius: var(--rwq-radius-md) !important;
	overflow: hidden !important;
	border: 1px solid var(--rwq-border-light) !important;
}
.riwaq-faq-item.is-open {
	border-color: rgba(235, 173, 71, 0.4) !important;
}
.riwaq-faq-item__trigger {
	border-radius: 0 !important; /* inner button shouldn't fight the card radius */
}

/* ─── (General) Center ALL subheadings under centered headings ── */
.riwaq-section-header--center .riwaq-section-lede,
.riwaq-section-header--center .riwaq-journey__lede {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* About-video specific (uses narrow container) */
.riwaq-about-video .riwaq-section-lede {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}



/* ═════════════════════════════════════════════════════════════════
 *  23. PATCH v1.0.4 — Definitive card-centering fix
 *  Consolidates ALL responsive card layouts for the 6 grid sections.
 *  This OVERRIDES every earlier breakpoint rule for these grids to
 *  eliminate the "card starts from the right with a gap" issue at
 *  every width below 900px (tablet AND large phone).
 * ═════════════════════════════════════════════════════════════════ */

/* From 901px and below: switch the 3-card grids to a single CENTERED column. */
@media (max-width: 900px) {
	.riwaq-benefits__grid,
	.riwaq-benefits__grid--four,
	.riwaq-how__list,
	.riwaq-tutors__grid,
	.riwaq-tutors__grid--four,
	.riwaq-related__grid,
	.riwaq-pricing__grid {
		display: grid !important;
		grid-template-columns: minmax(0, 440px) !important;
		justify-content: center !important;  /* centers the track horizontally */
		justify-items: stretch !important;
		gap: 1.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0;
		padding-right: 0;
	}

	/* Each card fills its centered track fully */
	.riwaq-benefits__grid > *,
	.riwaq-benefits__grid--four > *,
	.riwaq-how__list > *,
	.riwaq-tutors__grid > *,
	.riwaq-tutors__grid--four > *,
	.riwaq-related__grid > *,
	.riwaq-pricing__grid > * {
		width: 100% !important;
		max-width: 440px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Popular pricing card: no scale transform when stacked (prevents overflow) */
	.riwaq-price-card--popular {
		transform: none !important;
	}

	/* Outcomes: keep 2-up on tablet, but single column on phones */
	.riwaq-outcomes__grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		justify-content: center !important;
		max-width: 640px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media (max-width: 560px) {
	.riwaq-outcomes__grid {
		grid-template-columns: minmax(0, 400px) !important;
		justify-content: center !important;
	}
	.riwaq-outcomes__grid > * {
		width: 100% !important;
		max-width: 400px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}



/* ═════════════════════════════════════════════════════════════════
 *  24. PATCH v1.0.5 — Play button: force perfect circle (definitive)
 *  The button was rendering as a rounded SQUARE because Astra's button
 *  styles override border-radius. High-specificity + !important locks
 *  the circle on the button AND every child layer.
 * ═════════════════════════════════════════════════════════════════ */

.riwaq-course-page .riwaq-ayah-card .riwaq-ayah-card__play,
.riwaq-ayah-card button.riwaq-ayah-card__play {
	width: 88px !important;
	height: 88px !important;
	border-radius: 50% !important;
	-webkit-border-radius: 50% !important;
	overflow: hidden !important;
	padding: 0 !important;
	border: 3px solid #fff !important;
	background: var(--rwq-accent) !important;
	box-sizing: border-box !important;
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
}
.riwaq-course-page .riwaq-ayah-card__play-thumb {
	border-radius: 50% !important;
	object-fit: cover !important;
	width: 100% !important;
	height: 100% !important;
}
.riwaq-course-page .riwaq-ayah-card__play::after {
	border-radius: 50% !important;
}
.riwaq-course-page .riwaq-ayah-card__play-pulse {
	border-radius: 50% !important;
}



/* ═════════════════════════════════════════════════════════════════
 *  25. PATCH v1.0.6 — Tutor videos + Mid CTA polish + Journey accent
 * ═════════════════════════════════════════════════════════════════ */

/* ─── Tutor video play button (overlay on photo) ──────────────── */
.riwaq-tutor-card__photo-wrap {
	position: relative;
	display: flex;
	justify-content: center;
}
.riwaq-tutor-card__video-btn {
	position: absolute;
	bottom: 0;
	right: calc(50% - 70px); /* sits at bottom-right of the 120px circular photo */
	width: 36px;
	height: 36px;
	border-radius: 50% !important;
	background: var(--rwq-accent) !important;
	border: 3px solid #fff !important;
	color: #fff !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-shadow: 0 4px 12px rgba(235, 173, 71, 0.5);
	transition: transform 0.2s ease, background 0.2s ease;
	z-index: 3;
}
.riwaq-tutor-card__video-btn:hover {
	background: var(--rwq-accent-hover) !important;
	transform: scale(1.1);
}
.riwaq-tutor-card__video-icon svg {
	width: 14px;
	height: 14px;
	margin-left: 2px; /* optical centering — play triangle is offset */
}
/* Add subtle pulse to tutor cards that have a video */
.riwaq-tutor-card.has-video .riwaq-tutor-card__video-btn::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid var(--rwq-accent);
	animation: rwq-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

/* ─── Mid CTA: enhanced with icon + trust signal ──────────────── */
.riwaq-mid-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--rwq-accent);
	color: #fff;
	border-radius: 50%;
	margin: 0 auto 1.25rem;
	box-shadow: 0 6px 16px rgba(235, 173, 71, 0.35);
}
.riwaq-mid-cta__icon svg {
	width: 24px;
	height: 24px;
}
.riwaq-mid-cta__btn {
	margin-top: 0.5rem;
}
.riwaq-mid-cta__trust {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	font-size: 0.85rem;
	color: var(--rwq-text-muted);
	font-family: var(--rwq-font-heading);
	font-weight: 500;
}
.riwaq-mid-cta__trust-icon {
	display: inline-flex;
	color: var(--rwq-accent);
}
.riwaq-mid-cta__trust-icon svg {
	width: 16px;
	height: 16px;
}



/* ═════════════════════════════════════════════════════════════════
 *  26. PATCH v1.0.7 — Mid CTA centering fix + final polish
 *  The trust signal was breaking out left-aligned because inline-flex
 *  inside a flex column wasn't getting centered. Reset properly here.
 * ═════════════════════════════════════════════════════════════════ */

/* Mid CTA: make EVERYTHING inside .riwaq-mid-cta__content centered as a column */
.riwaq-mid-cta__content {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100%;
}

.riwaq-mid-cta__icon,
.riwaq-mid-cta__headline,
.riwaq-mid-cta__subtext,
.riwaq-mid-cta__btn,
.riwaq-mid-cta__trust {
	margin-left: auto !important;
	margin-right: auto !important;
}

.riwaq-mid-cta__btn {
	align-self: center !important;
}

.riwaq-mid-cta__trust {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	margin-top: 1.25rem !important;
	font-size: 0.85rem;
	color: var(--rwq-text-muted);
	font-family: var(--rwq-font-heading);
	font-weight: 500;
	text-align: center !important;
}
.riwaq-mid-cta__trust-icon {
	display: inline-flex !important;
	align-items: center !important;
	color: var(--rwq-accent);
	flex-shrink: 0;
}
.riwaq-mid-cta__trust-icon svg {
	width: 16px !important;
	height: 16px !important;
}



/* ═════════════════════════════════════════════════════════════════
 *  27. PATCH v1.0.8 — Sample Lesson redesign (light theme)
 *  Was dark navy full-bleed; now matches the cream/light flow of
 *  the rest of the page. Video container scaled down to match
 *  Tutors/About sizes. Cream letterbox color blends with video.
 * ═════════════════════════════════════════════════════════════════ */

/* Override the dark theming from sections 4 (critical-course / earlier patches) */
.riwaq-sample-lesson {
	background: var(--rwq-bg-alt) !important;  /* light gray #F6F6F6 */
	color: var(--rwq-text) !important;
	padding-top: clamp(3rem, 6vw, 5rem) !important;
	padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}
/* Kill the radial-gradient dark background overlay from section 4 */
.riwaq-sample-lesson .riwaq-sample-lesson__bg {
	display: none !important;
}

/* Section header: dark text on light bg (override the on-dark variant) */
.riwaq-sample-lesson .riwaq-section-title,
.riwaq-sample-lesson .riwaq-section-title--on-dark {
	color: var(--rwq-primary-dark) !important;
}
.riwaq-sample-lesson .riwaq-section-lede,
.riwaq-sample-lesson .riwaq-section-lede--on-dark {
	color: var(--rwq-text-muted) !important;
}
.riwaq-sample-lesson .riwaq-eyebrow,
.riwaq-sample-lesson .riwaq-eyebrow--on-dark {
	background: rgba(235, 173, 71, 0.10) !important;
	color: var(--rwq-accent-hover) !important;
}

/* Video container — scale down + cream letterbox + soft gold border */
.riwaq-sample-lesson .riwaq-lite-video--feature {
	max-width: 720px !important;       /* was 920px, now matches Tutors scale */
	margin-left: auto !important;
	margin-right: auto !important;
	background: var(--rwq-bg-cream) !important;  /* warm letterbox color */
	border: 1px solid rgba(235, 173, 71, 0.25) !important;
	border-radius: var(--rwq-radius-xl) !important;
	box-shadow: 0 12px 32px rgba(31, 29, 13, 0.10) !important;
	overflow: hidden;
}

/* Play button — keep gold, ensure visibility on any thumbnail */
.riwaq-sample-lesson .riwaq-lite-video__play--feature {
	background: var(--rwq-accent) !important;
	color: #fff !important;
	border: 3px solid #fff !important;
	box-shadow: 0 8px 24px rgba(235, 173, 71, 0.5);
	width: 80px;
	height: 80px;
}
.riwaq-sample-lesson .riwaq-lite-video__play--feature .riwaq-lite-video__play-icon svg {
	width: 30px;
	height: 30px;
}
.riwaq-sample-lesson .riwaq-lite-video--feature:hover .riwaq-lite-video__play--feature {
	background: var(--rwq-accent-hover) !important;
	transform: translate(-50%, -50%) scale(1.06);
}
/* Play pulse ring — keep gold accent */
.riwaq-sample-lesson .riwaq-lite-video__play-ring {
	border-color: var(--rwq-accent) !important;
}

/* CTA row spacing */
.riwaq-sample-lesson__cta-row {
	margin-top: 2.5rem !important;
	text-align: center !important;
}