/* Moddakir website styles. Values come from the Figma file "Main App UI" > Landing Page (frame 17263:1550). */

@font-face {
	font-family: "Cairo";
	font-style: normal;
	font-display: swap;
	font-weight: 200 1000;
	src: url(../fonts/cairo-arabic-wght-normal.woff2) format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "Cairo";
	font-style: normal;
	font-display: swap;
	font-weight: 200 1000;
	src: url(../fonts/cairo-latin-ext-wght-normal.woff2) format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cairo";
	font-style: normal;
	font-display: swap;
	font-weight: 200 1000;
	src: url(../fonts/cairo-latin-wght-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html:root {
	--mdk-primary: #76c1c1;
	--mdk-primary-pressed: #88cece;
	--mdk-primary-light: #d0f1f1;
	--mdk-teal: #1fada2;
	--mdk-teal-2: #3ebfb3;
	--mdk-teal-dark: #008383;
	--mdk-purple: #5e4192;
	--mdk-text: #000;
	--mdk-muted: #515d61;
	--mdk-display: #5c6471;
	--mdk-slate: #334155;
	--mdk-ink: #183030;
	--mdk-container: 1280px;
	--mdk-gutter: 16px;
	--global-body-font-family: "Cairo", system-ui, sans-serif;
	--global-heading-font-family: "Cairo", system-ui, sans-serif;
	--global-primary-nav-font-family: "Cairo", system-ui, sans-serif;
}

body {
	font-family: "Cairo", system-ui, sans-serif;
	color: var(--mdk-text);
	background: #fff;
}

/* Kadence wraps pages in content containers; the home page sections are full width. */
.mdk-home .content-container,
.mdk-home .entry-content-wrap,
.mdk-home .site-main {
	padding: 0;
	max-width: none;
}
.mdk-home .entry-content > * {
	margin-block: 0;
}

/* Reset spacing inside Moddakir sections; each section sets its own gaps.
   Doubled class so it beats Kadence's .single-content margins. */
.mdk-section.mdk-section :is(h1, h2, h3, h4, p, figure, ul, .wp-block-image, .wp-block-buttons, .wp-block-group, .wp-block-details),
.mdk-home .entry-content > .mdk-section.mdk-section {
	margin: 0;
}
.mdk-section :where(.is-layout-flow, .is-layout-constrained) > * {
	margin-block: 0;
}
.mdk-section {
	font-family: "Cairo", system-ui, sans-serif;
}
.mdk-container,
.mdk-section.mdk-section .mdk-container {
	width: 100%;
	max-width: var(--mdk-container);
	margin-inline: auto;
	padding-inline: var(--mdk-gutter);
	box-sizing: border-box;
}
.mdk-hl {
	color: var(--mdk-teal);
}
.mdk-section mark.has-inline-color {
	background: none;
}

/* Buttons. On a core/button block the class sits on the wrapper div, so only its link is styled. */
.mdk-btn:not(.wp-block-button),
.mdk-section .wp-block-button.mdk-btn .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 24px;
	border: 2px solid var(--mdk-teal);
	border-radius: 8px;
	background: var(--mdk-teal);
	color: #fff;
	font-size: 16px;
	line-height: 16px;
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}
.mdk-btn:not(.wp-block-button):hover,
.mdk-section .wp-block-button.mdk-btn .wp-block-button__link:hover {
	background: #188f86;
	border-color: #188f86;
	color: #fff;
}
.mdk-btn--small {
	width: auto;
	min-height: 40px;
	padding: 8px 16px;
	font-size: 15px;
}
.mdk-section .wp-block-buttons {
	display: block;
	width: 100%;
}
.mdk-section .wp-block-button.mdk-btn {
	width: 100%;
}

/* Header */
.mdk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 0.8px solid #d1d5db;
}
.admin-bar .mdk-header {
	top: 32px;
}
.mdk-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1240px;
	min-height: 80px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}
.mdk-logo {
	display: block;
	flex: none;
	padding-block: 16px;
}
.mdk-logo img {
	display: block;
	width: 150px;
	height: auto;
}
.mdk-nav {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 16px;
}
.mdk-nav__list {
	display: flex;
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mdk-nav__list a {
	display: block;
	padding-inline: 16px;
	white-space: nowrap;
	color: var(--mdk-slate);
	font-size: 16px;
	line-height: 80px;
	text-decoration: none;
}
.mdk-nav__list .current-menu-item > a,
.mdk-nav__list a:hover {
	color: var(--mdk-purple);
}
.mdk-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
.mdk-header__actions .mdk-btn {
	white-space: nowrap;
}
.mdk-lang {
	position: relative;
}
.mdk-lang summary {
	display: flex;
	white-space: nowrap;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 0.8px solid #d0f1f1;
	border-radius: 8px;
	color: var(--mdk-slate);
	font-size: 15px;
	cursor: pointer;
	list-style: none;
}
.mdk-lang summary::-webkit-details-marker {
	display: none;
}
.mdk-lang summary::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.9 6h-2.9a15.7 15.7 0 0 0-1.4-3.6A8 8 0 0 1 18.9 8ZM12 4a14 14 0 0 1 1.9 4h-3.8A14 14 0 0 1 12 4ZM4.3 14a8.3 8.3 0 0 1 0-4h3.4a16.5 16.5 0 0 0 0 4H4.3Zm.8 2h2.9c.3 1.3.8 2.5 1.4 3.6A8 8 0 0 1 5.1 16ZM8 8H5.1a8 8 0 0 1 4.3-3.6C8.8 5.5 8.3 6.7 8 8Zm4 12a14 14 0 0 1-1.9-4h3.8A14 14 0 0 1 12 20Zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4Zm.3 5.6c.6-1.1 1.1-2.3 1.4-3.6h2.9a8 8 0 0 1-4.3 3.6Zm1.7-5.6a16.5 16.5 0 0 0 0-4h3.4a8.3 8.3 0 0 1 0 4h-3.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.9 6h-2.9a15.7 15.7 0 0 0-1.4-3.6A8 8 0 0 1 18.9 8ZM12 4a14 14 0 0 1 1.9 4h-3.8A14 14 0 0 1 12 4ZM4.3 14a8.3 8.3 0 0 1 0-4h3.4a16.5 16.5 0 0 0 0 4H4.3Zm.8 2h2.9c.3 1.3.8 2.5 1.4 3.6A8 8 0 0 1 5.1 16ZM8 8H5.1a8 8 0 0 1 4.3-3.6C8.8 5.5 8.3 6.7 8 8Zm4 12a14 14 0 0 1-1.9-4h3.8A14 14 0 0 1 12 20Zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4Zm.3 5.6c.6-1.1 1.1-2.3 1.4-3.6h2.9a8 8 0 0 1-4.3 3.6Zm1.7-5.6a16.5 16.5 0 0 0 0-4h3.4a8.3 8.3 0 0 1 0 4h-3.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mdk-lang ul {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 6px);
	min-width: 160px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 0.8px solid #d0f1f1;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(35, 74, 75, 0.1);
}
.mdk-lang a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--mdk-slate);
	text-decoration: none;
}
.mdk-lang a:hover,
.mdk-lang a[aria-current] {
	background: #e2f7f7;
	color: #006c6f;
}
.mdk-nav-toggle {
	display: none;
	margin-inline-start: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mdk-slate);
	cursor: pointer;
}
.mdk-nav-toggle__bars,
.mdk-nav-toggle__bars::before,
.mdk-nav-toggle__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	margin-inline: auto;
	background: currentColor;
	border-radius: 2px;
}
.mdk-nav-toggle__bars {
	position: relative;
}
.mdk-nav-toggle__bars::before,
.mdk-nav-toggle__bars::after {
	content: "";
	position: absolute;
}
.mdk-nav-toggle__bars::before {
	top: -7px;
}
.mdk-nav-toggle__bars::after {
	top: 7px;
}

/* Hero */
.mdk-hero {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	min-height: 661px;
	padding-inline: 10px;
	overflow: hidden;
}
/* Any section can carry the animated map: add class mdk-has-map and put [mdk_hero_map] first inside it. */
.mdk-has-map {
	position: relative;
	overflow: hidden;
}
.mdk-has-map > :not(.mdk-hero__map) {
	position: relative;
	z-index: 1;
}
/* The map box keeps the image's aspect ratio and covers the hero, so the SVG points stay on their countries. */
.mdk-hero__map {
	position: absolute;
	inset: 0;
	z-index: 0;
	container-type: size;
	pointer-events: none;
}
.mdk-hero__map-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 202.2cqh);
	aspect-ratio: 2560 / 1266;
	background: url(../figma/83ade.webp) center / 100% 100% no-repeat;
	transform: translate(-50%, -50%);
}
.mdk-map {
	display: block;
	width: 100%;
	height: 100%;
}
/* Learners on the map: each point lights up and pings on its own clock, so the map never pulses in step. */
.mdk-map__ring,
.mdk-map__core {
	transform-box: fill-box;
	transform-origin: center;
}
.mdk-map__ring {
	fill: var(--mdk-teal);
	opacity: 0;
}
.mdk-map__core {
	fill: var(--mdk-teal);
	stroke: #fff;
	stroke-width: 3;
	opacity: 0.5;
}
.mdk-map__dot--alt .mdk-map__ring,
.mdk-map__dot--alt .mdk-map__core {
	fill: var(--mdk-purple);
}
.mdk-anim .mdk-map__ring {
	animation: mdk-ping var(--mdk-speed, 4s) ease-out var(--mdk-delay, 0s) infinite;
}
.mdk-anim .mdk-map__core {
	animation: mdk-online var(--mdk-speed, 4s) ease-in-out var(--mdk-delay, 0s) infinite;
}
@keyframes mdk-ping {
	0%, 8% { transform: scale(0.4); opacity: 0; }
	12% { opacity: 0.45; }
	55%, 100% { transform: scale(2.8); opacity: 0; }
}
@keyframes mdk-online {
	0%, 100% { opacity: 0.35; transform: scale(0.8); }
	12%, 55% { opacity: 1; transform: scale(1.05); }
}

/* Hero entrance: the verse types itself, then the text and the store buttons rise in. */
.mdk-hero__title.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.9em;
	margin-inline-start: 6px;
	vertical-align: -0.1em;
	background: var(--mdk-teal);
	animation: mdk-caret 0.8s steps(1) infinite;
}
@keyframes mdk-caret {
	50% { opacity: 0; }
}
.mdk-anim .mdk-hero__title:not(.is-typing, .is-typed) {
	visibility: hidden;
	/* Safety net if the script never runs. */
	animation: mdk-show 0s 3s forwards;
}
.mdk-anim .mdk-hero__meaning,
.mdk-anim .mdk-hero__lead,
.mdk-anim .mdk-hero .mdk-stores {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	animation: mdk-show 0.6s 5s forwards;
}
.mdk-anim .mdk-hero.is-typed .mdk-hero__meaning,
.mdk-anim .mdk-hero.is-typed .mdk-hero__lead,
.mdk-anim .mdk-hero.is-typed .mdk-stores {
	opacity: 1;
	transform: none;
	animation: none;
}
.mdk-anim .mdk-hero.is-typed .mdk-stores {
	transition-delay: 0.2s;
}
@keyframes mdk-show {
	to { visibility: visible; opacity: 1; transform: none; }
}
/* Scroll reveal (site.js marks the elements). Uses the translate property so elements keep their own transforms. */
.mdk-anim .mdk-reveal {
	opacity: 0;
	translate: 0 28px;
	transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--mdk-i, 0) * 90ms);
}
/* Path rows: each half slides in from its own side (first child sits at the inline start), and settles once revealed.
   On phones the rows stack, so they rise in like everything else and stay centred. */
@media (min-width: 861px) {
	.mdk-anim .mdk-path > .mdk-reveal:first-child:not(.mdk-in) {
		translate: 40px 0;
	}
	.mdk-anim .mdk-path > .mdk-reveal:last-child:not(.mdk-in) {
		translate: -40px 0;
	}
	.mdk-anim:not([dir="rtl"]) .mdk-path > .mdk-reveal:first-child:not(.mdk-in) {
		translate: -40px 0;
	}
	.mdk-anim:not([dir="rtl"]) .mdk-path > .mdk-reveal:last-child:not(.mdk-in) {
		translate: 40px 0;
	}
}
.mdk-anim .mdk-reveal.mdk-in {
	opacity: 1;
	translate: 0 0;
}

/* The phone rises in (translate), then floats (transform) while the app screen scrolls inside it. */
.mdk-anim .mdk-hero__phone {
	animation:
		mdk-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both,
		mdk-float 6s ease-in-out 0.9s infinite;
}
.mdk-anim .mdk-hero__phone img {
	animation: mdk-screen 18s ease-in-out 1.5s infinite;
}
@keyframes mdk-rise {
	from { opacity: 0; translate: 0 40px; }
	to { opacity: 1; translate: 0 0; }
}
@keyframes mdk-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-14px) rotate(-1.2deg); }
}
@keyframes mdk-screen {
	0%, 12% { object-position: 50% 0%; }
	45%, 62% { object-position: 50% 100%; }
	95%, 100% { object-position: 50% 0%; }
}

.mdk-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	gap: 20px;
	width: 100%;
	max-width: 1280px;
	padding-block: 10px;
}
.mdk-hero__text {
	display: flex;
	flex: 0 1 693px;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 10px;
	/* The verse sizes itself to this column (cqi), so it always fits on one line. */
	container-type: inline-size;
}
.mdk-hero__title {
	/* 15.9 ≈ the verse's width in Cairo divided by its font size, with room for the typing caret. */
	font-size: min(40px, 100cqi / 15.9);
	font-weight: 400;
	line-height: 52px;
	white-space: nowrap;
}
/* Other languages keep the verse in Arabic (right to left, at the start of their own text) and add its meaning. */
html:not([dir="rtl"]) .mdk-hero__title {
	direction: rtl;
	text-align: left;
}
.mdk-section.mdk-section .mdk-hero__meaning {
	margin-top: -8px;
	color: var(--mdk-teal-dark);
	font-size: 17px;
	font-style: italic;
	line-height: 1.6;
}
/* Slanted Arabic-script letters lose their shapes: Urdu keeps the meaning upright. */
[dir="rtl"] .mdk-hero__meaning {
	font-style: normal;
}
.mdk-hero__lead {
	max-width: 653px;
	color: var(--mdk-muted);
	font-size: 18px;
	line-height: 29.7px;
}
.mdk-stores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.mdk-stores > * {
	margin: 0;
}
.mdk-stores img {
	display: block;
	height: 46px;
	width: auto;
}
.mdk-hero__phone {
	position: relative;
	display: flex;
	flex: 0 1 567px;
	align-items: center;
	justify-content: center;
	padding: 10px;
}
/* Soft teal glow behind the phone. */
.mdk-hero__phone::before {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(31, 173, 162, 0.22), rgba(31, 173, 162, 0) 68%);
	z-index: -1;
}
/* Phone frame drawn around the app screenshot; the screen shows the top and scrolls to the rest. */
.mdk-hero__phone img {
	display: block;
	width: 290px;
	height: auto;
	aspect-ratio: 9 / 19.5;
	box-sizing: content-box;
	border: 10px solid #111827;
	border-radius: 46px;
	/* The screenshot has no status bar: a strip in the app's header colour sits under the camera notch. */
	padding-top: 30px;
	background: #43c0b4;
	object-fit: cover;
	object-position: 50% 0%;
	box-shadow: 0 0 0 2px #2d3748, 0 30px 60px rgba(24, 48, 48, 0.25);
}
/* The app animation (site.js) takes the screenshot's place; it draws its own phone, so the frame above goes too. */
.mdk-hero__anim {
	display: none;
	width: 320px;
	aspect-ratio: 823 / 1677;
}
.mdk-hero__phone.has-anim .mdk-hero__anim {
	display: block;
}
.mdk-hero__phone.has-anim img,
.mdk-hero__phone.has-anim::after {
	display: none;
}
.mdk-hero__phone::after {
	content: "";
	position: absolute;
	top: 34px;
	left: 50%;
	width: 86px;
	height: 22px;
	border-radius: 12px;
	background: #111827;
	transform: translateX(-50%);
}

/* Section headings */
.mdk-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.mdk-eyebrow {
	font-size: 16px;
	line-height: 26.4px;
}
.mdk-head__title {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.8;
}
.mdk-head__sub {
	max-width: 640px;
	color: var(--mdk-muted);
	font-size: 18px;
	line-height: 29.7px;
}

/* Cards with the light gradient (features, teachers) */
.mdk-grid {
	display: grid;
	gap: 24px;
}
.mdk-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mdk-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mdk-soft-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px 16px;
	border-radius: 16px;
	/* Figma: a faint mint tint at the top fading to white. */
	background: linear-gradient(to bottom, #effafa 0%, #fff 56%);
	filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.05));
	text-align: center;
}
.mdk-soft-card img {
	display: block;
	width: 72px;
	height: 72px;
}
.mdk-soft-card h3 {
	color: #111827;
	font-size: 18px;
	font-weight: 700;
	line-height: 23.4px;
}
.mdk-soft-card p {
	color: var(--mdk-muted);
	font-size: 16px;
	line-height: 26.4px;
}

/* Intro + features */
.mdk-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	padding: 42px 64px;
}
.mdk-intro__title {
	max-width: 1408px;
	font-size: 32px;
	font-weight: 400;
	line-height: 48px;
	text-align: center;
}
.mdk-intro .mdk-grid {
	width: 100%;
	max-width: 1408px;
}

/* Products */
.mdk-products {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 32px 64px;
	background: #f9f9f9;
}
.mdk-products .mdk-grid {
	width: 100%;
	max-width: 1408px;
}
.mdk-product {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	filter: drop-shadow(0 2px 2.5px rgba(0, 0, 0, 0.05));
}
.mdk-product figure img {
	display: block;
	width: 100%;
	height: 271px;
	object-fit: cover;
}
.mdk-product__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
}
.mdk-product__label {
	font-size: 14px;
	font-weight: 700;
	line-height: 18.2px;
}
.mdk-product__title {
	color: var(--mdk-teal-2);
	font-size: 32px;
	font-weight: 600;
	line-height: 41.6px;
}
.mdk-product__title a {
	color: inherit;
	text-decoration: none;
}
.mdk-product__text {
	color: var(--mdk-muted);
	font-size: 16px;
	line-height: 26.4px;
}

/* Stats */
.mdk-stats {
	padding: 40px var(--mdk-gutter);
}
.mdk-stats .mdk-grid {
	max-width: 1280px;
	margin-inline: auto;
}
.mdk-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 16px;
	text-align: center;
}
.mdk-stat__value {
	color: var(--mdk-teal);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3;
}
.mdk-stat__label {
	color: var(--mdk-muted);
	font-size: 16px;
	line-height: 26.4px;
}

/* Learning paths */
.mdk-paths {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 10px;
}
.mdk-paths .mdk-head {
	gap: 20px;
}
.mdk-paths .mdk-head__title {
	line-height: 39px;
}
.mdk-paths .mdk-head__sub {
	color: var(--mdk-text);
	font-size: 16px;
	line-height: 26.4px;
}
.mdk-path {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	width: 100%;
	max-width: 855px;
	padding-block: 32px;
}
.mdk-path__text {
	display: flex;
	flex: 0 1 630px;
	flex-direction: column;
	gap: 16px;
	padding: 10px;
}
.mdk-path__label {
	font-size: 20px;
	font-weight: 500;
	line-height: 20.8px;
}
.mdk-path__label--small {
	font-size: 16px;
	font-weight: 400;
}
.mdk-section .mdk-fw-regular {
	font-weight: 400;
}
.mdk-path__title {
	color: #3fbfb3;
	font-size: 36px;
	font-weight: 400;
	line-height: 62.4px;
}
.mdk-path__desc {
	color: var(--mdk-muted);
	font-size: 18px;
	line-height: 29.7px;
}
.mdk-path figure {
	flex: none;
}
.mdk-path figure img {
	display: block;
	width: 193px;
	height: 196px;
	border-radius: 16px;
	object-fit: cover;
}

/* Pricing */
.mdk-pricing-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 52px;
	padding: 32px 64px;
	background: linear-gradient(to top, #fff 80.45%, #a0ffff 194%);
}
.mdk-pricing-section .mdk-head__title {
	color: var(--mdk-ink);
	letter-spacing: -1.67px;
}
.mdk-pricing {
	display: flex;
	gap: 24px;
	width: 100%;
	max-width: 1408px;
	min-height: 770px;
	background: #fff;
}
.mdk-pricing__sidebar {
	position: relative;
	display: flex;
	flex: 0 0 514px;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	overflow: hidden;
	padding: 32px 24px;
	box-sizing: border-box;
	border: 0.8px solid #c9eeee;
	border-radius: 24px;
	background: #f9ffff;
}
.mdk-pricing__ornament {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transform: scaleX(-1);
}
html:not([dir="rtl"]) .mdk-pricing__ornament {
	transform: none;
}
.mdk-pricing__top {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.mdk-tabs {
	display: flex;
	gap: 6px;
	padding: 6px;
	border: 0.8px solid #dce8e6;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.86);
	box-shadow: 0 8px 30px rgba(35, 74, 75, 0.05);
}
.mdk-tab {
	flex: 1 0 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 13px;
	background: none;
	color: #607170;
	font: inherit;
	font-size: 16px;
	line-height: 22.5px;
	cursor: pointer;
}
.mdk-tab[aria-selected="true"] {
	background: #e2f7f7;
	color: #006c6f;
	font-weight: 600;
}
.mdk-pricing__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.mdk-pricing__info[hidden],
.mdk-pricing__cards[hidden] {
	display: none;
}
.mdk-pill {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 12px;
	box-sizing: border-box;
	border: 0.8px solid #afe4e4;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.56);
	color: #356667;
	font-size: 12px;
	line-height: 18px;
}
.mdk-pricing__title {
	margin: 0;
	color: var(--mdk-teal-dark);
	font-size: 35.8px;
	font-weight: 600;
	line-height: 46.5px;
	letter-spacing: -0.9px;
}
.mdk-pricing__text {
	max-width: 322px;
	margin: 0;
	color: #5b7b79;
	font-size: 16px;
	font-weight: 500;
	line-height: 30.4px;
}
.mdk-pricing__rule {
	width: 100%;
	height: 1px;
	margin: 16px 0;
	border: 0;
	background: rgba(99, 181, 181, 0.24);
}
.mdk-checklist {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mdk-checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #007f7a;
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
}
.mdk-checklist li::before {
	content: "";
	flex: none;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: #8cd8d8 url(../figma/a656e.svg) center / 15px no-repeat;
}
.mdk-pricing__help {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 49px;
	margin: 0;
	color: #59706f;
	font-size: 13px;
	line-height: 19.5px;
}
.mdk-pricing__help a {
	color: #007272;
	font-weight: 700;
}
.mdk-pricing__q {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-inline-end: 5px;
	box-sizing: border-box;
	border: 0.8px solid #afe4e4;
	border-radius: 15px;
	color: #356667;
	font-size: 16px;
	font-weight: 700;
}
.mdk-pricing__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	min-width: 0;
}
.mdk-pricing__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}
.mdk-package {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 12px 12px 16px;
	border: 1px solid var(--mdk-primary-light);
	border-radius: 16px;
	background: #fff;
	filter: drop-shadow(0 8px 12px rgba(35, 74, 75, 0.04));
}
.mdk-package__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 12px;
	border-radius: 10px;
	background: linear-gradient(to bottom, var(--mdk-primary-light) 50.7%, #fff 71.7%);
}
.mdk-package__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.mdk-package__badge {
	padding: 5px 9px;
	border-radius: 999px;
	background: #f6c500;
	color: #000;
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
}
.mdk-package__visual {
	position: relative;
	display: block;
	flex: none;
	width: 112px;
	height: 112px;
	overflow: hidden;
	box-sizing: border-box;
	border: 0.8px solid #c9eeee;
	border-radius: 16px;
	background: #effafa;
}
/* The package icon is a crop of an app screenshot; offsets are the Figma image fill values. */
.mdk-package__crop {
	position: absolute;
	top: calc(50% + 0.2px);
	left: calc(50% + 0.1px);
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: 12px;
	transform: translate(-50%, -50%);
}
.mdk-package__crop img {
	position: absolute;
	top: -120.33%;
	left: -210.13%;
	width: 354.88%;
	height: 779.89%;
	max-width: none;
}
.mdk-package__name {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 30px;
}
.mdk-package__validity {
	margin: 0;
	color: var(--mdk-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}
.mdk-package__price {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	min-height: 36px;
	margin: 0;
	padding-inline: 12px;
	color: #82afb1;
	font-size: 20px;
	line-height: 35.8px;
}
.mdk-package__amount b {
	color: #008386;
	font-size: 23.9px;
	font-weight: 700;
}
.mdk-package__old {
	color: #9aa7a5;
	font-size: 14px;
	line-height: 16.5px;
}
.mdk-package__in-app {
	color: var(--mdk-display);
	font-size: 16px;
	font-weight: 600;
}
.mdk-package__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border: 1px solid var(--mdk-primary);
	border-radius: 8px;
	background: var(--mdk-primary);
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	text-decoration: none;
}
.mdk-package__cta:hover {
	background: var(--mdk-primary-pressed);
	border-color: var(--mdk-primary-pressed);
	color: #fff;
}
.mdk-pricing__more {
	color: var(--mdk-primary);
	font-size: 24px;
	font-weight: 500;
	line-height: 30px;
}

/* Teachers */
.mdk-teachers {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: 80px;
}
.mdk-teachers__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
.mdk-teachers .mdk-head__title {
	line-height: 48px;
}
.mdk-teachers .mdk-grid {
	width: 100%;
}
.mdk-teachers__photo {
	padding: 10px;
}
.mdk-teachers__photo img {
	display: block;
	width: 100%;
	height: 841px;
	border-radius: 16px;
	object-fit: cover;
}

/* Testimonials */
.mdk-testimonials {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 80px var(--mdk-gutter);
	background: var(--mdk-purple);
}
.mdk-testimonials__title {
	padding: 10px;
	color: #fff;
	font-size: 48px;
	font-weight: 400;
	line-height: 62.4px;
	text-align: center;
}
.mdk-carousel {
	position: relative;
	width: 100%;
	max-width: 1280px;
	padding: 10px;
	box-sizing: border-box;
}
.mdk-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block: 10px;
}
.mdk-carousel__track::-webkit-scrollbar {
	display: none;
}
.mdk-testimonial {
	flex: 0 0 calc(100% / 3);
	padding: 4px 10px;
	box-sizing: border-box;
	scroll-snap-align: start;
}
.mdk-testimonial__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	min-height: 274px;
	padding: 32px;
	box-sizing: border-box;
	border-radius: 16px;
	background: #fff;
	transform: rotate(-1.2deg);
}
.mdk-testimonial:nth-child(even) .mdk-testimonial__card {
	transform: rotate(1.2deg);
}
.mdk-testimonial p {
	max-width: 336px;
	padding-block: 10px;
	color: var(--mdk-muted);
	font-size: 16px;
	line-height: 26.4px;
	text-align: center;
}
.mdk-testimonial__card::after {
	content: "";
	/* Five 15px stars: "space" repeats as many whole tiles as fit. */
	width: 89px;
	height: 15px;
	margin-top: 5px;
	background: url(../figma/702b5.svg) 0 0 / 15px 15px space;
}
.mdk-carousel__btn {
	position: absolute;
	top: 141px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--mdk-teal);
	color: #fff;
	cursor: pointer;
}
.mdk-carousel__btn svg {
	width: 16px;
	height: 16px;
}
.mdk-carousel__btn--left {
	left: -10px;
}
.mdk-carousel__btn--right {
	right: -10px;
}

/* FAQ */
.mdk-faq {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	padding: 80px var(--mdk-gutter);
}
.mdk-faq > * {
	width: 100%;
	max-width: 640px;
}
.mdk-faq .mdk-head {
	gap: 20px;
}
.mdk-faq .mdk-head__title {
	font-size: 48px;
	line-height: 57.6px;
}
.mdk-faq .mdk-head__sub {
	color: var(--mdk-text);
}
.mdk-faq__list {
	display: flex;
	flex-direction: column;
}
.mdk-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px;
	color: var(--mdk-purple);
	font-size: 20px;
	line-height: 33px;
	cursor: pointer;
	list-style: none;
}
.mdk-faq__item summary::-webkit-details-marker {
	display: none;
}
.mdk-faq__item summary::after {
	content: "";
	flex: none;
	width: 14px;
	height: 16px;
	background: url(../figma/1bada.svg) center / contain no-repeat;
}
.mdk-faq__item[open] summary::after {
	background-image: url(../figma/e59dc.svg);
}
.mdk-faq__item p {
	padding: 10px;
	color: var(--mdk-muted);
	font-size: 16px;
	line-height: 26.4px;
}
.mdk-faq__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}
.mdk-faq__more h2 {
	font-size: 42px;
	font-weight: 400;
	line-height: 50.4px;
}
.mdk-faq__more p {
	font-size: 18px;
	line-height: 29.7px;
}

/* Footer */
.mdk-footer {
	border-top: 0.8px solid #c9eeee;
	background: #f9ffff;
	color: var(--mdk-slate);
}
.mdk-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 32px;
	max-width: 1240px;
	margin-inline: auto;
	padding: 56px 20px 40px;
	box-sizing: border-box;
}
.mdk-footer__about {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mdk-footer__about .mdk-logo {
	padding: 0;
}
.mdk-footer__about p {
	max-width: 360px;
	margin: 0;
	color: var(--mdk-muted);
	font-size: 15px;
	line-height: 26px;
}
.mdk-footer__col h2 {
	margin: 0 0 16px;
	color: var(--mdk-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}
.mdk-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mdk-footer__col a {
	color: var(--mdk-muted);
	font-size: 15px;
	text-decoration: none;
}
.mdk-footer__col a:hover {
	color: var(--mdk-teal);
}
.mdk-social {
	flex-direction: row !important;
	flex-wrap: wrap;
}
.mdk-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0.8px solid #c9eeee;
	border-radius: 50%;
	background: #fff;
	color: #007272;
}
.mdk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	max-width: 1240px;
	margin-inline: auto;
	padding: 20px;
	box-sizing: border-box;
	border-top: 0.8px solid #d0f1f1;
	color: var(--mdk-display);
	font-size: 14px;
}
.mdk-footer__bottom p {
	margin: 0;
}

/* Tablet */
@media (max-width: 1100px) {
	.mdk-intro,
	.mdk-products,
	.mdk-pricing-section {
		padding-inline: var(--mdk-gutter);
	}
	.mdk-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mdk-pricing {
		flex-direction: column;
		min-height: 0;
	}
	.mdk-pricing__sidebar {
		flex-basis: auto;
	}
	.mdk-testimonial {
		flex-basis: 50%;
	}
	.mdk-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* Phone */
/* Tablet and phone: the menu folds into the dropdown. 1140px is where the longest menu (French) still fits on one line. */
@media (max-width: 1140px) {
	.mdk-nav-toggle {
		display: block;
	}
	.mdk-nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 12px 20px 20px;
		background: #fff;
		border-bottom: 0.8px solid #d1d5db;
		box-shadow: 0 12px 24px rgba(35, 74, 75, 0.08);
	}
	.mdk-header.is-open .mdk-nav {
		display: flex;
	}
	.mdk-nav__list {
		flex-direction: column;
	}
	.mdk-nav__list a {
		padding-inline: 0;
		line-height: 48px;
	}
	.mdk-header__actions {
		justify-content: space-between;
	}
	/* In the open menu the switcher sits at the start of the row, so its list opens towards the screen, not off its edge. */
	.mdk-lang ul {
		inset-inline-start: 0;
		inset-inline-end: auto;
	}
}
/* Laptops: a tighter header, so every language's menu stays on one line. */
@media (min-width: 1141px) and (max-width: 1280px) {
	.mdk-header__inner,
	.mdk-nav {
		gap: 12px;
	}
	.mdk-nav__list a {
		padding-inline: 9px;
		font-size: 15px;
	}
	.mdk-header__actions .mdk-btn--small {
		padding-inline: 12px;
	}
}

@media (max-width: 860px) {
	.mdk-hero {
		min-height: 0;
	}
	.mdk-hero__inner {
		flex-direction: column;
		padding-block: 32px;
	}
	.mdk-hero__text,
	.mdk-hero__phone {
		flex-basis: auto;
	}
	.mdk-hero__title {
		font-size: min(28px, 100cqi / 16.3);
		line-height: 1.45;
	}
	.mdk-hero__lead {
		font-size: 16px;
		line-height: 27px;
	}
	.mdk-hero__phone img {
		width: 220px;
		border-width: 8px;
		border-radius: 36px;
		padding-top: 24px;
	}
	.mdk-hero__anim {
		width: 240px;
	}
	.mdk-hero__phone::after {
		top: 30px;
		width: 66px;
		height: 18px;
	}
	/* Narrow screens see a slice of the map: centre it on the Middle East, where the arcs meet. */
	.mdk-hero__map-inner {
		transform: translate(-60%, -50%);
	}
	.mdk-stores img {
		height: 40px;
	}
	.mdk-intro {
		gap: 32px;
		padding-block: 32px;
	}
	.mdk-intro__title,
	.mdk-head__title {
		font-size: 24px;
		line-height: 38px;
	}
	.mdk-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
	.mdk-path,
	.mdk-path:nth-of-type(even) {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding-block: 20px;
	}
	.mdk-path figure {
		order: -1;
	}
	.mdk-path figure img {
		width: 100%;
		height: 200px;
	}
	.mdk-path__title {
		font-size: 28px;
		line-height: 42px;
	}
	.mdk-pricing__cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.mdk-pricing__sidebar {
		padding: 24px 16px;
	}
	.mdk-tab {
		padding-inline: 6px;
		font-size: 14px;
	}
	.mdk-pricing__title {
		font-size: 28px;
		line-height: 38px;
	}
	.mdk-teachers {
		padding-block: 48px;
	}
	.mdk-teachers__photo img {
		height: 260px;
	}
	.mdk-testimonials {
		padding-block: 48px;
	}
	.mdk-testimonials__title,
	.mdk-faq .mdk-head__title {
		font-size: 32px;
		line-height: 44px;
	}
	.mdk-testimonial {
		flex-basis: 100%;
	}
	.mdk-faq {
		gap: 32px;
		padding-block: 48px;
	}
	.mdk-faq__item summary {
		font-size: 18px;
		line-height: 28px;
	}
	.mdk-faq__more h2 {
		font-size: 30px;
		line-height: 40px;
	}
	.mdk-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 40px;
	}
}

@media (max-width: 560px) {
	.mdk-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mdk-carousel__track {
		scroll-behavior: auto;
	}
}

/* Kadence zeroes the side padding of .alignfull blocks (.entry-content .alignfull). Restate each
   home section's gutters with a doubled class so they win, at every breakpoint. */
.mdk-section.mdk-hero,
.mdk-section.mdk-paths {
	padding-inline: 10px;
}
.mdk-section.mdk-intro,
.mdk-section.mdk-products,
.mdk-section.mdk-pricing-section {
	padding-inline: 64px;
}
.mdk-section.mdk-testimonials,
.mdk-section.mdk-faq {
	padding-inline: var(--mdk-gutter);
}
@media (max-width: 1100px) {
	.mdk-section.mdk-intro,
	.mdk-section.mdk-products,
	.mdk-section.mdk-pricing-section {
		padding-inline: var(--mdk-gutter);
	}
}
@media (max-width: 860px) {
	.mdk-section.mdk-hero,
	.mdk-section.mdk-paths {
		padding-inline: var(--mdk-gutter);
	}
	.mdk-hero__text,
	.mdk-path__text {
		padding-inline: 0;
	}
	/* In a column the desktop flex-basis (630px wide) would become a 630px height. */
	.mdk-path__text {
		flex-basis: auto;
	}
	/* Carousel arrows: thumb-sized, centred under the cards instead of hanging off the screen edges. */
	.mdk-carousel {
		padding-bottom: 64px;
	}
	.mdk-carousel__btn {
		top: auto;
		bottom: 8px;
		width: 44px;
		height: 44px;
		border-radius: 22px;
	}
	.mdk-carousel__btn--left {
		left: calc(50% - 52px);
	}
	.mdk-carousel__btn--right {
		right: calc(50% - 52px);
	}
}
@media (max-width: 860px) {
	/* Footer on phones: the two link lists side by side, the about block and social row full width. */
	.mdk-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px 16px;
	}
	.mdk-footer__about,
	.mdk-footer__col:last-child {
		grid-column: 1 / -1;
	}
}
/* Kadence sets #masthead to position: relative; the id selector keeps the header pinned on scroll. */
#masthead.mdk-header {
	position: sticky;
}
/* Package cards with their own image (an icon or logo) instead of the app-screen crop. */
.mdk-package__visual--image {
	display: grid;
	place-items: center;
}
.mdk-package__visual--image img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

/* Fluent Forms, site-wide: Cairo, mint borders, teal submit. Fluent writes the button colour inline, hence !important.
   16px inputs stop iOS from zooming in on focus. Page styles may refine this. */
.fluentform .ff-el-form-control {
	min-height: 48px;
	border: 1px solid #d0f1f1;
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
}
.fluentform textarea.ff-el-form-control {
	min-height: 120px;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--mdk-teal);
	box-shadow: 0 0 0 3px rgba(31, 173, 162, 0.15);
}
.fluentform .ff-el-input--label label {
	color: var(--mdk-ink);
	font-weight: 600;
}
.fluentform .ff-btn-submit {
	min-height: 48px;
	padding: 10px 24px;
	border: 2px solid var(--mdk-teal) !important;
	border-radius: 8px;
	background: var(--mdk-teal) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
}
.fluentform .ff-btn-submit:hover {
	border-color: #188f86 !important;
	background: #188f86 !important;
}
@media (max-width: 860px) {
	.fluentform .ff-btn-submit {
		width: 100%;
	}
}

/* Packages are hidden for now (team request, 2026-11-03): the home and kids pricing sections stay in the pages
   and come back by deleting this rule. */
.mdk-section.mdk-pricing-section {
	display: none;
}