/* ==========================================================================
   Mazaqi — main stylesheet
   Logical properties throughout, so the same rules serve Arabic (RTL) and
   English (LTR). Brand tokens come from theme.json (--wp--preset--*).
   ========================================================================== */

:root {
	--mz-cream: var(--wp--preset--color--cream, #FBF3E8);
	--mz-espresso: var(--wp--preset--color--espresso, #2A1C17);
	--mz-paprika: var(--wp--preset--color--paprika, #E0482A);
	--mz-paprika-dark: var(--wp--preset--color--paprika-dark, #B8371D);
	--mz-saffron: var(--wp--preset--color--saffron, #F4B042);
	--mz-zaatar: var(--wp--preset--color--zaatar, #5B7F4B);
	--mz-stone: var(--wp--preset--color--stone, #6F665D);
	--mz-paprika-light: var(--wp--preset--color--paprika-light, #F8D9D0);
	--mz-fog: var(--wp--preset--color--fog, #EFE7DC);
	--mz-saffron-light: var(--wp--preset--color--saffron-light, #FDECCF);

	--mz-wide: 1200px;
	--mz-prose: 760px;
	--mz-gutter: clamp(16px, 4vw, 32px);
	--mz-section-y: clamp(72px, 9vw, 128px);

	--mz-r-xl: clamp(32px, 4vw, 48px);
	--mz-r-card: 28px;
	--mz-r-sm: 24px;
	--mz-r-field: 16px;

	--mz-heading-weight: 600;

	--mz-glass: rgb(255 255 255 / .48);
	--mz-glass-strong: rgb(255 255 255 / .7);
	--mz-glass-border: rgb(255 255 255 / .75);
	--mz-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 24px 60px -28px rgb(42 28 23 / .28);
	--mz-shadow-sm: 0 12px 32px -18px rgb(42 28 23 / .3);

	--mz-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-block-start: 120px;
}

body {
	margin: 0;
	min-height: 100vh;
	background: linear-gradient(180deg, #FDF6ED 0%, var(--mz-cream) 50%, #F8E6DB 100%);
	color: var(--mz-espresso);
	font-family: var(--wp--preset--font-family--plex);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video { max-width: 100%; height: auto; }

a { color: var(--mz-paprika-dark); text-underline-offset: .2em; }
a:hover { color: var(--mz-paprika); }

:focus-visible {
	outline: 3px solid var(--mz-paprika);
	outline-offset: 3px;
	border-radius: 8px;
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: var(--mz-heading-weight);
	line-height: 1.3;
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--mz-paprika-light); color: var(--mz-espresso); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

.mz-skip {
	position: absolute;
	inset-inline-start: 16px;
	inset-block-start: -100px;
	z-index: 100;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--mz-espresso);
	color: var(--mz-cream);
	text-decoration: none;
}
.mz-skip:focus { inset-block-start: 16px; color: var(--mz-cream); }

.mz-main { overflow-x: clip; }
.mz-main:focus { outline: none; }

.mz-ico { width: 24px; height: 24px; flex: none; }

/* Soft colour fields behind the page (the design's blurred circles, drawn
   with gradients instead of filters so they cost nothing to paint). */
.mz-bg {
	position: absolute;
	inset: 0 0 auto;
	height: 1100px;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgb(224 72 42 / .42), transparent) calc(100% + 260px) -260px / 900px 900px no-repeat,
		radial-gradient(closest-side, rgb(244 176 66 / .38), transparent) -300px 380px / 760px 760px no-repeat,
		radial-gradient(closest-side, rgb(224 72 42 / .2), transparent) 28% 260px / 560px 560px no-repeat;
}

/* --------------------------------------------------------------------------
   Buttons (theme chrome .mz-btn + core button styles share one look)
   -------------------------------------------------------------------------- */

.mz-btn,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 28px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--mz-paprika);
	color: var(--mz-cream);
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s var(--mz-ease), box-shadow .2s var(--mz-ease), background-color .2s, color .2s, border-color .2s;
}

.mz-btn:hover,
.wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); }
.mz-btn:active,
.wp-block-button .wp-block-button__link:active { transform: translateY(0); }

.mz-btn--primary,
.wp-block-button.is-style-primary .wp-block-button__link {
	background: var(--mz-paprika);
	color: var(--mz-cream);
	box-shadow: 0 12px 28px -12px rgb(224 72 42 / .75);
}
.mz-btn--primary:hover,
.wp-block-button.is-style-primary .wp-block-button__link:hover {
	background: var(--mz-paprika-dark);
	color: var(--mz-cream);
	box-shadow: 0 16px 32px -14px rgb(184 55 29 / .8);
}

.mz-btn--glass,
.wp-block-button.is-style-glass .wp-block-button__link {
	background: var(--mz-glass-strong);
	border-color: var(--mz-glass-border);
	color: var(--mz-espresso);
	box-shadow: var(--mz-shadow-sm);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.mz-btn--glass:hover,
.wp-block-button.is-style-glass .wp-block-button__link:hover {
	background: #fff;
	color: var(--mz-espresso);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--mz-espresso);
	color: var(--mz-espresso);
	padding: 10px 28px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--mz-espresso);
	color: var(--mz-cream);
}

.wp-block-button.is-style-dark .wp-block-button__link {
	background: var(--mz-espresso);
	color: var(--mz-cream);
}
.wp-block-button.is-style-dark .wp-block-button__link:hover { background: #000; }

.mz-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.mz-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	padding: 16px var(--mz-gutter) 0;
	pointer-events: none;
}

.mz-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--mz-wide);
	min-height: 72px;
	margin-inline: auto;
	padding-block: 10px;
	padding-inline: 28px 12px;
	border: 1px solid var(--mz-glass-border);
	border-radius: 999px;
	background: rgb(255 255 255 / .55);
	box-shadow: var(--mz-shadow);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	backdrop-filter: blur(20px) saturate(1.4);
	pointer-events: auto;
	transition: background-color .3s;
}
.mz-header.is-scrolled .mz-header__bar { background: rgb(255 255 255 / .78); }

.mz-header__logo { display: block; flex: none; line-height: 0; }
.mz-header__logo svg { width: 92px; height: auto; }

.mz-header__nav {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mz-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
	margin: 0;
	padding: 0;
	padding-inline-start: 16px;
	list-style: none;
}
.mz-nav a {
	display: block;
	padding-block: 8px;
	color: var(--mz-espresso);
	font-weight: 500;
	text-decoration: none;
	transition: color .2s;
}
.mz-nav a:hover,
.mz-nav .current-menu-item:not(.menu-item-type-custom) > a { color: var(--mz-paprika-dark); }

.mz-header__actions { display: flex; align-items: center; gap: 10px; }

.mz-lang {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 14px;
	border-radius: 999px;
	color: var(--mz-espresso);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
}
.mz-lang:hover { background: rgb(255 255 255 / .7); color: var(--mz-espresso); }

.mz-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-inline-start: auto;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--mz-espresso);
	color: var(--mz-cream);
	cursor: pointer;
}
.mz-header__toggle-close { display: none; }
.mz-header__toggle[aria-expanded="true"] .mz-header__toggle-open { display: none; }
.mz-header__toggle[aria-expanded="true"] .mz-header__toggle-close { display: inline-flex; }

@media (max-width: 1023px) {
	.mz-header__bar { padding-inline: 20px 10px; min-height: 64px; }
	.mz-header__logo svg { width: 78px; }
	.mz-header__toggle { display: inline-flex; }

	.mz-header__nav {
		position: absolute;
		inset-inline: 0;
		inset-block-start: calc(100% + 10px);
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 20px;
		border: 1px solid var(--mz-glass-border);
		border-radius: var(--mz-r-card);
		background: rgb(255 255 255 / .94);
		box-shadow: var(--mz-shadow);
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .2s, transform .2s var(--mz-ease), visibility 0s .2s;
	}
	.mz-header.is-open .mz-header__nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .2s, transform .2s var(--mz-ease);
	}
	.mz-nav { flex-direction: column; gap: 0; padding: 0; }
	.mz-nav a { padding: 12px 8px; font-size: 1.0625rem; border-block-end: 1px solid var(--mz-fog); }
	.mz-header__actions { flex-wrap: wrap; }
	.mz-header__actions .mz-btn { flex: 1 1 160px; }
}

/* --------------------------------------------------------------------------
   Sections (page content)
   -------------------------------------------------------------------------- */

.mz-content--sections > .mz-section {
	position: relative;
	padding: var(--mz-section-y) var(--mz-gutter) 0;
}
.mz-content--sections > .mz-section:last-child { padding-block-end: var(--mz-section-y); }
.mz-content--sections > .mz-section > * { max-width: var(--mz-wide); margin-inline: auto; }

.mz-section .mz-title {
	font-size: var(--wp--preset--font-size--title);
	text-align: center;
}
.mz-section .mz-subtitle {
	max-width: 680px;
	margin-block-start: 16px;
	color: var(--mz-stone);
	font-size: var(--wp--preset--font-size--lead);
	text-align: center;
}
.mz-section .mz-title + .mz-grid,
.mz-section .mz-subtitle + .mz-grid,
.mz-section .mz-title + .mz-steps,
.mz-section .mz-title + .mz-faq-list { margin-block-start: clamp(40px, 5vw, 64px); }

.mz-grid { display: grid; gap: 24px; }
.mz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .mz-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mz-grid--3 { grid-template-columns: minmax(0, 1fr); } }

.mz-card {
	position: relative;
	padding: clamp(24px, 3vw, 32px);
	border: 1px solid var(--mz-glass-border);
	border-radius: var(--mz-r-card);
	background: var(--mz-glass);
	box-shadow: var(--mz-shadow);
}

/* Eyebrow badge with the brand diamond */
.mz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 18px;
	border: 1px solid rgb(255 255 255 / .9);
	border-radius: 999px;
	background: rgb(255 255 255 / .62);
	color: var(--mz-paprika-dark);
	font-size: .875rem;
	font-weight: 500;
}
.mz-eyebrow::before,
.mz-strip strong::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	background: var(--mz-paprika);
	border-radius: 2px;
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.mz-content--sections > .mz-hero { padding-block-start: clamp(24px, 4vw, 48px); }

.mz-hero__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	align-items: center;
	gap: clamp(32px, 4vw, 56px);
	padding: clamp(28px, 5vw, 72px);
	border: 1px solid var(--mz-glass-border);
	border-radius: var(--mz-r-xl);
	background: linear-gradient(135deg, rgb(255 255 255 / .55), rgb(255 255 255 / .28));
	box-shadow: var(--mz-shadow);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.mz-hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.mz-hero__title {
	margin-block-start: 24px;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.22;
	letter-spacing: -.01em;
}
.mz-hero .mz-intro {
	max-width: 520px;
	margin-block-start: 24px;
	color: var(--mz-stone);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.85;
}
.mz-hero .mz-actions { margin-block-start: 36px; }
.mz-hero .mz-actions .wp-block-button__link { min-height: 56px; padding-inline: 36px; font-size: 1.0625rem; }
.mz-fineprint { margin-block-start: 20px; color: var(--mz-stone); font-size: .875rem; }

.mz-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 22px;
	margin-block-start: 40px;
	color: var(--mz-stone);
	font-size: .9375rem;
}
.mz-strip strong { display: inline-flex; align-items: center; gap: 10px; color: var(--mz-espresso); font-weight: 500; }
.mz-strip span { display: inline-flex; align-items: center; gap: 22px; }
.mz-strip span + span::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
}

@media (max-width: 900px) {
	.mz-hero__card { grid-template-columns: minmax(0, 1fr); }
	.mz-hero__text { align-items: center; text-align: center; }
	.mz-hero .mz-actions { justify-content: center; }
}
@media (max-width: 480px) {
	.mz-hero .mz-actions,
	.mz-hero .mz-actions .wp-block-button { width: 100%; }
	.mz-hero .mz-actions .wp-block-button__link { width: 100%; }
	.mz-strip strong { flex-basis: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Phone device frame (used by the menu studio)
   -------------------------------------------------------------------------- */

/* Device: thin dark bezel, Dynamic Island, side buttons */
.mz-phone {
	position: relative;
	z-index: 1;
	width: min(296px, 76vw);
	padding: 9px;
	border-radius: 50px;
	background: linear-gradient(145deg, #3a2a24, #140d0b 60%, #2d211c);
	box-shadow:
		0 0 0 1.5px #5a463d inset,
		0 50px 90px -30px rgb(42 28 23 / .6),
		0 18px 36px -18px rgb(42 28 23 / .5);
}
.mz-phone::before,
.mz-phone::after {
	content: "";
	position: absolute;
	inset-inline-end: -3px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: #2a1e1a;
}
.mz-phone::before { inset-block-start: 120px; height: 64px; }
.mz-phone::after { inset-block-start: 200px; height: 40px; }
[dir="rtl"] .mz-phone::before,
[dir="rtl"] .mz-phone::after { border-radius: 3px 0 0 3px; }

.mz-phone__screen {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: 42px;
	background: #FBF6F0;
	padding-block-end: 12px;
}

.mz-phone__status {
	position: absolute;
	inset: 0 0 auto;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	padding-inline: 26px 22px;
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
}
.mz-phone__island {
	position: absolute;
	inset-block-start: 10px;
	left: 50%;
	width: 86px;
	height: 25px;
	border-radius: 999px;
	background: #0b0706;
	translate: -50% 0;
}
.mz-phone__sys { display: flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.mz-phone__sys b { width: 3px; border-radius: 1px; background: #fff; }
.mz-phone__sys b:nth-child(1) { height: 4px; }
.mz-phone__sys b:nth-child(2) { height: 6px; }
.mz-phone__sys b:nth-child(3) { height: 8px; }
.mz-phone__sys b:nth-child(4) { height: 10px; }
.mz-phone__sys em {
	width: 20px;
	height: 10px;
	margin-inline-start: 5px;
	border: 1.5px solid rgb(255 255 255 / .85);
	border-radius: 3px;
	background: linear-gradient(90deg, #fff 70%, transparent 70%) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat;
}

/* Floating cards beside the phone */
.mz-float {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 12px;
	border: 1px solid var(--mz-glass-border);
	border-radius: 20px;
	background: rgb(255 255 255 / .86);
	box-shadow: var(--mz-shadow);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	white-space: nowrap;
	animation: mz-float 6s ease-in-out infinite;
}
[dir="rtl"] .mz-float { padding: 12px 12px 12px 18px; }
.mz-float b { display: block; font-size: 13px; font-weight: 600; }
.mz-float small { display: block; color: var(--mz-stone); font-size: 11px; }
.mz-float--toast { inset-block-start: 14%; inset-inline-start: -10%; }
.mz-float--paid { animation-delay: -3s; }
@keyframes mz-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -8px; }
}

@media (max-width: 1100px) {
	.mz-float--toast { inset-inline-start: -4%; }
	.mz-float--paid { inset-inline-end: -3%; }
}
@media (max-width: 480px) {
	.mz-float { padding-block: 9px; }
	.mz-float--toast { inset-inline-start: 0; inset-block-start: 6%; }
	.mz-float--paid { inset-inline-end: 0; inset-block-end: 8%; }
}

/* --------------------------------------------------------------------------
   Features
   -------------------------------------------------------------------------- */

.mz-feature { padding-block-start: calc(clamp(24px, 3vw, 32px) + 80px); }
.mz-feature::before,
.mz-feature::after {
	content: "";
	position: absolute;
	inset-block-start: clamp(24px, 3vw, 32px);
	inset-inline-start: clamp(24px, 3vw, 32px);
	width: 56px;
	height: 56px;
}
.mz-feature::before { border-radius: 16px; background: var(--mz-tint, var(--mz-paprika)); box-shadow: 0 10px 20px -12px var(--mz-tint, var(--mz-paprika)); }
.mz-feature::after {
	background: var(--mz-glyph, var(--mz-cream));
	-webkit-mask: var(--mz-icon) center / 28px no-repeat;
	mask: var(--mz-icon) center / 28px no-repeat;
}
.mz-feature h3 { font-size: var(--wp--preset--font-size--title-sm); }
.mz-feature p { margin-block-start: 10px; color: var(--mz-stone); font-size: 1rem; line-height: 1.8; }

.mz-tint-paprika { --mz-tint: var(--mz-paprika); }
.mz-tint-saffron { --mz-tint: var(--mz-saffron); --mz-glyph: var(--mz-espresso); }
.mz-tint-espresso { --mz-tint: var(--mz-espresso); }
.mz-tint-zaatar { --mz-tint: var(--mz-zaatar); }

.mz-ic-qr { --mz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M14 14h3v3h-3zM20 14v.01M20 20h-6M20 17v3'/%3E%3C/svg%3E"); }
.mz-ic-trend { --mz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); }
.mz-ic-globe { --mz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E"); }
.mz-ic-card { --mz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.mz-ic-kitchen { --mz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.mz-ic-chart { --mz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M7 13l3-3 3 2 4-4M8 21h8M12 17v4'/%3E%3C/svg%3E"); }

/* Features bento: each card shows a small, real piece of the product.
   Order in the markup follows the guest's journey (phones read it top to
   bottom); the grid areas rearrange it on wider screens. */
.mz-section .mz-subtitle + .mz-bento { margin-block-start: clamp(40px, 5vw, 64px); }

.mz-bento {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"qr kitchen kitchen"
		"qr langs upsell"
		"pay report report";
}
.mz-bento--qr { grid-area: qr; }
.mz-bento--langs { grid-area: langs; }
.mz-bento--upsell { grid-area: upsell; }
.mz-bento--kitchen { grid-area: kitchen; }
.mz-bento--pay { grid-area: pay; }
.mz-bento--report { grid-area: report; }

.mz-bento__item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.mz-bento__item h3 { margin-block-start: 22px; font-size: var(--wp--preset--font-size--title-sm); }
.mz-bento__item h3 + p { margin-block-start: 8px; color: var(--mz-stone); font-size: 1rem; line-height: 1.8; }

/* Wide cards: the words on one side, the product on the other. */
@media (min-width: 1024px) {
	.mz-bento--kitchen,
	.mz-bento--report {
		display: grid;
		grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
		/* The words sit centred beside the product. */
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas: ". viz" "h viz" "p viz" ". viz";
		column-gap: clamp(24px, 3vw, 40px);
	}
	.mz-bento--kitchen > .mz-viz,
	.mz-bento--report > .mz-viz { grid-area: viz; align-self: center; }
	.mz-bento--kitchen h3,
	.mz-bento--report h3 { grid-area: h; margin-block-start: 0; }
	.mz-bento--kitchen h3 + p,
	.mz-bento--report h3 + p { grid-area: p; }
}

@media (max-width: 1023px) {
	.mz-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"kitchen kitchen"
			"qr langs"
			"qr upsell"
			"pay report";
	}
}
@media (max-width: 640px) {
	.mz-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
	.mz-bento > * { grid-area: auto; }
}

/* Shared pieces of the little product views */
.mz-viz { position: relative; font-size: .875rem; line-height: 1.5; user-select: none; }
:where(.mz-viz) :where(p, ul) { margin: 0; padding: 0; list-style: none; }
.mz-viz b { font-weight: 600; }
.mz-viz em { font-style: normal; font-weight: 600; white-space: nowrap; }
.mz-viz i { font-style: normal; }

.mzv-seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: rgb(42 28 23 / .06);
}
.mzv-seg span {
	flex: 1;
	padding: 6px 10px;
	border-radius: 999px;
	color: var(--mz-stone);
	text-align: center;
	white-space: nowrap;
}
.mzv-seg .is-on { background: #fff; color: var(--mz-espresso); font-weight: 600; box-shadow: 0 4px 10px -6px rgb(42 28 23 / .4); }

.mzv-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 16px;
	background: rgb(255 255 255 / .75);
}

/* QR menu: a phone showing the guest menu */
.mz-bento--qr { background: linear-gradient(180deg, var(--mz-paprika-light) 0%, var(--mz-glass) 70%); }
.mz-viz--qr { flex: 1; display: grid; place-items: center; padding-block: 36px 4px; }
.mzv-phone {
	position: relative;
	width: min(100%, 290px);
	padding: 14px;
	border: 6px solid var(--mz-espresso);
	border-radius: 34px;
	background: #fff;
	box-shadow: 0 30px 50px -30px rgb(42 28 23 / .55);
}
.mzv-phone__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-inline: 4px; }
.mzv-phone__bar span { color: var(--mz-stone); font-size: .75rem; }
.mzv-phone__tabs { display: flex; gap: 6px; margin-block: 12px; }
.mzv-phone__tabs span { padding: 4px 12px; border-radius: 999px; background: var(--mz-fog); font-size: .75rem; }
.mzv-phone__tabs .is-on { background: var(--mz-paprika); color: #fff; }
.mzv-phone ul { display: grid; gap: 10px; }
.mzv-phone li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.mzv-phone img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.mzv-phone li span { display: grid; min-width: 0; }
.mzv-phone li b,
.mzv-phone li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mzv-phone li small { color: var(--mz-stone); font-size: .7rem; }
.mzv-phone li em { margin-block-start: 2px; color: var(--mz-paprika-dark); font-size: .75rem; }
.mzv-phone li i {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 9px;
	background: var(--mz-espresso);
	color: #fff;
	line-height: 1;
}
.mz-viz__code {
	/* Hangs on the phone's top corner, over the frame, clear of the text. */
	position: absolute;
	inset-block-start: -34px;
	inset-inline-end: -34px;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: var(--mz-paprika);
	box-shadow: 0 14px 24px -14px var(--mz-paprika);
	rotate: -8deg;
	z-index: 1;
}
.mz-viz__code::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mz-cream);
	-webkit-mask: var(--mz-icon) center / 30px no-repeat;
	mask: var(--mz-icon) center / 30px no-repeat;
}
@media (max-width: 640px) { .mz-viz__code { inset-block-start: -32px; inset-inline-end: -14px; width: 44px; height: 44px; border-radius: 14px; } .mz-viz__code::after { -webkit-mask-size: 24px; mask-size: 24px; } }

/* Languages: one dish name, three languages */
.mz-viz--langs { display: grid; gap: 14px; }
.mzv-words { display: grid; gap: 6px; }
.mzv-words span {
	display: flex;
	padding: 8px 14px;
	border: 1px dashed rgb(42 28 23 / .14);
	border-radius: 14px;
	color: var(--mz-stone);
}
.mzv-words .is-on { border: 1px solid var(--mz-espresso); background: #fff; color: var(--mz-espresso); }
.mzv-words b { font-weight: 500; }
.mzv-words .is-on b { font-weight: 600; }

/* Suggestions: the menu offers a drink next to the dish */
.mz-bento--upsell { background: linear-gradient(180deg, var(--mz-saffron-light) 0%, var(--mz-glass) 80%); }
.mz-viz--upsell { display: grid; gap: 10px; }
.mzv-suggest {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 12px;
	padding: 12px 16px;
	border: 1.5px solid var(--mz-saffron);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 14px 26px -18px rgb(184 120 20 / .7);
	margin-inline-start: 18px;
}
.mzv-suggest small { grid-column: 1 / -1; color: var(--mz-stone); font-size: .75rem; }
.mzv-suggest b { grid-column: 1; }
.mzv-suggest em { grid-column: 1; grid-row: 3; color: var(--mz-stone); font-weight: 500; }
.mzv-suggest i {
	grid-column: 2;
	grid-row: 2 / 4;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mz-saffron);
	color: var(--mz-espresso);
	font-weight: 600;
}

/* Kitchen: a small copy of the real kitchen screen (same palette as the app) */
.mz-bento--kitchen {
	--k-bg: #1E1613;
	--k-head: #2A201C;
	--k-card: #2F2521;
	--k-line: #46382F;
	--k-ink: #F6ECDF;
	--k-muted: #A99A8B;
	--k-new: #E0482A;
	--k-prep: #F4B042;
	--k-ready: #6E9460;
	border-color: var(--k-line);
	background: var(--k-bg);
	color: var(--k-ink);
}
.mz-bento--kitchen h3 { color: var(--k-ink); }
.mz-bento--kitchen h3 + p { color: var(--k-muted); }

.mzv-kds { overflow: hidden; border: 1px solid var(--k-line); border-radius: 16px; font-size: .8rem; }
.mzv-kds__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-block-end: 1px solid var(--k-line);
	background: var(--k-head);
}
.mzv-kds__bar b { font-weight: 500; }
.mzv-kds__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: auto;
	padding: 2px 10px;
	border-radius: 999px;
	background: #24301F;
	color: #A9CC97;
	font-size: .7rem;
}
.mzv-kds__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mzv-kds__clock { font-size: 1rem; font-variant-numeric: tabular-nums; }
.mzv-kds__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.mzv-kds section { display: grid; align-content: start; gap: 8px; min-width: 0; }
.mzv-kds .is-new { --c: var(--k-new); }
.mzv-kds .is-prep { --c: var(--k-prep); }
.mzv-kds__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 9px;
	background: var(--k-head);
}
.mzv-kds__head i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.mzv-kds__head em {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	margin-inline-start: auto;
	border-radius: 50%;
	background: var(--c);
	color: var(--k-bg);
	font-size: .7rem;
	font-weight: 600;
}
.mzv-kds .is-new .mzv-kds__head em { color: #fff; }
.mzv-kds article {
	display: grid;
	gap: 8px;
	padding: 10px;
	border-radius: 10px;
	background: var(--k-card);
}
.mzv-kds article > p:first-child {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px;
	padding-block-end: 8px;
	border-block-end: 1px solid var(--k-line);
}
.mzv-kds article > p:first-child b { font-size: 1rem; font-weight: 500; line-height: 1.3; }
.mzv-kds article > p:first-child small { display: block; color: var(--k-muted); font-size: .65rem; white-space: nowrap; }
.mzv-kds time {
	flex: none;
	padding: 1px 9px;
	border-radius: 999px;
	background: #4A2C24;
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
}
.mzv-kds .is-prep time { background: #4A3A1A; color: #F7D58C; }
.mzv-kds ul { display: grid; gap: 6px; }
.mzv-kds li { display: flex; align-items: flex-start; gap: 8px; }
.mzv-kds li > span {
	display: grid;
	place-items: center;
	flex: none;
	min-width: 22px;
	height: 20px;
	border-radius: 5px;
	background: var(--k-ink);
	color: #2A1C17;
	font-size: .75rem;
	font-weight: 600;
}
.mzv-kds li > b { display: grid; min-width: 0; font-weight: 500; }
.mzv-kds li small { color: #F0A63A; font-size: .65rem; font-weight: 400; }
.mzv-kds li.is-done > span { background: var(--k-ready); color: #fff; }
.mzv-kds li.is-done > b { opacity: .5; text-decoration: line-through; text-decoration-thickness: 1px; }
.mzv-kds li em { margin-inline-start: auto; color: #A9CC97; font-size: .65rem; font-weight: 400; }
.mzv-kds button {
	padding: 6px;
	border: 0;
	border-radius: 999px;
	background: var(--c);
	color: var(--k-bg);
	font: inherit;
	font-size: .75rem;
	font-weight: 500;
	cursor: default;
}
.mzv-kds .is-new button { color: #fff; }
@media (max-width: 640px) {
	.mzv-kds__cols { grid-template-columns: minmax(0, 1fr); }
	.mzv-kds .is-prep { display: none; }
}

/* Pay: a bill split in three, two already paid */
.mz-viz--pay { display: grid; gap: 10px; }
.mz-viz--pay .mzv-line b { font-size: 1.125rem; }
.mzv-split { display: flex; gap: 4px; }
.mzv-split span {
	flex: 1;
	padding: 8px 6px;
	border-radius: 10px;
	background: rgb(42 28 23 / .06);
	color: var(--mz-stone);
	font-size: .8rem;
	font-weight: 600;
	text-align: center;
}
.mzv-split .is-paid { background: var(--mz-zaatar); color: #fff; }
.mz-viz--pay .mzv-seg .is-on { background: var(--mz-espresso); color: #fff; }

/* Reports: orders by hour with the peak marked */
.mz-viz--report { display: grid; gap: 14px; }
.mzv-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 120px;
	padding-block-start: 26px;
}
.mzv-bars span {
	position: relative;
	flex: 1;
	height: var(--h);
	border-radius: 6px 6px 3px 3px;
	background: rgb(224 72 42 / .22);
}
.mzv-bars .is-peak { background: var(--mz-paprika); }
.mzv-bars .is-peak::after {
	content: attr(data-label);
	position: absolute;
	inset-block-end: calc(100% + 6px);
	inset-inline-start: 50%;
	translate: 50% 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--mz-espresso);
	color: #fff;
	font-size: .7rem;
	white-space: nowrap;
}
[dir="ltr"] .mzv-bars .is-peak::after,
:lang(en) .mzv-bars .is-peak::after { translate: -50% 0; }
.mzv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mzv-stats span { display: grid; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .75); }
.mzv-stats small { color: var(--mz-stone); font-size: .7rem; }
.mzv-stats b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }

/* Section colour fields */
.mz-features::before,
.mz-how::before,
.mz-pricing::before,
.mz-cta::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	border-radius: 50%;
}
.mz-features::before {
	inset-block-start: 40%;
	inset-inline-start: 50%;
	width: 700px;
	height: 700px;
	translate: -50% 0;
	background: radial-gradient(closest-side, rgb(42 28 23 / .1), transparent);
}
.mz-how::before {
	inset-block-start: 0;
	inset-inline-end: -280px;
	width: 620px;
	height: 620px;
	background: radial-gradient(closest-side, rgb(91 127 75 / .22), transparent);
}
.mz-pricing::before {
	inset-block-start: 10%;
	inset-inline-start: -360px;
	width: 900px;
	height: 900px;
	background: radial-gradient(closest-side, rgb(224 72 42 / .26), transparent);
}
.mz-cta::before {
	inset-block-start: -10%;
	inset-inline-end: -260px;
	width: 700px;
	height: 700px;
	background: radial-gradient(closest-side, rgb(244 176 66 / .3), transparent);
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.mz-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	padding: clamp(32px, 5vw, 64px);
	border: 1px solid var(--mz-glass-border);
	border-radius: var(--mz-r-xl);
	background: var(--mz-glass);
	box-shadow: var(--mz-shadow);
	counter-reset: mz-step;
}
.mz-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	counter-increment: mz-step;
}
.mz-step::before {
	content: counter(mz-step);
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-block-end: 24px;
	border-radius: 50%;
	background: var(--mz-paprika);
	color: var(--mz-cream);
	font-size: 1.625rem;
	font-weight: 600;
	box-shadow: 0 14px 28px -14px rgb(42 28 23 / .5);
}
.mz-step:nth-child(2)::before { background: var(--mz-saffron); color: var(--mz-espresso); }
.mz-step:nth-child(3)::before { background: var(--mz-espresso); }
.mz-step h3 { font-size: 1.1875rem; }
.mz-step p { max-width: 300px; margin-block-start: 8px; color: var(--mz-stone); font-size: .975rem; }

@media (max-width: 800px) {
	.mz-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.mz-billing {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin-block-start: 32px;
	padding: 5px;
	border: 1px solid var(--mz-glass-border);
	border-radius: 999px;
	background: var(--mz-glass-strong);
	box-shadow: var(--mz-shadow-sm);
}
.mz-billing button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--mz-espresso);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.mz-billing button[aria-checked="true"] { background: var(--mz-espresso); color: var(--mz-cream); }
.mz-billing__save {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--mz-saffron);
	color: var(--mz-espresso);
	font-size: .75rem;
	font-weight: 600;
}

.mz-billing + .mz-grid { margin-block-start: 48px; }
.mz-plans { align-items: stretch; }

.mz-plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 36px); }
.mz-plan__name { font-size: 1.375rem; }
.mz-plan__for { margin-block-start: 4px; color: var(--mz-stone); font-size: .9375rem; }

.mz-price { margin-block-start: 24px; color: var(--mz-stone); font-size: .9375rem; }
.mz-price strong {
	margin-inline-end: 4px;
	color: var(--mz-espresso);
	font-size: 2.75rem;
	font-weight: 600;
	line-height: 1.1;
	direction: ltr;
	unicode-bidi: isolate;
}
.mz-price--custom strong { font-size: 1.75rem; }
.mz-price-yearly { display: none; }
.mz-pricing[data-billing="yearly"] .mz-price-yearly { display: block; }
.mz-pricing[data-billing="yearly"] .mz-price-monthly { display: none; }

.mz-checks {
	display: grid;
	gap: 12px;
	margin: 28px 0 32px;
	padding: 24px 0 0;
	border-block-start: 1px solid rgb(42 28 23 / .08);
	list-style: none;
	font-size: .9375rem;
}
.mz-checks li { position: relative; padding-inline-start: 30px; }
.mz-checks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .3em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--mz-paprika-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8371D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.mz-checks li.is-off { color: var(--mz-stone); opacity: .7; }
.mz-checks li.is-off::before { background: var(--mz-fog); }
.mz-checks li.is-off::after {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	inset-block-start: calc(.3em + 8px);
	width: 8px;
	height: 2px;
	background: var(--mz-stone);
}

.mz-plan .wp-block-buttons { margin-block-start: auto; }
.mz-plan .wp-block-button { width: 100%; }
.mz-plan .wp-block-button__link { width: 100%; }

.mz-plan.is-featured {
	border-color: transparent;
	background: linear-gradient(165deg, #E85A3C, var(--mz-paprika) 45%, #C93E22);
	color: var(--mz-cream);
	box-shadow: 0 40px 80px -36px rgb(184 55 29 / .8);
}
@media (min-width: 1024px) {
	.mz-plan.is-featured { margin-block: -20px; padding-block: 56px; }
}
.mz-plan.is-featured .mz-plan__for,
.mz-plan.is-featured .mz-price { color: rgb(251 243 232 / .85); }
.mz-plan.is-featured .mz-price strong { color: var(--mz-cream); }
.mz-plan.is-featured .mz-checks { border-color: rgb(251 243 232 / .2); }
.mz-plan.is-featured .mz-checks li::before {
	background-color: rgb(251 243 232 / .2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF3E8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.mz-plan.is-featured .wp-block-button .wp-block-button__link {
	background: var(--mz-cream);
	color: var(--mz-paprika-dark);
	box-shadow: none;
}
.mz-plan.is-featured .wp-block-button .wp-block-button__link:hover { background: #fff; }
.mz-plan__badge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--mz-saffron);
	color: var(--mz-espresso);
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
	translate: -50% -50%;
}
[dir="rtl"] .mz-plan__badge { translate: 50% -50%; }
.mz-plan__badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 1px;
	background: var(--mz-espresso);
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   FAQ (core/details with .mz-faq)
   -------------------------------------------------------------------------- */

.mz-faq-list { display: grid; gap: 12px; max-width: 820px !important; }

.mz-faq {
	border: 1px solid var(--mz-glass-border);
	border-radius: var(--mz-r-sm);
	background: var(--mz-glass);
	box-shadow: var(--mz-shadow-sm);
	transition: background-color .2s;
}
.mz-faq[open] { background: var(--mz-glass-strong); }
.mz-faq summary {
	position: relative;
	display: block;
	padding: 20px 28px;
	padding-inline-end: 64px;
	font-size: 1.0625rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.mz-faq summary::-webkit-details-marker { display: none; }
.mz-faq summary::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 24px;
	width: 28px;
	height: 28px;
	margin-block-start: -14px;
	border-radius: 50%;
	background: var(--mz-paprika-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8371D' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
	transition: transform .25s var(--mz-ease);
}
.mz-faq[open] summary::after { transform: rotate(45deg); }
.mz-faq summary:focus-visible { border-radius: var(--mz-r-sm); }
.mz-faq > :not(summary) { margin: 0; padding: 0 28px 22px; color: var(--mz-stone); }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.mz-cta__card {
	position: relative;
	overflow: hidden;
	padding: clamp(56px, 8vw, 104px) clamp(24px, 6vw, 80px);
	border-radius: var(--mz-r-xl);
	background:
		radial-gradient(60% 90% at 0% 0%, rgb(224 72 42 / .85), transparent 70%),
		radial-gradient(50% 80% at 100% 100%, rgb(244 176 66 / .55), transparent 70%),
		var(--mz-espresso);
	color: var(--mz-cream);
	text-align: center;
	box-shadow: 0 40px 90px -40px rgb(42 28 23 / .7);
}
[dir="rtl"] .mz-cta__card {
	background:
		radial-gradient(60% 90% at 100% 0%, rgb(224 72 42 / .85), transparent 70%),
		radial-gradient(50% 80% at 0% 100%, rgb(244 176 66 / .55), transparent 70%),
		var(--mz-espresso);
}
.mz-cta .mz-title { color: var(--mz-cream); }
.mz-cta .mz-subtitle { margin-inline: auto; color: rgb(251 243 232 / .78); }
.mz-cta .mz-actions { justify-content: center; margin-block-start: 40px; }
.mz-cta .mz-actions .wp-block-button__link { min-height: 56px; padding-inline: 36px; }
.mz-cta .wp-block-button.is-style-glass .wp-block-button__link {
	background: rgb(255 255 255 / .1);
	border-color: rgb(255 255 255 / .35);
	color: var(--mz-cream);
	box-shadow: none;
}
.mz-cta .wp-block-button.is-style-glass .wp-block-button__link:hover { background: rgb(255 255 255 / .18); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.mz-footer { padding: 0 var(--mz-gutter) 32px; }
.mz-footer__card {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 40px 32px;
	max-width: var(--mz-wide);
	margin-inline: auto;
	padding: clamp(32px, 4vw, 48px);
	border: 1px solid var(--mz-glass-border);
	border-radius: var(--mz-r-xl);
	background: var(--mz-glass);
	box-shadow: var(--mz-shadow);
	font-size: .9375rem;
}
.mz-footer__logo { display: inline-block; line-height: 0; }
.mz-footer__logo img { width: 132px; height: auto; }
.mz-footer__brand p { margin-block-start: 12px; color: var(--mz-stone); }
.mz-footer__brand .mz-footer__by { margin-block-start: 4px; font-size: .8125rem; }
.mz-footer__col h2 { margin-block-end: 12px; font-size: .9375rem; font-weight: 600; }
.mz-footer__col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--mz-stone); }
.mz-footer__col a { color: var(--mz-stone); text-decoration: none; }
.mz-footer__col a:hover { color: var(--mz-paprika-dark); }
.mz-footer__social { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mz-footer__copy {
	grid-column: 1 / -1;
	padding-block-start: 24px;
	border-block-start: 1px solid rgb(42 28 23 / .08);
	color: var(--mz-stone);
	font-size: .8125rem;
	text-align: center;
}
@media (max-width: 900px) {
	.mz-footer__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mz-footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Inner pages, prose, blog
   -------------------------------------------------------------------------- */

.mz-page__head {
	max-width: var(--mz-prose);
	margin-inline: auto;
	padding: clamp(56px, 8vw, 104px) var(--mz-gutter) clamp(32px, 4vw, 48px);
	text-align: center;
}
.mz-page__head h1 { font-size: var(--wp--preset--font-size--title); }
.mz-page__head p { margin-block-start: 16px; color: var(--mz-stone); font-size: var(--wp--preset--font-size--lead); }

.mz-wrap { max-width: var(--mz-wide); margin-inline: auto; padding: 0 var(--mz-gutter) var(--mz-section-y); }

.mz-content--prose {
	max-width: calc(var(--mz-prose) + 2 * var(--mz-gutter));
	margin-inline: auto;
	padding: 0 var(--mz-gutter) var(--mz-section-y);
	font-size: 1.0625rem;
	line-height: 1.9;
}
.mz-content.mz-content--prose > * + * { margin-block-start: 1.25em; }
.mz-content.mz-content--prose > h2 { margin-block-start: 2em; font-size: 1.625rem; }
.mz-content.mz-content--prose > h3 { margin-block-start: 1.6em; font-size: 1.25rem; }
.mz-content--prose ul,
.mz-content--prose ol { padding-inline-start: 1.4em; }
.mz-content--prose li + li { margin-block-start: .4em; }
.mz-content--prose li::marker { color: var(--mz-paprika); }
.mz-content--prose blockquote {
	margin-inline: 0;
	padding: 24px 28px;
	border-inline-start: 4px solid var(--mz-paprika);
	border-radius: var(--mz-r-sm);
	background: var(--mz-glass);
	font-size: 1.125rem;
}
.mz-content--prose img,
.mz-content--prose .wp-block-image img { border-radius: var(--mz-r-sm); }
.mz-content--prose .wp-block-table { overflow-x: auto; }
.mz-content--prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.mz-content--prose th,
.mz-content--prose td { padding: 12px 14px; border-block-end: 1px solid var(--mz-fog); text-align: start; }
.mz-content--prose .wp-block-details { padding: 16px 20px; border-radius: var(--mz-r-field); background: var(--mz-glass); }

.mz-post__head { max-width: var(--mz-prose); margin-inline: auto; padding: clamp(56px, 8vw, 96px) var(--mz-gutter) 32px; }
.mz-post__head h1 { margin-block-start: 16px; font-size: var(--wp--preset--font-size--title); }
.mz-post__lead { margin-block-start: 16px; color: var(--mz-stone); font-size: var(--wp--preset--font-size--lead); }
.mz-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--mz-stone); font-size: .875rem; }
.mz-post__cover { max-width: 1000px; margin: 0 auto 48px; padding-inline: var(--mz-gutter); }
.mz-post__cover img { width: 100%; border-radius: var(--mz-r-card); }

.mz-chip {
	display: inline-flex;
	padding: 2px 12px;
	border-radius: 999px;
	background: var(--mz-paprika-light);
	color: var(--mz-paprika-dark);
	font-weight: 500;
	text-decoration: none;
}

.mz-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1023px) { .mz-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mz-posts { grid-template-columns: minmax(0, 1fr); } }
.mz-post-card { display: flex; flex-direction: column; gap: 10px; }
.mz-post-card__img { display: block; margin: -8px -8px 8px; line-height: 0; }
.mz-post-card__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; }
.mz-post-card h2 { font-size: 1.25rem; }
.mz-post-card h2 a { color: inherit; text-decoration: none; }
.mz-post-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mz-post-card p { color: var(--mz-stone); font-size: .9375rem; }
.mz-empty { padding: 48px; border-radius: var(--mz-r-card); background: var(--mz-glass); color: var(--mz-stone); text-align: center; }

.mz-pagination .nav-links { display: flex; justify-content: center; gap: 8px; margin-block-start: 48px; }
.mz-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 14px;
	border-radius: 999px;
	background: var(--mz-glass);
	color: var(--mz-espresso);
	text-decoration: none;
}
.mz-pagination .page-numbers.current { background: var(--mz-espresso); color: var(--mz-cream); }

.mz-404 { max-width: 640px; margin-inline: auto; padding: clamp(72px, 12vw, 160px) var(--mz-gutter); text-align: center; }
.mz-404__code { color: var(--mz-paprika); font-size: clamp(5rem, 14vw, 9rem); font-weight: 600; line-height: 1; }
.mz-404 h1 { margin-block-start: 16px; font-size: var(--wp--preset--font-size--title); }
.mz-404 p:not(.mz-404__code) { margin-block: 16px 32px; color: var(--mz-stone); }

/* Page hero for inner pages built from sections */
.mz-page-hero { text-align: center; }
.mz-page-hero h1 { font-size: var(--wp--preset--font-size--display); }
.mz-page-hero .mz-eyebrow { margin-block-end: 20px; }
.mz-page-hero .mz-subtitle { margin-inline: auto; }

/* Generic two-column split used by inner pages */
.mz-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .mz-split { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Lead form (mazaqi/lead-form)
   -------------------------------------------------------------------------- */

.mz-lead {
	padding: clamp(24px, 4vw, 40px);
	border: 1px solid var(--mz-glass-border);
	border-radius: var(--mz-r-card);
	background: rgb(255 255 255 / .72);
	box-shadow: var(--mz-shadow);
}
.mz-lead__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.mz-lead__form > * { grid-column: 1 / -1; }
.mz-lead__form > .mz-field--half { grid-column: auto; }
@media (max-width: 480px) { .mz-lead__form > .mz-field--half { grid-column: 1 / -1; } }

.mz-field { display: flex; flex-direction: column; gap: 6px; }
.mz-field label { font-size: .9375rem; font-weight: 500; }
.mz-opt { color: var(--mz-stone); font-weight: 400; }
.mz-field small { color: var(--mz-stone); font-size: .8125rem; }
.mz-field input,
.mz-field select {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1.5px solid var(--mz-fog);
	border-radius: var(--mz-r-field);
	background: #fff;
	color: var(--mz-espresso);
	font: inherit;
	transition: border-color .2s, box-shadow .2s;
}
.mz-field input[dir="ltr"] { text-align: start; }
[dir="rtl"] .mz-field input[dir="ltr"] { text-align: right; }
.mz-field input::placeholder { color: rgb(111 102 93 / .6); }
.mz-field input:focus,
.mz-field select:focus {
	border-color: var(--mz-paprika);
	outline: none;
	box-shadow: 0 0 0 4px rgb(224 72 42 / .15);
}
.mz-field.is-invalid input,
.mz-field.is-invalid select { border-color: var(--mz-paprika-dark); }
.mz-field__err { color: var(--mz-paprika-dark); font-size: .8125rem; }

.mz-lead .mz-btn { min-height: 56px; margin-block-start: 6px; font-size: 1.0625rem; }
.mz-lead .mz-btn[disabled] { opacity: .7; cursor: progress; }
.mz-lead__note { color: var(--mz-stone); font-size: .8125rem; text-align: center; }
.mz-lead__err {
	padding: 12px 16px;
	border-radius: var(--mz-r-field);
	background: var(--mz-paprika-light);
	color: var(--mz-paprika-dark);
	font-size: .9375rem;
}
.mz-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mz-lead__ok { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 24px; text-align: center; }
.mz-lead__ok[hidden] { display: none; }
.mz-lead__ok:focus { outline: none; }
.mz-lead__ok strong { font-size: 1.5rem; font-weight: 600; }
.mz-lead__ok p { color: var(--mz-stone); }
.mz-lead__okmark {
	position: relative;
	width: 64px;
	height: 64px;
	margin-block-end: 8px;
	border-radius: 50%;
	background: var(--mz-zaatar);
}
.mz-lead__okmark::after {
	content: "";
	position: absolute;
	inset: 21px 18px 25px;
	border: solid var(--mz-cream);
	border-width: 0 0 4px 4px;
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

.mz-js .mz-reveal { opacity: 0; translate: 0 24px; transition: opacity .7s var(--mz-ease), translate .7s var(--mz-ease); }
.mz-js .mz-reveal.is-visible { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { animation: none !important; transition: none !important; }
	.mz-js .mz-reveal { opacity: 1; translate: none; }
}

/* Lighter glass on small screens: backdrop blur is the costliest effect to scroll. */
@media (max-width: 640px) {
	.mz-hero__card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .55); }
	.mz-hero__card { border-radius: 32px; }
}

/* --------------------------------------------------------------------------
   Inner page pieces
   -------------------------------------------------------------------------- */

.mz-content--sections > .mz-page-hero { padding-block-start: clamp(56px, 8vw, 104px); }
.mz-content--sections > .mz-page-hero + .mz-section { padding-block-start: clamp(40px, 5vw, 64px); }

.mz-prose-card { max-width: var(--mz-prose) !important; padding: clamp(28px, 5vw, 56px); font-size: 1.0625rem; line-height: 1.9; }
.mz-prose-card > * + * { margin-block-start: 1em; }
.mz-prose-card h2 { font-size: 1.5rem; }
.mz-prose-card p { color: #4a3f39; }
.mz-center { text-align: center; }

.mz-next h2 { font-size: 1.375rem; }
.mz-numbered {
	display: grid;
	gap: 22px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: mz-n;
}
.mz-numbered li {
	position: relative;
	padding-inline-start: 52px;
	color: var(--mz-stone);
	font-size: .9688rem;
	counter-increment: mz-n;
}
.mz-numbered li strong { color: var(--mz-espresso); font-size: 1.0625rem; font-weight: 600; }
.mz-numbered li::before {
	content: counter(mz-n);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mz-paprika-light);
	color: var(--mz-paprika-dark);
	font-weight: 600;
}
.mz-next__alt { margin-block: 32px 12px; padding-block-start: 24px; border-block-start: 1px solid rgb(42 28 23 / .08); color: var(--mz-stone); font-size: .9375rem; }

.mz-updated { color: var(--mz-stone); font-size: .875rem; }

/* Testimonials (pattern mazaqi/testimonials) */
.mz-quote { display: flex; flex-direction: column; gap: 20px; }
.mz-quote::before {
	content: "";
	width: 76px;
	height: 12px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 12'%3E%3Cg%3E%3Crect x='2' y='2' width='8' height='8' transform='rotate(45 6 6)'/%3E%3Crect x='18' y='2' width='8' height='8' transform='rotate(45 22 6)'/%3E%3Crect x='34' y='2' width='8' height='8' transform='rotate(45 38 6)'/%3E%3Crect x='50' y='2' width='8' height='8' transform='rotate(45 54 6)'/%3E%3Crect x='66' y='2' width='8' height='8' transform='rotate(45 70 6)'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 12'%3E%3Cg%3E%3Crect x='2' y='2' width='8' height='8' transform='rotate(45 6 6)'/%3E%3Crect x='18' y='2' width='8' height='8' transform='rotate(45 22 6)'/%3E%3Crect x='34' y='2' width='8' height='8' transform='rotate(45 38 6)'/%3E%3Crect x='50' y='2' width='8' height='8' transform='rotate(45 54 6)'/%3E%3Crect x='66' y='2' width='8' height='8' transform='rotate(45 70 6)'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
	background-color: var(--mz-saffron);
}
.mz-quote__text { font-size: 1.0625rem; line-height: 1.85; }
.mz-quote__who { margin-block-start: auto; color: var(--mz-stone); font-size: .9375rem; }
.mz-quote__who strong { color: var(--mz-espresso); font-weight: 600; }

/* ==========================================================================
   Photography
   ========================================================================== */

/* Shared image frame: photo card with the brand's slanted paprika shadow (9°) */
.mz-frame { position: relative; isolation: isolate; }
.mz-frame::before {
	content: "";
	position: absolute;
	inset: 10% 6% -5% -5%;
	z-index: -1;
	border-radius: var(--mz-r-card);
	background: var(--mz-paprika);
	transform: skewY(-9deg);
}
[dir="rtl"] .mz-frame::before { inset: 10% -5% -5% 6%; transform: skewY(9deg); }
.mz-frame .wp-block-image { margin: 0; }
.mz-frame .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--mz-r-card);
	box-shadow: 0 30px 60px -30px rgb(42 28 23 / .5);
}

/* Brand badges (guide §07 row 1) */
.mz-badges {
	position: absolute;
	inset-block-start: 8%;
	inset-inline-end: -18px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.mz-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: 999px;
	color: var(--mz-cream);
	font-size: .875rem;
	font-weight: 600;
	box-shadow: 0 12px 24px -12px rgb(42 28 23 / .55);
	animation: mz-float 6s ease-in-out infinite;
}
.mz-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 1.5px;
	background: currentColor;
	transform: rotate(45deg);
}
.mz-badge--new { background: var(--mz-paprika); }
.mz-badge--hot { background: var(--mz-saffron); color: var(--mz-espresso); animation-delay: -2s; }
.mz-badge--veg { background: var(--mz-zaatar); animation-delay: -4s; }

/* Showcase: photo + copy */
.mz-showcase__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(48px, 7vw, 104px);
}
.mz-showcase .mz-frame { max-width: 440px; width: 100%; justify-self: center; }
.mz-showcase__text { display: flex; flex-direction: column; align-items: flex-start; }
.mz-showcase .mz-title { margin-block-start: 20px; text-align: start; }
.mz-showcase .mz-subtitle { margin-inline: 0; text-align: start; }
.mz-showcase .mz-checks { width: 100%; margin-block: 28px 32px; padding-block-start: 0; border: 0; font-size: 1rem; }
@media (max-width: 900px) {
	.mz-showcase__grid { grid-template-columns: minmax(0, 1fr); }
	.mz-showcase .mz-frame { max-width: 360px; }
	.mz-badges { inset-inline-end: -8px; }
}

/* Dish strip: round plate frames, gently scrolling */
.mz-content--sections > .mz-dishes > .mz-marquee { max-width: none; }
.mz-marquee {
	display: flex;
	gap: 28px;
	margin-block-start: clamp(40px, 5vw, 56px);
	padding-block: 20px 8px;
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mz-marquee__track {
	display: flex;
	flex: none;
	gap: 28px;
	animation: mz-marquee 60s linear infinite;
}
[dir="rtl"] .mz-marquee__track { animation-name: mz-marquee-rtl; }
.mz-marquee:hover .mz-marquee__track { animation-play-state: paused; }
@keyframes mz-marquee { to { translate: calc(-50% - 14px) 0; } }
@keyframes mz-marquee-rtl { to { translate: calc(50% + 14px) 0; } }

.mz-dish.wp-block-image { flex: none; width: 190px; margin: 0; text-align: center; }
.mz-dish.wp-block-image img {
	display: block;
	width: 166px;
	height: 166px;
	margin: 12px auto 0;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--mz-paprika), 0 0 0 12px #fff, 0 24px 40px -18px rgb(42 28 23 / .5);
	transition: transform .4s var(--mz-ease);
}
.mz-dish.wp-block-image:hover img { transform: scale(1.05) rotate(-3deg); }
.mz-dish figcaption { margin-block-start: 22px; font-size: 1rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.mz-marquee { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask: none; mask: none; }
	.mz-dish { scroll-snap-align: start; }
	.mz-marquee__track[aria-hidden] { display: none; }
}

/* Steps with photos */
.mz-step__img { order: 0; width: 100%; margin: 0; }
.mz-step__img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--mz-r-sm);
	box-shadow: 0 20px 40px -24px rgb(42 28 23 / .5);
}
.mz-step::before { order: 1; position: relative; z-index: 1; margin-block: -32px 18px; border: 4px solid #fdf7f0; }
.mz-step h3 { order: 2; }
.mz-step p { order: 3; }

/* Closing CTA over a photo */
.mz-cta__card { isolation: isolate; }
.mz-cta__card > .mz-cta__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
.mz-cta__bg.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.mz-cta__card:has(> .mz-cta__bg)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(70% 100% at 100% 0%, rgb(224 72 42 / .7), transparent 70%),
		linear-gradient(180deg, rgb(42 28 23 / .78), rgb(42 28 23 / .9));
}
[dir="ltr"] .mz-cta__card:has(> .mz-cta__bg)::before {
	background:
		radial-gradient(70% 100% at 0% 0%, rgb(224 72 42 / .7), transparent 70%),
		linear-gradient(180deg, rgb(42 28 23 / .78), rgb(42 28 23 / .9));
}

/* About: story with photo */
.mz-story__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	align-items: center;
	gap: clamp(40px, 6vw, 88px);
}
.mz-story__grid .mz-prose-card { max-width: none !important; }
@media (max-width: 900px) {
	.mz-story__grid { grid-template-columns: minmax(0, 1fr); }
	.mz-story__grid .mz-frame { max-width: 360px; margin-inline: auto; }
}
@media (max-width: 640px) {
	.mz-badges { inset-inline-end: 12px; inset-block-start: 12px; }
	.mz-badge { font-size: .8125rem; padding: 6px 13px; }
}

/* Hero photo: a guest scanning the table QR, with what happens next floating over it */
.mz-hero__media {
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: 480px;
	justify-self: center;
	margin-block: 12px;
}
.mz-hero__media::before {
	content: "";
	position: absolute;
	inset: 12% -5% -5% 8%;
	z-index: -1;
	border-radius: 32px;
	background: var(--mz-paprika);
	transform: skewY(-9deg);
}
[dir="rtl"] .mz-hero__media::before { inset: 12% 8% -5% -5%; transform: skewY(9deg); }
.mz-hero__photo.wp-block-image { margin: 0; }
.mz-hero__photo.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 32px;
	box-shadow: 0 40px 80px -36px rgb(42 28 23 / .6);
}

.mz-hero__media p.mz-float {
	display: block;
	margin: 0;
	padding: 12px 20px;
	padding-inline-start: 64px;
	color: var(--mz-stone);
	font-size: .75rem;
	line-height: 1.5;
}
.mz-hero__media p.mz-float strong { display: block; color: var(--mz-espresso); font-size: .875rem; font-weight: 600; }
.mz-hero__media p.mz-float br { display: none; }
.mz-hero__media p.mz-float::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 12px;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	translate: 0 -50%;
	background: var(--mz-zaatar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF3E8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.mz-hero__media p.mz-float--paid::before {
	background: var(--mz-espresso) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4B042' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.mz-hero__media .mz-float--toast { inset-block-start: 9%; inset-inline-start: -12%; }
.mz-hero__media .mz-float--paid { inset-block-end: 9%; inset-inline-end: -10%; }

@media (max-width: 1100px) {
	.mz-hero__media .mz-float--toast { inset-inline-start: -4%; }
	.mz-hero__media .mz-float--paid { inset-inline-end: -4%; }
}
@media (max-width: 900px) {
	.mz-hero__media { max-width: 420px; }
}
@media (max-width: 480px) {
	.mz-hero__media .mz-float--toast { inset-inline-start: -6px; inset-block-start: 6%; }
	.mz-hero__media .mz-float--paid { inset-inline-end: -6px; inset-block-end: 6%; }
	.mz-hero__media p.mz-float { padding-block: 10px; padding-inline-end: 14px; }
}

/* The photo does not mirror with the language, so the cards are pinned to its
   physical sides: the toast over the wall at top-right, "paid" at bottom-left,
   keeping the guest's phone and the table stand uncovered in both languages. */
.mz-hero__media .mz-float--toast { inset-inline: auto; right: -12%; }
.mz-hero__media .mz-float--paid { inset-inline: auto; left: -10%; }
@media (max-width: 1100px) {
	.mz-hero__media .mz-float--toast { right: -4%; }
	.mz-hero__media .mz-float--paid { left: -4%; }
}
@media (max-width: 480px) {
	.mz-hero__media .mz-float--toast { right: -6px; }
	.mz-hero__media .mz-float--paid { left: -6px; }
}

/* ==========================================================================
   Menu studio (mazaqi/menu-studio)
   ========================================================================== */

.mz-studio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: start;
	gap: clamp(32px, 5vw, 72px);
}
.mz-studio__preview {
	position: sticky;
	inset-block-start: 108px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
/* Phone showing the menu as a web page in a mobile browser.
   The canvas is laid out at real phone size (390×844) and scaled by studio.js. */
.mz-device {
	position: relative;
	width: min(340px, 86vw, calc((100vh - 190px) * .462));
	min-width: 260px;
	aspect-ratio: 390 / 844;
	border-radius: 52px;
	padding: 0;
	background: #120c0a;
	box-shadow: 0 0 0 10px #1d1512, 0 0 0 11.5px #4a3a33, 0 50px 90px -30px rgb(42 28 23 / .6);
	overflow: hidden;
}
.mz-device__canvas {
	position: absolute;
	inset-block-start: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: 390px;
	height: 844px;
	overflow: hidden;
	border-radius: 52px;
	background: #fff;
	transform-origin: 0 0;
}
.mz-browser__top { flex: none; background: #f5f3f1; border-block-end: 1px solid #e3ddd7; color: #1c1c1e; }
.mz-browser__status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 34px 0 40px; font-size: 16px; font-weight: 600; }
.mz-browser__island { position: absolute; inset-block-start: 11px; left: 50%; width: 122px; height: 34px; border-radius: 999px; background: #000; translate: -50% 0; }
.mz-browser__sys { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.mz-browser__sys b { width: 3.5px; border-radius: 1px; background: currentColor; }
.mz-browser__sys b:nth-child(1) { height: 4px; } .mz-browser__sys b:nth-child(2) { height: 6.5px; } .mz-browser__sys b:nth-child(3) { height: 9px; } .mz-browser__sys b:nth-child(4) { height: 12px; }
.mz-browser__sys em { width: 25px; height: 12px; margin-inline-start: 6px; border: 1.5px solid rgb(0 0 0 / .4); border-radius: 4px; background: linear-gradient(90deg, #1c1c1e 72%, transparent 72%) 1.5px 1.5px / calc(100% - 3px) calc(100% - 3px) no-repeat; }
.mz-browser__bar { display: flex; align-items: center; gap: 10px; margin: 2px 14px 10px; padding: 0 14px; height: 44px; border-radius: 13px; background: #e4e0dc; font-size: 15px; }
.mz-browser__aa { font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.mz-browser__url { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; color: #1c1c1e; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-weight: 500; }
.mz-browser__url svg { color: #6b6b70; }
.mz-browser__reload { color: #3a3a3c; }
.mz-browser__page { position: relative; flex: 1; min-height: 0; }
.mz-browser__tools {
	position: relative;
	flex: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	height: 82px;
	padding: 12px 10px 0;
	background: #f5f3f1;
	border-block-start: 1px solid #e3ddd7;
}
.mz-browser__tools svg { width: 26px; height: 26px; fill: none; stroke: #0a84ff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mz-browser__tools svg.is-off { stroke: #b9b9be; }
.mz-browser__home { position: absolute; inset-block-end: 9px; left: 50%; width: 136px; height: 5px; border-radius: 999px; background: #111; translate: -50% 0; }
.mz-studio__hint { max-width: 340px; color: var(--mz-stone); font-size: .875rem; text-align: center; }
.mz-studio__noscript { padding: 80px 24px; text-align: center; }
.mz-studio__note--top { margin: -4px 0 12px; }

.mz-studio__panel {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--mz-glass-border);
	border-radius: var(--mz-r-card);
	background: rgb(255 255 255 / .7);
	box-shadow: var(--mz-shadow);
}
.mz-studio__title { margin-block-end: 8px; font-size: 1.375rem; }
.mz-studio__group { margin: 0; margin-block-start: 24px; padding: 0; border: 0; }
.mz-studio__group legend,
.mz-studio fieldset legend,
.mz-field__label { display: block; margin-block-end: 10px; padding: 0; font-size: .9375rem; font-weight: 600; }
.mz-studio fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mz-studio__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.mz-studio__note { margin-block-start: 8px; color: var(--mz-stone); font-size: .8125rem; }
.mz-studio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Restaurant type cards */
.mz-studio__types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mz-opt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--mz-shadow-sm);
	cursor: pointer;
	transition: border-color .2s, transform .2s;
}
.mz-opt-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mz-opt-card span { padding: 8px 10px; font-size: .875rem; font-weight: 500; text-align: center; }
.mz-opt-card:hover { transform: translateY(-2px); }
.mz-opt-card:has(input:checked) { border-color: var(--mz-paprika); }
.mz-opt-card:has(input:focus-visible),
.mz-seg label:has(input:focus-visible),
.mz-swatch:has(input:focus-visible) { outline: 3px solid var(--mz-paprika); outline-offset: 2px; }

/* Logo upload */
.mz-studio__logo { position: relative; }
.mz-upload {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 10px 16px;
	overflow: hidden;
	border: 1.5px dashed #d8cbbd;
	border-radius: var(--mz-r-field);
	background: #fff;
	color: var(--mz-espresso);
	font-size: .9375rem;
	cursor: pointer;
}
.mz-upload:hover { border-color: var(--mz-paprika); }
.mz-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mz-upload:has(input:focus-visible) { outline: 3px solid var(--mz-paprika); outline-offset: 2px; }
.mz-studio__clear {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-end: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mz-paprika-dark);
	font: inherit;
	font-size: .8125rem;
	text-decoration: underline;
	cursor: pointer;
}

/* Colour swatches */
.mz-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.mz-swatch {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sw);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08);
	cursor: pointer;
	transition: transform .15s;
}
.mz-swatch:hover { transform: scale(1.08); }
.mz-swatch:has(input[type="radio"]:checked) { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sw, var(--mz-espresso)); }
.mz-swatch--custom {
	overflow: hidden;
	background: conic-gradient(#E0482A, #F4B042, #1F7A4D, #0F766E, #1E3A5F, #6B3FA0, #8C1C3A, #E0482A);
}
.mz-swatch--custom input[type="color"] {
	position: absolute;
	inset: -8px;
	width: calc(100% + 16px);
	height: calc(100% + 16px);
	border: 0;
	opacity: 0;
	cursor: pointer;
}
.mz-swatch--custom:has(input[type="radio"]:checked) { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mz-espresso); }

/* Segmented controls */
.mz-seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 16px;
	background: var(--mz-fog);
}
.mz-seg label { position: relative; flex: 1; cursor: pointer; }
.mz-seg span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 10px;
	border-radius: 12px;
	color: var(--mz-stone);
	font-size: .875rem;
	font-weight: 500;
	text-align: center;
	transition: background-color .2s, color .2s;
}
.mz-seg label:has(input:checked) span { background: #fff; color: var(--mz-espresso); box-shadow: 0 4px 10px -6px rgb(42 28 23 / .4); }
.mz-seg--layout span { flex-direction: column; gap: 6px; min-height: 76px; }
.mz-font-kufi { font-family: "Noto Kufi Arabic", var(--wp--preset--font-family--plex); }
.mz-font-naskh { font-family: "Noto Naskh Arabic", var(--wp--preset--font-family--plex); font-size: .95rem !important; }

/* Tiny layout schematics */
.mz-ico-layout { display: block; width: 34px; height: 26px; }
.mz-ico-layout--list { background: linear-gradient(currentColor, currentColor) 0 2px / 10px 8px no-repeat, linear-gradient(currentColor, currentColor) 14px 4px / 20px 3px no-repeat, linear-gradient(currentColor, currentColor) 0 16px / 10px 8px no-repeat, linear-gradient(currentColor, currentColor) 14px 18px / 20px 3px no-repeat; opacity: .7; }
.mz-ico-layout--grid { background: linear-gradient(currentColor, currentColor) 0 0 / 15px 11px no-repeat, linear-gradient(currentColor, currentColor) 19px 0 / 15px 11px no-repeat, linear-gradient(currentColor, currentColor) 0 15px / 15px 11px no-repeat, linear-gradient(currentColor, currentColor) 19px 15px / 15px 11px no-repeat; opacity: .7; }
.mz-ico-layout--large { background: linear-gradient(currentColor, currentColor) 0 0 / 34px 17px no-repeat, linear-gradient(currentColor, currentColor) 0 21px / 22px 3px no-repeat; opacity: .7; }

.mz-studio__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block-start: 32px; }
.mz-studio__actions .mz-btn { min-height: 56px; padding-inline: 36px; font-size: 1.0625rem; }
.mz-studio__reset { padding: 0; border: 0; background: none; color: var(--mz-stone); font: inherit; font-size: .9375rem; text-decoration: underline; cursor: pointer; }

@media (max-width: 960px) {
	.mz-studio { grid-template-columns: minmax(0, 1fr); }
	.mz-studio__preview { position: static; }
	.mz-device { width: min(340px, 86vw); }
}
@media (max-width: 560px) {
	.mz-studio__row { grid-template-columns: minmax(0, 1fr); }
	.mz-studio__types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.mz-opt-card span { padding: 6px 4px; font-size: .75rem; }
}

/* Lead section under the studio */
.mz-demo-lead .mz-lead { max-width: 640px; margin-inline: auto; }
.mz-demo-lead .mz-subtitle { margin-inline: auto; }
.mz-demo-lead .mz-subtitle + .mz-lead { margin-block-start: 32px; }