/* MedaZone — landing page ("الصفحة الرئيسية" page template, public/templates/home.php).
 *
 * Loaded ONLY on that template, on top of medazone.css: every color here resolves to the same
 * --m-* tokens the rest of the product uses, so the landing page and the booking flow stay one
 * design system rather than two that drift. Nothing here restyles a shared component — the clinic
 * cards, chips and buttons the booking flow also uses keep their definitions in medazone.css.
 *
 * Layout note: the hero and the two banded sections are deliberately full-bleed (100% of the
 * viewport, with their own inner max-width) because the page renders as a standalone document with
 * no theme wrapper — see maybe_load_home_template() in class-medazone-public.php.
 */

.mz-home {
	--mz-max: 1180px;
	--mz-gut: 24px;
	/* The hero keeps a fixed dark treatment in both light and dark mode — it is a brand surface, not
	   page content, same precedent as the announcement bar. Its own text tokens are pinned to match. */
	--mz-hero-bg: oklch(0.19 0.03 255);
	--mz-hero-bg-2: oklch(0.26 0.05 250);
	--mz-hero-ink: oklch(0.97 0.006 250);
	--mz-hero-ink-muted: oklch(0.78 0.02 250);
	scroll-behavior: smooth;
}
.mz-wrap { max-width: var(--mz-max); margin: 0 auto; padding-inline: var(--mz-gut); }
.mz-section { padding: 88px 0; }
.mz-section.tight { padding: 64px 0; }

.mz-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 800; letter-spacing: .2px;
	padding: 7px 14px; border-radius: 999px;
	background: oklch(0.70 0.16 258 / 0.14); color: var(--m-primary);
	border: 1px solid oklch(0.70 0.16 258 / 0.28);
}
.mz-h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.25; margin: 14px 0 10px; }
.mz-lead { font-size: clamp(14px, 1.4vw, 16px); line-height: 1.85; color: var(--m-text-muted); max-width: 62ch; }
.mz-center { text-align: center; }
.mz-center .mz-lead { margin-inline: auto; }

/* ============================================================ top bar */
.mz-nav {
	position: sticky; top: 0; z-index: 50;
	background: oklch(0.19 0.03 255 / 0.82);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid oklch(1 0 0 / 0.08);
}
.mz-nav-inner { display: flex; align-items: center; gap: 18px; height: 106px; }
/* Logo carries the brand on the one page most visitors only ever see once — sized to read,
   including the domain line under the wordmark, which is the part that disappears first when the
   logo is small. The file is 610x240, so even at this height it is displayed well under its native
   resolution and stays sharp on a retina screen; the bar grew with it to keep the breathing room. */
.mz-nav .mz-logo .medazone-logo-img { height: 74px; }
.mz-nav .mz-logo { display: flex; align-items: center; flex-shrink: 0; position: relative; }

/* A slow light crossing the logo, once every 5.5 seconds.
 *
 * The gradient is masked by the logo image itself, so the light runs over the two figures and the
 * letters rather than over an invisible rectangle around them — that is the whole difference between
 * a finish that looks applied to the brand and one that looks stuck on top of it.
 *
 * 5s to cross and 5.5s between passes are the numbers chosen from the preview: a long, slow pass with
 * a short rest. The header is sticky, so the pass is deliberately gentle — the peak is 85% white, not
 * a hard flare, and it is the slowest part of anything moving on the page.
 */
.mz-nav .mz-logo-sheen {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg,
		transparent 38%,
		rgba(255, 255, 255, .30) 46%,
		rgba(255, 255, 255, .85) 50%,
		rgba(255, 255, 255, .30) 54%,
		transparent 62%);
	background-size: 260% 100%;
	background-position: 130% 0;
	-webkit-mask: url("../img/logo-dark.png") center / 100% 100% no-repeat;
	mask: url("../img/logo-dark.png") center / 100% 100% no-repeat;
	animation: mz-logo-sheen 5.5s linear infinite;
}
@keyframes mz-logo-sheen {
	0%     { opacity: 0; background-position: 130% 0; }
	2%     { opacity: 1; }
	89.9%  { opacity: 1; background-position: -60% 0; }
	90.9%  { opacity: 0; background-position: -60% 0; }
	100%   { opacity: 0; background-position: 130% 0; }
}
/* Motion sensitivity is common enough that a decorative loop must be switchable off by the visitor's
   own setting, not by ours. */
@media (prefers-reduced-motion: reduce) {
	.mz-nav .mz-logo-sheen { animation: none; opacity: 0; }
}
.mz-nav-links { display: flex; align-items: center; gap: 22px; margin-inline-start: 12px; flex: 1; }
.mz-nav-links a {
	font-size: 13.5px; font-weight: 700; color: var(--mz-hero-ink-muted);
	padding: 6px 0; position: relative; transition: color .15s ease;
}
.mz-nav-links a:hover { color: var(--mz-hero-ink); }
.mz-nav-links a::after {
	content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 0;
	background: var(--m-primary); border-radius: 2px; transition: width .2s ease;
}
.mz-nav-links a:hover::after { width: 100%; }
.mz-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The switches come from the shared components; inside the always-dark bar they need the dark ink. */
.mz-nav .medazone-chip { color: var(--mz-hero-ink); background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0 / 0.16); }
.mz-nav .medazone-chip:hover { background: oklch(1 0 0 / 0.14); }
.mz-nav-burger { display: none; background: none; border: none; padding: 6px; color: var(--mz-hero-ink); }
/* "Add your clinic — free": the owner's door in the bar. The CTA band's own gradient, so it reads as the
   same invitation the page ends on. Qualified with .mz-nav because the bar's link rule sets a light ink. */
.mz-nav .mz-nav-cta {
	display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px;
	font-size: 12.5px; font-weight: 800; white-space: nowrap; text-decoration: none;
	color: oklch(0.16 0.03 255);
	background: linear-gradient(120deg, var(--m-primary), var(--m-accent));
	box-shadow: 0 6px 18px -8px color-mix(in oklch, var(--m-primary) 70%, transparent);
	transition: transform .15s ease, box-shadow .15s ease;
}
.mz-nav .mz-nav-cta:hover { color: oklch(0.16 0.03 255); transform: translateY(-1px); box-shadow: 0 10px 22px -8px color-mix(in oklch, var(--m-primary) 80%, transparent); }
.mz-nav .mz-nav-cta:focus-visible { outline: 2px solid var(--mz-hero-ink); outline-offset: 2px; }
.mz-nav .mz-nav-cta svg { flex-shrink: 0; }

/* ============================================================ hero */
.mz-hero { position: relative; overflow: hidden; background: var(--mz-hero-bg); color: var(--mz-hero-ink); }
/* Layered mesh: two soft color fields plus a faint clinical grid. Purely decorative, drawn in CSS so
   there is no image to load and nothing to go stale at any viewport size. */
.mz-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(60% 70% at 78% 12%, oklch(0.55 0.19 258 / 0.42), transparent 62%),
		radial-gradient(50% 60% at 12% 88%, oklch(0.62 0.14 176 / 0.28), transparent 65%),
		linear-gradient(160deg, var(--mz-hero-bg), var(--mz-hero-bg-2) 70%, var(--mz-hero-bg));
}
.mz-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image:
		linear-gradient(oklch(1 0 0 / 0.045) 1px, transparent 1px),
		linear-gradient(90deg, oklch(1 0 0 / 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(75% 65% at 50% 35%, #000 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(75% 65% at 50% 35%, #000 40%, transparent 100%);
}
.mz-hero-inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
	padding: 72px 0 84px; min-height: min(78vh, 720px);
}
.mz-hero h1 {
	font-size: clamp(32px, 5vw, 60px); font-weight: 800; line-height: 1.16; margin: 18px 0 16px;
	letter-spacing: -0.4px;
}
.mz-hero h1 .accent {
	background: linear-gradient(95deg, var(--m-primary), var(--m-accent));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mz-hero-sub { font-size: clamp(14px, 1.5vw, 17px); line-height: 1.9; color: var(--mz-hero-ink-muted); max-width: 52ch; }

/* search */
.mz-search {
	display: flex; align-items: center; gap: 8px; margin-top: 30px; padding: 7px;
	background: oklch(1 0 0 / 0.09); border: 1px solid oklch(1 0 0 / 0.18);
	border-radius: 999px; max-width: 540px;
	transition: border-color .18s ease, background .18s ease;
}
.mz-search:focus-within { border-color: var(--m-primary); background: oklch(1 0 0 / 0.13); }
.mz-search svg { flex-shrink: 0; margin-inline-start: 14px; color: var(--mz-hero-ink-muted); }
.mz-search input {
	flex: 1; min-width: 0; background: none; border: none; outline: none;
	color: var(--mz-hero-ink); font-family: inherit; font-size: 14px; padding: 10px 6px;
}
.mz-search input::placeholder { color: oklch(0.72 0.02 250); }
.mz-search .medazone-btn { border-radius: 999px; padding: 11px 26px; font-size: 13px; }

.mz-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* trust strip — capability statements, deliberately not invented counts */
.mz-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; }
.mz-trust-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--mz-hero-ink-muted); }
.mz-trust-item svg { color: var(--m-primary); flex-shrink: 0; }
/* The one line in the hero addressed to doctors rather than patients. */
.mz-hero-owner {
	display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
	padding-block: 7px; padding-inline: 18px 8px; border-radius: 999px; text-decoration: none;
	color: var(--mz-hero-ink); font-size: 13.5px; font-weight: 700;
	background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.14);
	transition: background .15s ease, border-color .15s ease;
}
.mz-hero-owner:hover { color: var(--mz-hero-ink); background: oklch(1 0 0 / 0.1); border-color: oklch(1 0 0 / 0.24); }
.mz-hero-owner:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 3px; }
.mz-hero-owner .q { color: var(--mz-hero-ink-muted); font-weight: 600; }
.mz-hero-owner b { color: var(--m-accent); font-weight: 800; }
.mz-hero-owner .go {
	display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
	background: linear-gradient(120deg, var(--m-primary), var(--m-accent)); color: oklch(0.16 0.03 255);
}
/* The arrow is drawn pointing right; in Arabic "forward" is to the left. */
[dir="rtl"] .mz-hero-owner .go svg { transform: scaleX(-1); }

/* hero visual: a stack of floating product cards + an animated vitals trace */
.mz-hero-art { position: relative; min-height: 420px; }
.mz-card-float {
	position: absolute; border-radius: 18px; padding: 16px;
	background: oklch(0.24 0.035 252 / 0.92); border: 1px solid oklch(1 0 0 / 0.14);
	box-shadow: 0 24px 60px -18px oklch(0.12 0.04 260 / 0.8);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	animation: mz-float 7s ease-in-out infinite;
}
@keyframes mz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

.mz-card-appt { inset-inline-end: 4%; top: 6%; width: min(290px, 78%); }
.mz-card-doc { inset-inline-start: 0; top: 40%; width: min(268px, 74%); animation-delay: -2.4s; }
.mz-card-vitals { inset-inline-end: 14%; bottom: 2%; width: min(230px, 64%); animation-delay: -4.6s; padding: 14px 16px; }

.mz-card-float .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mz-card-float .pill {
	display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800;
	padding: 4px 10px; border-radius: 999px;
	background: oklch(0.62 0.13 148 / 0.18); color: oklch(0.78 0.14 148);
}
.mz-card-float .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mz-card-float .ttl { font-size: 15px; font-weight: 800; color: var(--mz-hero-ink); margin-top: 12px; }
.mz-card-float .sub { font-size: 11.5px; color: var(--mz-hero-ink-muted); margin-top: 3px; }
.mz-card-float .divider { height: 1px; background: oklch(1 0 0 / 0.12); margin: 13px 0; }
.mz-card-float .kv { font-size: 10.5px; color: oklch(0.68 0.02 250); }
.mz-card-float .kv b { display: block; font-size: 12.5px; color: var(--mz-hero-ink); margin-top: 2px; font-weight: 700; }

.mz-doc-row { display: flex; align-items: center; gap: 11px; }
.mz-doc-av {
	width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--m-primary), var(--m-accent));
	color: oklch(0.16 0.03 255); font-weight: 800; font-size: 17px;
}
.mz-stars { color: oklch(0.82 0.14 85); font-size: 11px; letter-spacing: 1px; }

/* the vitals trace draws itself, loops forever — the one piece of motion that says "clinic" */
.mz-vitals-svg { width: 100%; height: 44px; display: block; }
.mz-vitals-svg path {
	fill: none; stroke: var(--m-primary); stroke-width: 2.5;
	stroke-linecap: round; stroke-linejoin: round;
	/* A visible segment chasing a gap, rather than one dash the length of the path: the earlier
	   version spent most of its cycle fully off-screen, so the card read as empty at a glance. */
	stroke-dasharray: 130 300;
	animation: mz-trace 3.4s linear infinite;
}
@keyframes mz-trace { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }

/* ============================================================ specialty tiles */
.mz-spec-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 34px;
}
/* Cap at six across on wide screens: auto-fill gives seven at 1440px, which leaves the twelve
   starter specialties in a ragged 7 + 5 instead of an even two rows. */
@media (min-width: 1040px) { .mz-spec-grid { grid-template-columns: repeat(6, 1fr); } }
.mz-spec {
	display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
	padding: 22px 14px; border-radius: 16px; cursor: pointer;
	background: var(--m-bg-2); border: 1px solid var(--m-border);
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.mz-spec:hover { transform: translateY(-4px); border-color: var(--m-primary); background: var(--m-bg-3); }
.mz-spec:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 2px; }
.mz-spec-ico {
	width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
	background: oklch(0.70 0.16 258 / 0.14); color: var(--m-primary);
}
.mz-spec-name { font-size: 12.5px; font-weight: 700; }

/* ============================================================ clinics band */
.mz-band { background: var(--m-bg-2); border-block: 1px solid var(--m-border); }
.mz-band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
/* The shared empty/loading line sits alone in a wide grid — give it room so "no clinics yet" reads as
   a deliberate state rather than a broken page. This is the FIRST thing a new install shows. */
.mz-clinics-root .medazone-loading {
	grid-column: 1 / -1; justify-content: center; text-align: center;
	padding: 56px 24px; border: 1px dashed var(--m-border); border-radius: 18px;
	background: var(--m-bg); color: var(--m-text-muted); font-size: 13.5px;
}

/* ============================================================ how it works */
.mz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; counter-reset: mz-step; }
.mz-step {
	position: relative; padding: 28px 24px; border-radius: 18px;
	background: var(--m-bg-2); border: 1px solid var(--m-border);
}
.mz-step-num {
	width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 15px; margin-bottom: 14px;
	background: var(--m-primary); color: oklch(0.18 0.03 255);
}
.mz-step h3 { font-size: 16px; font-weight: 800; margin: 0 0 7px; }
.mz-step p { font-size: 13px; line-height: 1.8; color: var(--m-text-muted); margin: 0; }
/* connector line between steps, hidden on the last one and on narrow screens */
.mz-step:not(:last-child)::after {
	content: ""; position: absolute; top: 46px; inset-inline-start: 100%; width: 18px; height: 2px;
	background: linear-gradient(90deg, var(--m-border), transparent);
}

/* ============================================================ for clinics */
.mz-owner { position: relative; overflow: hidden; background: var(--mz-hero-bg); color: var(--mz-hero-ink); }
.mz-owner::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(55% 65% at 85% 85%, oklch(0.55 0.19 258 / 0.34), transparent 62%),
		radial-gradient(45% 55% at 8% 10%, oklch(0.62 0.14 176 / 0.22), transparent 65%);
}
.mz-owner-inner { position: relative; z-index: 1; }
.mz-owner .mz-h2 { color: var(--mz-hero-ink); }
.mz-owner .mz-lead { color: var(--mz-hero-ink-muted); }
.mz-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.mz-feat {
	padding: 24px; border-radius: 18px;
	background: oklch(1 0 0 / 0.055); border: 1px solid oklch(1 0 0 / 0.12);
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.mz-feat:hover { transform: translateY(-4px); background: oklch(1 0 0 / 0.09); border-color: oklch(0.70 0.16 258 / 0.45); }
.mz-feat-ico {
	width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
	background: oklch(0.70 0.16 258 / 0.18); color: var(--m-primary); margin-bottom: 15px;
}
.mz-feat h3 { font-size: 15px; font-weight: 800; margin: 0 0 7px; color: var(--mz-hero-ink); }
.mz-feat p { font-size: 12.5px; line-height: 1.8; color: var(--mz-hero-ink-muted); margin: 0; }

.mz-cta-band {
	margin-top: 48px; padding: 34px 38px; border-radius: 22px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	background: linear-gradient(120deg, var(--m-primary), var(--m-accent));
	color: oklch(0.16 0.03 255);
}
.mz-cta-band .t { font-size: clamp(18px, 2.2vw, 25px); font-weight: 800; }
.mz-cta-band .s { font-size: 13px; margin-top: 6px; opacity: .8; }
.mz-free-tag {
	display: inline-block; margin-inline-start: 10px; padding: 2px 10px; border-radius: 999px; vertical-align: middle;
	font-size: 11px; font-weight: 800; background: oklch(0.18 0.03 255); color: var(--m-accent);
}
.mz-cta-band .medazone-btn {
	background: oklch(0.18 0.03 255); color: var(--mz-hero-ink);
	padding: 14px 32px; font-size: 14px; border-radius: 999px; white-space: nowrap;
}
.mz-cta-band .medazone-btn:hover { background: oklch(0.13 0.03 255); }

/* ============================================================ reveal on scroll */
.mz-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.mz-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.mz-reveal { opacity: 1; transform: none; transition: none; }
	.mz-card-float, .mz-vitals-svg path { animation: none; }
	.mz-home { scroll-behavior: auto; }
}

/* ============================================================ responsive */
@media (max-width: 980px) {
	.mz-hero-inner { grid-template-columns: 1fr; gap: 44px; padding: 52px 0 64px; min-height: 0; }
	.mz-hero-art { min-height: 380px; order: 2; }
	.mz-feat-grid { grid-template-columns: repeat(2, 1fr); }
	.mz-steps { grid-template-columns: 1fr; }
	.mz-step:not(:last-child)::after { display: none; }
	.mz-nav-links { display: none; }
	.mz-nav-burger { display: block; }
	.mz-nav-links.is-open {
		display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
		/* Sits flush under the bar — must follow .mz-nav-inner's height, or it floats or overlaps. */
		position: absolute; inset-inline: 0; top: 106px; padding: 14px 24px 18px;
		background: oklch(0.19 0.03 255 / 0.98); border-bottom: 1px solid oklch(1 0 0 / 0.1);
	}
	.mz-nav-links.is-open a { width: 100%; padding: 10px 0; }
}
@media (max-width: 560px) {
	.mz-section { padding: 56px 0; }
	.mz-nav .mz-nav-cta { padding: 7px 12px; }
	.mz-nav-cta-free { display: none; }
	.mz-hero-owner { font-size: 12.5px; gap: 10px; }
	.mz-feat-grid { grid-template-columns: 1fr; }
	.mz-cta-band { padding: 26px 22px; }
	.mz-hero-art { min-height: 330px; }
	.mz-card-appt { width: 84%; }
	.mz-card-doc { width: 80%; top: 44%; }
	.mz-card-vitals { display: none; }
	.mz-search { flex-wrap: wrap; border-radius: 20px; }
	.mz-search input { min-width: 140px; }
	.mz-search .medazone-btn { width: 100%; }
}

/* ============================================================ empty clinic list
   Rendered by renderCentersGrid() in medazone-client.js when the platform has no clinics yet AND no
   filter is applied. This is the state a brand-new install sits in, on the most valuable band of the
   landing page, so it carries the invitation rather than an apology. A search that matched nothing
   still gets the plain "no results" line — that one really is a dead end. */
.medazone-empty-invite {
	grid-column: 1 / -1;
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
	padding: 54px 28px; border-radius: 20px;
	border: 1px dashed var(--m-border); background: var(--m-bg);
}
.medazone-empty-invite .ei-badge {
	width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
	background: oklch(0.70 0.16 258 / 0.14); color: var(--m-primary); margin-bottom: 4px;
}
.medazone-empty-invite .ei-title { font-size: 18px; font-weight: 800; }
.medazone-empty-invite .ei-sub { font-size: 13px; line-height: 1.8; color: var(--m-text-muted); max-width: 44ch; }
.medazone-empty-invite .ei-cta { margin-top: 12px; padding: 12px 30px; border-radius: 999px; font-size: 13px; }

/* Skip link — visually hidden until focused, then the first thing a keyboard user lands on. */
.mz-skip {
	position: absolute; inset-inline-start: -9999px; top: 10px; z-index: 100;
	background: var(--m-primary); color: oklch(0.18 0.03 255);
	padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 800;
}
.mz-skip:focus { inset-inline-start: 16px; }

@media (max-width: 560px) {
	.mz-nav-inner { height: 84px; }
	.mz-nav .mz-logo .medazone-logo-img { height: 52px; }
	.mz-nav-links.is-open { top: 84px; }
}