/* AAT World v3 — digital editions. Uses the site's tokens (red, ink, surface, line, radius, font), so it follows light and dark mode.
   Sizes are set for a 360px phone first: content fills the space, controls stay small. */

/* ---------- the main action: Visit website ---------- */
.mz-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding-block: 4px; padding-inline: 16px 5px; border-radius: 999px; background: var(--red); color: #fff; text-decoration: none; box-shadow: 0 10px 22px -12px rgba(213, 18, 27, .85); transition: transform .15s; text-align: start; }
.mz-cta:active { transform: scale(.96); }
.mz-cta span { min-width: 0; position: relative; z-index: 1; display: block; }
.mz-cta b { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.mz-cta small { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.3; opacity: .92; direction: ltr; unicode-bidi: isolate; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-cta i { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--red); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 16px; animation: mzNudge 1.6s ease-in-out infinite; }
.mz-cta::after { content: ""; position: absolute; top: -10%; left: -40%; width: 26%; height: 120%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); transform: skewX(-20deg); animation: mzSweep 3.8s ease-in-out infinite; }
.mz-cta.mz-sm { min-height: 36px; padding-inline: 12px 4px; } .mz-cta.mz-sm b { font-size: 12.5px; } .mz-cta.mz-sm small { font-size: 9.5px; } .mz-cta.mz-sm i { width: 26px; height: 26px; font-size: 13px; }
.mz-cta.mz-off { background: transparent; color: var(--ink); border: 1.5px dashed var(--muted); box-shadow: none; } .mz-cta.mz-off::after { display: none; }
.mz-cta.mz-lgc { min-height: 48px; min-width: 220px; }
@keyframes mzNudge { 50% { transform: translate(2px, -2px); } }
@keyframes mzSweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@keyframes mzIn { from { transform: translateX(var(--from, 30px)); opacity: 0; } }
@keyframes mzRise { from { transform: translateY(12px); opacity: 0; } }
@keyframes mzFloat { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }
@keyframes mzDrift { to { transform: translate(20px, 14px) scale(1.15); } }
@keyframes mzMq { to { transform: translateX(-50%); } }
@keyframes mzBob { 50% { transform: translate(-50%, -6px); } }

/* ---------- the moving picture of an ad ---------- */
.mz-media { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: color-mix(in srgb, var(--c, #888) 11%, #fff); color: #101012; }
.mz-media > img { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; opacity: 0; transform: scale(.94); transition: opacity .7s, transform 2.8s ease-out; }
.mz-media > img.on { opacity: 1; transform: scale(1.05); }
.mz-media.mz-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
.mz-media.mz-brand > img.mz-blogo { position: static; width: auto; height: auto; max-width: 62%; max-height: 52%; min-height: 0; opacity: 1; transform: none; mix-blend-mode: normal; background: #fff; border-radius: 12px; padding: 6px; box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--c, #888) 80%, #000); animation: mzFloat 5s ease-in-out infinite; }
.mz-lines { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-height: 40%; overflow: hidden; }
.mz-lines span { font-size: 10px; font-weight: 700; line-height: 1.2; padding: 3px 7px; border-radius: 999px; background: #fff; animation: mzRise .5s backwards; }
.mz-lg { flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; overflow: hidden; }
.mz-lg img { width: 84%; height: 84%; object-fit: contain; }
.mz-tag { align-self: flex-start; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--c, var(--red)); border-radius: 999px; padding: 3px 9px; }
.mz-tbar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; flex: 1; } .mz-tbar i { display: block; height: 100%; width: 0; background: var(--red); }

/* ---------- home: the advertiser comes first ---------- */
.mz-top { padding-block: 12px 4px; }
.mz-morerow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.mz-morerow a { font-weight: 700; font-size: 12px; color: var(--ink); text-decoration: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.mz-morerow a:hover { border-color: var(--red); color: var(--red-t); }
.mz-strip { padding-block: 0 14px; } .mz-strip .kick { margin: 0 0 8px; font-size: 11px; }
.mz-vers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mz-ver { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-decoration: none; color: var(--text); transition: transform .2s, border-color .2s; }
.mz-ver:hover { transform: translateY(-3px); border-color: var(--red); }
.mz-ver b { font-size: 14px; color: var(--ink); } .mz-ver small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.mz-sec { padding-block: 16px 36px; }

/* ---------- 1. spotlight ---------- */
.mz-spot { position: relative; display: flex; flex-direction: column; gap: 8px; }
.mz-spot-st { position: relative; touch-action: pan-y; }
.mz-spot-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); height: 300px; border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); background: var(--surface); animation: mzIn .4s var(--ease) both; }
.mz-blob { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: var(--c); opacity: .12; inset-inline-end: -70px; top: -90px; animation: mzDrift 9s ease-in-out infinite alternate; pointer-events: none; }
.mz-spot-pic { display: block; margin: 10px; border-radius: var(--r); overflow: hidden; min-height: 0; }
.mz-spot-info { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 18px 14px 6px; }
[dir="rtl"] .mz-spot-info { padding: 14px 6px 14px 18px; }
.mz-who { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.mz-who > span:last-child { min-width: 0; }
.mz-spot .mz-who .mz-lg { width: 84px; height: 84px; border-radius: 18px; box-shadow: 0 0 0 2px var(--c), 0 14px 24px -14px var(--c); }
.mz-who b { display: block; color: var(--ink); font-weight: 800; line-height: 1.15; }
.mz-spot .mz-who b { font-size: clamp(17px, 2.2vw, 25px); }
.mz-who small { display: block; color: var(--muted); font-size: 12.5px; }
.mz-spot-info p { margin: 0; font-size: 14.5px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.mz-acts { display: flex; gap: 8px; align-items: center; } .mz-acts .mz-cta { flex: 1; max-width: 300px; }
.mz-arr { position: absolute; top: 132px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.mz-arr.l { left: -8px; } .mz-arr.r { right: -8px; }
.mz-tline { display: flex; align-items: center; gap: 10px; } .mz-pos { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mz-wall { display: flex; flex-direction: column; gap: 6px; }
.mz-wrow { overflow: hidden; } .mz-wtrack { display: inline-flex; gap: 6px; animation: mzMq var(--t, 60s) linear infinite; }
.mz-wrow:nth-child(2) .mz-wtrack { animation-direction: reverse; }
.mz-tile { flex: none; width: 84px; height: 56px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s; }
.mz-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mz-tile.on { box-shadow: 0 0 0 2px var(--red); transform: scale(1.05); }

/* ---------- 2 and 3. reels ---------- */
html.mz-lock { overflow: hidden; }
.mz-reel { height: min(76vh, 720px); min-height: 440px; display: flex; justify-content: center; border-radius: calc(var(--r) + 4px); background: var(--soft); border: 1px solid var(--line); overflow: hidden; }
.mz-reel.mz-full { position: fixed; inset: 0; z-index: 70; height: auto; min-height: 0; border: 0; border-radius: 0; background: #0b0b0d; }
.mz-phone { position: relative; width: min(100%, 400px); height: 100%; background: #111; color: #fff; overflow: hidden; }
.mz-reel.mz-full .mz-phone { width: min(100%, 480px); }
.mz-feed { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.mz-feed::-webkit-scrollbar { display: none; }
.mz-slide { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: color-mix(in srgb, var(--c, #888) 11%, #fff); }
.mz-slide > .mz-media { position: absolute; inset: 0; background: transparent; }
.mz-slide > .mz-media > img { left: 6%; width: 88%; top: 15%; height: 48%; }
.mz-slide > .mz-media.mz-brand { padding: 70px 12% 46%; }
.mz-slide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(transparent, rgba(0, 0, 0, .78) 60%); pointer-events: none; }
.mz-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 10px; display: flex; flex-direction: column; gap: 6px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.mz-cap .mz-cta { text-shadow: none; }
.mz-cap .mz-who { gap: 8px; } .mz-cap .mz-who .mz-lg { width: 32px; height: 32px; border-radius: 50%; }
.mz-cap .mz-who b { color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mz-cap .mz-who small { color: #fff; opacity: .92; font-size: 10.5px; }
.mz-cap p { margin: 0; font-size: 12px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mz-rail { position: absolute; z-index: 3; inset-inline-end: 6px; bottom: 150px; display: flex; flex-direction: column; gap: 10px; }
.mz-rail a, .mz-rail button { display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 0; padding: 0; color: #fff; text-decoration: none; cursor: pointer; font: inherit; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
.mz-rail svg, .mz-fs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mz-rail small { font-size: 9.5px; font-weight: 700; }
.mz-rtop { position: absolute; z-index: 5; left: 0; right: 0; top: 0; padding: 6px 8px 14px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.mz-rtop > * { pointer-events: auto; } .mz-rtop .mz-tbar { flex: none; background: rgba(255, 255, 255, .35); } .mz-rtop .mz-tbar i { background: #fff; }
.mz-rrow { display: flex; align-items: center; gap: 8px; }
.mz-stories { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .mz-stories::-webkit-scrollbar { display: none; }
.mz-st { flex: none; width: 36px; height: 36px; padding: 2px; border-radius: 50%; border: 0; cursor: pointer; background: conic-gradient(#FCAF45, #F77737, #E1306C, #833AB4, #FCAF45); transition: transform .2s; }
.mz-st img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; background: #fff; border: 1.5px solid #fff; }
.mz-st.now { transform: scale(1.12); }
.mz-fs { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .mz-fs svg { width: 17px; height: 17px; }
.mz-hint { position: absolute; z-index: 6; left: 50%; top: 58px; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .6); border-radius: 999px; padding: 4px 10px; pointer-events: none; animation: mzBob 1.4s ease-in-out infinite; }
.mz-art { background: #111; } .mz-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mz-art .mz-cap h3 { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 800; color: #fff; } .mz-art .mz-cap p { -webkit-line-clamp: 3; }
.mz-art .mz-tag { background: #fff; color: #111; text-shadow: none; }
.mz-read { align-self: flex-start; min-height: 36px; padding: 0 18px; border-radius: 999px; background: #fff; color: #111; font-weight: 800; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; text-shadow: none; }
/* company guide */
.mz-g { display: flex; flex-direction: column; background: var(--surface); color: var(--text); } .mz-g::after { display: none; }
.mz-ban { flex: none; display: flex; align-items: center; gap: 12px; padding: 58px 12px 12px; color: #fff; text-decoration: none; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 78%, #0e1014) 0, var(--c) 60%, color-mix(in srgb, var(--c) 72%, #fff) 100%); }
.mz-ban .mz-lg { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .7); }
.mz-ban > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mz-ban b { font-size: 17px; font-weight: 800; line-height: 1.12; } .mz-ban small { font-size: 10.5px; font-weight: 600; opacity: .95; }
.mz-sub { flex: none; display: flex; justify-content: space-between; padding: 8px 12px 0; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mz-prow { flex: 1 1 0; min-height: 90px; display: flex; gap: 8px; overflow-x: auto; padding: 6px 12px; scrollbar-width: none; } .mz-prow::-webkit-scrollbar { display: none; }
.mz-pc { flex: none; width: 42%; max-width: 170px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); color: var(--ink); text-decoration: none; }
.mz-ph { flex: 1 1 0; min-height: 50px; background: color-mix(in srgb, var(--c) 10%, #fff); display: flex; padding: 6px; } .mz-ph img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mz-pc b { flex: none; padding: 6px 8px 7px; font-size: 11.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mz-pc.mz-ln { justify-content: center; padding: 8px; background: color-mix(in srgb, var(--c) 9%, var(--surface)); } .mz-pc.mz-ln em { font-style: normal; font-size: 22px; font-weight: 800; line-height: 1; color: var(--c); padding: 0 8px; } .mz-pc.mz-ln b { -webkit-line-clamp: 4; font-size: 13px; }
.mz-gabout { flex: none; padding: 4px 12px 0; display: flex; flex-direction: column; gap: 6px; }
.mz-gabout p { margin: 0; font-size: 12.5px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.mz-facts { display: flex; flex-wrap: wrap; gap: 4px; } .mz-facts span { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); user-select: text; }
.mz-gft { flex: none; display: flex; gap: 8px; align-items: center; padding: 8px 12px 10px; } .mz-gft .mz-cta { flex: 1; } .mz-gft .btn { min-height: 42px; padding: 6px 14px; font-size: 13px; }

/* ---------- 4. arcade ---------- */
.mz-souq { border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); background: var(--soft); overflow: hidden; }
.mz-street { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; } .mz-street::-webkit-scrollbar { display: none; }
.mz-lane { display: flex; gap: 12px; padding: 14px; width: max-content; height: 420px; box-sizing: border-box; }
.mz-store { flex: none; width: 236px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.mz-fascia { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--ink); color: var(--bg); border-top: 4px solid var(--c); text-decoration: none; }
.mz-fascia .mz-lg { width: 56px; height: 56px; } .mz-fascia > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mz-fascia small { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; opacity: .8; } .mz-fascia small:first-child { text-transform: uppercase; }
.mz-fascia b { font-size: 13.5px; line-height: 1.18; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mz-win { flex: 1 1 0; min-height: 60px; display: block; margin: 8px 8px 0; border-radius: 8px; overflow: hidden; }
.mz-base { flex: none; padding: 8px; }
.mz-edit { flex: none; width: 178px; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--ink); color: var(--bg); text-decoration: none; box-shadow: var(--shadow); }
.mz-eph { flex: 0 0 44%; overflow: hidden; } .mz-eph img { width: 100%; height: 100%; object-fit: cover; }
.mz-etx { flex: 1; min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.mz-etx small { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red-2); } .mz-etx b { font-size: 13.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } .mz-etx u { margin-top: auto; text-decoration: none; font-size: 12px; font-weight: 700; }
.mz-mini { position: relative; display: flex; gap: 2px; align-items: center; height: 20px; padding: 0 6px; background: var(--surface); border-top: 1px solid var(--line); cursor: pointer; }
.mz-mini i { flex: 1; height: 6px; border-radius: 1px; background: var(--red); } .mz-mini i.r { background: var(--muted); opacity: .5; }
.mz-mini u { position: absolute; top: 2px; width: 12px; height: 16px; border: 2px solid var(--ink); border-radius: 4px; pointer-events: none; }

/* ---------- 5. orbit ---------- */
.mz-orbit { position: relative; height: 460px; border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); background: var(--soft); overflow: hidden; touch-action: pan-y; user-select: none; }
.mz-ring { position: absolute; border: 1.5px dashed var(--line); border-radius: 50%; pointer-events: none; }
.mz-sun { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 0; z-index: 400; background: var(--red); color: #fff; font: inherit; font-weight: 800; font-size: 13px; line-height: 1.1; padding: 4px; cursor: pointer; box-shadow: 0 0 0 8px rgba(213, 18, 27, .14), 0 0 0 18px rgba(213, 18, 27, .06); }
.mz-sun small { display: block; font-size: 9.5px; font-weight: 600; }
.mz-bodies { position: absolute; inset: 0; }
.mz-b { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: none; cursor: pointer; will-change: transform; }
.mz-orb { display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; }
.mz-moon .mz-orb { width: 66px; height: 66px; background: #fff; box-shadow: 0 0 0 2.5px var(--c), 0 12px 20px -12px rgba(16, 16, 18, .6); } .mz-moon .mz-orb img { width: 78%; height: 78%; object-fit: contain; }
.mz-planet .mz-orb { width: 40px; height: 40px; background: radial-gradient(circle at 32% 26%, #fff 0, color-mix(in srgb, var(--c) 45%, #fff) 18%, var(--c) 60%, color-mix(in srgb, var(--c) 68%, #101012) 100%); box-shadow: 0 10px 16px -10px var(--c); }
.mz-planet .mz-orb b { background: rgba(255, 255, 255, .94); color: #101012; font-size: 11px; min-width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.mz-lbl { font-size: 10px; font-weight: 700; line-height: 1.15; max-width: 84px; text-align: center; background: color-mix(in srgb, var(--surface) 86%, transparent); border-radius: 6px; padding: 1px 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mz-oback { position: absolute; z-index: 500; top: 8px; inset-inline-start: 8px; min-height: 34px; padding: 4px 12px; font-size: 12.5px; background: var(--surface); }
.mz-otip { position: absolute; z-index: 450; left: 0; right: 0; bottom: 6px; margin: 0; text-align: center; font-size: 11px; color: var(--muted); pointer-events: none; }

/* ---------- 6. discover ---------- */
.mz-play { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: center; border: 1px solid var(--line); border-radius: calc(var(--r) + 4px); background: var(--surface); padding: 18px; }
.mz-wheelbox { position: relative; width: 100%; max-width: 250px; aspect-ratio: 1; margin-inline: auto; }
.mz-wheel { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--ink); box-shadow: var(--shadow); transition: transform 3.2s cubic-bezier(.12, .72, .1, 1); touch-action: none; direction: ltr; }
.mz-wl { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 6%; pointer-events: none; }
.mz-wl span { font-size: 9.5px; font-weight: 800; writing-mode: vertical-rl; color: #101012; background: rgba(255, 255, 255, .85); border-radius: 5px; padding: 2px 1px; max-height: 34%; overflow: hidden; }
.mz-pin { position: absolute; z-index: 3; left: 50%; top: -6px; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 18px solid var(--ink); }
.mz-spin { position: absolute; z-index: 3; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; border: 3px solid #fff; background: var(--red); color: #fff; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s; }
.mz-spin:active { transform: scale(.92); }
.mz-pright { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mz-result { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .mz-result b { font-size: 16px; font-weight: 800; color: #fff; background: var(--c); border-radius: 999px; padding: 4px 14px; animation: mzRise .35s; } .mz-result small { font-size: 12px; color: var(--muted); }
.mz-hand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mz-fc { perspective: 900px; height: 250px; min-width: 0; animation: mzRise .45s backwards; } .mz-fc:nth-child(2) { animation-delay: .08s; } .mz-fc:nth-child(3) { animation-delay: .16s; }
.mz-in { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); transform-style: preserve-3d; }
.mz-fc.flip .mz-in { transform: rotateY(180deg); }
.mz-bk, .mz-ft { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.mz-bk { display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); font-weight: 800; font-size: 22px; letter-spacing: .06em; }
.mz-ft { transform: rotateY(180deg); background: var(--surface); display: flex; flex-direction: column; gap: 6px; padding: 6px; box-shadow: var(--shadow); }
.mz-fpic { flex: 1 1 0; min-height: 50px; display: flex; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--c, #888) 11%, #fff); padding: 6px; } .mz-fpic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mz-fpic.mz-photo { padding: 0; } .mz-fpic.mz-photo img { object-fit: cover; mix-blend-mode: normal; }
.mz-fnm { flex: none; text-decoration: none; color: var(--ink); } .mz-fnm b { font-size: 12px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mz-ft .btn { min-height: 36px; padding: 4px 10px; font-size: 12.5px; }

/* ---------- phones ---------- */
@media (max-width: 900px) { .mz-vers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mz-play { grid-template-columns: minmax(0, 1fr); } .mz-wheelbox { max-width: 210px; } }
@media (max-width: 600px) {
  .mz-top { padding-block: 8px 0; }
  .mz-vers { display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; } .mz-ver { flex: none; width: 150px; padding: 8px 10px; } .mz-ver b { font-size: 13px; } .mz-ver small { font-size: 10.5px; }
  .mz-ph .lead { display: none; } .mz-ph { padding-block: 10px 6px; } .mz-sec { padding-block: 10px 24px; }
  .mz-spot-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: 138px auto; height: auto; }
  .mz-spot-pic { margin: 8px 8px 0; }
  .mz-spot-info, [dir="rtl"] .mz-spot-info { padding: 8px 10px 10px; gap: 7px; }
  .mz-spot .mz-who { gap: 9px; } .mz-spot .mz-who .mz-lg { width: 46px; height: 46px; border-radius: 11px; } .mz-spot .mz-who b { font-size: 15px; } .mz-who small { font-size: 11px; }
  .mz-spot-info p { font-size: 12.5px; -webkit-line-clamp: 2; }
  .mz-acts .btn { min-height: 42px; padding: 6px 12px; font-size: 13px; }
  .mz-arr { top: 60px; width: 30px; height: 30px; font-size: 16px; } .mz-arr.l { left: 2px; } .mz-arr.r { right: 2px; }
  .mz-tile { width: 62px; height: 42px; padding: 5px; border-radius: 8px; }
  .mz-morerow { font-size: 11px; } .mz-morerow a { font-size: 11px; padding: 3px 8px; }
  .mz-reel { height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 420px; border-radius: var(--r); } .mz-phone { width: 100%; }
  .mz-lane { height: 372px; padding: 10px; gap: 10px; } .mz-store { width: 196px; } .mz-fascia { padding: 8px; gap: 8px; } .mz-fascia .mz-lg { width: 44px; height: 44px; } .mz-fascia b { font-size: 12.5px; } .mz-edit { width: 150px; } .mz-etx b { font-size: 12.5px; }
  .mz-orbit { height: 400px; } .mz-moon .mz-orb { width: 54px; height: 54px; } .mz-planet .mz-orb { width: 34px; height: 34px; } .mz-sun { width: 70px; height: 70px; margin: -35px 0 0 -35px; font-size: 12px; } .mz-lbl { font-size: 9.5px; max-width: 70px; }
  .mz-play { padding: 12px; gap: 12px; } .mz-wheelbox { max-width: 180px; } .mz-spin { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 12.5px; }
  .mz-hand { gap: 6px; } .mz-fc { height: 196px; } .mz-ft { padding: 5px; gap: 4px; } .mz-fnm b { font-size: 11px; }
  .mz-hand .mz-cta.mz-sm { min-height: 32px; padding-inline: 9px 3px; } .mz-hand .mz-cta small { display: none; } .mz-hand .mz-cta b { font-size: 11px; } .mz-hand .mz-cta i { width: 24px; height: 24px; font-size: 12px; }
  .mz-cta.mz-lgc { min-width: 0; flex: 1 1 100%; }
}
@media (min-width: 901px) { .mz-cta { min-height: 46px; } .mz-cta b { font-size: 15px; } .mz-cta i { width: 36px; height: 36px; } .mz-cta.mz-sm { min-height: 38px; } .mz-cta.mz-sm b { font-size: 13px; } .mz-cta.mz-sm i { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .mz-cta i, .mz-cta::after, .mz-wtrack, .mz-blob, .mz-hint, .mz-spot-card, .mz-media.mz-brand > img.mz-blogo { animation: none !important; } .mz-wheel, .mz-in { transition: none !important; } }

/* fixes after looking at the pages */
.mz-nochat #chat .chat-b { display: none; }
@media (min-width: 901px) { .mz-m-guide .mz-phone { width: min(100%, 780px); } .mz-m-guide .mz-ban { padding: 62px 22px 18px; } .mz-m-guide .mz-ban .mz-lg { width: 96px; height: 96px; border-radius: 20px; } .mz-m-guide .mz-ban b { font-size: 28px; } .mz-m-guide .mz-ban small { font-size: 12.5px; } .mz-m-guide .mz-pc { width: 180px; } .mz-m-guide .mz-gabout p { font-size: 14.5px; } .mz-m-guide .mz-sub, .mz-m-guide .mz-prow, .mz-m-guide .mz-gabout, .mz-m-guide .mz-gft { padding-inline: 22px; } .mz-m-guide .mz-gft .mz-cta { max-width: 340px; } }
@media (max-width: 600px) { .iss-g > div { min-width: 0; } .iss-g .row .btn { white-space: normal; text-align: start; padding: 8px 14px; min-height: 40px; font-size: 13.5px; } }
html[lang="ar"] .mz-cta b { line-height: 1.5; } html[lang="ar"] .mz-cta { padding-block: 3px; }

/* ===== Wall: a trade hall, one room per industry ===== */
.mz-wall { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--line); border-radius: calc(var(--r) + 6px); background: var(--surface); --mx: 0; --my: 0; }
.mz-wbg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 44px 100%; opacity: .55; }
.mz-wbg i { position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .2; animation: mz-drift 18s ease-in-out infinite alternate; transform: translate(calc(var(--mx) * -30px), calc(var(--my) * -30px)); }
.mz-wbg i:nth-child(1) { background: var(--red); left: -6%; top: -8%; }
.mz-wbg i:nth-child(2) { background: #2563EB; right: -8%; top: 28%; animation-duration: 23s; animation-delay: -6s; }
.mz-wbg i:nth-child(3) { background: #E8890C; left: 28%; bottom: -14%; animation-duration: 27s; animation-delay: -11s; }
@keyframes mz-drift { from { translate: -6% -4%; scale: .9; } to { translate: 12% 8%; scale: 1.15; } }
.mz-wbar { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; padding: 12px 16px 10px; overflow-x: auto; scrollbar-width: none; } .mz-wbar::-webkit-scrollbar { display: none; }
.mz-wbar button { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1 var(--font); color: var(--ink); padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; }
.mz-wbar button:hover { border-color: var(--c); } .mz-wbar button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .mz-wbar button em { font-style: normal; font-weight: 600; color: var(--muted); }
.mz-wgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 18px; padding: 8px 20px 24px; }
.mz-room { grid-column: span 4; display: flex; flex-direction: column; border-radius: 18px; background: color-mix(in srgb, var(--c) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line)); box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--c) 70%, #000); animation: mz-win .6s var(--ease) both; animation-delay: var(--d); scroll-margin: 90px; }
.mz-r3 { grid-column: span 4; } .mz-r2 { grid-column: span 3; } .mz-r1 { grid-column: span 2; } .mz-r5 { grid-column: span 6; } .mz-r4 { grid-column: span 6; }
.mz-room.mz-ping { animation: mz-ping 1s ease; } @keyframes mz-ping { 30% { box-shadow: 0 0 0 4px var(--c); } }
@keyframes mz-win { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.mz-room header { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; }
.mz-room header i { width: 22px; height: 4px; border-radius: 4px; background: var(--c); }
.mz-room header b { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-room header em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--c); padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.mz-rin { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 14px; padding: 12px 16px 16px; align-content: center; }
.mz-wt { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid #e6e7ec; border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer; font: inherit; color: #15171c; box-shadow: 0 6px 16px -12px rgba(0,0,0,.35); transition: transform .3s var(--ease), box-shadow .3s; }
.mz-wt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.mz-wt.hot::after { transform: translateX(120%); transition: transform .9s ease; }
.mz-wt.hot, .mz-wt:hover, .mz-wt:focus-visible { transform: translateY(-4px); z-index: 2; box-shadow: 0 0 0 2px var(--c), 0 16px 28px -14px rgba(0,0,0,.4); outline: 0; }
.mz-wl { position: relative; display: block; height: 74px; } .mz-wl img { position: absolute; inset: 10px 12px; width: calc(100% - 24px); height: calc(100% - 20px); object-fit: contain; }
.mz-wn { display: flex; align-items: center; justify-content: center; padding: 8px; font-weight: 800; font-size: 12px; line-height: 1.15; text-align: center; }
.mz-wt > b { padding: 6px 8px 7px; border-top: 1px solid #eef0f3; background: #fafafb; font-size: 10.5px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the opened company: a sheet over the page */
.mz-wz { position: fixed; z-index: 80; inset: 0; margin: auto; width: min(100% - 24px, 860px); height: min(100% - 24px, 640px); border-radius: 16px; overflow: hidden; background: #fff; transform-origin: 0 0; transition: transform .34s var(--ease), opacity .3s; box-shadow: 0 0 0 100vmax rgba(10, 12, 16, .55), 0 30px 60px -20px rgba(0,0,0,.6); }
.mz-wz[hidden] { display: none; } html.mz-zopen { overflow: hidden; } html.mz-zopen #chat .chat-b { display: none; }
.mz-wx { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #d5d7dd; border-radius: 50%; background: #fff; color: #15171c; cursor: pointer; }
.mz-wx svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mz-wnav { flex: none; width: 36px; height: 36px; border: 1px solid #d5d7dd; border-radius: 50%; background: #fff; color: #15171c; font-size: 20px; line-height: 1; cursor: pointer; }
[dir="rtl"] .mz-wnav { transform: scaleX(-1); }
@media (max-width: 1000px) { .mz-room, .mz-r3, .mz-r4, .mz-r5 { grid-column: span 12; } .mz-r2, .mz-r1 { grid-column: span 6; } }
@media (max-width: 600px) {
  .mz-wall { border-radius: var(--r); } .mz-wbar { padding: 10px 10px 8px; } .mz-wbar button { font-size: 11px; padding: 6px 9px; }
  .mz-wgrid { gap: 12px; padding: 4px 10px 16px; } .mz-room { border-radius: 14px; } .mz-room header { padding: 10px 12px 2px; } .mz-room header b { font-size: 12px; }
  .mz-rin { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; padding: 10px 12px 12px; } .mz-wl { height: 56px; } .mz-wl img { inset: 7px 8px; width: calc(100% - 16px); height: calc(100% - 14px); } .mz-wt > b { font-size: 9px; padding: 4px 5px 5px; }
  .mz-r2 .mz-rin, .mz-r1 .mz-rin { grid-template-columns: 1fr; }
  .mz-wz { width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mz-room, .mz-wbg i { animation: none; } }

/* reels-first home: the feed is the page, as in a shorts app */
html.mz-h-guide .mz-top, html.mz-h-reels .mz-top { padding: 0; }
html.mz-h-guide .mz-top > .wrap, html.mz-h-reels .mz-top > .wrap { max-width: none; padding-inline: 0; }
html.mz-h-guide .mz-top .mz-reel:not(.mz-full), html.mz-h-reels .mz-top .mz-reel:not(.mz-full) { height: calc(100dvh - var(--hd)); min-height: 380px; border: 0; border-radius: 0; }
html.mz-h-guide .mz-top .mz-morerow, html.mz-h-reels .mz-top .mz-morerow { padding: 8px 16px; margin: 0; }

/* ===== Brand pages ===== */
.mz-bs { display: flex; flex-direction: column; padding-top: 50px; background: #fff; color: #15171c; font-family: var(--font); --a: #333; --b: #111; --on: #fff; }
.mz-bs::after { display: none; } .mz-bs.mz-bw { padding-top: 0; height: 100%; }
.mz-bs button { font: inherit; cursor: pointer; }
.mz-bnav { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: #fff; border-bottom: 2px solid var(--a); }
.mz-blg { flex: none; display: flex; align-items: center; height: 24px; max-width: 30%; padding: 0; border: 0; background: none; color: var(--a); font-weight: 800; font-size: 11px; }
.mz-blg img { max-height: 100%; max-width: 100%; object-fit: contain; }
.mz-bnav > div { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .mz-bnav > div::-webkit-scrollbar { display: none; }
.mz-bnav > div > button { flex: none; padding: 5px 6px; border: 0; border-radius: 6px; background: none; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #2a2d34; white-space: nowrap; }
.mz-bnav > div > button.on { background: var(--a); color: var(--on); }
.mz-bnav .mz-wx { width: 24px; height: 24px; } .mz-bnav .mz-wx svg { width: 12px; height: 12px; }
.mz-bbody { position: relative; flex: 1 1 0; min-height: 0; }
.mz-bpane { position: absolute; inset: 0; display: none; flex-direction: column; overflow-y: auto; scrollbar-width: none; } .mz-bpane::-webkit-scrollbar { display: none; }
.mz-bpane.on { display: flex; animation: mz-pin .28s var(--ease); } @keyframes mz-pin { from { opacity: 0; transform: translateY(8px); } }
.mz-bhero { position: relative; flex: none; display: flex; align-items: stretch; gap: 10px; padding: 10px; min-height: 132px; overflow: hidden; isolation: isolate; }
[dir="rtl"] .mz-bhero { flex-direction: row; }
.mz-bpat { position: absolute; inset: 0; z-index: -1; }
.mz-btx { flex: 1 1 56%; min-width: 0; align-self: center; }
.mz-btx small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a); margin-bottom: 2px; }
.mz-btx h3 { margin: 0; font-family: var(--f), var(--font); font-size: 15px; line-height: 1.12; font-weight: 800; color: #15171c; }
.mz-btx p { margin: 4px 0 0; font-size: 10px; line-height: 1.35; color: #4a4e57; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mz-bwin { flex: 0 0 40%; position: relative; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 10px 22px -16px rgba(0,0,0,.55); }
.mz-bwin .mz-media { position: absolute; inset: 0; background: #fff; }
.mz-bset { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); background: color-mix(in srgb, var(--a) 8%, #fff); }
.mz-bset i { display: flex; align-items: center; padding: 0 8px; font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 1.15; color: #15171c; border-inline-start: 3px solid var(--a); border-bottom: 1px solid #fff; }
.mz-bset i:nth-child(even) { border-inline-start-color: var(--b); }
.mz-btick { flex: none; overflow: hidden; background: var(--a); color: var(--on); }
.mz-btick > div { display: flex; width: max-content; animation: mz-tick 24s linear infinite; }
.mz-btick span { flex: none; padding: 3px 10px; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .mz-btick span::after { content: "◆"; margin-inline-start: 20px; opacity: .6; font-size: 6px; }
@keyframes mz-tick { to { transform: translateX(-50%); } }
.mz-bsec { padding: 8px 10px; } .mz-bsec h4 { margin: 0 0 6px; font-family: var(--f), var(--font); font-size: 14px; font-weight: 800; color: var(--a); }
.mz-bsec p { margin: 0 0 6px; font-size: 11px; line-height: 1.45; color: #3a3e47; } .mz-bsec p:empty { display: none; }
.mz-bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mz-bp { display: flex; flex-direction: column; border: 1px solid #e4e5ea; border-radius: 8px; overflow: hidden; background: #fff; color: #15171c; }
.mz-bp img { width: 100%; height: 56px; object-fit: contain; background: #fff; } .mz-bp b { padding: 2px 5px 4px; font-size: 9px; line-height: 1.2; height: 25px; overflow: hidden; }
.mz-bch { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.mz-bch span { padding: 4px 8px; border-radius: 7px; font-size: 10px; font-weight: 600; line-height: 1.25; color: #15171c; background: color-mix(in srgb, var(--a) 8%, #fff); border: 1px solid color-mix(in srgb, var(--a) 22%, #e4e5ea); }
.mz-bnum em { font-style: normal; font-weight: 800; color: var(--a); margin-inline-end: 5px; }
.mz-bcon { display: grid; gap: 5px; } .mz-bcon > * { display: block; padding: 6px 9px; border: 1px solid #e4e5ea; border-radius: 8px; font-size: 11px; font-weight: 700; color: #15171c; text-decoration: none; direction: ltr; text-align: start; } .mz-bcon small { display: block; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--a); }
.mz-bft { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; border-top: 1px solid #eceef2; }
.mz-bft .mz-cta { flex: 1; background: var(--a); color: var(--on); box-shadow: 0 8px 18px -12px var(--a); } .mz-bft .mz-cta i { color: var(--a); } .mz-bft .mz-cta.mz-off { background: transparent; color: #15171c; }
.mz-bmore { flex: none; font-size: 11px; font-weight: 700; color: #15171c; text-decoration: none; padding: 7px 10px; border: 1px solid #d5d7dd; border-radius: 999px; }
.mz-bft .mz-wnav { width: 28px; height: 28px; font-size: 16px; }
.mz-L0 .mz-bnav { background: var(--a); border: 0; } .mz-L0 .mz-bnav > div > button { color: var(--on); } .mz-L0 .mz-bnav > div > button.on { background: #fff; color: var(--a); } .mz-L0 .mz-blg { background: #fff; border-radius: 5px; padding: 2px 5px; }
.mz-L0 .mz-bpat { background: radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--a) 20%, #fff), #fff 62%); }
.mz-L1 .mz-bpat { background: linear-gradient(135deg, var(--a), var(--b)); } .mz-L1 .mz-bpat::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.2px) 0 0 / 11px 11px; animation: mz-pan 30s linear infinite; }
.mz-L1 .mz-btx h3, .mz-L1 .mz-btx small { color: var(--on); } .mz-L1 .mz-btx p { color: var(--on); opacity: .9; } @keyframes mz-pan { to { background-position: 110px 55px; } }
.mz-L2 { background: #0f1115; color: #e9ebf0; } .mz-L2 .mz-bnav { background: #0f1115; border-color: #262a33; } .mz-L2 .mz-bnav > div > button { color: #d7dae1; } .mz-L2 .mz-blg { background: #fff; border-radius: 5px; padding: 2px 5px; }
.mz-L2 .mz-bpat { background: repeating-linear-gradient(90deg, transparent 0 29px, rgba(255,255,255,.05) 29px 30px), linear-gradient(#0f1115, #171a21); }
.mz-L2 .mz-btx h3 { color: #fff; text-transform: uppercase; } .mz-L2 .mz-btx p, .mz-L2 .mz-bsec p { color: #aab0bc; } .mz-L2 .mz-btx small, .mz-L2 .mz-bsec h4, .mz-L2 .mz-bcon small { color: color-mix(in srgb, var(--a) 65%, #fff); }
.mz-L2 .mz-bp, .mz-L2 .mz-bcon > * { background: #171a21; border-color: #2a2f3a; color: #e9ebf0; } .mz-L2 .mz-bch span { background: #171a21; border-color: #2a2f3a; color: #e9ebf0; } .mz-L2 .mz-bmore { color: #e9ebf0; border-color: #3a3f4b; } .mz-L2 .mz-bft { border-color: #262a33; }
.mz-L3 .mz-bpat { background: linear-gradient(100deg, var(--a) 0 54%, color-mix(in srgb, var(--a) 10%, #fff) 54.3%); } .mz-L3 .mz-btx h3, .mz-L3 .mz-btx small, .mz-L3 .mz-btx p { color: var(--on); } .mz-L3 .mz-btx h3 { text-transform: uppercase; } .mz-L3 .mz-bnav { border-bottom-width: 0; box-shadow: 0 1px 0 #e4e5ea; }
.mz-L4 { background: color-mix(in srgb, var(--a) 6%, #fff); } .mz-L4 .mz-bnav { margin: 5px 6px 0; border: 0; border-radius: 999px; box-shadow: 0 5px 14px -10px rgba(0,0,0,.4); padding-inline: 10px; }
.mz-L4 .mz-bpat { background: radial-gradient(circle at 10% 110%, color-mix(in srgb, var(--b) 24%, transparent), transparent 55%), radial-gradient(circle at 96% 6%, color-mix(in srgb, var(--a) 22%, transparent), transparent 50%); }
.mz-L4 .mz-btx h3 { color: color-mix(in srgb, var(--b) 70%, #15171c); } .mz-L4 .mz-bwin { border-radius: 16px; } .mz-L4 .mz-btick { margin-inline: 8px; border-radius: 999px; }
html.mz-h-brand .mz-top { padding: 0; } html.mz-h-brand .mz-top > .wrap { max-width: none; padding-inline: 0; }
html.mz-h-brand .mz-top .mz-reel:not(.mz-full) { height: calc(100dvh - var(--hd)); min-height: 400px; border: 0; border-radius: 0; }
html.mz-h-brand .mz-top .mz-morerow { padding: 8px 16px; margin: 0; }
.mz-m-brand .mz-st { width: 30px; height: 30px; }
@media (min-width: 901px) {
  .mz-m-brand .mz-phone, .mz-m-brand.mz-mount .mz-reel.mz-full .mz-phone { width: min(100%, 820px); }
  .mz-m-brand .mz-bhero, .mz-bw .mz-bhero { min-height: 230px; padding: 18px 22px; gap: 20px; }
  .mz-m-brand .mz-btx h3, .mz-bw .mz-btx h3 { font-size: 26px; } .mz-m-brand .mz-btx p, .mz-bw .mz-btx p { font-size: 12.5px; } .mz-m-brand .mz-btx small, .mz-bw .mz-btx small { font-size: 10px; }
  .mz-m-brand .mz-bnav, .mz-bw .mz-bnav { padding: 6px 18px; } .mz-m-brand .mz-blg, .mz-bw .mz-blg { height: 34px; } .mz-m-brand .mz-bnav > div > button, .mz-bw .mz-bnav > div > button { font-size: 11px; padding: 6px 9px; } .mz-m-brand .mz-bnav > div, .mz-bw .mz-bnav > div { justify-content: flex-end; }
  .mz-m-brand .mz-bgrid, .mz-bw .mz-bgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mz-m-brand .mz-bp img, .mz-bw .mz-bp img { height: 70px; } .mz-m-brand .mz-bp b, .mz-bw .mz-bp b { font-size: 10px; height: 28px; }
  .mz-m-brand .mz-bsec, .mz-m-brand .mz-bft, .mz-bw .mz-bsec, .mz-bw .mz-bft { padding-inline: 22px; } .mz-m-brand .mz-bft .mz-cta, .mz-bw .mz-bft .mz-cta { max-width: 300px; }
  .mz-m-brand .mz-bch span, .mz-bw .mz-bch span { font-size: 11.5px; } .mz-m-brand .mz-bsec p, .mz-bw .mz-bsec p { font-size: 13px; } .mz-m-brand .mz-bset i, .mz-bw .mz-bset i { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mz-btick > div, .mz-L1 .mz-bpat::after, .mz-bpane.on { animation: none; } }
.mz-bsec h5 { margin: 10px 0 5px; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6b7080; } .mz-bsec .mz-babt { margin-top: 9px; } .mz-bcon { margin-bottom: 2px; }
.mz-L2 .mz-bsec h5 { color: #8a90a0; }
.mz-blg { height: 32px; max-width: 34%; } .mz-bname { align-self: center; font-size: 11px; font-weight: 800; color: #15171c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mz-L0 .mz-bname { color: var(--on); } .mz-L2 .mz-bname { color: #fff; }
.mz-bnone { font-style: italic; color: #6b7080 !important; }
@media (min-width: 901px) { .mz-m-brand .mz-blg, .mz-bw .mz-blg { height: 44px; } }
.mz-blg { height: 32px; max-width: 34%; } .mz-bname { align-self: center; font-size: 11px; font-weight: 800; color: #15171c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mz-L0 .mz-bname { color: var(--on); } .mz-L2 .mz-bname { color: #fff; }
.mz-bnone { font-style: italic; color: #6b7080 !important; }
@media (min-width: 901px) { .mz-m-brand .mz-blg, .mz-bw .mz-blg { height: 44px; } }
/* reel smoothness: sideways mode, and only the slides near the screen do any work */
.mz-dirb { font-size: 16px; font-weight: 700; line-height: 1; }
.mz-feed { -webkit-overflow-scrolling: touch; }
.mz-feed.mz-h { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; direction: ltr; }
.mz-feed.mz-h > .mz-slide { flex: none; width: 100%; direction: var(--mzdir, ltr); }
.mz-feed > .mz-slide { contain: layout paint style; transform: translateZ(0); }
.mz-feed > .mz-slide:not(.mz-cur) *, .mz-feed > .mz-slide:not(.mz-cur) *::before, .mz-feed > .mz-slide:not(.mz-cur) *::after { animation-play-state: paused !important; }
.mz-feed > .mz-slide:not(.mz-cur) > * { visibility: hidden; }
.mz-bpane { overscroll-behavior: auto; }
.mz-room header b { white-space: normal; line-height: 1.2; }
/* ===== Reels shelf ===== */
.mz-shelf header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mz-sico { width: 26px; height: 26px; border-radius: 8px; background: var(--red); display: grid; place-items: center; } .mz-sico svg { width: 15px; height: 15px; fill: #fff; }
.mz-shelf header b { flex: 1; font-size: 18px; font-weight: 800; color: var(--ink); }
.mz-shelf header button { font: 700 12.5px/1 var(--font); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.mz-srow { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; } .mz-srow::-webkit-scrollbar { display: none; }
.mz-sc { position: relative; flex: none; width: 190px; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; scroll-snap-align: start; font: inherit; text-align: start; color: #fff; background: linear-gradient(160deg, var(--a, #444), var(--b, #111)); transition: transform .25s var(--ease); }
.mz-sc:hover { transform: translateY(-3px); }
.mz-sc::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.78)); pointer-events: none; }
.mz-scp { position: absolute; inset: 10px 10px 34%; border-radius: 10px; background: #fff; overflow: hidden; } .mz-scp img { width: 100%; height: 100%; object-fit: contain; }
.mz-scl { position: absolute; inset: 14px 10px auto; display: grid; gap: 6px; } .mz-scl i { font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1.2; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.16); border-inline-start: 3px solid #fff; }
.mz-scg { position: absolute; z-index: 1; inset-inline-start: 10px; bottom: 54px; width: 64px; height: 34px; border-radius: 7px; background: #fff; display: grid; place-items: center; padding: 3px 5px; box-shadow: 0 6px 14px -8px #000; } .mz-scg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mz-sct { position: absolute; z-index: 1; inset: auto 10px 9px; display: block; } .mz-sct b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 700; line-height: 1.2; } .mz-sct small { display: block; margin-top: 2px; font-size: 10.5px; opacity: .85; }
.mz-sca { background: #111; } .mz-scb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mz-sct em { display: inline-block; margin-bottom: 4px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: #fff; color: #111; } .mz-sca .mz-sct b { -webkit-line-clamp: 3; }
.mz-shelfreel > .mz-reel { display: none; }
.mz-reel.mz-m-brand.mz-full .mz-phone { width: min(100%, 520px); }
html.mz-h-shelf .mz-top { padding-block: 14px 6px; }
@media (max-width: 600px) { .mz-sc { width: 42vw; max-width: 176px; border-radius: 12px; } .mz-shelf header b { font-size: 16px; } .mz-scg { width: 54px; height: 28px; bottom: 50px; } .mz-sct b { font-size: 11.5px; } }
.mz-scg { bottom: 70px; } @media (max-width: 600px) { .mz-scg { bottom: 64px; } }

/* ===== the logo as live outlines ===== */
.mz-lgo { display: block; overflow: visible; } .mz-lgo use { fill: #EC1D25; } .mz-lt { fill: none; stroke: #fff; opacity: .62; }
.hd-brand .mz-lgo { height: auto; max-width: 100%; }
.mz-lband { animation: mzLband 4.6s ease-in-out 1s infinite both; } @keyframes mzLband { 0%, 34% { transform: translateX(0); opacity: 1; } 82%, 100% { transform: translateX(250px); opacity: 1; } }
#intro .in-logo { display: block; width: 172px; background: #fff; border-radius: 12px; padding: 9px 14px; margin-bottom: 4px; box-shadow: 0 14px 40px -18px rgba(236,29,37,.7); } #intro .in-logo svg { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .mz-lband { animation: none; opacity: 0; } }
.mz-scg { bottom: 84px; } @media (max-width: 600px) { .mz-scg { bottom: 80px; } }
.mz-feed > .mz-slide.mz-cur > * { visibility: visible; }
/* free, fast swiping: no snapping on the shelf, nothing inside a reel that traps the finger */
.mz-srow { scroll-snap-type: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.mz-sc { scroll-snap-align: none; contain: layout paint style; transform: translateZ(0); }
@media (hover: none) { .mz-sc, .mz-sc:hover { transition: none; transform: translateZ(0); } }
.mz-feed:not(.mz-h) .mz-bpane[data-p="-1"] { overflow: hidden; }
.mz-feed { touch-action: pan-y; } .mz-feed.mz-h { touch-action: pan-x; }
.mz-feed:not(.mz-h) .mz-bnav > div, .mz-feed:not(.mz-h) .mz-stories { touch-action: pan-x; }

/* ===== opening screen ===== */
#intro { overflow: hidden; } #intro > div { position: relative; z-index: 1; }
.in-bg { position: absolute; left: 50%; top: 47%; width: min(92vw, 1100px); transform: translate(-50%, -50%); overflow: visible; }
.in-bg path { fill: #EC1D25; fill-opacity: 0; stroke: #EC1D25; stroke-opacity: .34; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; transition: fill-opacity .7s ease, stroke-opacity .7s ease; }
#intro.in-land .in-bg path { fill-opacity: .07; stroke-opacity: .2; }
#intro.in-go .in-bg { animation: mzInDrift 2.6s ease-out both; } @keyframes mzInDrift { from { transform: translate(-50%, -50%) scale(1.06); } to { transform: translate(-50%, -50%) scale(1); } }
.in-roll { display: inline-flex; direction: ltr; } .idg { display: inline-block; height: 1.02em; line-height: 1.02; overflow: hidden; }
.idg > span { display: flex; flex-direction: column; animation: mzInRoll 1.05s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .12s + .12s); } .idg i { height: 1.02em; font-style: normal; }
@keyframes mzInRoll { from { transform: translateY(.6em); opacity: 0; } 12% { opacity: 1; } to { transform: translateY(calc(var(--d) * -1.02em)); opacity: 1; } }
#intro .in-n .idg, #intro .in-n .idg span { font-size: inherit; font-weight: inherit; padding: 0; color: inherit; }
#intro.in-go .in-n > span { animation: mzInSide .6s cubic-bezier(.2, .9, .3, 1) .55s both; } @keyframes mzInSide { from { opacity: 0; transform: translateX(-14px); } }
#intro.in-go .in-s { animation: mzInUp .55s ease .8s both; } #intro.in-go .in-t { animation: mzInUp .55s ease .95s both; } @keyframes mzInUp { from { opacity: 0; transform: translateY(10px); } }
#intro.in-land .in-n b { animation: mzInLand .7s cubic-bezier(.2, .9, .3, 1) both; } @keyframes mzInLand { 0% { transform: scale(1); text-shadow: 0 0 0 rgba(236,29,37,0); } 40% { transform: scale(1.07); text-shadow: 0 0 34px rgba(236,29,37,.75); } 100% { transform: scale(1); text-shadow: 0 0 14px rgba(236,29,37,.3); } }
/* ===== hero number ===== */
.yrs[data-mz] { position: relative; isolation: isolate; } .yrs[data-mz]:not(.mz-go) .dg > span { animation-play-state: paused; }
.yrs[data-mz]::before { content: attr(data-n); position: absolute; z-index: -1; inset-inline-start: -.06em; top: 50%; font-size: clamp(150px, 24vw, 320px); line-height: 1; font-weight: 800; letter-spacing: -.05em; color: var(--red); opacity: 0; transform: translateY(-50%) scale(.92); transition: opacity 1.4s ease .5s, transform 1.8s cubic-bezier(.2, .8, .2, 1) .3s; pointer-events: none; direction: ltr; }
.yrs.mz-go::before { opacity: .055; transform: translateY(-50%) scale(1); }
.yrs.mz-go .yrs-n { animation: mzYrsLand .8s cubic-bezier(.2, .9, .3, 1) 1.5s both; } @keyframes mzYrsLand { 40% { transform: scale(1.06); text-shadow: 0 0 26px color-mix(in srgb, var(--red) 60%, transparent); } }
.yrs.mz-go .yrs-w { animation: mzInSide .6s cubic-bezier(.2, .9, .3, 1) .7s both; } .yrs.mz-go .yrs-s { animation: mzInUp .6s ease 1s both; }
@media (prefers-reduced-motion: reduce) { .yrs[data-mz]::before { transition: none; } }
.hero { overflow-x: clip; }
#intro.in-go .in-logo { animation: mzInUp .55s cubic-bezier(.2,.9,.3,1) both; } #intro.in-go .in-n b { animation: mzInNum .9s cubic-bezier(.2,.9,.3,1) .1s both; } @keyframes mzInNum { from { opacity: 0; transform: scale(.86); } }
#intro.in-land .in-n b { animation: mzInLand .7s cubic-bezier(.2,.9,.3,1) both; }
#intro .in-logo { display: none; }
.in-bg path { stroke-opacity: .5; } #intro.in-land .in-bg path { fill-opacity: .1; stroke-opacity: .32; }
.mz-dirb[hidden] { display: none; } .mz-feed { will-change: transform; }

/* ===== page ambience: slow colour that drifts behind the content ===== */
#app { position: relative; isolation: isolate; }
#app::before { content: ""; position: fixed; inset: -18%; z-index: -1; pointer-events: none; background: radial-gradient(38% 34% at 16% 18%, rgba(236, 29, 37, .13), transparent 70%), radial-gradient(34% 32% at 88% 26%, rgba(37, 99, 235, .10), transparent 70%), radial-gradient(40% 36% at 62% 88%, rgba(232, 137, 12, .12), transparent 70%), radial-gradient(30% 30% at 30% 70%, rgba(13, 148, 136, .08), transparent 70%); animation: mzAmb 26s ease-in-out infinite alternate; will-change: transform; }
:root[data-theme="dark"] #app::before { background: radial-gradient(38% 34% at 16% 18%, rgba(236, 29, 37, .22), transparent 70%), radial-gradient(34% 32% at 88% 26%, rgba(59, 130, 246, .16), transparent 70%), radial-gradient(40% 36% at 62% 88%, rgba(245, 158, 11, .13), transparent 70%), radial-gradient(30% 30% at 30% 70%, rgba(20, 184, 166, .12), transparent 70%); }
@keyframes mzAmb { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(3%, 2%, 0) rotate(5deg) scale(1.1); } 100% { transform: translate3d(-1%, 4%, 0) rotate(-4deg) scale(1.05); } }
/* ===== the 45: a livelier red, and its echo sits exactly behind it ===== */
.yrs-n { color: #F01826; filter: drop-shadow(0 8px 22px rgba(240, 24, 38, .3)); position: relative; }
.yrs[data-mz]::before { content: none; }
.yrs-n[data-n]::after { content: attr(data-n); position: absolute; z-index: -1; left: 50%; top: 50%; font: inherit; letter-spacing: -.05em; line-height: 1; color: #F01826; opacity: 0; transform: translate(-50%, -50%) scale(1.5); transition: opacity 1.4s ease .5s, transform 1.8s cubic-bezier(.2, .8, .2, 1) .3s; pointer-events: none; }
.yrs.mz-go .yrs-n[data-n]::after { opacity: .1; transform: translate(-50%, -50%) scale(2.05); }
#intro .in-n b { color: #FF2634; text-shadow: 0 0 30px rgba(255, 38, 52, .35); }
/* ===== map labels: one design for all three regions ===== */
.tm-lb rect, .tm-lb.ar rect, .tm-lb.hub rect { fill: #EC1D25; stroke: none; }
/* ===== full-screen reel: fills the whole page on a computer, and a clear way out ===== */
.mz-reel.mz-full .mz-fs[data-mz="full"] { width: auto; height: 38px; padding: 0 14px 0 11px; gap: 7px; border-radius: 999px; background: #fff; color: #111; font: 800 13px/1 var(--font); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.mz-reel.mz-full .mz-fs[data-mz="full"]::after { content: attr(aria-label); } .mz-reel.mz-full .mz-fs[data-mz="full"] svg { width: 15px; height: 15px; stroke-width: 2.6; }
@media (min-width: 901px) {
  .mz-reel.mz-m-brand.mz-full .mz-phone, .mz-reel.mz-full .mz-phone { width: 100%; }
  .mz-reel.mz-full .mz-bhero { min-height: 46vh; padding: 3vh 6vw; gap: 4vw; } .mz-reel.mz-full .mz-btx h3 { font-size: clamp(30px, 3.6vw, 58px); } .mz-reel.mz-full .mz-btx p { font-size: clamp(14px, 1.2vw, 18px); max-width: 60ch; } .mz-reel.mz-full .mz-btx small { font-size: 12px; }
  .mz-reel.mz-full .mz-bnav { padding: 10px 6vw; } .mz-reel.mz-full .mz-blg { height: 52px; } .mz-reel.mz-full .mz-bnav > div > button { font-size: 13px; padding: 8px 12px; }
  .mz-reel.mz-full .mz-bsec, .mz-reel.mz-full .mz-bft { padding-inline: 6vw; } .mz-reel.mz-full .mz-bp img { height: 13vh; } .mz-reel.mz-full .mz-bp b { font-size: 12px; height: 34px; } .mz-reel.mz-full .mz-btick span { font-size: 11px; padding: 6px 16px; }
  .mz-reel.mz-full .mz-bsec p { font-size: 15px; max-width: 80ch; } .mz-reel.mz-full .mz-bch span { font-size: 13px; padding: 6px 11px; } .mz-reel.mz-full .mz-bsec h4 { font-size: 22px; }
  .mz-reel.mz-full .mz-art .mz-cap { max-width: 900px; padding-inline: 6vw; } .mz-reel.mz-full .mz-art h3 { font-size: clamp(26px, 3vw, 44px); }
  .mz-reel.mz-full .mz-st { width: 44px; height: 44px; }
}
/* ===== product reels ===== */
.mz-ps { display: flex; flex-direction: column; padding-top: 52px; color: #fff; background: radial-gradient(120% 70% at 50% 42%, color-mix(in srgb, var(--a) 46%, #0b0c10), #0b0c10 78%); }
.mz-ps::after { display: none; }
.mz-phd { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 14px 4px; }
.mz-plg { flex: none; width: 74px; height: 38px; border-radius: 9px; background: #fff; display: grid; place-items: center; padding: 4px 6px; box-shadow: 0 8px 22px -10px #000; } .mz-plg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mz-phd span { min-width: 0; display: flex; flex-direction: column; } .mz-phd b { font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mz-phd small { font-size: 10.5px; opacity: .8; }
.mz-rw { position: relative; flex: 1 1 0; min-height: 0; display: grid; place-items: center; perspective: 1100px; perspective-origin: 50% 46%; overflow: hidden; cursor: pointer; }
.mz-rglow { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 85%, #fff) 0, color-mix(in srgb, var(--a) 60%, transparent) 38%, transparent 70%); opacity: .45; filter: blur(14px); animation: mzRg 3.2s ease-in-out infinite; }
@keyframes mzRg { 50% { transform: scale(1.1); opacity: .6; } }
.mz-rfloor { position: absolute; left: 12%; right: 12%; bottom: 9%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); filter: blur(6px); }
.mz-ring { position: relative; width: min(62vw, 46vh, 300px); aspect-ratio: 1; transform-style: preserve-3d; }
.mz-ri { position: absolute; inset: 0; transform-style: preserve-3d; backface-visibility: hidden; }
.mz-rc { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 22px; background: #fff; overflow: hidden; opacity: .28; transform: scale(.8); transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.mz-ri.on .mz-rc { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 46px color-mix(in srgb, var(--a) 80%, #fff), 0 30px 50px -22px #000; }
.mz-rc img { width: 88%; height: 88%; object-fit: contain; } .mz-rc b { padding: 14px; text-align: center; font-size: 19px; font-weight: 800; line-height: 1.2; color: color-mix(in srgb, var(--a) 70%, #111); }
.mz-pft { flex: none; padding: 6px 14px 12px; display: grid; gap: 8px; }
.mz-pnfo em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: color-mix(in srgb, var(--a) 55%, #fff); } .mz-pnfo b { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mz-pnfo p { margin: 4px 0 0; font-size: 12px; line-height: 1.4; opacity: .82; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mz-pnfo.sw > * { animation: mzInUp .4s cubic-bezier(.2, .9, .3, 1) both; } .mz-pnfo.sw b { animation-delay: .05s; } .mz-pnfo.sw p { animation-delay: .1s; }
.mz-pmt { display: flex; align-items: center; gap: 8px; } .mz-pmt .mz-cta { flex: 1; background: var(--a); color: var(--on); } .mz-pmt .mz-cta i { color: var(--a); }
.mz-pcat { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); font-size: 11.5px; font-weight: 700; } .mz-pcat i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--a) 60%, #fff); }
@media (min-width: 901px) { .mz-reel.mz-full .mz-ring { width: min(34vw, 52vh, 460px); } .mz-reel.mz-full .mz-phd { padding: 10px 6vw; } .mz-reel.mz-full .mz-plg { width: 120px; height: 56px; } .mz-reel.mz-full .mz-phd b { font-size: 22px; } .mz-reel.mz-full .mz-phd small { font-size: 13px; }
  .mz-reel.mz-full .mz-pft { padding: 10px 6vw 22px; grid-template-columns: 1fr auto; align-items: end; gap: 24px; } .mz-reel.mz-full .mz-pnfo b { font-size: 28px; } .mz-reel.mz-full .mz-pnfo p { font-size: 15px; max-width: 70ch; } .mz-reel.mz-full .mz-pmt .mz-cta { min-width: 300px; } .mz-reel.mz-full .mz-rc b { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { #app::before, .mz-rglow { animation: none; } }
.mz-hint { top: auto; bottom: 96px; }
.mz-m-prod .mz-hint { bottom: 196px; } @media (min-width: 901px) { .mz-m-prod .mz-hint { bottom: 46%; left: auto; right: 4vw; transform: none; } }

/* logos always fit their plate */
.mz-scg, .mz-plg, .mz-blg, .mz-wzl { position: relative; }
.mz-scg img, .mz-plg img { position: absolute; inset: 4px 6px; width: calc(100% - 12px); height: calc(100% - 8px); max-width: none; max-height: none; object-fit: contain; }
.mz-blg img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
/* the big faint 45 stands on the right of the first page, not behind the number */
.yrs-n[data-n]::after, .yrs.mz-go .yrs-n[data-n]::after { content: none; }
.hero { position: relative; isolation: isolate; }
.hero[data-n]::after { content: attr(data-n); position: absolute; z-index: -1; inset-inline-end: -1.5%; top: 50%; transform: translateY(-50%); font-size: clamp(250px, 40vw, 640px); line-height: .8; font-weight: 800; letter-spacing: -.06em; color: #F01826; opacity: .07; pointer-events: none; direction: ltr; animation: mzGhost 9s ease-in-out infinite alternate; }
@keyframes mzGhost { from { transform: translateY(-50%) scale(1); } to { transform: translateY(-52%) scale(1.05); } }
/* product ring: smooth, and it can be held */
.mz-ring, .mz-ri { will-change: transform; } .mz-rw { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-y; } .mz-rc img { pointer-events: none; -webkit-user-drag: none; }
.mz-ps.mz-hold .mz-ri.on .mz-rc { transform: scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 70px color-mix(in srgb, var(--a) 90%, #fff), 0 30px 50px -22px #000; }
.mz-ps.mz-hold .mz-pnfo p { -webkit-line-clamp: 6; } .mz-ps.mz-hold .mz-pnfo b { -webkit-line-clamp: 4; } .mz-ps.mz-hold .mz-rglow { animation-play-state: paused; opacity: .8; }
.mz-ps .mz-pft { transition: transform .3s cubic-bezier(.2,.8,.2,1); } .mz-ps.mz-hold .mz-pft { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .hero[data-n]::after { animation: none; } }
.hero[data-n]::after { opacity: .09; } @media (max-width: 900px) { .hero[data-n]::after { top: 24%; font-size: 62vw; opacity: .08; } }

/* one calm move: the next product arrives from the right and settles; the card in front simply comes forward */
.mz-rc { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease; transform: scale(.84); opacity: .3; }
.mz-ri.on .mz-rc { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 34px color-mix(in srgb, var(--a) 70%, #fff), 0 26px 44px -22px #000; }
/* page background: line icons of business, trade and publishing */
body::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22380%22 height=%22390%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate%2822 22%29 rotate%28-4 17 17%29%22%3E%3Cpath d=%22M0 30h34M5 30V20h5v10M14 30V13h5v17M23 30V6h5v24M3 12l9-7 6 4 10-8M24 1h4v4%22/%3E%3C/g%3E%3Cg transform=%22translate%28150 14%29 rotate%286 17 17%29%22%3E%3Cpath d=%22M17 7C13 4 7 3 1 4v24c6-1 12 0 16 3 4-3 10-4 16-3V4c-6-1-12 0-16 3zM17 7v24M5 10h8M5 15h8M5 20h8M21 10h8M21 15h8M21 20h8%22/%3E%3C/g%3E%3Cg transform=%22translate%28282 26%29 rotate%28-8 17 17%29%22%3E%3Cpath d=%22M17 2a11 11 0 0 0-6 20v4h12v-4a11 11 0 0 0-6-20zM12 30h10M14 34h6M17 14v8M13 14h8%22/%3E%3C/g%3E%3Cg transform=%22translate%2888 96%29 rotate%28-7 17 17%29%22%3E%3Crect x=%220%22 y=%229%22 width=%2234%22 height=%2222%22 rx=%223%22/%3E%3Cpath d=%22M11 9V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4M0 19h34M15 17h4v4h-4z%22/%3E%3C/g%3E%3Cg transform=%22translate%28214 92%29 rotate%280 17 17%29%22%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%2215%22/%3E%3Cpath d=%22M2 17h30M17 2c-7 8-7 22 0 30M17 2c7 8 7 22 0 30M5 9h24M5 25h24%22/%3E%3C/g%3E%3Cg transform=%22translate%28316 138%29 rotate%288 17 17%29%22%3E%3Cpath d=%22M3 13v8h5l14 8V5L8 13zM8 21l2 9h4l-2-8M26 12c3 2 3 8 0 10M30 8c5 4 5 14 0 18%22/%3E%3C/g%3E%3Cg transform=%22translate%2826 170%29 rotate%280 17 17%29%22%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%2215%22/%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%229%22/%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%223%22/%3E%3Cpath d=%22M17 17L31 3M27 3h4v4%22/%3E%3C/g%3E%3Cg transform=%22translate%28142 176%29 rotate%28-6 17 17%29%22%3E%3Crect x=%221%22 y=%224%22 width=%2226%22 height=%2228%22 rx=%222%22/%3E%3Cpath d=%22M27 10h5v19a3 3 0 0 1-6 0M6 10h16v7H6zM6 22h16M6 27h10%22/%3E%3C/g%3E%3Cg transform=%22translate%28250 196%29 rotate%286 17 17%29%22%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%2215%22/%3E%3Cpath d=%22M21 12c-1-2-7-3-8 0s7 4 8 7-7 4-9 1M17 7v20%22/%3E%3C/g%3E%3Cg transform=%22translate%2870 258%29 rotate%287 17 17%29%22%3E%3Cpath d=%22M5 1h17l8 8v24H5zM22 1v8h8M10 15h14M10 20h14M10 25h9%22/%3E%3C/g%3E%3Cg transform=%22translate%28184 272%29 rotate%28-5 17 17%29%22%3E%3Crect x=%221%22 y=%226%22 width=%2232%22 height=%2222%22 rx=%222%22/%3E%3Cpath d=%22M1 8l16 12L33 8%22/%3E%3C/g%3E%3Cg transform=%22translate%28296 268%29 rotate%280 17 17%29%22%3E%3Ccircle cx=%2217%22 cy=%229%22 r=%226%22/%3E%3Cpath d=%22M4 32c0-8 5-13 13-13s13 5 13 13%22/%3E%3Ccircle cx=%2229%22 cy=%2211%22 r=%224%22/%3E%3Ccircle cx=%225%22 cy=%2211%22 r=%224%22/%3E%3C/g%3E%3Cg transform=%22translate%2810 330%29 rotate%28-6 17 17%29%22%3E%3Crect x=%222%22 y=%225%22 width=%2230%22 height=%2227%22 rx=%223%22/%3E%3Cpath d=%22M2 12h30M10 2v6M24 2v6M8 18h4M15 18h4M22 18h4M8 24h4M15 24h4%22/%3E%3C/g%3E%3Cg transform=%22translate%28120 338%29 rotate%284 17 17%29%22%3E%3Cpath d=%22M1 12l7-4 8 3 3-2 7 1 7 3v10l-5 1-7 6-4-2-3 1-5-5-8-2zM16 11l-5 6c2 2 5 1 7-1l3 1 7 7%22/%3E%3C/g%3E%3Cg transform=%22translate%28232 340%29 rotate%288 17 17%29%22%3E%3Cpath d=%22M0 30h34M5 30V20h5v10M14 30V13h5v17M23 30V6h5v24M3 12l9-7 6 4 10-8M24 1h4v4%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 380px 390px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22380%22 height=%22390%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate%2822 22%29 rotate%28-4 17 17%29%22%3E%3Cpath d=%22M0 30h34M5 30V20h5v10M14 30V13h5v17M23 30V6h5v24M3 12l9-7 6 4 10-8M24 1h4v4%22/%3E%3C/g%3E%3Cg transform=%22translate%28150 14%29 rotate%286 17 17%29%22%3E%3Cpath d=%22M17 7C13 4 7 3 1 4v24c6-1 12 0 16 3 4-3 10-4 16-3V4c-6-1-12 0-16 3zM17 7v24M5 10h8M5 15h8M5 20h8M21 10h8M21 15h8M21 20h8%22/%3E%3C/g%3E%3Cg transform=%22translate%28282 26%29 rotate%28-8 17 17%29%22%3E%3Cpath d=%22M17 2a11 11 0 0 0-6 20v4h12v-4a11 11 0 0 0-6-20zM12 30h10M14 34h6M17 14v8M13 14h8%22/%3E%3C/g%3E%3Cg transform=%22translate%2888 96%29 rotate%28-7 17 17%29%22%3E%3Crect x=%220%22 y=%229%22 width=%2234%22 height=%2222%22 rx=%223%22/%3E%3Cpath d=%22M11 9V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4M0 19h34M15 17h4v4h-4z%22/%3E%3C/g%3E%3Cg transform=%22translate%28214 92%29 rotate%280 17 17%29%22%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%2215%22/%3E%3Cpath d=%22M2 17h30M17 2c-7 8-7 22 0 30M17 2c7 8 7 22 0 30M5 9h24M5 25h24%22/%3E%3C/g%3E%3Cg transform=%22translate%28316 138%29 rotate%288 17 17%29%22%3E%3Cpath d=%22M3 13v8h5l14 8V5L8 13zM8 21l2 9h4l-2-8M26 12c3 2 3 8 0 10M30 8c5 4 5 14 0 18%22/%3E%3C/g%3E%3Cg transform=%22translate%2826 170%29 rotate%280 17 17%29%22%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%2215%22/%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%229%22/%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%223%22/%3E%3Cpath d=%22M17 17L31 3M27 3h4v4%22/%3E%3C/g%3E%3Cg transform=%22translate%28142 176%29 rotate%28-6 17 17%29%22%3E%3Crect x=%221%22 y=%224%22 width=%2226%22 height=%2228%22 rx=%222%22/%3E%3Cpath d=%22M27 10h5v19a3 3 0 0 1-6 0M6 10h16v7H6zM6 22h16M6 27h10%22/%3E%3C/g%3E%3Cg transform=%22translate%28250 196%29 rotate%286 17 17%29%22%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%2215%22/%3E%3Cpath d=%22M21 12c-1-2-7-3-8 0s7 4 8 7-7 4-9 1M17 7v20%22/%3E%3C/g%3E%3Cg transform=%22translate%2870 258%29 rotate%287 17 17%29%22%3E%3Cpath d=%22M5 1h17l8 8v24H5zM22 1v8h8M10 15h14M10 20h14M10 25h9%22/%3E%3C/g%3E%3Cg transform=%22translate%28184 272%29 rotate%28-5 17 17%29%22%3E%3Crect x=%221%22 y=%226%22 width=%2232%22 height=%2222%22 rx=%222%22/%3E%3Cpath d=%22M1 8l16 12L33 8%22/%3E%3C/g%3E%3Cg transform=%22translate%28296 268%29 rotate%280 17 17%29%22%3E%3Ccircle cx=%2217%22 cy=%229%22 r=%226%22/%3E%3Cpath d=%22M4 32c0-8 5-13 13-13s13 5 13 13%22/%3E%3Ccircle cx=%2229%22 cy=%2211%22 r=%224%22/%3E%3Ccircle cx=%225%22 cy=%2211%22 r=%224%22/%3E%3C/g%3E%3Cg transform=%22translate%2810 330%29 rotate%28-6 17 17%29%22%3E%3Crect x=%222%22 y=%225%22 width=%2230%22 height=%2227%22 rx=%223%22/%3E%3Cpath d=%22M2 12h30M10 2v6M24 2v6M8 18h4M15 18h4M22 18h4M8 24h4M15 24h4%22/%3E%3C/g%3E%3Cg transform=%22translate%28120 338%29 rotate%284 17 17%29%22%3E%3Cpath d=%22M1 12l7-4 8 3 3-2 7 1 7 3v10l-5 1-7 6-4-2-3 1-5-5-8-2zM16 11l-5 6c2 2 5 1 7-1l3 1 7 7%22/%3E%3C/g%3E%3Cg transform=%22translate%28232 340%29 rotate%288 17 17%29%22%3E%3Cpath d=%22M0 30h34M5 30V20h5v10M14 30V13h5v17M23 30V6h5v24M3 12l9-7 6 4 10-8M24 1h4v4%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 380px 390px repeat; background: var(--ink); opacity: .08; }

/* reel cards: picture on top, then the logo directly above the company name */
.mz-sct .mz-scg { position: relative; inset: auto; bottom: auto; display: block; width: 62px; height: 30px; margin-bottom: 6px; }
.mz-scp { inset: 10px 10px 43%; } .mz-scl { inset: 12px 10px 43%; align-content: start; overflow: hidden; }
.mz-sc::after { inset: 52% 0 0; }
@media (max-width: 600px) { .mz-sct .mz-scg { width: 54px; height: 26px; margin-bottom: 5px; } .mz-scp { inset: 8px 8px 45%; } .mz-scl { inset: 10px 8px 45%; } }

/* ───────── living background: drifting trade icons over a coloured wash ───────── */
#mz-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html.mz-bgon body::before { display: none; }
html.mz-bgon, html.mz-bgon body { background: #FBF8F4; }
html.mz-bgon body { background: linear-gradient(165deg, #FFF3EE 0%, #FBFAF8 30%, #EEF4FC 62%, #FFF5E4 100%) fixed; }
html.mz-bgon[data-theme="dark"], html.mz-bgon[data-theme="dark"] body { background: #0C0C10; }
html.mz-bgon[data-theme="dark"] body { background: linear-gradient(165deg, #1E0B10 0%, #0D0D12 32%, #0A1424 66%, #1C1408 100%) fixed; }
#app::before { background: radial-gradient(38% 34% at 16% 18%, rgba(236, 29, 37, .20), transparent 70%), radial-gradient(34% 32% at 88% 26%, rgba(37, 99, 235, .16), transparent 70%), radial-gradient(40% 36% at 62% 88%, rgba(232, 137, 12, .18), transparent 70%), radial-gradient(30% 30% at 30% 70%, rgba(13, 148, 136, .13), transparent 70%); }
:root[data-theme="dark"] #app::before { background: radial-gradient(38% 34% at 16% 18%, rgba(236, 29, 37, .34), transparent 70%), radial-gradient(34% 32% at 88% 26%, rgba(59, 130, 246, .26), transparent 70%), radial-gradient(40% 36% at 62% 88%, rgba(245, 158, 11, .20), transparent 70%), radial-gradient(30% 30% at 30% 70%, rgba(20, 184, 166, .18), transparent 70%); }
html.mz-bgon .sec.alt { background: color-mix(in srgb, var(--soft) 50%, transparent); }

/* trade map: routes that come, travel and leave */
.live-k { display: none; }
.mz-rt { opacity: 0; transition: opacity 1.5s ease; } .mz-rt.in { opacity: 1; }
.mz-ra { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2.3s cubic-bezier(.4, 0, .2, 1); }
.mz-rt.in .mz-ra, .mz-rt.out .mz-ra { stroke-dashoffset: 0; }
.mz-rg { fill: none; stroke: #FF4A52; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 18 100; stroke-dashoffset: 18; filter: drop-shadow(0 0 3px rgba(255, 90, 97, .9)); animation: mzRun var(--t, 4s) cubic-bezier(.45, .05, .35, 1) 2.2s 3 both; }
@keyframes mzRun { 0% { stroke-dashoffset: 18; stroke: #FF3B42; } 55% { stroke: #fff; } 100% { stroke-dashoffset: -100; stroke: #FF8A90; } }
.mz-re { fill: #fff; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.mz-rt.in .mz-re.a, .mz-rt.out .mz-re { transform: scale(1); } .mz-rt.in .mz-re.b { transform: scale(1); transition-delay: 2s; }
.mz-rr { fill: none; stroke: #FF6A70; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: mzRip var(--t, 4s) ease-out 2.2s 3 both; }
@keyframes mzRip { 0%, 78% { opacity: 0; transform: scale(.6); } 82% { opacity: .9; } 100% { opacity: 0; transform: scale(4.2); } }
@media (prefers-reduced-motion: reduce) { .mz-rg, .mz-rr { animation: none; display: none; } .mz-rt, .mz-ra, .mz-re { transition: none; } }

/* product reels: only the product in view, no halo; everything leads to the advertiser's website */
.mz-rglow, .mz-rfloor { display: none !important; }
.mz-ri .mz-rc { opacity: 0; transform: scale(.92); box-shadow: none; transition: opacity .32s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.mz-ri.on .mz-rc, .mz-ps.mz-hold .mz-ri.on .mz-rc { opacity: 1; transform: scale(1); box-shadow: 0 24px 46px -24px rgba(0, 0, 0, .8); }
.mz-ps.mz-hold .mz-ri.on .mz-rc { transform: scale(1.05); }
.mz-slide[data-w]:not([data-w=""]) .mz-rw, .mz-slide[data-w]:not([data-w=""]) .mz-pnfo, .mz-slide[data-w]:not([data-w=""]) .mz-phd, .mz-slide[data-w]:not([data-w=""]) .mz-bp, .mz-slide.mz-art { cursor: pointer; }
.mz-lt { opacity: .8; } .mz-lband { display: none; }

/* product reels: flat, calm change (old one leaves to the left, new one arrives from the right); the picture always fits its space */
.mz-ps .mz-rw { perspective: none; container-type: size; overflow: visible; }
.mz-ps .mz-ring { transform: none !important; width: min(88cqw, 88cqh); will-change: auto; }
.mz-ps .mz-ri { transform: none !important; backface-visibility: visible; }
.mz-ps .mz-ri .mz-rc { opacity: 0; transform: translate3d(34%, 0, 0) scale(.96); transition: none; box-shadow: none; }
.mz-ps .mz-ri.was .mz-rc { opacity: 0; transform: translate3d(-30%, 0, 0) scale(.96); transition: opacity .42s ease, transform .6s cubic-bezier(.4, 0, .2, 1); }
.mz-ps .mz-ri.on .mz-rc, .mz-ps.mz-hold .mz-ri.on .mz-rc { opacity: 1; transform: none; box-shadow: 0 24px 46px -24px rgba(0, 0, 0, .8); transition: opacity .5s ease .08s, transform .7s cubic-bezier(.16, .84, .3, 1) .04s; }
.mz-ps.mz-hold .mz-ri.on .mz-rc { transform: scale(1.04); }
.mz-ps .mz-ri.on .mz-rc img { animation: mzPz 3.6s ease-out both; } @keyframes mzPz { from { transform: scale(.93); } to { transform: scale(1); } }
html[dir="rtl"] .mz-ps .mz-ri .mz-rc { transform: translate3d(-34%, 0, 0) scale(.96); } html[dir="rtl"] .mz-ps .mz-ri.was .mz-rc { transform: translate3d(30%, 0, 0) scale(.96); } html[dir="rtl"] .mz-ps .mz-ri.on .mz-rc { transform: none; }
@media (prefers-reduced-motion: reduce) { .mz-ps .mz-ri .mz-rc { transition: none !important; } .mz-ps .mz-ri.on .mz-rc img { animation: none; } }
/* PC: details on the reading side, product on the other */
@media (min-width: 901px) {
  .mz-ps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "hd rw" "ft rw"; column-gap: 3vw; padding: 76px 6vw 30px; }
  .mz-ps .mz-phd, .mz-reel.mz-full .mz-ps .mz-phd { grid-area: hd; padding: 0; } .mz-ps .mz-rw { grid-area: rw; min-height: 0; }
  .mz-ps .mz-pft, .mz-reel.mz-full .mz-ps .mz-pft { grid-area: ft; align-self: center; padding: 0; grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .mz-ps .mz-plg { width: 120px; height: 56px; } .mz-ps .mz-phd b { font-size: 22px; white-space: normal; } .mz-ps .mz-phd small { font-size: 13px; }
  .mz-ps .mz-pnfo em { font-size: 12px; } .mz-ps .mz-pnfo b { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.12; -webkit-line-clamp: 4; margin-top: 8px; }
  .mz-ps .mz-pnfo p { font-size: 16px; line-height: 1.55; -webkit-line-clamp: 6; margin-top: 12px; max-width: 52ch; }
  .mz-ps .mz-pmt { flex-wrap: wrap; } .mz-ps .mz-pmt .mz-cta { flex: 0 1 320px; min-width: 260px; }
  .mz-ps .mz-ring, .mz-reel.mz-full .mz-ps .mz-ring { width: min(92cqw, 92cqh, 620px); }
}
.mz-ps .mz-ring { border: 0; border-radius: 0; pointer-events: auto; }

/* header: very small while scrolling, kept until the map has passed; then on PC the logo floats alone */
#hdr .hd, #hdr .mz-lgo, #hdr .hd-nav a, #hdr .hd-adv { transition: height .45s var(--ease), max-width .55s var(--ease), width .45s var(--ease), padding .45s var(--ease), font-size .35s, min-height .45s, border-radius .45s, box-shadow .4s; }
html.mz-tiny #hdr { padding-top: 6px; }
html.mz-tiny #hdr .hd, html.mz-tiny #hdr.scrolled .hd { height: 40px; max-width: 980px; border-radius: 12px; padding-inline: 12px 6px; gap: 8px; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .35); }
html.mz-tiny #hdr .mz-lgo { height: 22px; width: 66px; }
html.mz-tiny #hdr .hd-nav a { font-size: 12.5px; padding: 5px 8px; }
html.mz-tiny #hdr .hd-adv { min-height: 28px; padding: 3px 12px; font-size: 12px; }
html.mz-tiny #hdr .hd-act button, html.mz-tiny #hdr .hd-act .btn { transform: scale(.9); }
html:not(.mz-past) #hdr.hide { transform: none; }
html:not(.mz-past).hdr-off { --hd: 56px; }
#mz-flogo { position: fixed; z-index: 39; top: 10px; inset-inline-start: clamp(10px, 1.6vw, 20px); display: none; align-items: center; padding: 7px 12px 6px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--line); box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(-14px) scale(.9); pointer-events: none; transition: opacity .35s ease, transform .5s var(--ease); }
@media (min-width: 901px) { #mz-flogo { display: inline-flex; } html.mz-float #mz-flogo { opacity: 1; transform: none; pointer-events: auto; } #mz-flogo:hover { transform: translateY(-2px); } }
#mz-top { position: fixed; z-index: 45; bottom: 20px; inset-inline-end: 18px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); cursor: pointer; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .45s var(--ease), background-color .2s, color .2s; }
html.mz-totop #mz-top { opacity: 1; transform: none; pointer-events: auto; } #mz-top:hover { background: #EC1D25; color: #fff; border-color: #EC1D25; }
#mz-top:focus-visible, #mz-flogo:focus-visible { outline: 2px solid #EC1D25; outline-offset: 2px; }
html.mz-tiny #hdr .hd, html.mz-tiny #hdr.scrolled .hd { max-width: 1090px; } html.mz-tiny #hdr .hd-nav a { font-size: 12.5px; padding: 5px 7px; }

/* exhibitions: rows respond to the pointer */
#app a.er { position: relative; overflow: hidden; transition: transform .35s var(--ease), border-color .25s, box-shadow .35s, background-color .25s; }
#app a.er::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: #EC1D25; transform: scaleY(0); transform-origin: center; transition: transform .35s var(--ease); }
#app a.er .er-d { transition: transform .4s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s; } #app a.er .er-b b { transition: color .2s; } #app a.er .er-n { transition: transform .35s var(--ease); }
@media (hover: hover) {
  #app a.er:hover { transform: translateY(-3px); border-color: #EC1D25; box-shadow: 0 16px 30px -20px rgba(236, 29, 37, .55); background: color-mix(in srgb, #EC1D25 4%, var(--surface)); }
  #app a.er:hover::before { transform: scaleY(1); }
  #app a.er:hover .er-d { transform: scale(1.08) rotate(-4deg); box-shadow: 0 8px 16px -8px rgba(236, 29, 37, .7); }
  #app a.er:hover .er-b b { color: #EC1D25; } #app a.er:hover .er-n { transform: translateX(4px); } html[dir="rtl"] #app a.er:hover .er-n { transform: translateX(-4px); }
}
#app a.er:active { transform: scale(.985); }

/* product reel: two quiet links — all products of the company, and all reels of the industry */
.mz-pall { display: inline-flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; } .mz-pall span { font-size: 11px; font-weight: 700; opacity: .75; border-bottom: 1px solid rgba(255, 255, 255, .35); transition: opacity .2s, border-color .2s; } .mz-pall:hover span { opacity: 1; border-color: #fff; }
a.mz-pcat { color: #fff; text-decoration: none; cursor: pointer; transition: background-color .2s, transform .25s var(--ease); } a.mz-pcat:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
@media (min-width: 901px) { .mz-ps .mz-pall span { font-size: 13px; } }
.mz-ps { cursor: pointer; }
/* reels page: every reel of an industry, filters on top */
.mz-grid .mz-shelf > header { display: none; }
.mz-grid .mz-srow { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mz-grid .mz-sc { width: auto; max-width: none; }
.mz-rtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .mz-rtabs::-webkit-scrollbar { display: none; } .mz-rtabs .tab { white-space: nowrap; } .mz-rtabs .tab small { opacity: .6; font-weight: 600; margin-inline-start: 2px; }
.mz-allp { font-weight: 700; color: var(--red-t, #EC1D25); text-decoration: none; } .mz-allp:hover { text-decoration: underline; }
/* rows that drift by themselves must not snap */
#app .ind { scroll-snap-type: none; grid-auto-columns: 250px; scrollbar-width: none; } #app .ind::-webkit-scrollbar { display: none; } #app .ind-c { scroll-snap-align: none; }

/* advertisers on reading pages */
article.rd { position: relative; }
.mz-arail { position: absolute; top: clamp(20px, 3vw, 40px); bottom: 20px; width: 176px; } .mz-arail > div { position: sticky; top: 76px; display: grid; gap: 16px; }
.mz-arail-l { inset-inline-start: max(16px, calc(50% - 400px - 216px)); } .mz-arail-r { inset-inline-end: max(16px, calc(50% - 400px - 216px)); }
.mz-slot { transition: opacity .5s ease, transform .5s var(--ease); } .mz-slot.mz-sw { opacity: 0; transform: translateY(8px) scale(.98); }
.mz-ad { position: relative; display: grid; gap: 8px; padding: 10px; border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 26px -20px rgba(0, 0, 0, .45); transition: transform .35s var(--ease), box-shadow .35s, border-color .25s; animation: mzAdIn .6s var(--ease) both; }
@keyframes mzAdIn { from { opacity: 0; transform: translateY(10px); } }
.mz-ad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%); transform: translateX(-120%); animation: mzAdSh 7s ease-in-out 2s infinite; pointer-events: none; }
@keyframes mzAdSh { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.mz-ad:hover { transform: translateY(-3px); border-color: var(--a); box-shadow: 0 18px 34px -20px color-mix(in srgb, var(--a) 70%, #000); }
.mz-adl { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } html[lang="ar"] .mz-adl { letter-spacing: 0; font-size: 11px; }
.mz-adp { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; }
.mz-adp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; opacity: 0; animation: mzAdPic calc(var(--n) * 4s) ease-in-out calc(var(--k) * 4s) infinite; }
.mz-adp img:only-child { opacity: 1; animation: mzAdZoom 9s ease-in-out infinite alternate; }
@keyframes mzAdPic { 0% { opacity: 0; transform: scale(1.04); } 6%, 28% { opacity: 1; transform: scale(1); } 36%, 100% { opacity: 0; transform: scale(.98); } }
.mz-adp img:nth-last-child(2):first-child, .mz-adp img:nth-last-child(2):first-child ~ img { animation-name: mzAdPic2; } @keyframes mzAdPic2 { 0% { opacity: 0; } 8%, 46% { opacity: 1; } 56%, 100% { opacity: 0; } }
.mz-adp img:nth-last-child(3):first-child, .mz-adp img:nth-last-child(3):first-child ~ img { animation-name: mzAdPic3; } @keyframes mzAdPic3 { 0% { opacity: 0; } 7%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes mzAdZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.mz-adg { display: grid; place-items: center; height: 40px; padding: 4px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--line); } .mz-adg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mz-adt { display: grid; gap: 2px; min-width: 0; } .mz-adt b { font-size: 13px; line-height: 1.25; font-weight: 800; } .mz-adt i { font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.mz-adc { justify-self: start; font-size: 11.5px; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: var(--a); color: #fff; }
/* look 2: dark card in the advertiser's colours */
.mz-ad-card { background: linear-gradient(160deg, color-mix(in srgb, var(--a) 62%, #101014), #101014 75%); color: #fff; border-color: transparent; } .mz-ad-card .mz-adl, .mz-ad-card .mz-adt i { color: rgba(255, 255, 255, .72); }
.mz-ad-card .mz-adc { background: #fff; color: #111; } .mz-ad-card .mz-adp { aspect-ratio: 4 / 3; }
.mz-ad-np.mz-ad-tower .mz-adg, .mz-ad-np.mz-ad-card .mz-adg { height: 84px; }
/* look 3: slim banner between paragraphs */
.mz-slot-strip, .prose > .mz-slot-card { margin-block: 6px; }
.mz-ad-strip { grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 16px 10px 8px; border-inline-start: 3px solid var(--a); }
.mz-ad-strip .mz-adl { position: absolute; top: 3px; inset-inline-start: 12px; font-size: 8.5px; } .mz-ad-strip .mz-adg { height: 38px; } .mz-ad-strip .mz-adc { justify-self: end; }
.prose > .mz-slot-card .mz-ad { grid-template-columns: 110px minmax(0, 1fr); grid-template-areas: "l l" "p g" "p t" "p c"; column-gap: 12px; align-items: center; } .prose > .mz-slot-card .mz-adl { grid-area: l; } .prose > .mz-slot-card .mz-adp { grid-area: p; aspect-ratio: 1; } .prose > .mz-slot-card .mz-adg { grid-area: g; justify-self: start; } .prose > .mz-slot-card .mz-adt { grid-area: t; } .prose > .mz-slot-card .mz-adc { grid-area: c; }
.prose > .mz-slot-card .mz-ad-np { grid-template-columns: 1fr; grid-template-areas: "l" "g" "t" "c"; }
@media (max-width: 420px) { .mz-ad-strip { grid-template-columns: 64px minmax(0, 1fr); } .mz-ad-strip .mz-adc { display: none; } }
@media (prefers-reduced-motion: reduce) { .mz-ad, .mz-ad::after, .mz-adp img { animation: none; } .mz-adp img:first-child { opacity: 1; } }
.mz-arail { z-index: 2; } .mz-adg img { height: 30px; width: auto; max-width: 100%; max-height: none; } .mz-ad-np.mz-ad-tower .mz-adg img, .mz-ad-np.mz-ad-card .mz-adg img { height: 62px; } .mz-ad-strip .mz-adg img { height: 28px; }
.mz-ad > * { position: relative; min-width: 0; } .mz-adt b { overflow-wrap: anywhere; }

/* ads, second pass: the product leads, the text says what is sold, sizes are generous */
.mz-adx { display: grid; gap: 5px; min-width: 0; align-content: center; justify-items: start; }
.mz-adk { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--a); } html[lang="ar"] .mz-adk { letter-spacing: 0; font-size: 12px; }
.mz-adh { font-size: 14px; line-height: 1.3; font-weight: 800; color: inherit; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mz-adco { display: flex; align-items: center; gap: 6px; min-width: 0; } .mz-adco img { height: 18px; width: auto; max-width: 54px; object-fit: contain; background: #fff; border-radius: 3px; padding: 1px 2px; } .mz-adco i { font-style: normal; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-adpl img { position: static; opacity: 1; animation: none; padding: 14px; }
.mz-ad-card .mz-adk { color: color-mix(in srgb, var(--a) 45%, #fff); } .mz-ad-card .mz-adco i { color: rgba(255, 255, 255, .75); }
.mz-ad-strip, .prose > .mz-slot-card .mz-ad, .rd-w > .mz-slot-card .mz-ad { grid-template-columns: minmax(116px, 38%) minmax(0, 1fr); grid-template-areas: "l l" "p x"; gap: 6px 14px; padding: 10px 12px 12px; align-items: center; border-inline-start: 3px solid var(--a); }
.mz-ad-strip .mz-adl, .prose > .mz-slot-card .mz-adl { position: static; grid-area: l; font-size: 9.5px; } .mz-ad-strip .mz-adp, .prose > .mz-slot-card .mz-adp { grid-area: p; aspect-ratio: 1; } .mz-ad-strip .mz-adx, .prose > .mz-slot-card .mz-adx { grid-area: x; }
.mz-ad-strip .mz-adh, .prose > .mz-slot-card .mz-adh { font-size: 16px; } .mz-ad-strip .mz-adc { display: inline-block; justify-self: start; margin-top: 2px; }
.prose > .mz-slot-card .mz-ad-np, .mz-ad-strip.mz-ad-np { grid-template-columns: minmax(116px, 38%) minmax(0, 1fr); grid-template-areas: "l l" "p x"; }
@media (min-width: 620px) { .mz-ad-strip, .prose > .mz-slot-card .mz-ad { grid-template-columns: 180px minmax(0, 1fr); } .mz-ad-strip .mz-adh, .prose > .mz-slot-card .mz-adh { font-size: 19px; } }
@media (max-width: 420px) { .mz-ad-strip { grid-template-columns: minmax(116px, 38%) minmax(0, 1fr); } .mz-ad-strip .mz-adc { display: inline-block; } }
.mz-adx > * { grid-area: auto !important; } .mz-adx { justify-items: stretch; } .mz-adx .mz-adc { justify-self: start; }
.mz-arail .mz-adp { aspect-ratio: 4 / 3; } .mz-arail .mz-adh { -webkit-line-clamp: 2; } .mz-arail > div { gap: 12px; top: 64px; } .mz-arail .mz-ad { gap: 6px; padding: 9px; }
.ag-new .ac-img { background: var(--soft); } .ag-new .ac-img img { object-fit: contain; }

/* exhibitions: country filter */
.exc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.exc .chip { font: 700 13px/1 var(--font); padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.exc .chip small { opacity: .6; font-weight: 600; margin-inline-start: 3px; } .exc .chip:hover:not(:disabled) { border-color: #EC1D25; transform: translateY(-1px); }
.exc .chip.on { background: #EC1D25; border-color: #EC1D25; color: #fff; } .exc .chip.none { opacity: .45; cursor: default; }
@media (max-width: 700px) { .exc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .exc::-webkit-scrollbar { display: none; } .exc .chip { flex: none; } }

/* club: turnkey projects */
.tk { margin-bottom: 22px; align-items: start; } .tk-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tk-c h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid #EC1D25; } .tk-c h3 small { font-size: 12px; font-weight: 700; color: var(--muted); }
.tk-c ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14.5px; } .tk-c li { position: relative; padding-inline-start: 14px; line-height: 1.6; } .tk-c li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: #EC1D25; }
.tk-e { margin-bottom: 16px; }
.pd-go { text-decoration: none; color: inherit; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; } .pd-go b { color: var(--ink); overflow-wrap: anywhere; } .pd-go span { color: #EC1D25; font-weight: 700; } .pd-go:hover { border-color: #EC1D25; transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(236, 29, 37, .6); } .pc-p { font-weight: 600; }
.tk-sub { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; } .tk-sub li { padding-inline-start: 16px; position: relative; color: var(--muted); } .tk-sub li::before { content: "–"; position: absolute; inset-inline-start: 0; width: auto; height: auto; border: 0; background: none; transform: none; top: 0; }
.rd-fit { max-height: 520px; width: 100%; object-fit: contain; background: #fff; border: 1px solid var(--line); } .ag-mod .ac-img { background: #fff; aspect-ratio: 4 / 3; } .ag-mod .ac-b b { font-size: 15.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── exhibitions: country first ── */
.fl { display: block; width: 100%; height: 100%; }
.xco-t { font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; color: var(--ink); margin: 0 0 16px; }
.xco-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.xc { position: relative; display: grid; grid-template-rows: auto auto; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; box-shadow: 0 12px 28px -22px rgba(0, 0, 0, .5); transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; animation: xcIn .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes xcIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.xc-f { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #ddd; }
.xc-f .fl { transition: transform .9s var(--ease); transform-origin: 0 50%; animation: xcWave 5.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
html[dir="rtl"] .xc-f .fl { transform-origin: 100% 50%; }
@keyframes xcWave { 0%, 100% { transform: scale(1.04) skewY(0deg); } 30% { transform: scale(1.07) skewY(-1.4deg); } 65% { transform: scale(1.05) skewY(1.1deg); } }
.xc-f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .34) 46%, transparent 60%), linear-gradient(to top, rgba(0, 0, 0, .28), transparent 45%); background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; animation: xcShine 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .35s); }
@keyframes xcShine { 0%, 55% { background-position: 130% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
.xc-b { display: grid; gap: 2px; padding: 12px 14px 14px; border-top: 3px solid var(--ca, #EC1D25); } .xc-b b { font-size: 17px; font-weight: 800; line-height: 1.3; } .xc-b small { font-size: 13px; color: var(--muted); font-weight: 600; }
@media (hover: hover) { .xc:hover:not(:disabled) { transform: translateY(-6px); border-color: var(--ca, #EC1D25); box-shadow: 0 26px 40px -24px color-mix(in srgb, var(--ca, #EC1D25) 75%, #000); } .xc:hover:not(:disabled) .xc-b b { color: var(--ca, #EC1D25); } }
:root[data-theme="dark"] .xc:hover .xc-b b { color: #fff; }
.xc:active:not(:disabled) { transform: scale(.98); } .xc:focus-visible { outline: 2px solid #EC1D25; outline-offset: 3px; }
.xc-0 { opacity: .5; cursor: default; filter: grayscale(.7); } .xc-0 .fl, .xc-0 .xc-f::after { animation: none; }
.xc-all { --ca: #EC1D25; } .xc-all .xc-f { background: #15161a; } .xc-all .xc-f i { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; } .xc-all .xc-f i .fl { animation: none; border-radius: 3px; }
.xpg-pick > .exc, .xpg-pick > .el { display: none; } .xpg:not(.xpg-pick) > .xco { display: none; }
.exc .chip { display: inline-flex; align-items: center; gap: 7px; } .exc .chip .fl { width: 22px; height: 15px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.exc .xback { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 600px) { .xco-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .xc-b { padding: 9px 10px 11px; } .xc-b b { font-size: 14.5px; } .xc-b small { font-size: 11.5px; } }

/* rows: the country shows at a glance — flag wash on the far side, flag chip, national colour */
#app a.er.er-x { border-inline-start: 4px solid var(--ca); isolation: isolate; }
#app a.er.er-x::before { background: var(--ca); }
.er-bg { position: absolute; z-index: -1; inset-block: 0; inset-inline-end: 0; width: min(46%, 420px); opacity: .2; pointer-events: none; -webkit-mask: linear-gradient(to left, #000 20%, transparent); mask: linear-gradient(to left, #000 20%, transparent); transition: opacity .35s, transform .6s var(--ease); }
html[dir="rtl"] .er-bg { -webkit-mask: linear-gradient(to right, #000 20%, transparent); mask: linear-gradient(to right, #000 20%, transparent); }
:root[data-theme="dark"] .er-bg { opacity: .28; }
#app a.er.er-x .er-d { background: var(--ca); }
.er-cn { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 3px 9px 3px 4px; border-radius: 999px; background: color-mix(in srgb, var(--ca) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ca) 35%, var(--line)); margin-bottom: 3px; } html[dir="rtl"] .er-cn { padding: 3px 4px 3px 9px; }
.er-cn .fl { width: 26px; height: 17px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .er-cn em { font-style: normal; font-size: 12px; font-weight: 800; color: color-mix(in srgb, var(--ca) 80%, var(--ink)); letter-spacing: .02em; }
:root[data-theme="dark"] .er-cn em { color: #fff; }
#app a.er.er-x .er-n { color: color-mix(in srgb, var(--ca) 85%, var(--ink)); background: color-mix(in srgb, var(--surface) 78%, transparent); padding: 4px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } :root[data-theme="dark"] #app a.er.er-x .er-n { color: #fff; }
@media (hover: hover) { #app a.er.er-x:hover { border-color: var(--ca); box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--ca) 70%, #000); background: color-mix(in srgb, var(--ca) 5%, var(--surface)); } #app a.er.er-x:hover .er-bg { opacity: .36; transform: scale(1.04); } #app a.er.er-x:hover .er-b b { color: color-mix(in srgb, var(--ca) 85%, var(--ink)); } #app a.er.er-x:hover .er-d { box-shadow: 0 8px 16px -8px var(--ca); } }
@media (prefers-reduced-motion: reduce) { .xc, .xc-f .fl, .xc-f::after { animation: none; } }

/* article reels: the whole picture is shown, sitting on a soft blurred copy of itself */
.mz-sca, .mz-slide.mz-art { background: #14151a; isolation: isolate; }
.mz-sca::before, .mz-slide.mz-art::before { content: ""; position: absolute; inset: -12%; z-index: -1; background: var(--bgi) center / cover no-repeat; filter: blur(22px) saturate(1.2) brightness(.55); transform: scale(1.1); }
.mz-sca .mz-scb { position: absolute; inset: 10px 8px auto 8px; width: calc(100% - 16px); height: 46%; object-fit: contain; object-position: center; border-radius: 10px; background: rgba(255, 255, 255, .06); filter: none; opacity: 1; }
.mz-sca .mz-sct { background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .1)); top: 52%; display: flex; flex-direction: column; justify-content: flex-end; }
.mz-sca .mz-sct b { -webkit-line-clamp: 4; font-size: 13.5px; line-height: 1.45; }
.mz-slide.mz-art .mz-bg { position: absolute; inset: 9% 4% auto 4%; width: 92%; height: 44%; object-fit: contain; border-radius: 14px; filter: none; opacity: 1; transform: none; }
.mz-slide.mz-art::after { background: linear-gradient(to top, rgba(0, 0, 0, .86) 0, rgba(0, 0, 0, .35) 50%, transparent 70%); }
@media (min-width: 901px) { .mz-reel.mz-full .mz-slide.mz-art .mz-bg { inset: 12% auto 12% 5%; width: 50%; height: 76%; } html[dir="rtl"] .mz-reel.mz-full .mz-slide.mz-art .mz-bg { inset: 12% 5% 12% auto; } }
.mz-sca .mz-sct em { align-self: flex-start; }
.er-bg { display: flex; align-items: center; justify-content: flex-end; overflow: hidden; width: min(44%, 340px); }
.er-bg .fl { flex: none; height: 175%; width: auto; aspect-ratio: 3 / 2; }
.er-bg { -webkit-mask: linear-gradient(to left, #000 25%, transparent 92%); mask: linear-gradient(to left, #000 25%, transparent 92%); width: min(40%, 300px); }
html[dir="rtl"] .er-bg { -webkit-mask: linear-gradient(to right, #000 25%, transparent 92%); mask: linear-gradient(to right, #000 25%, transparent 92%); justify-content: flex-end; }

/* ── reading pages (news, articles): still, paper-like, easy on the eyes ── */
html.mz-quiet #mz-bg { display: none; }
html.mz-quiet.mz-bgon, html.mz-quiet.mz-bgon body { background: #F6F2EA; }
html.mz-quiet.mz-bgon[data-theme="dark"], html.mz-quiet.mz-bgon[data-theme="dark"] body { background: #111215; }
html.mz-quiet #app::before { animation: none; inset: 0; transform: none; will-change: auto;
  background:
    linear-gradient(#EC1D25, #EC1D25) top / 100% 3px no-repeat,
    linear-gradient(to bottom, rgba(236, 29, 37, .05), transparent 240px),
    linear-gradient(to right, transparent calc(50% - 641px), rgba(16, 16, 18, .09) calc(50% - 641px), rgba(16, 16, 18, .09) calc(50% - 640px), transparent calc(50% - 640px), transparent calc(50% + 640px), rgba(16, 16, 18, .09) calc(50% + 640px), rgba(16, 16, 18, .09) calc(50% + 641px), transparent calc(50% + 641px)); }
html.mz-quiet[data-theme="dark"] #app::before { background:
    linear-gradient(#EC1D25, #EC1D25) top / 100% 3px no-repeat,
    linear-gradient(to bottom, rgba(236, 29, 37, .10), transparent 240px),
    linear-gradient(to right, transparent calc(50% - 641px), rgba(255, 255, 255, .08) calc(50% - 641px), rgba(255, 255, 255, .08) calc(50% - 640px), transparent calc(50% - 640px), transparent calc(50% + 640px), rgba(255, 255, 255, .08) calc(50% + 640px), rgba(255, 255, 255, .08) calc(50% + 641px), transparent calc(50% + 641px)); }
html.mz-quiet .ph { border-bottom: 3px double var(--line); background: none; }
html.mz-quiet .ph .h1 { letter-spacing: -.01em; }
html.mz-quiet .sec.alt { background: color-mix(in srgb, var(--surface) 55%, transparent); }
/* the article itself sits on a clean sheet */
html.mz-quiet article.rd .rd-w { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid #EC1D25; border-radius: 6px; padding: clamp(18px, 3.4vw, 44px); box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .45); }
html.mz-quiet article.rd .prose { font-size: 18px; line-height: 1.85; color: var(--text); } html.mz-quiet article.rd[lang="ar"] .prose { font-size: 18.5px; line-height: 2.05; }
html.mz-quiet article.rd .prose > p:first-of-type { font-size: 1.08em; color: var(--ink); }
html.mz-quiet article.rd .prose h2 { margin-top: 10px; padding-inline-start: 12px; border-inline-start: 3px solid #EC1D25; }
html.mz-quiet article.rd .rd-m { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
html.mz-quiet .ac, html.mz-quiet .nc { box-shadow: none; border-color: var(--line); }
@media (max-width: 700px) { html.mz-quiet article.rd .rd-w { border-inline: 0; border-radius: 0; margin-inline: -4px; box-shadow: none; } html.mz-quiet article.rd .prose { font-size: 17px; } }
article.rd .rd-w { margin-inline: auto; } html.mz-quiet .mz-arail-l { inset-inline-start: max(8px, calc(50% - 400px - 200px)); } html.mz-quiet .mz-arail-r { inset-inline-end: max(8px, calc(50% - 400px - 200px)); }

/* ── products: two clearly separate worlds — the magazine's advertisers, and AAT's modern-industries selection ── */
.psw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 18px 6px; }
.psw-i { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), border-color .25s, box-shadow .3s, background-color .25s; }
.psw-i .ic { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--soft); color: var(--muted); transition: background-color .25s, color .25s; }
.psw-i span { display: grid; gap: 2px; min-width: 0; } .psw-i b { font-size: 16.5px; line-height: 1.3; } .psw-i small { font-size: 12.5px; color: var(--muted); }
.psw-i:hover { transform: translateY(-2px); border-color: var(--ink); }
.psw-i.on { border-color: #EC1D25; box-shadow: 0 14px 30px -22px rgba(236, 29, 37, .7), inset 0 -3px 0 #EC1D25; } .psw-i.on .ic { background: #EC1D25; color: #fff; }
.psw-m.on { border-color: #0E7C86; box-shadow: 0 14px 30px -22px rgba(14, 124, 134, .7), inset 0 -3px 0 #0E7C86; } .psw-m.on .ic { background: #0E7C86; color: #fff; }
@media (max-width: 640px) { .psw { gap: 8px; } .psw-i { padding: 10px; gap: 8px; flex-direction: column; align-items: flex-start; } .psw-i .ic { width: 34px; height: 34px; padding: 7px; } .psw-i b { font-size: 13.5px; } .psw-i small { font-size: 11px; } }
.mod { --mc: #0E7C86; padding-top: 14px; } :root[data-theme="dark"] .mod { --mc: #3CC6D0; }
.mod-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .mod-nav .chip { font: 700 13px/1 var(--font); padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s, transform .2s; } .mod-nav .chip small { opacity: .6; margin-inline-start: 3px; } .mod-nav .chip:hover { border-color: var(--mc); color: var(--mc); transform: translateY(-1px); }
@media (max-width: 700px) { .mod-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .mod-nav::-webkit-scrollbar { display: none; } .mod-nav .chip { flex: none; } }
.mod-g { margin-bottom: 34px; } .mod-g > header { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--mc); }
.mod-g > header i { font-style: normal; font-size: 30px; font-weight: 800; line-height: 1; color: var(--mc); opacity: .9; font-variant-numeric: tabular-nums; } .mod-g > header h2 { margin: 0; flex: 1; } .mod-g > header small { font-size: 13px; font-weight: 700; color: var(--muted); }
.mod-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.mod-c { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), border-color .25s, box-shadow .3s; } html[dir="rtl"] .mod-c { padding: 10px 10px 10px 14px; }
.mod-im { width: 92px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--line); } .mod-im img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.mod-b { display: grid; gap: 4px; min-width: 0; } .mod-b b { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mod-b small { font-size: 12px; color: var(--mc); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.mod-go { color: var(--muted); transition: transform .3s var(--ease), color .2s; }
@media (hover: hover) { .mod-c:hover { transform: translateY(-3px); border-color: var(--mc); box-shadow: 0 16px 30px -22px var(--mc); } .mod-c:hover .mod-im img { transform: scale(1.07); } .mod-c:hover .mod-go { color: var(--mc); transform: translateX(4px); } html[dir="rtl"] .mod-c:hover .mod-go { transform: scaleX(-1) translateX(4px); } }
.rd-mod .kick { color: #0E7C86; } .mod-note { font-size: 13px; color: var(--muted); padding: 8px 12px; border-radius: 10px; background: var(--soft); border-inline-start: 3px solid #0E7C86; margin: 0; }

/* ── article reels, rebuilt: picture on top, headline as text, writer underneath ── */
.mz-sca2 { background: #101116; }
.mz-sca2::before { filter: blur(26px) saturate(1.25) brightness(.45); }
.mz-scv { position: absolute; inset: 0 0 auto 0; height: 50%; overflow: hidden; display: block; border-radius: 0; }
.mz-scv img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform .8s var(--ease); }
.mz-scv::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, #101116, transparent); }
.mz-sca2.mz-fit .mz-scv { inset: 8px 8px auto 8px; height: 44%; border-radius: 10px; background: rgba(255, 255, 255, .06); } .mz-sca2.mz-fit .mz-scv img { object-fit: contain; } .mz-sca2.mz-fit .mz-scv::after { display: none; }
.mz-sca2 .mz-sct { position: absolute; inset: 47% 0 0 0; top: 47%; background: none; padding: 0 11px 11px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; text-align: start; }
.mz-sca2 .mz-sct em { align-self: flex-start; margin: 0; background: #EC1D25; color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 999px; font-style: normal; font-weight: 800; }
.mz-sca2 .mz-sct b { font-size: 14px; line-height: 1.5; font-weight: 800; -webkit-line-clamp: 4; color: #fff; }
.mz-by { display: flex; align-items: center; gap: 7px; margin-top: auto; min-width: 0; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .16); width: 100%; }
.mz-by img, .mz-by i { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }
.mz-by u { text-decoration: none; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .mz-sca2:hover .mz-scv img { transform: scale(1.06); } }
@media (max-width: 600px) { .mz-sca2 .mz-sct b { font-size: 12.5px; -webkit-line-clamp: 4; } .mz-by u { font-size: 10.5px; } .mz-by img, .mz-by i { width: 22px; height: 22px; } }
/* inside the player */
.mz-slide.mz-art2 { background: #101116; }
.mz-slide.mz-art2::after { display: none; }
.mz-av { position: absolute; inset: 0 0 auto 0; height: 50%; overflow: hidden; } .mz-av img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; animation: mzAv 14s ease-in-out infinite alternate; }
@keyframes mzAv { from { transform: scale(1); } to { transform: scale(1.08); } }
.mz-av::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, #101116, transparent); }
.mz-art2.mz-fit .mz-av { inset: 64px 12px auto 12px; height: 40%; border-radius: 14px; background: rgba(255, 255, 255, .06); } .mz-art2.mz-fit .mz-av img { object-fit: contain; animation: none; } .mz-art2.mz-fit .mz-av::after { display: none; }
.mz-art2 .mz-cap { top: 47%; bottom: 0; justify-content: flex-start; gap: 10px; padding: 0 16px 18px; text-shadow: none; overflow: hidden; }
.mz-art2 .mz-cap .mz-tag { align-self: flex-start; background: #EC1D25; color: #fff; }
.mz-art2 .mz-cap h3 { font-size: clamp(19px, 5.4vw, 26px); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mz-art2 .mz-cap p { margin: 0; font-size: 14px; line-height: 1.75; opacity: .85; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.mz-art2 .mz-by { margin-top: 0; border-top: 0; padding-top: 0; width: auto; } .mz-art2 .mz-by img, .mz-art2 .mz-by i { width: 38px; height: 38px; } .mz-art2 .mz-by u { font-size: 14px; }
.mz-art2 .mz-read { margin-top: auto; align-self: flex-start; }
@media (min-width: 901px) {
  .mz-reel.mz-full .mz-slide.mz-art2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: 90px 6vw 40px; }
  .mz-reel.mz-full .mz-art2 .mz-av, .mz-reel.mz-full .mz-art2.mz-fit .mz-av { position: relative; inset: auto; height: min(70vh, 620px); border-radius: 22px; order: 2; box-shadow: 0 30px 60px -30px #000; }
  .mz-reel.mz-full .mz-art2 .mz-av::after { display: none; }
  .mz-reel.mz-full .mz-art2 .mz-cap { position: relative; inset: auto; top: auto; padding: 0; max-width: none; gap: 16px; overflow: visible; }
  .mz-reel.mz-full .mz-art2 .mz-cap h3 { font-size: clamp(28px, 3vw, 46px); line-height: 1.35; } .mz-reel.mz-full .mz-art2 .mz-cap p { font-size: 17px; -webkit-line-clamp: 6; max-width: 56ch; } .mz-reel.mz-full .mz-art2 .mz-read { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .mz-av img { animation: none; } }

/* ── phones: the full-screen reel always fits the visible screen ── */
.mz-reel.mz-full { inset: var(--mzvt, 0px) 0 auto 0; height: var(--mzvh, 100dvh); max-height: 100dvh; overflow: hidden; overscroll-behavior: none; touch-action: pan-y; }
.mz-reel.mz-full .mz-phone, .mz-reel.mz-full .mz-feed { height: 100%; max-height: 100%; width: 100%; max-width: 100%; }
.mz-reel.mz-full .mz-slide { height: 100%; min-height: 0; max-height: 100%; overflow: hidden; box-sizing: border-box; }
.mz-reel.mz-full .mz-rtop { padding-top: max(6px, env(safe-area-inset-top)); }
@media (max-width: 900px) {
  .mz-reel.mz-full .mz-ps { padding-top: calc(56px + env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }
  .mz-reel.mz-full .mz-ps .mz-pft { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .mz-reel.mz-full .mz-art2 .mz-cap { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .mz-reel.mz-full .mz-phd b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mz-reel.mz-full .mz-pmt { flex-wrap: nowrap; min-width: 0; } .mz-reel.mz-full .mz-pmt .mz-pcat { min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mz-reel.mz-full .mz-pmt .mz-cta { min-width: 0; }
}
/* short screens (small phones, phone on its side): less text, the product keeps its room */
@media (max-height: 620px) and (max-width: 900px) {
  .mz-reel.mz-full .mz-ps { padding-top: 50px; } .mz-reel.mz-full .mz-phd { padding-block: 2px; } .mz-reel.mz-full .mz-plg { height: 34px; }
  .mz-reel.mz-full .mz-pnfo b { font-size: 15px; -webkit-line-clamp: 1; } .mz-reel.mz-full .mz-pnfo p { -webkit-line-clamp: 1; min-height: 0; } .mz-reel.mz-full .mz-pft { gap: 5px; padding-top: 2px; }
  .mz-reel.mz-full .mz-hint { display: none; } .mz-reel.mz-full .mz-art2 .mz-cap p { -webkit-line-clamp: 2; } .mz-reel.mz-full .mz-art2 .mz-cap h3 { -webkit-line-clamp: 3; font-size: 18px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .mz-reel.mz-full .mz-ps { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "hd rw" "ft rw"; padding: 46px 14px 8px; column-gap: 14px; } .mz-reel.mz-full .mz-ps .mz-phd { grid-area: hd; padding: 0; } .mz-reel.mz-full .mz-ps .mz-rw { grid-area: rw; min-height: 0; } .mz-reel.mz-full .mz-ps .mz-pft { grid-area: ft; padding: 0; align-self: end; }
}
/* the reels row inside the page: cards never wider than the phone allows */
@media (max-width: 600px) { .mz-shelf { max-width: 100%; overflow: hidden; } .mz-srow { margin-inline: -12px; padding-inline: 12px; } .mz-sc { width: min(42vw, 176px); } }
html.mz-lock, html.mz-lock body { overflow: hidden; overscroll-behavior: none; }
@media (max-width: 900px) { .mz-reel.mz-full .mz-ps { padding-top: calc(72px + env(safe-area-inset-top)); } .mz-reel.mz-full .mz-pmt .mz-pcat { font-size: 11.5px; padding-inline: 10px; flex: 0 1 auto; } .mz-reel.mz-full .mz-pmt .mz-cta { flex: 1 1 auto; } }
@media (max-height: 620px) and (max-width: 900px) { .mz-reel.mz-full .mz-ps { padding-top: calc(70px + env(safe-area-inset-top)); } }
@media (orientation: landscape) and (max-height: 500px) { .mz-reel.mz-full .mz-ps { padding-top: 72px; } .mz-reel.mz-full .mz-phd b { font-size: 15px; } .mz-reel.mz-full .mz-pmt .mz-pcat { display: none; } }

/* Magazine view: the page does not scroll, so the top bar stays still and nothing animates around the issue */
html:has(.fbx), body:has(.fbx) { overflow: hidden; }
body:has(.fbx) #hdr { position: relative; transform: none !important; transition: none; padding-bottom: 6px; }
body:has(.fbx) #hdr, body:has(.fbx) #hdr * { transition: none !important; animation: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body:has(.fbx) #ftr, body:has(.fbx) #progress, body:has(.fbx)::before, body:has(.fbx)::after { display: none !important; }
.fbx iframe { height: calc(100vh - 58px) !important; height: calc(100dvh - 58px) !important; min-height: 0 !important; }
/* Magazine view: site bar pinned to the very top */
body:has(.fbx) #hdr { position: fixed !important; top: 0; left: 0; right: 0; padding: 4px 8px !important; z-index: 80; }
body:has(.fbx) .fbx { padding-top: 52px !important; }
.fbx iframe { height: calc(100vh - 52px) !important; height: calc(100dvh - 52px) !important; }

/* ===== Company mini-site pages: one layout per page type, each filling the whole slide ===== */
.mz-bs { --pi: #15171c; --pm: #555a66; --pl: #e4e5ea; --ps: color-mix(in srgb, var(--a) 7%, #fff); --pc: #fff; }
.mz-L2 { --pi: #eef0f4; --pm: #aab0bc; --pl: #2a2f3a; --ps: #171a21; --pc: #171a21; }
.mz-bbody { container-type: inline-size; }
[dir="rtl"] .mz-L3 .mz-bpat { transform: scaleX(-1); }
.mz-btx small:empty { display: none; }
.mz-bpane[data-p="-1"] .mz-bhero { flex: 1 1 auto; }
.mz-bhome { flex: none; display: grid; gap: 8px; }
.mz-bhf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.mz-bhf:empty { display: none; }
.mz-pg { flex: 1 0 auto; min-height: 100%; box-sizing: border-box; display: grid; gap: 1.1em; padding: 1.1em 1.2em; font-size: clamp(10.5px, 1.5cqw, 17px); color: var(--pi); align-content: stretch; }
.mz-pg h4 { margin: 0; font-family: var(--f), var(--font); font-size: 1.9em; line-height: 1.1; font-weight: 800; color: var(--pi); }
.mz-pg p { margin: 0; font-size: 1em; line-height: 1.55; color: var(--pm); }
.mz-pg .mz-lead { font-size: 1.22em; line-height: 1.5; color: var(--pi); font-weight: 600; }
.mz-kick { display: inline-block; align-self: start; justify-self: start; font-size: .72em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--a); padding-bottom: .3em; border-bottom: 2px solid var(--a); }
.mz-L2 .mz-kick { color: color-mix(in srgb, var(--a) 60%, #fff); }
.mz-stt { display: flex; flex-direction: column; justify-content: center; gap: .15em; padding: .7em .8em; border-radius: .7em; background: var(--ps); border: 1px solid color-mix(in srgb, var(--a) 18%, var(--pl)); min-width: 0; }
.mz-stt b { font-family: var(--f), var(--font); font-size: 1.5em; line-height: 1.1; font-weight: 800; color: var(--a); overflow-wrap: anywhere; }
.mz-L2 .mz-stt b { color: color-mix(in srgb, var(--a) 60%, #fff); }
.mz-stt small { font-size: .74em; font-weight: 700; color: var(--pm); }
.mz-bhf .mz-stt b { font-size: 12px; } .mz-bhf .mz-stt small { font-size: 9px; } .mz-bhf .mz-stt { padding: 6px 8px; }
.mz-pa-lg { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: .7em; padding: .6em; height: 4.6em; }
.mz-pa-lg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mz-ptl { display: flex; flex-direction: column; justify-content: space-between; gap: .5em; padding: .9em 1em; border-radius: .8em; background: var(--ps); border: 1px solid color-mix(in srgb, var(--a) 18%, var(--pl)); min-height: 4.6em; }
.mz-ptl em { font-style: normal; font-family: var(--f), var(--font); font-size: 1.5em; font-weight: 800; line-height: 1; color: var(--a); opacity: .85; }
.mz-ptl b { font-size: 1.02em; line-height: 1.25; font-weight: 700; color: var(--pi); }
.mz-ptl:nth-child(4n+1) { background: var(--a); border-color: var(--a); }
.mz-ptl:nth-child(4n+1) em, .mz-ptl:nth-child(4n+1) b { color: var(--on); }
.mz-pg .mz-bp { border-color: var(--pl); background: #fff; border-radius: .8em; }
.mz-pg .mz-bp img { height: auto; flex: 1 1 0; min-height: 4.5em; padding: .4em; box-sizing: border-box; }
.mz-pg .mz-bp b { height: auto; font-size: .86em; padding: .3em .6em .5em; color: #15171c; flex: none; }
.mz-pg .mz-bp small { flex: none; font-size: .74em; line-height: 1.3; padding: 0 .7em .6em; color: #555a66; }
/* About */
.mz-pa { grid-template-columns: minmax(0, 1fr); }
.mz-pa-main { display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.mz-feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45em .9em; }
.mz-feat li { position: relative; padding-inline-start: 1.5em; font-size: .95em; line-height: 1.35; font-weight: 600; color: var(--pi); }
.mz-feat li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: .05em; width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--a); color: var(--on); font-size: .78em; display: grid; place-items: center; }
.mz-pa-strip { flex: 1 1 6.5em; min-height: 6.5em; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.mz-pa-strip img { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #fff; border: 1px solid var(--pl); border-radius: .7em; padding: .3em; box-sizing: border-box; }
.mz-pa-side { display: flex; flex-direction: column; justify-content: space-between; gap: .8em; padding: 1em; border-radius: 1em; background: linear-gradient(160deg, var(--a), var(--b)); color: var(--on); min-width: 0; }
.mz-sts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }
.mz-pa-side .mz-stt { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.mz-pa-side .mz-stt b, .mz-pa-side .mz-stt small { color: var(--on); }
.mz-pfx { margin: 0; display: grid; gap: .1em; }
.mz-pfx dt { font-size: .7em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-top: .55em; }
.mz-pfx dd { margin: 0; font-size: .95em; line-height: 1.35; font-weight: 600; }
.mz-L0 .mz-pa-side, .mz-L4 .mz-pa-side { background: var(--ps); color: var(--pi); border: 1px solid color-mix(in srgb, var(--a) 22%, var(--pl)); }
.mz-L0 .mz-pa-side .mz-stt, .mz-L4 .mz-pa-side .mz-stt { background: var(--a); border-color: var(--a); }
.mz-L4 .mz-pa-side { border-radius: 1.6em; } .mz-L4 .mz-stt, .mz-L4 .mz-ptl { border-radius: 1.2em; }
/* Products */
.mz-pp { grid-template-columns: minmax(0, 1fr); }
.mz-pp-cat { display: flex; flex-direction: column; gap: .7em; min-width: 0; }
.mz-pp-cat ol { list-style: none; counter-reset: r; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1em; }
.mz-pp-cat li { counter-increment: r; display: flex; gap: .6em; align-items: baseline; padding: .5em 0; border-bottom: 1px solid var(--pl); font-size: .95em; font-weight: 700; line-height: 1.25; }
.mz-pp-cat li::before { content: counter(r, decimal-leading-zero); flex: none; font-size: .8em; font-weight: 800; color: var(--a); }
.mz-pp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(9em, 1fr); gap: .7em; }
/* Applications */
.mz-px { grid-template-rows: auto 1fr auto; }
.mz-px header { display: grid; gap: .5em; max-width: 70ch; }
.mz-px-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .7em; }
.mz-px-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6em; }
.mz-px-strip .mz-bp img { height: 5em; flex: none; }
/* News */
.mz-pn { grid-template-columns: minmax(0, 1fr); }
.mz-pn-top { position: relative; display: flex; flex-direction: column; gap: .7em; padding: 1.3em; border-radius: 1em; background: linear-gradient(150deg, var(--a), var(--b)); color: var(--on); overflow: hidden; }
.mz-pn-top .mz-kick { color: var(--on); border-color: var(--on); }
.mz-pn-top em { font-style: normal; font-size: .85em; font-weight: 700; opacity: .9; }
.mz-pn-top h4 { color: var(--on); font-size: 2.1em; }
.mz-pn-top p { color: var(--on); opacity: .9; }
.mz-pn-top .mz-pa-lg { margin-top: auto; align-self: flex-start; min-width: 8em; }
.mz-pn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; }
.mz-pn-list li { display: grid; grid-template-columns: minmax(6.5em, 30%) 1fr; gap: 1em; align-items: center; padding: .75em 0; border-bottom: 1px solid var(--pl); }
.mz-pn-list em { font-style: normal; font-size: .82em; font-weight: 800; color: var(--a); border-inline-start: 3px solid var(--a); padding-inline-start: .6em; }
.mz-L2 .mz-pn-list em { color: color-mix(in srgb, var(--a) 60%, #fff); }
.mz-pn-list b { font-size: 1.05em; line-height: 1.3; font-weight: 700; }
/* Contact */
.mz-pk { grid-template-columns: minmax(0, 1fr); }
.mz-pk-card { display: flex; flex-direction: column; gap: .8em; padding: 1.3em; border-radius: 1em; background: var(--ps); border: 1px solid color-mix(in srgb, var(--a) 22%, var(--pl)); }
.mz-pk-card .mz-pa-lg { align-self: flex-start; min-width: 9em; border: 1px solid var(--pl); }
.mz-pk-card p { font-size: 1.1em; color: var(--pi); font-weight: 600; }
.mz-pk-card .mz-hrs { font-size: .9em; color: var(--pm); }
.mz-pk-card .mz-cta { margin-top: auto; background: var(--a); color: var(--on); align-self: stretch; }
.mz-pk-act { display: grid; grid-auto-rows: 1fr; gap: .6em; }
.mz-pk-act > * { display: flex; flex-direction: column; justify-content: center; gap: .15em; padding: .8em 1em; border-radius: .8em; border: 1px solid var(--pl); background: var(--pc); color: var(--pi); text-decoration: none; min-width: 0; }
.mz-pk-act a { border-inline-start: 4px solid var(--a); }
.mz-pk-act small { font-size: .72em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--a); }
.mz-L2 .mz-pk-act small { color: color-mix(in srgb, var(--a) 60%, #fff); }
.mz-pk-act b { font-size: 1.15em; font-weight: 700; overflow-wrap: anywhere; text-align: start; }
[dir="rtl"] .mz-pk-act b { text-align: right; }
/* wide slides (computer): two columns that share the full height */
@container (min-width: 720px) {
  .mz-pg { padding: 2em 4cqw; gap: 2em; }
  .mz-pa { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .mz-pp { grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); }
  .mz-pp-cat ol { grid-template-columns: minmax(0, 1fr); }
  .mz-pp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mz-pp-grid.mz-none { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mz-px-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mz-pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .mz-pk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .mz-pk-act { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-bhf .mz-stt b { font-size: 16px; } .mz-bhf .mz-stt small { font-size: 11px; } .mz-bhf .mz-stt { padding: 10px 14px; }
}
.mz-pn-pic { flex: 1 1 7em; min-height: 7em; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: .8em; overflow: hidden; }
.mz-pn-pic img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.mz-pn-pic { position: relative; }
.mz-pa-side .mz-stt b { font-size: 1.9em; }
.mz-pa-side .mz-pa-lg { height: 5.5em; }
.mz-pfx dd { font-size: 1.05em; }
@container (min-width: 720px) { .mz-pa .mz-lead { font-size: 1.5em; } .mz-feat li { font-size: 1.08em; padding-block: .55em; border-bottom: 1px solid var(--pl); } .mz-feat li::before { top: .65em; } .mz-feat { gap: 0 1.6em; } }
@container (min-width: 720px) { .mz-pp-grid.mz-n1 { grid-template-columns: minmax(0, 1fr); } .mz-pp-grid.mz-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mz-pp-grid.mz-n3, .mz-pp-grid.mz-n5, .mz-pp-grid.mz-n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mz-px-grid.mz-n1, .mz-px-grid.mz-n2, .mz-px-grid.mz-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mz-px-grid.mz-n3, .mz-px-grid.mz-n5, .mz-px-grid.mz-n6, .mz-px-grid.mz-n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mz-px-grid .mz-ptl b { font-size: 1.25em; }
.mz-pa-ln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mz-thin .mz-pa-main { justify-content: center; }
.mz-thin .mz-pa-main h4 { font-size: 2.8em; }
.mz-thin .mz-lead { font-size: 1.9em !important; }

/* Magazine page: the site bar sits above the magazine in normal flow, so the two bars can never overlap whatever the bar's height */
body:has(.fbx) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body:has(.fbx) #hdr { position: relative !important; flex: none; padding: 6px 8px !important; }
body:has(.fbx) #app { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
body:has(.fbx) #app > *, body:has(.fbx) .fbx { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding-top: 0 !important; }
body:has(.fbx) .fbx iframe { flex: 1 1 0; height: auto !important; min-height: 0 !important; width: 100%; }

/* Top bar: fixed in place at one size on every page; nothing about it animates on scroll */
#hdr, #hdr.hide { transform: none !important; transition: none !important; }
#hdr .hd, #hdr .mz-lgo, #hdr .hd-nav a, #hdr .hd-adv, .hd-brand img { transition: none !important; }
html.hdr-off { --hd: 72px; }