/* ==========================================================================
   Megaminds public homepage v3 (Claude Design handoff, 2026-07)
   Standalone stylesheet: no Bootstrap, logical properties for RTL/LTR.
   ========================================================================== */

:root {
    --mm-nav-h: 80px;
    --mm-orange: #FF6B3D;
    --mm-orange-deep: #F45A2A;
    --mm-orange-bg: #FF7444;
    --mm-teal: #1FA8C9;
    --mm-teal-deep: #1696B4;
    --mm-ink: #2B2A28;
    --mm-ink-2: #2A2A2A;
    --mm-body-text: #736E68;
    --mm-muted: #8A8178;
    --mm-soft: #FDEEE4;
    --mm-line: #EFE5DB;
    --mm-footer-bg: #082933;
    --mm-card-shadow: 0 18px 45px rgba(184, 142, 108, 0.13);
    --mm-font: 'Cairo', ui-sans-serif, system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body.mm-body {
    margin: 0;
    padding: 0;
    background: #FAF3EC;
    color: var(--mm-ink-2);
    font-family: var(--mm-font);
    overflow-x: clip;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: var(--mm-font); }

/* ---- containers ---------------------------------------------------------- */
.mm-container      { width: min(97vw, 1720px); margin-inline: auto; padding-inline: clamp(16px, 2vw, 40px); }
.mm-container-md   { width: min(97vw, 1380px); margin-inline: auto; padding-inline: clamp(16px, 2vw, 40px); }
.mm-container-sm   { width: min(97vw, 1080px); margin-inline: auto; padding-inline: clamp(16px, 2vw, 32px); }

/* ---- headings / section chrome ------------------------------------------ */
.mm-h2 {
    font-weight: 800;
    color: var(--mm-ink);
    font-size: clamp(28px, 3.5vw, 47px);
    letter-spacing: -0.5px;
    line-height: 1.25;
}

.mm-bracketed {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 1.3vw, 17px);
    width: fit-content;
}

.mm-bracketed.mm-center { margin-inline: auto; justify-content: center; }

.mm-bracket {
    color: var(--mm-orange);
    font-weight: 400;
    font-size: 1.4em;
    line-height: 0.6;
    transform: translateY(-2px);
}

.mm-on-orange, .mm-on-orange .mm-bracket { color: #ffffff; }

.mm-center { text-align: center; }

.mm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mm-orange);
    font-weight: 800;
    font-size: clamp(13px, 1vw, 15px);
    padding: 8px 19px;
    border-radius: 999px;
    background: #FFECDE;
    box-shadow: 0 8px 22px rgba(196, 120, 70, 0.12);
    margin-bottom: clamp(16px, 1.9vw, 24px);
}

.mm-section-head { text-align: center; margin-bottom: clamp(30px, 3.4vw, 48px); }

.mm-section-sub {
    margin: clamp(16px, 1.7vw, 22px) auto 0;
    color: var(--mm-muted);
    font-weight: 500;
    font-size: clamp(15px, 1.4vw, 19px);
    max-width: 44em;
    line-height: 1.7;
}

.mm-section-underline {
    width: 66px; height: 4px; border-radius: 4px;
    background: var(--mm-orange);
    margin: clamp(12px, 1.4vw, 18px) auto 0;
}
.mm-teal-text   { color: var(--mm-teal); font-weight: inherit; }
.mm-orange-text { color: var(--mm-orange); font-weight: inherit; }

/* icon tints */
.mm-tint-sky    { background: #E4F1FA; color: #2BA0D6; }
.mm-tint-violet { background: #ECE6F8; color: #8B6FD0; }
.mm-tint-green  { background: #E5F3E6; color: #46B36A; }
.mm-tint-orange { background: #FCE7DC; color: var(--mm-orange); }

/* directional arrows: drawn for RTL, mirror in LTR */
[dir="ltr"] .mm-flip-rtl { transform: scaleX(-1); }

/* ---- buttons -------------------------------------------------------------- */
.mm-btn-primary, .mm-btn-secondary, .mm-btn-ghost, .mm-btn-white, .mm-btn-glass, .mm-btn-inverse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    border: none;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}

.mm-btn-primary {
    background: var(--mm-orange);
    color: #fff;
    border-radius: 16px;
    height: 54px;
    padding: 0 clamp(24px, 2.6vw, 34px);
    font-size: clamp(15px, 1.2vw, 17px);
    box-shadow: 0 10px 0 rgba(255, 107, 61, 0.18);
}
.mm-btn-primary:hover { transform: translateY(-2px); background: var(--mm-orange-deep); box-shadow: 0 16px 26px rgba(255, 107, 61, 0.34); }

.mm-btn-secondary {
    background: var(--mm-teal);
    color: #fff;
    border-radius: 16px;
    height: 54px;
    padding: 0 clamp(24px, 2.6vw, 34px);
    font-size: clamp(15px, 1.2vw, 17px);
    box-shadow: 0 10px 0 rgba(31, 168, 201, 0.18);
}
.mm-btn-secondary:hover { transform: translateY(-2px); background: var(--mm-teal-deep); box-shadow: 0 16px 26px rgba(31, 168, 201, 0.32); }

.mm-btn-lg { height: 65px; border-radius: 22px; font-size: clamp(16px, 1.2vw, 18px); padding: 0 clamp(26px, 3vw, 36px); }
.mm-btn-md { height: 54px; }
.mm-btn-round { border-radius: 999px; }
.mm-btn-block { width: 100%; height: 54px; border-radius: 16px; display: flex; }

.mm-btn-arrow {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; color: var(--mm-orange);
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
}

.mm-btn-ghost {
    background: #fff;
    color: #1F2937;
    border: 2px solid #ECECEC;
    border-radius: 16px;
    padding: 0 22px;
    height: 46px;
    font-weight: 700;
    font-size: 15px;
}
.mm-btn-ghost:hover { transform: translateY(-2px); border-color: var(--mm-orange); color: var(--mm-orange-deep); }

.mm-btn-white {
    background: #ffffff;
    color: var(--mm-orange-deep);
    height: 58px;
    padding: 0 clamp(28px, 3vw, 40px);
    border-radius: 18px;
    font-size: clamp(15px, 1.2vw, 18px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.mm-btn-white:hover { transform: translateY(-2px); }

.mm-btn-glass {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    height: 58px;
    padding: 0 clamp(26px, 3vw, 36px);
    border-radius: 18px;
    font-size: clamp(15px, 1.2vw, 18px);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.mm-btn-glass:hover { background: rgba(255, 255, 255, 0.28); }

.mm-btn-inverse {
    background: #ffffff;
    color: var(--mm-orange-deep);
    font-size: clamp(15px, 1.2vw, 17px);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.08);
}
.mm-btn-inverse:hover { transform: translateY(-2px); }

.mm-actions-row {
    display: flex;
    gap: clamp(12px, 1.4vw, 16px);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: clamp(24px, 2.8vw, 36px);
}

/* ---- ambient decorations --------------------------------------------------- */
.mm-dots {
    position: absolute;
    background-image: radial-gradient(circle, #F3A982 2px, transparent 2.6px);
    background-size: 21px 21px;
    opacity: 0.45;
    pointer-events: none;
}

.mm-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 150, 92, 0.13);
    pointer-events: none;
}

.mm-blob { position: absolute; pointer-events: none; }
.mm-blob-circle   { inset-inline-end: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); }
.mm-blob-square   { inset-inline-start: -70px; bottom: -110px; width: 240px; height: 240px; border-radius: 42px; background: rgba(255, 255, 255, 0.05); transform: rotate(20deg); }
.mm-blob-glow     { inset-inline-start: -70px; top: 42%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 150, 92, 0.12), transparent 70%); }
.mm-blob-chip     { inset-inline-start: clamp(40px, 7vw, 120px); top: 34%; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 107, 61, 0.16); }
.mm-blob-chip-teal{ inset-inline-end: clamp(24px, 6vw, 140px); top: clamp(90px, 12vw, 200px); width: 36px; height: 36px; border-radius: 10px; background: rgba(31, 168, 201, 0.16); }

.mm-ghost-rocket {
    position: absolute;
    inset-inline-end: clamp(16px, 4vw, 64px);
    top: clamp(34px, 4vw, 60px);
    width: clamp(96px, 9vw, 144px);
    opacity: 0.16;
    transform: rotate(-6deg);
    pointer-events: none;
}

/* ---- carousel chrome --------------------------------------------------------- */
.mm-fb-arrow {
    width: clamp(44px, 3.6vw, 54px);
    height: clamp(44px, 3.6vw, 54px);
    border-radius: 50%;
    background: #ffffff;
    color: var(--mm-orange);
    box-shadow: 0 14px 28px rgba(184, 142, 108, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    border: none;
    transition: transform .16s ease, box-shadow .16s ease;
}
.mm-fb-arrow:hover { transform: scale(1.08); }

/* the dots row. Its arrows are the phone-only twin of the flanking pair above;
   see the <=560px block and the comment in reviews.blade.php */
.mm-fb-nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.6vw, 22px); }
.mm-fb-arrow.mm-fb-arrow-under { display: none; }

.mm-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: clamp(26px, 3vw, 40px);
    min-height: 9px;
}
.mm-carousel-dots button, .mm-carousel-dots span {
    height: 9px; width: 9px;
    border-radius: 5px;
    background: #E7D6C7;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
}
.mm-carousel-dots .on { width: 26px; background: var(--mm-orange); }
.mm-carousel-dots .mini { transform: scale(0.62); opacity: 0.65; }

/* ---- horizontal scroll-snap track (any item count, one row) ------------------ */
[data-scroller] {
    display: grid;
    grid-auto-flow: column;
    gap: var(--mm-scroll-gap, 18px);
    grid-auto-columns: calc((100% - (var(--mm-vis, 5) - 1) * var(--mm-scroll-gap, 18px)) / var(--mm-vis, 5));
    overflow-x: auto;
    /* NEVER a vertical scroller: without this, overflow-y computes to auto and
       the row steals the mouse wheel while scrolling the page */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    scroll-behavior: smooth;
    /* generous paint room so card shadows + hover lift fade out naturally
       instead of being clipped into a visible rectangle; the inline padding
       stays SMALLER than every card gap so off-screen neighbours can never
       leak a sliver into view. Cards inside a scroller must use compact
       negative-spread shadows that die out within this room (sideways extent
       = blur - |spread| <= 12px). scroll-padding keeps snap points on the
       content edge, so layout alignment is unchanged */
    padding: 40px 12px;
    margin: -40px -12px;
    scroll-padding: 40px 12px;
}
[data-scroller]::-webkit-scrollbar { display: none; }
[data-scroller] > * { scroll-snap-align: start; min-width: 0; }

/* prev / dots / next cluster centered under every carousel: cards keep the
   full row width, and the controls never overlap or crowd them */
.mm-carousel-nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.6vw, 22px);
    margin-top: clamp(22px, 2.6vw, 34px);
}
.mm-carousel-nav .mm-carousel-dots { margin-top: 0; }
.mm-carousel-nav:not(:has(.mm-scroll-btn:not([hidden]))) { display: none; }

.mm-scroll-btn {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    color: var(--mm-muted);
    border: 1px solid #E3D3C2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease, opacity .2s ease;
}
.mm-scroll-btn svg { width: 16px; height: 16px; }
.mm-scroll-btn:hover { color: var(--mm-orange); border-color: var(--mm-orange); background: var(--mm-soft); }
.mm-scroll-btn[disabled] { opacity: 0.3; cursor: default; color: var(--mm-muted); border-color: #E3D3C2; background: transparent; }
.mm-scroll-btn[hidden] { display: none; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.mm-nav {
    position: sticky;
    top: 0;
    height: var(--mm-nav-h);
    display: flex;
    align-items: center;
    z-index: 50;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: rgba(255, 252, 248, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.mm-nav-inner {
    max-width: 1800px;
    width: 100%;
    margin-inline: auto;
    padding: 0 clamp(16px, 3vw, 48px);
    /* 1fr | auto | 1fr keeps the links centered on the page itself, whatever
       the brand/actions widths are (EN labels are much narrower than AR) */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 2vw, 24px);
}

.mm-nav-brand { justify-self: start; }

.mm-nav-brand img { height: clamp(44px, 4vw, 58px); width: auto; display: block; }

.mm-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2vw, 36px);
}

.mm-link {
    position: relative;
    cursor: pointer;
    color: #1F2937;
    font-weight: 700;
    font-size: clamp(15px, 1.1vw, 17.5px);
    padding: 6px 2px;
    transition: color .25s;
    white-space: nowrap;
}
.mm-link:hover, .mm-link.active { color: var(--mm-orange); }
.mm-link.active::after {
    content: "";
    position: absolute;
    bottom: -7px;
    inset-inline: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--mm-orange);
}

.mm-nav-end { display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); justify-self: end; }

.mm-nav-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 15px;
    color: #5F6368;
    padding: 6px;
}
.mm-nav-lang:hover { color: var(--mm-orange); }

.mm-nav-book { height: 48px; border-radius: 16px; padding: 0 24px; font-size: 15px; }

.mm-nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    background: #fff;
    border: 2px solid #ECECEC;
    border-radius: 12px;
    cursor: pointer;
    padding: 0 10px;
}
.mm-nav-burger span { display: block; height: 2.5px; border-radius: 2px; background: #1F2937; transition: transform .2s ease, opacity .2s ease; }
.mm-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.mm-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mm-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.mm-hero {
    position: relative;
    /* first fold ends ~130px above the viewport bottom so the next section's
       "[ Journey ]" heading peeks in and invites scrolling (like the mock);
       on short screens the content height governs and the peek waives */
    min-height: calc(100vh - var(--mm-nav-h, 80px) - 130px);
    min-height: calc(100svh - var(--mm-nav-h, 80px) - 130px);
    display: flex;
    flex-direction: column;
    padding: clamp(6px, 1.2vh, 16px) 0 0;
    background:
        radial-gradient(1200px 720px at 14% 18%, rgba(255, 228, 205, 0.18), transparent 60%),
        radial-gradient(1100px 780px at 90% 8%, rgba(255, 236, 221, 0.13), transparent 56%),
        radial-gradient(1000px 640px at 74% 100%, rgba(252, 228, 210, 0.15), transparent 62%),
        linear-gradient(180deg, #FFFCF8 0%, #FEF6EF 55%, #FAF3EC 100%);
    overflow: clip;
}

.mm-hero-foot { width: 100%; padding-bottom: clamp(12px, 2.2vh, 26px); }

/* Tall screens: the strip keeps its slim natural height but rides UP.
   Spare fold height splits 1:1 between gentle centering around the content
   and the area BELOW the strip, so the gap above the strip stays small. */
@media (min-width: 1021px) {
    .mm-hero-grid { flex: 1 0 auto; margin-block: 0; }
    .mm-hero-foot { flex: 1 0 auto; display: flex; flex-direction: column; }
    /* like the mock: the strip is a touch taller and floats centered,
       inset from the container edges (extra specificity: the base .mm-stats
       rule further down would win otherwise) */
    .mm-hero-foot .mm-stats { flex: none; width: 91%; margin-inline: auto; padding-block: clamp(20px, 3vh, 38px); }
}

.mm-hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mm-ring-1 { inset-inline-start: -290px; top: 150px; width: 560px; height: 560px; }
.mm-ring-2 { inset-inline-end: -310px; top: 360px; width: 610px; height: 610px; border-color: rgba(255, 150, 92, 0.12); }
.mm-ring-3 { inset-inline-start: -160px; top: 46px; width: 300px; height: 300px; border-color: rgba(201, 104, 31, 0.10); }
.mm-ring-4 { inset-inline-end: -170px; bottom: 30px; width: 320px; height: 320px; border-color: rgba(31, 168, 201, 0.09); }

.mm-dots-hero-1 {
    inset-inline-start: 0; top: 94px;
    width: clamp(150px, 14vw, 270px); height: 310px;
    opacity: 0.32;
    -webkit-mask-image: radial-gradient(125% 125% at 100% 100%, #000 26%, transparent 72%);
    mask-image: radial-gradient(125% 125% at 100% 100%, #000 26%, transparent 72%);
}
.mm-dots-hero-2 {
    inset-inline-start: 0; bottom: 64px;
    width: clamp(150px, 14vw, 270px); height: 310px;
    opacity: 0.32;
    -webkit-mask-image: radial-gradient(125% 125% at 100% 0%, #000 26%, transparent 72%);
    mask-image: radial-gradient(125% 125% at 100% 0%, #000 26%, transparent 72%);
}
.mm-dots-hero-3 {
    inset-inline-end: 0; bottom: 64px;
    width: clamp(150px, 14vw, 270px); height: 310px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(125% 125% at 0% 0%, #000 26%, transparent 72%);
    mask-image: radial-gradient(125% 125% at 0% 0%, #000 26%, transparent 72%);
}

.mm-hero-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(8px, 1vw, 20px);
    margin-block: auto;
    width: 100%;
    /* .mm-hero is a flex column: without this the grid takes its min-content
       width and silently overflows (clipped) on phones */
    min-width: 0;
    max-width: 100%;
}

/* the copy block is centered as one unit inside its half (grid track sized to
   the widest line, then centered) while lines inside keep their start edge */
.mm-hero-copy {
    flex: 1 1 500px;
    min-width: 300px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
    justify-items: start;
}

.mm-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 999px;
    padding: 9px 18px;
    background: #FFE9DC;
    box-shadow: 0 8px 22px rgba(196, 120, 70, 0.12);
    margin-bottom: clamp(14px, 1.6vh, 22px);
    color: var(--mm-orange);
    font-weight: 700;
    font-size: clamp(13px, 1vw, 15px);
}

/* the photo-mounted twin only exists on phones (see the <=560px block). Two
   classes, so it outranks .mm-hero-badge's own display above. */
.mm-hero-badge.mm-hero-badge-art { display: none; }

.mm-hero-title {
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.5px;
    font-size: clamp(35px, 4.2vw, 60px);
    color: var(--mm-ink);
}
.mm-hero-line { display: block; }
.mm-hero-line + .mm-hero-line { margin-top: 4px; }

.mm-hero-desc {
    margin-top: clamp(12px, 1.8vh, 20px);
    color: var(--mm-body-text);
    font-weight: 500;
    line-height: 1.85;
    max-width: 32em;
    font-size: clamp(15px, 1.4vw, 20px);
}

.mm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.4vw, 18px);
    margin-top: clamp(18px, 2.6vh, 30px);
}

/* handoff shape: soft rounded rectangles (not pills) sitting on a flat colour
   lip — the tinted block offset straight down, no blur. */
.mm-hero-actions .mm-btn-lg {
    height: 58px;
    border-radius: 19px;
    padding: 0 clamp(26px, 2.6vw, 34px);
}
.mm-hero-actions .mm-btn-primary { box-shadow: 0 8px 0 rgba(255, 107, 61, 0.18); }
.mm-hero-actions .mm-btn-primary:hover { box-shadow: 0 16px 26px rgba(255, 107, 61, 0.34); }
.mm-hero-actions .mm-btn-secondary { box-shadow: 0 8px 0 rgba(31, 168, 201, 0.18); }
.mm-hero-actions .mm-btn-secondary:hover { box-shadow: 0 16px 26px rgba(31, 168, 201, 0.32); }

.mm-hero-cta { animation: mmsoftpulse 3.2s ease-in-out infinite; }

/* one tidy row; JS flips to a balanced 2-col grid when they can't all fit.
   Metrics are kept tight so the longer EN labels still fit on one row. */
.mm-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 0.7vw, 11px);
    margin-top: clamp(18px, 2.6vh, 30px);
}
.mm-hero-chips.mm-chips-grid { display: grid; grid-template-columns: repeat(2, max-content); }

.mm-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 16px rgba(120, 108, 98, 0.10);
    color: var(--mm-teal);
}
.mm-hero-chip svg { width: 17px; height: 17px; flex: none; }
.mm-hero-chip span { font-weight: 600; color: #3A3631; font-size: clamp(12px, 0.85vw, 14px); white-space: nowrap; }

/* RTL: the AR labels are shorter words and Cairo's Arabic glyphs sit optically
   smaller than its Latin ones, so identical metrics leave the AR row visibly
   lighter and narrower than the EN one. Scale the chip up in RTL only, and trim
   the vertical padding, so the row lands on the same footprint as EN. */
[dir="rtl"] .mm-hero-chip { gap: 7px; padding: 7.5px 14px; }
[dir="rtl"] .mm-hero-chip svg { width: 18px; height: 18px; }
[dir="rtl"] .mm-hero-chip span { font-size: clamp(13.5px, 0.98vw, 16px); }

.mm-hero-art {
    /* identical flex metrics to .mm-hero-copy so the hero splits exactly 50/50 */
    flex: 1 1 500px;
    min-width: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: clamp(10px, 1.6vh, 24px);
}

/* the photo sits centered in its half with breathing room on both sides; the
   vh cap only steps in on short screens so the fold never breaks */
.mm-hero-kids {
    display: block;
    width: 95%;
    max-width: 100%;
    height: auto;
    max-height: min(68vh, 700px);
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.mm-dots-art {
    inset-inline-start: 4%;
    top: 10px;
    width: 108px; height: 101px;
    background-size: 15px 15px;
    background-image: radial-gradient(circle, #F3A982 1.7px, transparent 2.2px);
    opacity: 0.85;
    z-index: 1;
}

.mm-hero-accred {
    position: absolute;
    z-index: 4;
    inset-inline-start: clamp(2%, 4vw, 9%);
    top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 13px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 10px 24px rgba(196, 120, 70, 0.12);
    white-space: nowrap;
    animation: mmfloat2 6s ease-in-out infinite;
}
.mm-hero-accred-emoji { font-size: 20px; }
.mm-hero-accred-text { font-weight: 800; color: var(--mm-orange); font-size: clamp(12px, 0.95vw, 14.5px); line-height: 1.3; text-align: center; }

.mm-hero-rocket {
    position: absolute;
    z-index: 3;
    inset-inline-end: 2%;
    top: -6px;
    width: clamp(96px, 9vw, 140px);
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(120, 170, 200, 0.18));
    animation: mmfloat 4.5s ease-in-out infinite;
}

.mm-hero-code {
    position: absolute;
    z-index: 3;
    inset-inline-end: -1%;
    top: 42%;
    width: clamp(56px, 5vw, 76px);
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(255, 107, 61, 0.20));
    animation: mmfloat2 5.5s ease-in-out infinite;
}

/* ---- stats strip ------------------------------------------------------------ */
.mm-stats {
    position: relative;
    z-index: 6;
    margin-top: clamp(8px, 1.4vh, 18px);
    border-radius: clamp(20px, 2vw, 30px);
    box-shadow: 0 22px 55px rgba(184, 142, 108, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 253, 251, 0.95);
    padding: clamp(14px, 2vh, 24px) clamp(14px, 1.8vw, 26px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.mm-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.2vw, 18px);
    padding: 6px 8px;
}
.mm-stat + .mm-stat { border-inline-start: 1px solid var(--mm-line); }

.mm-stat-icon {
    width: clamp(52px, 4.6vw, 70px);
    height: clamp(52px, 4.6vw, 70px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.mm-stat-copy { text-align: left; display: block; }
.mm-stat-num {
    display: block;
    font-weight: 800;
    color: var(--mm-ink-2);
    font-size: clamp(19px, 1.8vw, 27px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mm-stat-label { display: block; color: var(--mm-muted); font-weight: 600; font-size: clamp(12px, 1vw, 14px); margin-top: 6px; }

/* ==========================================================================
   Journey
   ========================================================================== */
/* tight top padding: the heading must peek above the first fold so the
   user knows there is more to scroll */
.mm-journey { padding: clamp(18px, 2vw, 30px) 0 clamp(20px, 2.6vw, 40px); text-align: center; }
.mm-journey .mm-bracketed { margin-inline: auto; justify-content: center; }
.mm-journey-text {
    margin: clamp(18px, 2vw, 26px) auto 0;
    color: #262523;
    font-weight: 600;
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.95;
    max-width: 54em;
}

/* ==========================================================================
   Why parents choose us
   ========================================================================== */
.mm-why {
    position: relative;
    overflow: hidden;
    background: var(--mm-orange-bg);
    padding: clamp(32px, 3.6vw, 50px) clamp(16px, 3vw, 40px);
    margin-top: clamp(24px, 3vw, 46px);
}

/* cards run 10% larger than the site grid: wider track + scaled internals.
   max-width caps it at the section's own content box: .mm-why adds side padding
   of its own, so a bare 97vw came out WIDER than the box it sits in, which
   over-constrains margin-inline:auto and shoves the whole column to one side
   (measured 20px off at 390px, 38px at 1340px). */
.mm-why .mm-container-md { width: min(97vw, 1298px); max-width: 100%; }

.mm-why-deco { position: absolute; inset: 0; pointer-events: none; }
.mm-dots-why {
    inset-inline-start: clamp(16px, 4vw, 64px);
    top: 46%;
    width: 120px; height: 108px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 2px, transparent 2.6px);
    background-size: 20px 20px;
    opacity: 0.4;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 50%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 50%, #000 30%, transparent 72%);
}

.mm-why-title {
    color: #fff;
    text-align: center;
    font-size: clamp(24px, 3vw, 38px);
    margin-bottom: clamp(28px, 3.2vw, 44px);
}

.mm-why-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(13px, 1.4vw, 22px);
}

.mm-why-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 24px);
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, background .3s ease;
}
.mm-why-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.2); box-shadow: 0 24px 46px rgba(150, 52, 20, 0.28); }
.mm-why-card:hover .mm-why-icon { transform: scale(1.12) rotate(-6deg); }

/* ---- scroll reveal: slower here than the shared .mm-reveal ------------------
   The shared rule is .5s of expo-out, which spends ~90% of its travel in the
   first 150ms: on a thumb-flick the cards had already settled by the time they
   cleared the fold, so the motion was never actually seen. These run longer on
   an ease-out-cubic (movement stays visible for most of the duration), travel a
   little further, and stretch the JS stagger (--mm-rd) 2.2x.
   They ride `translate` instead of `transform` so the slow reveal can't drag
   the .3s hover lift along with it; the :hover rule below is re-stated at a
   higher specificity because .mm-reveal.mm-in's `transform: none` outranks the
   plain .mm-why-card:hover above. */
.mm-why .mm-why-title.mm-reveal {
    transition-duration: .9s;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}
.mm-why .mm-why-card.mm-reveal {
    transform: none;
    translate: 0 28px;
    transition: opacity 1.05s cubic-bezier(.22, .61, .36, 1),
                translate 1.05s cubic-bezier(.22, .61, .36, 1),
                transform .3s cubic-bezier(.2, .7, .3, 1),
                box-shadow .3s ease,
                background .3s ease;
    transition-delay: calc(var(--mm-rd, 0ms) * 2.2), calc(var(--mm-rd, 0ms) * 2.2), 0ms, 0ms, 0ms;
}
.mm-why .mm-why-card.mm-reveal.mm-in { translate: none; }
.mm-why .mm-why-card.mm-reveal:hover { transform: translateY(-10px); }

/* Icon = two-layer translucent blob (no box), glyph bigger and bolder */
.mm-why-icon {
    align-self: center;
    width: clamp(46px, 4vw, 55px);
    height: clamp(46px, 4vw, 55px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(13px, 1.5vw, 20px);
    position: relative;
    z-index: 0;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.mm-why-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 46% 54% 55% 45% / 48% 42% 58% 52%;
}
.mm-why-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 54% 46% 45% 55% / 42% 58% 48% 52%;
    transform: rotate(16deg);
    z-index: -1;
}
.mm-why-icon svg {
    position: relative;
    width: 56%;
    height: 56%;
    stroke-width: 2;
}

.mm-why-card-title {
    color: #fff;
    font-weight: 800;
    font-size: clamp(16px, 1.3vw, 18.5px);
    line-height: 1.7;
    margin: 0 0 13px;
}

.mm-why-card-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 500;
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.75;
}

/* ==========================================================================
   Feedback / reviews
   ========================================================================== */
.mm-feedback {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 12% 6%, rgba(255, 150, 92, 0.06), transparent 60%),
        radial-gradient(820px 520px at 88% 10%, rgba(255, 107, 61, 0.045), transparent 56%),
        linear-gradient(180deg, #FFF4EC 0%, #FFE7D8 100%);
    padding: clamp(50px, 6vw, 92px) clamp(14px, 3vw, 44px) clamp(58px, 6vw, 96px);
    color: var(--mm-ink);
}

.mm-feedback-deco { position: absolute; inset: 0; pointer-events: none; }
.mm-dots-fb-1 {
    inset-inline-start: clamp(16px, 4vw, 70px); top: clamp(34px, 5vw, 72px);
    width: 118px; height: 96px; background-size: 19px 19px; opacity: 0.55;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
}
.mm-dots-fb-2 {
    inset-inline-end: clamp(120px, 16vw, 300px); top: clamp(70px, 8vw, 120px);
    width: 120px; height: 92px; background-size: 19px 19px; opacity: 0.5;
    -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 26%, transparent 70%);
    mask-image: radial-gradient(120% 120% at 100% 100%, #000 26%, transparent 70%);
}
.mm-ring-fb { inset-inline-start: -120px; bottom: -90px; width: 300px; height: 300px; border-color: rgba(255, 150, 92, 0.12); }

.mm-feedback .mm-section-sub { position: relative; z-index: 2; }

.mm-fb-carousel {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.6vw, 24px);
    margin-top: clamp(30px, 3.4vw, 50px);
}

/* one prominent centre card flanked by two smaller ones (handoff look).
   The three slots are FIXED sizes — the carousel only cross-fades the text
   CONTENT between them, so no card ever animates or changes its own size. */
.mm-fb-track {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.18fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(14px, 1.7vw, 30px);
    flex: 1 1 auto;
    min-width: 0;
}

.mm-fb-card {
    background: #FFFFFF;
    border-radius: 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* centre = the standout: bigger, lifted, deeper shadow.
   FIXED height (not min-height) so flipping never grows/shrinks the card —
   the quote area (flex:1, clamped, overflow hidden) absorbs any text length. */
.mm-fb-center {
    height: clamp(410px, 31vw, 466px);
    padding: clamp(30px, 2.7vw, 44px) clamp(22px, 2.2vw, 34px);
    box-shadow: 0 30px 60px -20px rgba(180, 140, 106, 0.4);
    transform: translateY(-8px);
    position: relative;
    z-index: 2;
}

/* sides = smaller, gently recessed — also a FIXED height */
.mm-fb-side {
    height: clamp(344px, 26vw, 398px);
    padding: clamp(22px, 2vw, 32px) clamp(16px, 1.7vw, 24px);
    box-shadow: 0 16px 34px -18px rgba(180, 140, 106, 0.22);
    opacity: 0.92;
}
.mm-fb-side[hidden] { display: none; }

.mm-fb-side .mm-fb-avatar { width: clamp(50px, 4.4vw, 66px); height: clamp(50px, 4.4vw, 66px); margin-bottom: clamp(10px, 1.2vw, 15px); }
.mm-fb-side .mm-fb-name { font-size: clamp(15px, 1.35vw, 20px); }
.mm-fb-center .mm-fb-quote p { -webkit-line-clamp: 5; }
.mm-fb-side .mm-fb-quote p { -webkit-line-clamp: 4; font-size: clamp(12px, 1vw, 14.5px); }

/* gentle slide+fade when the carousel advances */
.mm-fb-swap-zone { transition: opacity .24s cubic-bezier(.25, .46, .45, .94), transform .24s cubic-bezier(.25, .46, .45, .94); }
.mm-fb-swapping .mm-fb-swap-zone { opacity: 0; transform: translateX(var(--mm-swap-x, -12px)); }

.mm-fb-avatar {
    width: clamp(58px, 5.4vw, 84px);
    height: clamp(58px, 5.4vw, 84px);
    border-radius: 50%;
    background: var(--mm-soft);
    color: var(--mm-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(12px, 1.5vw, 20px);
    flex-shrink: 0;
}
.mm-fb-name, .mm-fb-stars { flex-shrink: 0; }

.mm-fb-name { font-weight: 800; color: var(--mm-ink); font-size: clamp(17px, 1.6vw, 24px); margin-bottom: clamp(10px, 1.3vw, 18px); }

/* The quote marks live in the INLINE gutters, not above/below the text: the card
   height is fixed, so vertical gutters big enough to clear them would cost two
   whole lines of review. Sized this way the longest review can never run into a
   mark, and the reclaimed vertical padding goes back to the text. */
.mm-fb-quote { position: relative; padding: clamp(5px, 0.6vw, 8px) clamp(23px, 2vw, 30px); flex: 1; min-height: 0; display: flex; align-items: center; width: 100%; }
.mm-fb-quote p {
    color: #6B645C;
    font-weight: 500;
    line-height: 1.9;
    font-size: clamp(13px, 1.1vw, 16px);
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mm-fb-qmark { position: absolute; color: var(--mm-orange); opacity: 0.88; line-height: 0; }
.mm-fb-qmark svg { width: clamp(18px, 1.6vw, 24px); height: auto; }
.mm-fb-qmark-a { top: 0; inset-inline-start: 0; }
.mm-fb-qmark-b { bottom: 0; inset-inline-end: 0; transform: rotate(180deg); }

.mm-fb-stars { display: flex; justify-content: center; gap: 5px; margin-top: clamp(12px, 1.5vw, 20px); color: #FFB23E; }
.mm-fb-stars svg { width: clamp(15px, 1.3vw, 19px); height: clamp(15px, 1.3vw, 19px); }

/* ==========================================================================
   Student projects
   ========================================================================== */
.mm-projects { position: relative; overflow: hidden; padding: clamp(54px, 6vw, 96px) 0 clamp(34px, 4vw, 52px); }

.mm-projects-deco { position: absolute; inset: 0; pointer-events: none; }
.mm-dots-proj {
    inset-inline-start: clamp(16px, 4vw, 70px); top: clamp(70px, 8vw, 140px);
    width: 130px; height: 108px; background-size: 20px 20px; opacity: 0.5;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 50%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 50%, #000 30%, transparent 72%);
}

.mm-proj-carousel {
    position: relative;
    z-index: 2;
    --mm-vis: 5;
    --mm-scroll-gap: clamp(14px, 1.3vw, 22px);
}

.mm-proj-card {
    background: #ffffff;
    border-radius: 20px;
    /* compact hugging shadow: fades fully inside the scroller's paint room,
       so no clipped-shadow rectangle appears around the row */
    box-shadow: 0 14px 28px -16px rgba(184, 142, 108, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    /* the white gutter around the photo lives HERE, not as a margin on
       .mm-proj-media. A flex item that carries BOTH a horizontal margin and an
       aspect-ratio is resolved inconsistently across WebKit builds: some derive
       the height from the card's inner width (320px) instead of the item's own
       width after the margin (300px), which stretched the frame ~7% too tall —
       and on some iOS builds dropped the gutter altogether, so the photo ran to
       the card's edge. Paying the gutter as padding on the parent leaves the
       media box margin-free, so its width is unambiguous and the ratio is exact
       everywhere. The gap the user sees is unchanged: still 10px. */
    padding: 10px 10px 0;
}

.mm-proj-media { position: relative; aspect-ratio: 4 / 3; }
.mm-proj-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.mm-proj-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

.mm-proj-play {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--mm-orange);
    color: #fff;
    box-shadow: 0 0 0 9px #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.mm-proj-body {
    /* the card now pays 10px of side padding for the photo's gutter, so the body
       gives back the same 10px and the text keeps the exact inset it always had */
    padding: clamp(28px, 2.6vw, 34px) calc(clamp(16px, 1.6vw, 22px) - 10px) clamp(18px, 1.8vw, 24px);
    text-align: center;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.mm-proj-name {
    font-weight: 800;
    color: var(--mm-ink);
    font-size: clamp(15px, 1.2vw, 18px);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mm-proj-age {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #9A938B;
    font-weight: 600;
    font-size: clamp(11px, 0.9vw, 13px);
    margin-top: 7px;
}
.mm-proj-age svg { color: var(--mm-orange); flex: none; }

.mm-proj-desc {
    margin: 12px 0 18px;
    color: var(--mm-body-text);
    font-weight: 500;
    font-size: clamp(12.5px, 1vw, 14px);
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3em * 1.85);
}

.mm-proj-pill {
    margin-top: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: clamp(12px, 0.95vw, 13.5px);
    padding: 8px 16px;
    border-radius: 999px;
}
.mm-pill-orange { background: var(--mm-soft); color: var(--mm-orange); }
.mm-pill-sky    { background: #E8F4F8; color: var(--mm-teal); }
.mm-pill-green  { background: #E5F3E6; color: #46B36A; }
.mm-pill-violet { background: #ECE6F8; color: #8B6FD0; }

/* ==========================================================================
   Course structure
   ========================================================================== */
.mm-structure {
    position: relative;
    overflow: hidden;
    background: var(--mm-orange-bg);
    padding: clamp(28px, 3vw, 50px) clamp(12px, 3vw, 44px) clamp(30px, 3.2vw, 54px);
}

.mm-structure-deco { position: absolute; inset: 0; pointer-events: none; color: #fff; }
.mm-struct-arrow { position: absolute; inset-inline-start: clamp(20px, 9vw, 170px); top: 38%; width: clamp(70px, 7vw, 104px); opacity: 0.85; }
.mm-struct-bulb  { position: absolute; inset-inline-start: clamp(14px, 4vw, 70px); top: clamp(120px, 13vw, 210px); width: clamp(44px, 4.4vw, 64px); opacity: 0.8; }

.mm-struct-doodle { position: absolute; z-index: 1; }
.mm-doodle-idea  { inset-inline-end: clamp(10px, 2.5vw, 48px); top: clamp(70px, 8vw, 120px); width: clamp(78px, 8vw, 124px); opacity: 0.9; transform: rotate(8deg); animation: mmfloat 5s ease-in-out infinite; }
.mm-doodle-code  { inset-inline-start: clamp(10px, 3vw, 60px); top: clamp(56px, 7vw, 104px); width: clamp(70px, 7.4vw, 116px); opacity: 0.92; transform: rotate(-10deg); animation: mmfloat2 6s ease-in-out infinite; }
.mm-doodle-learn { inset-inline-start: clamp(12px, 4vw, 80px); bottom: clamp(40px, 5vw, 90px); width: clamp(96px, 10vw, 158px); opacity: 0.8; }
.mm-doodle-brain { inset-inline-end: clamp(12px, 4vw, 80px); bottom: clamp(40px, 5vw, 96px); width: clamp(90px, 9vw, 150px); opacity: 0.8; }
.mm-doodle-point { inset-inline-end: clamp(30px, 18vw, 360px); bottom: clamp(18px, 2.6vw, 50px); width: clamp(80px, 8vw, 128px); opacity: 0.72; }

/* same defect as .mm-why and .mm-feedback: the section carries side padding of
   its own, so a bare 97vw inner container comes out WIDER than the box it sits
   in, which over-constrains margin-inline:auto and pushes the content off
   centre (measured 6px off at 390, 7px at 320, 40px at 1340). */
.mm-structure .mm-container-md { max-width: 100%; }

.mm-structure .mm-h2 { margin: 0 auto clamp(30px, 4vw, 56px); }

.mm-struct-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4vw, 70px);
}

.mm-struct-kids { flex: 1 1 420px; min-width: 280px; display: flex; justify-content: center; position: relative; isolation: isolate; }
.mm-struct-photo { width: min(100%, 620px); height: auto; display: block; position: relative; z-index: 1; filter: drop-shadow(0 24px 40px rgba(150, 52, 20, 0.18)); }

/* The organic shape the kids stand on, and two doodles to keep them company.
   All three are phone/tablet only — see the 900px block, which is also where
   .mm-struct-doodle / -arrow / -bulb get switched off. Desktop keeps today's
   floating cutout untouched. */
.mm-struct-blob { position: absolute; z-index: 0; display: none; inset-block: 2% -2%; inset-inline: -2%; width: 104%; height: 100%; filter: drop-shadow(0 16px 28px rgba(150, 52, 20, 0.16)); }
.mm-struct-blob-back  { fill: #FFEADD; opacity: 0.42; }
.mm-struct-blob-front { fill: #FFEADD; }
.mm-struct-blob-deco { position: absolute; z-index: 2; display: none; pointer-events: none; user-select: none; }
.mm-struct-blob-rocket { inset-inline-end: clamp(6px, 2vw, 22px); top: clamp(8px, 4vw, 26px); width: clamp(54px, 13vw, 96px); animation: mmfloat 5s ease-in-out infinite; }
.mm-struct-blob-idea { inset-inline-start: clamp(4px, 1.5vw, 18px); top: clamp(10px, 6vw, 40px); width: clamp(46px, 11vw, 84px); opacity: 0.92; animation: mmfloat2 6.5s ease-in-out infinite; }

.mm-struct-card {
    flex: 0 1 580px;
    min-width: 280px;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 30px 64px rgba(150, 52, 20, 0.22);
    padding: clamp(26px, 2.6vw, 40px) clamp(24px, 2.4vw, 38px);
}

/* A hairline under each row instead of a gap alone: five label/value pairs
   floating in whitespace read as a list with nothing holding it. */
.mm-struct-list { display: flex; flex-direction: column; }

.mm-struct-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: clamp(11px, 1.1vw, 15px) 0; border-bottom: 1px solid #F4E8DE; }
.mm-struct-item:last-child { border-bottom: 0; }
.mm-struct-item-label { display: flex; align-items: center; gap: clamp(11px, 1.1vw, 14px); min-width: 0; }
.mm-struct-ico { flex: none; width: clamp(40px, 3.2vw, 46px); aspect-ratio: 1; border-radius: 50%; background: #FFF0E6; color: var(--mm-orange); display: grid; place-items: center; }
.mm-struct-ico svg { width: 54%; height: 54%; }
.mm-struct-item-label span { font-weight: 700; color: #332F2A; font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.3; }
.mm-struct-item-value { color: #6E6A62; font-weight: 600; text-align: end; font-size: clamp(14px, 1.15vw, 16.5px); line-height: 1.35; font-variant-numeric: tabular-nums; }

/* Label and seal side by side, split by one rule. The STEM artwork ships on an
   opaque white plate, so that white is given a deliberate rounded chip rather
   than reading as an untrimmed rectangle on the tinted panel. */
.mm-struct-accred { margin-top: clamp(16px, 1.8vw, 22px); background: #FFF4EC; border-radius: clamp(16px, 1.4vw, 20px); padding: clamp(12px, 1.2vw, 16px) clamp(14px, 1.4vw, 18px); display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.mm-struct-accred-label { color: #3A3631; font-weight: 800; font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.35; text-align: center; margin: 0; }
.mm-struct-accred-rule { align-self: stretch; background: #F3DECE; border-radius: 1px; }
.mm-struct-accred-seal { display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 12px; padding: 8px clamp(10px, 1vw, 14px); box-shadow: 0 1px 0 rgba(150, 52, 20, 0.06), 0 0 0 1px rgba(230, 196, 170, 0.55); }
.mm-struct-accred-seal img { width: clamp(110px, 10vw, 142px); height: auto; display: block; }

.mm-struct-card .mm-btn-primary { margin-top: clamp(16px, 1.8vw, 22px); box-shadow: 0 10px 0 rgba(220, 70, 30, 0.22); }
.mm-struct-card .mm-btn-primary svg { flex: none; }

/* ==========================================================================
   Tracks / paths
   ========================================================================== */
.mm-tracks {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 600px at 12% 10%, rgba(255, 228, 205, 0.22), transparent 60%),
        radial-gradient(900px 600px at 88% 6%, rgba(255, 236, 221, 0.16), transparent 56%),
        linear-gradient(180deg, #FFFCF8 0%, #FBEDE2 100%);
    padding: clamp(54px, 6vw, 96px) 0 clamp(46px, 5vw, 72px);
}

.mm-tracks .mm-h2 { margin-inline: auto; }

.mm-tracks-tabs-wrap { display: flex; justify-content: center; margin: clamp(28px, 3.2vw, 46px) 0 clamp(18px, 2vw, 26px); }

.mm-tracks-tabs {
    position: relative;
    display: inline-flex;
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 12px 30px rgba(196, 120, 70, 0.16);
    gap: 4px;
}

.mm-track-tab {
    padding: 12px clamp(22px, 2.2vw, 34px);
    border-radius: 999px;
    font-weight: 800;
    font-size: clamp(14px, 1.1vw, 16.5px);
    cursor: pointer;
    color: #6E6A62;
    background: transparent;
    border: none;
    transition: all .22s ease;
    white-space: nowrap;
}
.mm-track-tab.on { background: var(--mm-orange); color: #fff; box-shadow: 0 8px 18px rgba(255, 107, 61, 0.32); }

.mm-track-panel[hidden], .mm-path-set[hidden] { display: none; }

/* level card at the reading START (right in AR, left in EN) + the cards
   track flexing after it. flex-start + fixed top offset = the level card
   NEVER moves when the track's height changes (dots appearing, different
   card counts). only the pointer glides. */
.mm-paths-row {
    --mm-levels-w: clamp(176px, 13.5vw, 214px);
    --mm-row-gap: clamp(18px, 2vw, 34px);
    /* card art height lives here, not on .mm-path-set, so the level card can
       read it and stay exactly as tall as the course cards next to it */
    --mm-art-h: clamp(231px, 17vw, 248px);
    display: flex;
    align-items: flex-start;
    gap: var(--mm-row-gap);
    margin-top: clamp(26px, 3vw, 42px);
}

.mm-paths-block { position: relative; flex: 1 1 auto; min-width: 0; }

.mm-levels {
    position: relative;
    flex: none;
    /* fixed width: switching category tabs must never resize the cards row */
    width: var(--mm-levels-w);
    background: #fff;
    border-radius: 20px;
    padding: clamp(16px, 1.6vw, 22px) clamp(14px, 1.4vw, 18px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    /* never shorter than a course card: the two read as one aligned row.
       it may still grow past that if a category ever has more levels. */
    min-height: calc(var(--mm-art-h) + 6px);
    box-shadow: 0 20px 46px rgba(196, 120, 70, 0.16);
    /* fixed anchor: flush with the course cards' top edge (the timeline
       viewport reserves 8px of top padding for the cards' hover lift) */
    margin-top: 8px;
}

.mm-levels-title {
    font-weight: 800;
    color: var(--mm-ink);
    font-size: clamp(14px, 1.05vw, 16px);
    text-align: center;
    margin-bottom: 2px;
}

.mm-levels-btns { display: flex; flex-direction: column; gap: 10px; }

/* the pointer grows OUT of the selected level and glides when the selection
   changes; the card sits at the reading start, so it points to inline-end */
.mm-levels-pointer {
    position: absolute;
    inset-inline-end: -11px;
    top: var(--mm-ptr-y, 50%);
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-inline-start: 12px solid var(--mm-orange);
    transition: top .38s cubic-bezier(.16, 1, .3, 1);
    filter: drop-shadow(0 3px 5px rgba(255, 107, 61, 0.35));
}
@media (prefers-reduced-motion: reduce) { .mm-levels-pointer { transition: none; } }

.mm-level-btn {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 800;
    font-size: clamp(13.5px, 1.05vw, 15.5px);
    line-height: 1.5;
    cursor: pointer;
    color: var(--mm-orange);
    background: #fff;
    border: 1.5px solid rgba(255, 107, 61, 0.55);
    transition: all .22s ease;
    text-align: center;
    white-space: normal;
}
.mm-level-btn:hover { border-color: var(--mm-orange); }
.mm-level-btn.on { background: var(--mm-orange); border-color: var(--mm-orange); color: #fff; box-shadow: 0 8px 18px rgba(255, 107, 61, 0.32); }

/* the journey track: big cards, a dashed rail with numbered steps, and the
   certificate medal at the END of the rail. Every journey element lives
   INSIDE the scrolling row, so it stretches with ANY course count. */
.mm-path-set {
    --mm-card-w: clamp(168px, 12.6vw, 222px);
    --mm-finish-w: 132px;
    /* rail passes through the center of the numbered step dots */
    --mm-rail-y: calc(var(--mm-art-h) + 31px);
}
.mm-path-set[hidden] { display: none; }

/* the viewport: scrolls sideways when a level has more courses than fit;
   overflow-y hidden so the row never becomes a wheel-stealing v-scroller.
   the mask melts the cut-off card into the background instead of slicing
   it: JS feeds the two fade widths, each side fades ONLY while more
   content hides behind it and shrinks to zero as the scroll reaches it */
.mm-timeline {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding: 8px 0 4px;
    -webkit-mask-image: linear-gradient(to right,
        transparent, #000 var(--mm-fade-l, 0px),
        #000 calc(100% - var(--mm-fade-r, 0px)), transparent);
    mask-image: linear-gradient(to right,
        transparent, #000 var(--mm-fade-l, 0px),
        #000 calc(100% - var(--mm-fade-r, 0px)), transparent);
}
.mm-timeline::-webkit-scrollbar { display: none; }

/* the scrolling content: centers itself when it fits, scrolls when it
   doesn't. the rail is drawn on it, so it always spans exactly from the
   first step dot to the finish medal. */
.mm-timeline-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.5vw, 22px);
    width: max-content;
    margin-inline: auto;
    padding-inline: 6px;
}
.mm-timeline-row::before {
    content: "";
    position: absolute;
    top: var(--mm-rail-y);
    inset-inline-start: calc(var(--mm-card-w) / 2 + 6px);
    inset-inline-end: calc(var(--mm-finish-w) / 2 + 6px);
    border-top: 2.5px dashed #EFA984;
    pointer-events: none;
}

.mm-path-unit {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--mm-card-w);
    flex: none;
    scroll-snap-align: start;
}

/* gentle staggered fade-in each time a level/category panel is shown */
@keyframes mm-track-in { from { opacity: 0; } to { opacity: 1; } }
.mm-path-set:not([hidden]) .mm-path-unit,
.mm-path-set:not([hidden]) .mm-path-finish {
    animation: mm-track-in .42s ease both;
    animation-delay: calc(var(--mm-i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
    .mm-path-set:not([hidden]) .mm-path-unit,
    .mm-path-set:not([hidden]) .mm-path-finish { animation: none; }
}

/* handoff card: full-bleed photo in an orange-bordered frame, course name in
   white over an orange gradient at the bottom edge */
.mm-path-card {
    display: block;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 3px solid var(--mm-orange);
    background: #fff;
    box-shadow: 0 12px 26px rgba(244, 90, 42, 0.14);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.mm-path-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(244, 90, 42, 0.24); }

.mm-path-art { position: relative; display: block; height: var(--mm-art-h); }
.mm-path-art img, .mm-path-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mm-path-overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(244, 90, 42, 0.95) 22%, rgba(244, 90, 42, 0.55) 60%, transparent);
    padding: clamp(30px, 3vw, 44px) 8px clamp(13px, 1.3vw, 19px);
    text-align: center;
    pointer-events: none;
}
.mm-path-overlay span {
    color: #fff;
    font-weight: 800;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* step marker: tick + numbered dot sitting ON the rail. the number is the
   course's real order in the level, so the rail reads as a learning path */
.mm-path-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2px;
}
.mm-path-tick { width: 2.5px; height: 8px; background: #EFA984; }
.mm-path-step b {
    width: 27px; height: 27px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--mm-orange);
    color: var(--mm-orange-deep);
    font-weight: 800;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 10px rgba(244, 90, 42, 0.18);
}

/* session count: a quiet caption hanging off the step dot. it rides the rail
   instead of adding a strip inside the card, so the card stays all photo */
.mm-path-count {
    margin-top: 6px;
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--mm-muted);
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* finish node: the certificate medal at the END of the rail, scrolls with
   the cards so it is always in the right place for any course count */
.mm-path-finish {
    position: relative;
    z-index: 1;
    flex: none;
    width: var(--mm-finish-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--mm-rail-y) - 31px);
}
.mm-finish-medal {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #F4B81F;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(232, 167, 24, 0.3);
}
.mm-finish-medal svg { width: 34px; height: 34px; }
.mm-finish-label {
    margin-top: 8px;
    text-align: center;
    font-weight: 800;
    color: var(--mm-ink);
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.35;
}
.mm-finish-label small { display: block; color: var(--mm-muted); font-weight: 700; font-size: 0.86em; }

/* page dots under the track (built by JS only when the row overflows).
   the cards block is pushed sideways by the level card, so compensate by
   half of it: the dots sit on the SECTION's center line, like the tabs bar */
.mm-track-dots { margin-top: clamp(8px, 1vw, 14px); min-height: 0; }
.mm-paths-row.mm-has-levels .mm-track-dots {
    position: relative;
    inset-inline-start: calc((var(--mm-levels-w) + var(--mm-row-gap)) / -2);
}

/* closing reassurance pill */
.mm-tracks-note-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: clamp(34px, 4vw, 54px);
}
.mm-tracks-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 999px;
    padding: 13px clamp(20px, 2.4vw, 30px);
    box-shadow: 0 14px 34px rgba(196, 120, 70, 0.16);
    color: var(--mm-ink);
    font-weight: 700;
    font-size: clamp(12.5px, 1.05vw, 15px);
    text-align: center;
}
.mm-tracks-note svg { color: var(--mm-orange); flex: none; }

/* ==========================================================================
   Skills marquee
   ========================================================================== */
.mm-skills {
    position: relative;
    overflow: hidden;
    /* flex column: sibling margins never collapse, so the marquees' negative
       shadow-breathing margins below stay exact */
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FFFCF8 0%, #FBF3EB 100%);
    /* top/bottom tuned so the VISUAL gap above the badge equals the gap
       below the last row (the neighbor sections' own paddings differ:
       tracks adds more space above than pricing adds below) */
    padding: clamp(44px, 4.5vw, 72px) 0 clamp(30px, 3.2vw, 48px);
}

.mm-skills .mm-section-head { margin-bottom: clamp(40px, 4.4vw, 64px); }
.mm-skills .mm-h2 { margin-inline: auto; }

/* 40px padding-block + the same negative margin = shadow breathing room
   inside the clip box, zero layout shift. Without it every pill's shadow is
   sheared at the row's edge and the clipped shadows merge into a sharp
   translucent band behind the whole row (same bug as the [data-scroller]
   ghost band). */
.mm-marq {
    overflow: hidden;
    padding-block: 40px;
    margin-block: -40px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.mm-marq + .mm-marq { margin-top: calc(clamp(16px, 1.6vw, 24px) - 40px); }

.mm-marq-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: mmscrollL 42s linear infinite;
}

.mm-marq-rev .mm-marq-track { animation-name: mmscrollR; }
.mm-marq:hover .mm-marq-track { animation-play-state: paused; }

.mm-marq-set { display: flex; padding-inline: clamp(7px, 0.7vw, 11px); }

@keyframes mmscrollL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mmscrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.mm-skill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
    background: #ffffff;
    border-radius: 999px;
    padding: 13px 22px;
    margin: 0 clamp(7px, 0.7vw, 11px);
    /* tighter than the mock's 26px blur: side-by-side pills would otherwise
       merge their shadows into one continuous carpet under the row */
    box-shadow: 0 6px 16px rgba(196, 120, 70, 0.10);
    font-weight: 800;
    color: var(--mm-ink);
    font-size: clamp(16px, 1.3vw, 20px);
    white-space: nowrap;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.mm-skill:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(196, 120, 70, 0.18); }

.mm-skill-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.mm-skill-ic svg { display: block; }

.mm-skill-ic--cyan   { background: #DFF6FA; color: #1FB6CC; }
.mm-skill-ic--purple { background: #EFE4FB; color: #9A57DE; }
.mm-skill-ic--red    { background: #FBE1E1; color: #E86A6A; }
.mm-skill-ic--blue   { background: #E5ECFB; color: #5578DE; }
.mm-skill-ic--orange { background: #FCE6D9; color: #FF6B3D; }
.mm-skill-ic--green  { background: #E1F4E8; color: #45AE6E; }
.mm-skill-ic--teal   { background: #DDF2ED; color: #23B29A; }

/* Reduced motion: the global block freezes the animation, which would trap
   most pills behind the edge mask. Fall back to a plain scrollable row. */
@media (prefers-reduced-motion: reduce) {
    .mm-marq { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
    .mm-marq-set[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.mm-pricing {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 12% 6%, rgba(255, 150, 92, 0.06), transparent 60%),
        radial-gradient(820px 520px at 88% 10%, rgba(255, 107, 61, 0.05), transparent 56%),
        linear-gradient(180deg, #FFF4EC 0%, #FFE7D8 100%);
    padding: clamp(38px, 3.6vw, 52px) 0 clamp(26px, 2.8vw, 38px);
}

/* this section has to fit one screen, so its head runs a tighter rhythm than
   the shared .mm-h2 scale used by the rest of the page */
.mm-pricing .mm-h2 { font-size: clamp(27px, 3.1vw, 42px); }

.mm-pricing-deco { position: absolute; inset: 0; pointer-events: none; }
.mm-dots-pricing {
    inset-inline-start: clamp(16px, 4vw, 64px); top: clamp(120px, 12vw, 200px);
    width: 118px; height: 96px; background-size: 19px 19px; opacity: 0.45;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 50%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 50%, #000 30%, transparent 72%);
}

.mm-price-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.5vw, 24px);
    /* every card hangs its tags 13px above its top edge, so a wrapped row has to
       pay that 13px back before the gap reads as a gap: this leaves ~23-29px of
       real air under the row above, matching the column gap by eye */
    row-gap: clamp(36px, 3vw, 42px);
    align-items: stretch;
    margin-top: clamp(22px, 2.1vw, 30px);
}

/* ---- card shell ---------------------------------------------------------- */
.mm-price-card {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 18px 44px -22px rgba(184, 142, 108, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.85);
    padding: clamp(24px, 1.95vw, 28px) clamp(20px, 1.8vw, 26px) clamp(20px, 1.7vw, 24px);
    display: flex;
    flex-direction: column;
    position: relative;
    /* the head asks the CARD how much room it has (see .mm-price-head) */
    container-type: inline-size;
    transition: transform .34s cubic-bezier(.2, .7, .3, 1), box-shadow .34s ease;
}

.mm-price-feat {
    background: linear-gradient(168deg, #FF7A45 0%, var(--mm-orange-deep) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 26px 54px -22px rgba(244, 90, 42, 0.65);
    z-index: 2;
}

/* the scroll-reveal rule (.mm-reveal.mm-in { transform: none }) lives further
   down the file and ties on specificity, so the hover transform needs the
   extra parent class to actually win */
.mm-price-grid .mm-price-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 58px -24px rgba(184, 142, 108, 0.78);
}
.mm-price-grid .mm-price-feat:hover { box-shadow: 0 38px 70px -22px rgba(244, 90, 42, 0.85); }

/* ---- top tags ------------------------------------------------------------ */
/* one centred row riding the card's top edge: on the best-offer card the two
   tags sit side by side in that row, a plain card carries its saving alone */
.mm-price-tags {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-wrap: nowrap;
    /* stretch, not center: the two pills then share one height even though only
       one of them carries a star — side by side, a 2px difference reads as a
       mistake */
    align-items: stretch;
    gap: 7px;
}

/* one shape for both pills — same type, same padding, same radius. Only the
   colours tell them apart. */
.mm-price-ribbon,
.mm-price-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: clamp(11.5px, 0.95vw, 12.5px);
    line-height: 1.2;
    padding: 6px 13px;
    border-radius: 999px;
    white-space: nowrap;
}

.mm-price-ribbon {
    background: #fff;
    color: var(--mm-orange-deep);
    box-shadow: 0 10px 22px rgba(180, 80, 40, 0.28);
}

/* ---- head: icon + name, with the price under its own hairline -------------- */
/* This is the card's default and the ONLY shape a desktop card takes: full-size
   name, hairline, then the price at full size on its own line. The price only
   moves up beside the name on a genuinely wide card (see the container queries
   below) — on the 4-up grid a card is ~265px wide and there is no room for both
   without shrinking the type, which is not worth it. */
.mm-price-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 14px;
    /* the tags overhang the top edge, so the head starts a touch lower */
    padding-top: 2px;
}
.mm-price-block {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: start;
    /* the hairline the price used to sit under, drawn by the block itself so it
       can disappear with the same rule that moves the price up beside the name */
    margin-top: clamp(11px, 1.05vw, 14px);
    padding-top: clamp(11px, 1.05vw, 14px);
    border-top: 1px solid #F0E4DA;
}
.mm-price-feat .mm-price-block { border-top-color: rgba(255, 255, 255, 0.26); }

/* PHONES ONLY: the price moves up beside the plan name. One card per row there,
   so it is wide enough to hold both at full size — nothing shrinks. Every wider
   layout keeps the card exactly as it has always been.
   The container guard inside is for small phones: below the width its own names
   need, even a phone card goes back to the stacked head. The width differs per
   locale, which is why the blade tags the grid with a bucket ($nameBucket). */
@media (max-width: 560px) {
    @container (min-width: 240px) {
        .mm-price-names-s .mm-price-head { grid-template-columns: auto minmax(0, 1fr) auto; }
        .mm-price-names-s .mm-price-block {
            grid-column: auto; justify-self: end; text-align: end;
            margin-top: 0; padding-top: 0; border-top: 0;
        }
        .mm-price-names-s .mm-price-main { justify-content: flex-end; }
    }

    @container (min-width: 258px) {
        .mm-price-names-m .mm-price-head { grid-template-columns: auto minmax(0, 1fr) auto; }
        .mm-price-names-m .mm-price-block {
            grid-column: auto; justify-self: end; text-align: end;
            margin-top: 0; padding-top: 0; border-top: 0;
        }
        .mm-price-names-m .mm-price-main { justify-content: flex-end; }
    }

    @container (min-width: 325px) {
        .mm-price-names-l .mm-price-head { grid-template-columns: auto minmax(0, 1fr) auto; }
        .mm-price-names-l .mm-price-block {
            grid-column: auto; justify-self: end; text-align: end;
            margin-top: 0; padding-top: 0; border-top: 0;
        }
        .mm-price-names-l .mm-price-main { justify-content: flex-end; }
    }
}


.mm-price-icon {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 16px;
    background: linear-gradient(158deg, #FFF1E7, #FCDFCC);
    color: var(--mm-orange-deep);
    box-shadow: inset 0 0 0 1px #F8DAC4, 0 5px 12px -8px rgba(184, 120, 70, 0.9);
    display: grid;
    place-items: center;
    transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
.mm-price-feat .mm-price-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
.mm-price-grid .mm-price-card:hover .mm-price-icon { transform: scale(1.08) rotate(-5deg); }

.mm-price-name { font-weight: 800; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.15; color: var(--mm-ink); }

/* the two tags share the top edge of a narrow card, so only THEY step down */
@container (max-width: 239px) {
    .mm-price-save, .mm-price-ribbon { font-size: 11px; padding: 5px 10px; }
    .mm-price-tags { gap: 5px; }
}
.mm-price-feat .mm-price-name { color: #fff; }

/* two lines is the ceiling: a third one lifts the price off the name's baseline
   and makes the head look taller than the card can carry. line-height stays at
   1.55 so the clamp never shaves the dots off an Arabic ي. */
.mm-price-tag {
    color: var(--mm-muted);
    font-weight: 500;
    font-size: clamp(12.5px, 1vw, 13.5px);
    line-height: 1.55;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mm-price-feat .mm-price-tag { color: rgba(255, 255, 255, 0.85); }

/* grouping wrappers: the min-width guard stops a long plan name or currency
   string from pushing a grid column wider than its track */
.mm-price-id, .mm-price-block { min-width: 0; }

/* ---- hairline separators ------------------------------------------------- */
.mm-price-rule { height: 1px; background: #F0E4DA; margin: clamp(11px, 1.05vw, 14px) 0; }
.mm-price-feat .mm-price-rule { background: rgba(255, 255, 255, 0.26); }

/* ---- price block: "instead of" first, then the number, then the badge ---- */
/* stays a block (not flex) so ::first-letter below actually applies — the
   pseudo-element is ignored on flex containers */
.mm-price-was {
    margin-top: 7px;
    font-size: clamp(13px, 1.05vw, 14px);
    font-weight: 600;
    color: #9A8F84;
}
/* the lang key is stored lowercase ("instead of") because the booking pages
   use it mid-sentence; Arabic has no letter case, so this only affects English */
.mm-price-was::first-letter { text-transform: uppercase; }
/* "instead of" stays quiet (it is a label) but the old figure itself has to be
   readable, and the strike needs its own colour or it reads as plain text */
.mm-price-was s {
    /* the site's standard body ink, not a warning colour: an old price is
       information, and orange on a white card reads as an alert */
    color: var(--mm-body-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* same ink, faded and hairline, so the line voids the figure without
       competing with it */
    text-decoration-color: rgba(115, 110, 104, 0.45);
    text-decoration-thickness: 1px;
}
.mm-price-feat .mm-price-was { color: rgba(255, 255, 255, 0.72); }
.mm-price-feat .mm-price-was s { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5); }

.mm-price-main {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
    white-space: nowrap;
}
.mm-price-cur {
    font-weight: 700;
    font-size: clamp(14px, 1.15vw, 16px);
    opacity: 0.68;
    padding-bottom: clamp(4px, 0.5vw, 7px);
}
.mm-price-amount {
    font-weight: 800;
    color: var(--mm-ink);
    /* 2.9vw (not 3.1) so the widest realistic price still fits the ~144px of
       inner room a card has at 901px, the narrowest 4-column width */
    font-size: clamp(26px, 2.9vw, 46px);
    letter-spacing: -1px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.mm-price-feat .mm-price-amount { color: #fff; }

/* same pill shape as the best-offer tag beside it — only the colour separates
   them, so the pair reads as one row. It keeps its teal on the featured card
   too: both tags float above the card, over the section background, so the
   white pill is already spoken for. */
.mm-price-save {
    background: #E6F6FA;
    color: #16809B;
    box-shadow: 0 10px 22px rgba(22, 128, 155, 0.2);
}

/* ---- duration strip ------------------------------------------------------ */
.mm-price-plan-line {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FBF5F0;
    color: #A0603A;
    font-weight: 700;
    font-size: clamp(13px, 1.05vw, 14px);
    padding: 11px 13px;
    border-radius: 11px;
}
.mm-price-plan-line svg { flex: none; }
.mm-price-feat .mm-price-plan-line { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---- benefits: one soft row each ----------------------------------------- */
.mm-price-benefits {
    display: grid;
    gap: 11px;
    margin-bottom: clamp(16px, 1.5vw, 20px);
}
/* plain lines, no chips: the tick carries the structure so each benefit reads
   as a sentence instead of a boxed tag */
.mm-price-benefit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    color: #5E5950;
    font-weight: 600;
    font-size: clamp(13.5px, 1.1vw, 14.5px);
    line-height: 1.45;
}
.mm-price-feat .mm-price-benefit { color: #fff; }

.mm-price-tick {
    width: 21px;
    height: 21px;
    flex: none;
    border-radius: 50%;
    background: #FFEDE4;
    color: var(--mm-orange);
    display: grid;
    place-items: center;
}
.mm-price-feat .mm-price-tick { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* ---- book button --------------------------------------------------------- */
.mm-price-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    font-size: clamp(14.5px, 1.2vw, 15.5px);
    padding: 14px;
    line-height: 1.4;
    border-radius: 14px;
    background: linear-gradient(180deg, #FF7A47, var(--mm-orange-deep));
    color: #fff;
    /* a flat colour lip, not a blurred drop shadow: this is the same button
       family as the hero pair and the "our structure" CTA, and it was the odd
       one out. On the featured card the lip goes white, since a lighter tint
       of a white button would be invisible on the orange ground. */
    box-shadow: 0 8px 0 rgba(255, 107, 61, 0.20);
    transition: transform .22s ease, box-shadow .22s ease;
}
.mm-price-feat .mm-price-cta {
    background: #fff;
    color: var(--mm-orange-deep);
    box-shadow: 0 8px 0 rgba(255, 255, 255, 0.34);
}
.mm-price-grid .mm-price-card:hover .mm-price-cta {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(255, 107, 61, 0.34);
}
.mm-price-grid .mm-price-feat:hover .mm-price-cta { box-shadow: 0 14px 24px rgba(120, 40, 15, 0.34); }


.mm-price-footnote {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: clamp(20px, 2.2vw, 30px);
    color: var(--mm-muted);
    font-weight: 600;
    font-size: clamp(13px, 1.1vw, 15.5px);
}
.mm-price-footnote svg { color: #C2742F; flex: none; }

/* ==========================================================================
   Blog
   ========================================================================== */
.mm-blogs { position: relative; overflow: hidden; padding: clamp(52px, 6vw, 92px) 0 clamp(30px, 4vw, 50px); }

.mm-blogs-deco { position: absolute; inset: 0; pointer-events: none; }
.mm-dots-blogs {
    inset-inline-start: 8px; top: 51px;
    width: 173px; height: 121px; background-size: 19px 19px; opacity: 0.5;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
}

.mm-blog-carousel {
    position: relative;
    z-index: 2;
    --mm-vis: 3;
    --mm-scroll-gap: clamp(20px, 2vw, 30px);
}

.mm-blog-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    /* compact hugging shadow: fades fully inside the scroller's paint room,
       so no clipped-shadow rectangle appears around the row */
    box-shadow: 0 14px 28px -16px rgba(184, 142, 108, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.mm-blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 28px -16px rgba(184, 142, 108, 0.38); }

.mm-blog-media {
    display: block;
    position: relative;
    margin: clamp(12px, 1.2vw, 14px) clamp(12px, 1.2vw, 14px) 0;
    height: clamp(180px, 16vw, 210px);
    border-radius: 14px;
    overflow: hidden;
}
.mm-blog-media img, .mm-blog-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mm-blog-pill {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--mm-orange);
    font-weight: 800;
    font-size: clamp(11px, 0.9vw, 13px);
    padding: 5px 13px;
    border-radius: 999px;
    pointer-events: none;
}

.mm-blog-icon {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mm-blog-body {
    padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.mm-blog-title { margin: 0 0 8px; }
.mm-blog-title a {
    color: var(--mm-ink);
    font-weight: 800;
    font-size: clamp(15px, 1.2vw, 17.5px);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2em * 1.55);
    transition: color .2s ease;
}
.mm-blog-title a:hover { color: var(--mm-orange-deep); }

.mm-blog-excerpt {
    margin: 0 0 18px;
    color: var(--mm-body-text);
    font-weight: 500;
    font-size: clamp(13px, 1vw, 14.5px);
    line-height: 1.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3em * 1.9);
}

.mm-blog-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }

.mm-blog-date { display: inline-flex; align-items: center; gap: 6px; color: #9A938B; font-weight: 600; font-size: clamp(11px, 0.9vw, 13px); }
.mm-blog-date svg { color: var(--mm-orange); flex: none; }

.mm-blog-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid var(--mm-teal);
    color: var(--mm-teal);
    border-radius: 999px;
    padding: 7px 15px;
    font-weight: 700;
    font-size: clamp(12px, 0.95vw, 14px);
    transition: background .2s ease, color .2s ease;
}
.mm-blog-more:hover { background: var(--mm-teal); color: #fff; }

/* ==========================================================================
   Blogs index page (/blogs) — compact hero, featured latest, grid, pager
   ========================================================================== */
.mm-blogshero {
    position: relative;
    overflow: hidden;
    /* trimmed so the fold can hold the featured card and the first row of
       blog cards, but the title still gets real air above and below it */
    padding: clamp(22px, 2.2vw, 33px) 0 clamp(26px, 2.6vw, 40px);
    background: linear-gradient(180deg, #FFFCF8 0%, #FEF6EF 55%, #FAF3EC 100%);
}
.mm-dots-bloghero-a {
    inset-inline-start: clamp(8px, 3vw, 70px); top: 46px;
    width: 173px; height: 121px;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
}
.mm-dots-bloghero-b {
    inset-inline-end: clamp(8px, 3vw, 70px); bottom: 18px;
    width: 150px; height: 100px; opacity: 0.3;
    -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 100% 100%, #000 30%, transparent 72%);
}
.mm-blogshero .mm-ghost-rocket { animation: mmfloat 5.5s ease-in-out infinite; }
.mm-blogshero-head { position: relative; z-index: 2; text-align: center; }

.mm-blogindex { position: relative; padding-bottom: clamp(20px, 2.6vw, 40px); }

/* featured (latest) article: one wide two-column card */
.mm-blogfeat {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 14px 28px -16px rgba(184, 142, 108, 0.30);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
    margin-bottom: clamp(18px, 1.5vw, 22px);
}
.mm-blogfeat:hover { transform: translateY(-6px); box-shadow: 0 20px 28px -16px rgba(184, 142, 108, 0.38); }
.mm-blogfeat-media {
    position: relative;
    display: block;
    margin: clamp(12px, 1.2vw, 16px);
    margin-inline-end: 0;
    /* the text column drives the card height; the photo just fills whatever
       that is, so the two sides can never end up mismatched */
    height: auto;
    min-height: clamp(180px, 15vw, 220px);
    border-radius: 16px;
    overflow: hidden;
}
.mm-blogfeat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-blogfeat-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 1.9vw, 28px) clamp(22px, 2.8vw, 44px); }
.mm-blogfeat-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(10px, 1vw, 13px); }
.mm-feat-flag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--mm-orange); color: #fff;
    font-weight: 800; font-size: clamp(11px, 0.9vw, 13px);
    padding: 5px 13px; border-radius: 999px;
    box-shadow: 0 6px 14px rgba(255, 107, 61, 0.35);
}
.mm-blogfeat-pill { display: inline-flex; background: var(--mm-soft); color: var(--mm-orange); font-weight: 800; font-size: clamp(11px, 0.9vw, 13px); padding: 5px 13px; border-radius: 999px; }
.mm-blogfeat-title { margin: 0 0 clamp(9px, 0.9vw, 12px); }
.mm-blogfeat-title a {
    color: var(--mm-ink); font-weight: 800;
    font-size: clamp(20px, 2.1vw, 30px); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .2s ease;
}
.mm-blogfeat-title a:hover { color: var(--mm-orange-deep); }
.mm-blogfeat-excerpt {
    color: var(--mm-body-text); font-weight: 500;
    font-size: clamp(13.5px, 1.1vw, 16px); line-height: 1.75;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    /* see the note on .mm-blogindex .mm-blog-excerpt: without this the flex
       minimum keeps every line and the clamp never applies */
    min-height: 0;
    margin-bottom: clamp(14px, 1.5vw, 20px);
}
.mm-blogfeat-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mm-blogfeat-foot .mm-blog-date { font-size: clamp(12px, 1vw, 14px); }
.mm-blogfeat-btn { height: 48px; border-radius: 999px; padding: 0 26px; font-size: clamp(13.5px, 1.05vw, 15.5px); }

/* the homepage card, in an auto-fill grid instead of a scroller */
.mm-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 2vw, 30px); }

/* pager: numbered circle chips windowed to 7, circular arrows at both ends */
.mm-pager { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 0.8vw, 10px); margin-top: clamp(30px, 3.4vw, 48px); }
.mm-page-chip, .mm-pager-arrow {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1.5px solid transparent;
    color: var(--mm-ink); font-weight: 800; font-size: 15px;
    font-variant-numeric: tabular-nums;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mm-page-chip:hover { background: var(--mm-soft); color: var(--mm-orange-deep); }
.mm-page-chip.active { background: var(--mm-orange); color: #fff; box-shadow: 0 8px 18px rgba(255, 107, 61, 0.35); }
.mm-page-gap { width: 32px; text-align: center; color: var(--mm-muted); font-weight: 800; letter-spacing: 2px; }
.mm-pager-arrow { background: #ffffff; border-color: var(--mm-line); }
.mm-pager-arrow:hover { color: var(--mm-orange); border-color: var(--mm-orange); background: var(--mm-soft); }
.mm-pager-arrow.is-disabled { opacity: 0.3; pointer-events: none; }

/* on the blogs index the first grid row has to share the fold with the
   featured card, so the cards run shorter here than in the homepage strip */
.mm-blogindex .mm-blog-media { height: clamp(128px, 10vw, 144px); }
.mm-blogindex .mm-blog-body { padding: clamp(12px, 1.05vw, 14px) clamp(18px, 1.8vw, 24px) clamp(13px, 1.15vw, 15px); }
/* min-height:0 is what makes the clamp bite: as a column-flex item the
   paragraph's automatic minimum size is its full text height, which floors
   it at every line and silently cancels -webkit-line-clamp */
.mm-blogindex .mm-blog-excerpt { -webkit-line-clamp: 2; line-height: 1.7; margin-bottom: 13px; min-height: 0; }

/* empty state (no published blogs) */
.mm-blogs-empty { text-align: center; padding: clamp(40px, 6vw, 90px) 20px; }
.mm-blogs-empty img { width: clamp(90px, 10vw, 130px); opacity: 0.5; margin-bottom: 22px; animation: mmfloat 5.5s ease-in-out infinite; }
.mm-blogs-empty h2 { font-weight: 800; font-size: clamp(19px, 1.9vw, 26px); color: var(--mm-ink); margin-bottom: 10px; }
.mm-blogs-empty p { color: var(--mm-muted); font-weight: 500; font-size: clamp(14px, 1.15vw, 16px); margin-bottom: 26px; }

@media (max-width: 900px) {
    .mm-blogfeat { grid-template-columns: 1fr; }
    .mm-blogfeat-media { margin: 12px; margin-bottom: 0; height: clamp(200px, 48vw, 300px); }
    .mm-blogfeat-body { padding: 20px 22px 24px; }
}

/* ==========================================================================
   Blog article page (/blogs/{slug}) — narrow reading column
   ========================================================================== */
.mm-post {
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 3.6vw, 56px) 0 clamp(36px, 4vw, 64px);
    background: linear-gradient(180deg, #FFFCF8 0%, #FAF3EC 420px);
}
.mm-post .mm-container-sm { max-width: 920px; }
.mm-dots-post {
    inset-inline-end: clamp(8px, 3vw, 70px); top: 40px;
    width: 160px; height: 110px;
    -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 100% 0%, #000 30%, transparent 72%);
}

.mm-post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(12px, 1.4vw, 18px); }
.mm-post-pill { display: inline-flex; background: var(--mm-soft); color: var(--mm-orange); font-weight: 800; font-size: clamp(11.5px, 0.95vw, 13.5px); padding: 6px 14px; border-radius: 999px; }
.mm-post-date, .mm-post-mins { display: inline-flex; align-items: center; gap: 6px; color: var(--mm-muted); font-weight: 600; font-size: clamp(12px, 1vw, 14px); font-variant-numeric: tabular-nums; }
.mm-post-date svg, .mm-post-mins svg { color: var(--mm-orange); flex: none; }
.mm-post-dot { width: 4px; height: 4px; border-radius: 50%; background: #D8CFC2; }

.mm-post-title {
    font-weight: 800; color: var(--mm-ink);
    font-size: clamp(24px, 2.9vw, 40px); line-height: 1.55; letter-spacing: -0.5px;
    margin-bottom: clamp(20px, 2.4vw, 32px);
    text-wrap: balance;
}

.mm-post-hero {
    position: relative; margin: 0 0 clamp(26px, 3vw, 44px);
    border-radius: 20px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 14px 28px -16px rgba(184, 142, 108, 0.30);
}
.mm-post-hero img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 640px) { .mm-post-hero img { aspect-ratio: 16 / 9; } }

/* prose: the admin rich-HTML body */
.mm-prose { color: #4A443C; font-size: clamp(15px, 1.15vw, 17px); line-height: 2.05; font-weight: 500; }
.mm-prose p { margin-bottom: 1.15em; }
.mm-prose h2, .mm-prose h3, .mm-prose h4 { color: var(--mm-ink); font-weight: 800; line-height: 1.6; margin: 1.7em 0 0.65em; }
.mm-prose h2 { font-size: clamp(19px, 1.7vw, 25px); position: relative; padding-bottom: 12px; }
.mm-prose h2::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 44px; height: 4px; border-radius: 4px; background: var(--mm-orange); }
.mm-prose h3, .mm-prose h4 { font-size: clamp(16.5px, 1.4vw, 20px); }
.mm-prose a { color: var(--mm-teal-deep); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(31, 168, 201, 0.4); text-underline-offset: 4px; }
.mm-prose a:hover { color: var(--mm-teal); }
.mm-prose ul, .mm-prose ol { margin: 0 0 1.15em; padding-inline-start: 1.4em; }
.mm-prose li { margin-bottom: 0.5em; }
.mm-prose li::marker { color: var(--mm-orange); font-weight: 800; }
.mm-prose img { max-width: 100%; height: auto; border-radius: 16px; margin: 0.6em 0 1.2em; }
.mm-prose blockquote { background: #FFF9F4; border: 1px solid var(--mm-line); border-radius: 16px; padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 28px); margin: 0 0 1.15em; }
.mm-prose strong { color: var(--mm-ink); font-weight: 800; }
/* The admin editor bakes dir="rtl" into saved paragraphs even for the EN
   translation. Block-level direction must follow the PAGE locale, so the
   attribute is neutralized on blocks only (inline spans keep their dir,
   they isolate Latin fragments inside Arabic text). */
.mm-prose p[dir], .mm-prose h1[dir], .mm-prose h2[dir], .mm-prose h3[dir], .mm-prose h4[dir],
.mm-prose ul[dir], .mm-prose ol[dir], .mm-prose li[dir], .mm-prose div[dir], .mm-prose blockquote[dir] {
    direction: inherit;
    text-align: start;
}

/* previous / next mini cards: prev sits on the "backward" side per direction */
.mm-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(36px, 4vw, 60px); }
.mm-post-nav-card {
    display: flex; align-items: center; gap: 14px; min-width: 0;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 14px 28px -16px rgba(184, 142, 108, 0.30);
    border-radius: 18px;
    padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.mm-post-nav-card:hover { transform: translateY(-4px); box-shadow: 0 20px 28px -16px rgba(184, 142, 108, 0.38); }
.mm-post-nav-card.is-next { flex-direction: row-reverse; text-align: end; }
.mm-post-nav-arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--mm-soft); color: var(--mm-orange); display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; }
.mm-post-nav-card:hover .mm-post-nav-arrow { background: var(--mm-orange); color: #fff; }
.mm-post-nav-body { min-width: 0; }
.mm-post-nav-label { display: block; color: var(--mm-muted); font-weight: 700; font-size: clamp(11px, 0.9vw, 12.5px); margin-bottom: 4px; }
.mm-post-nav-title { color: var(--mm-ink); font-weight: 800; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-post-nav-ghost { visibility: hidden; }
@media (max-width: 700px) {
    .mm-post-nav { grid-template-columns: 1fr; }
    .mm-post-nav-ghost { display: none; }
}

/* ==========================================================================
   About + orbit
   ========================================================================== */
.mm-about {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 12% 6%, rgba(255, 150, 92, 0.06), transparent 60%),
        radial-gradient(820px 520px at 88% 10%, rgba(255, 107, 61, 0.05), transparent 56%),
        linear-gradient(180deg, #FFF4EC 0%, #FFE7D8 100%);
    padding: clamp(54px, 6vw, 96px) 0;
}

.mm-about-deco { position: absolute; inset: 0; pointer-events: none; }
.mm-dots-about {
    inset-inline-start: clamp(16px, 4vw, 64px); top: clamp(40px, 5vw, 84px);
    width: 118px; height: 96px; background-size: 19px 19px; opacity: 0.5;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
}

.mm-about-row {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(40px, 6vw, 110px);
}

.mm-about-copy { flex: 1 1 420px; min-width: 300px; }

.mm-about-eyebrow {
    color: var(--mm-orange);
    font-weight: 800;
    letter-spacing: 2px;
    font-size: clamp(12px, 1vw, 14px);
    margin-bottom: clamp(12px, 1.4vw, 16px);
}

.mm-about-desc {
    margin: clamp(18px, 2vw, 26px) 0 clamp(22px, 2.4vw, 30px);
    color: var(--mm-body-text);
    font-weight: 500;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.95;
    max-width: 36em;
}

.mm-about-cards { display: flex; gap: clamp(12px, 1.4vw, 16px); flex-wrap: wrap; align-items: stretch; }

.mm-about-card {
    flex: 1 1 210px;
    background: #ffffff;
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(184, 142, 108, 0.13);
    padding: clamp(16px, 1.6vw, 20px);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
/* keep the reveal's opacity timing but a snappy transform so the hover lift
   isn't dragged out by .mm-reveal's long transition + stagger delay */
.mm-about-cards .mm-about-card {
    transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
    transition-delay: var(--mm-rd, 0ms), 0ms, 0ms;
}
.mm-about-cards .mm-about-card:hover { transform: translateY(-8px); box-shadow: 0 24px 38px -14px rgba(244, 90, 42, 0.28); }

.mm-about-card-icon {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-about-card-title { font-weight: 800; color: var(--mm-orange); font-size: clamp(15px, 1.2vw, 17px); }
.mm-about-card-text { color: var(--mm-body-text); font-weight: 500; font-size: clamp(12px, 1vw, 13.5px); margin-top: 4px; line-height: 1.6; }

.mm-about-orbit {
    flex: 1 1 460px;
    min-width: 300px;
    position: relative;
    min-height: clamp(460px, 44vw, 580px);
}

.mm-orbit-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 34vw, 400px);
    height: clamp(300px, 34vw, 400px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 150, 92, 0.14), transparent 70%);
    z-index: 0;
}

.mm-orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(340px, 40vw, 460px);
    height: clamp(340px, 40vw, 460px);
    border-radius: 50%;
    border: 2px dashed rgba(255, 107, 61, 0.26);
    z-index: 1;
    display: block;
}

.mm-orbit-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(190px, 20vw, 263px);
    height: auto;
    max-height: clamp(300px, 34vw, 390px);
    object-fit: contain;
    filter: drop-shadow(0 16px 30px rgba(196, 120, 70, 0.22));
}

/* the anchor shares the ring's exact box, so percentage slots put every chip
   center right on the dashed circle. The ring itself is static: no spin,
   no idle float; motion only answers the cursor */
.mm-orbit-anchor {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(340px, 40vw, 460px);
    height: clamp(340px, 40vw, 460px);
    z-index: 2;
}

.mm-orbit-card {
    position: absolute;
    width: clamp(162px, 14.6vw, 212px);
    min-height: 66px;
    background: #ffffff;
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(184, 142, 108, 0.16);
    padding: 12px 13px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.mm-orbit-card:hover { box-shadow: 0 22px 34px -14px rgba(244, 90, 42, 0.30); z-index: 5; }

/* chip centers slightly outside the ring (r = 56% of the anchor box) so they
   breathe away from the circle: 120° / 60° up, 180° / 0° sides, 240° / 300° down */
.mm-orbit-pos-1 { left: 22%;  top: 1.5%; }
.mm-orbit-pos-2 { left: 78%;  top: 1.5%; }
.mm-orbit-pos-3 { left: -6%;  top: 50%; }
.mm-orbit-pos-4 { left: 106%; top: 50%; }
.mm-orbit-pos-5 { left: 22%;  top: 98.5%; }
.mm-orbit-pos-6 { left: 78%;  top: 98.5%; }
.mm-orbit-anchor .mm-orbit-card { transform: translate(-50%, -50%) rotate(var(--mm-rot, 0deg)); }
.mm-orbit-anchor .mm-orbit-card:hover { transform: translate(-50%, -50%) rotate(0deg) translateY(-8px); }

/* mid widths: the side chips would poke past the viewport edge, so ease them
   back toward the ring until the layout stacks at 900px */
@media (max-width: 1280px) and (min-width: 901px) {
    .mm-orbit-card { width: clamp(150px, 13vw, 180px); }
    .mm-orbit-pos-3 { left: 1%; }
    .mm-orbit-pos-4 { left: 99%; }
}

/* items beyond the six ring slots flow into a centered row under the orbit */
.mm-orbit-extra {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(18px, 2.4vw, 28px);
}
.mm-orbit-extra .mm-orbit-card { position: static; width: clamp(180px, 16vw, 220px); transform: rotate(var(--mm-rot, 0deg)); }
.mm-orbit-extra .mm-orbit-card:hover { transform: rotate(0deg) translateY(-8px); }

.mm-orbit-icon {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-orbit-text { min-width: 0; }
.mm-orbit-title { display: block; font-weight: 800; color: var(--mm-ink); font-size: clamp(12.5px, 1.05vw, 15px); line-height: 1.3; }
.mm-orbit-sub { display: block; color: var(--mm-muted); font-weight: 500; font-size: clamp(10px, 0.85vw, 12px); margin-top: 3px; }

/* "students globally" condensed to a centered closing pill (same family
   as .mm-tracks-note; replaces the removed map section, same admin data) */
.mm-world-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: clamp(34px, 4vw, 54px);
}

.mm-world-pill {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px clamp(14px, 1.8vw, 22px);
    background: #fff;
    border-radius: 999px;
    padding: 13px clamp(22px, 2.8vw, 36px);
    box-shadow: 0 14px 34px rgba(196, 120, 70, 0.16);
    color: var(--mm-ink);
    font-weight: 700;
    font-size: clamp(12.5px, 1.05vw, 15px);
    text-align: center;
}

.mm-world-lead { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.mm-world-lead svg { color: var(--mm-teal); flex: none; }
.mm-world-div { align-self: stretch; width: 1px; background: var(--mm-line); }
.mm-world-stat { display: inline-flex; align-items: baseline; gap: 6px; color: var(--mm-muted); font-weight: 600; }
.mm-world-stat b { color: var(--mm-orange-deep); font-weight: 800; font-size: 1.25em; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .mm-world-pill { border-radius: 22px; }
    .mm-world-div { display: none; }
    .mm-world-lead { flex-basis: 100%; justify-content: center; }
}

/* ==========================================================================
   FAQ (handoff "FAQ" screen re-voiced in the site's own language:
   sticky side rail + accordion column, soft shadows, no sticker rotation)
   ========================================================================== */
.mm-faqs { position: relative; padding: clamp(52px, 6vw, 92px) 0 clamp(28px, 3.5vw, 46px); }

.mm-faqs-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: clamp(34px, 4vw, 80px);
    align-items: start;
}

.mm-faqs-rail { position: sticky; top: calc(var(--mm-nav-h) + 30px); text-align: start; }

.mm-faqs-title-accent { color: var(--mm-orange); }

.mm-faqs-desc {
    margin: clamp(14px, 1.6vw, 22px) 0 clamp(24px, 2.6vw, 36px);
    color: var(--mm-muted);
    font-weight: 500;
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.9;
}

.mm-faqs-cta {
    position: relative;
    background: linear-gradient(135deg, #FF7A47 0%, var(--mm-orange-deep) 100%);
    border-radius: 24px;
    padding: clamp(22px, 2.2vw, 32px);
    box-shadow: 0 24px 50px rgba(244, 90, 42, 0.28);
}

.mm-faqs-cta-title { color: #ffffff; font-weight: 800; font-size: clamp(17px, 1.5vw, 22px); margin-bottom: 8px; }

.mm-faqs-cta-desc {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.85;
}

.mm-faqs-cta .mm-faqs-cta-btn { width: 100%; }

.mm-faq-list { display: flex; flex-direction: column; gap: clamp(12px, 1.3vw, 18px); }

.mm-faq {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid var(--mm-line);
    box-shadow: 0 12px 30px rgba(184, 142, 108, 0.10);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.mm-faq[open] { border-color: rgba(255, 107, 61, 0.55); box-shadow: 0 16px 38px rgba(255, 107, 61, 0.10); }

.mm-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(18px, 1.7vw, 24px) clamp(20px, 2vw, 28px);
    font-weight: 800;
    font-size: clamp(15px, 1.3vw, 19px);
    color: var(--mm-ink);
    cursor: pointer;
    border-radius: 18px;
    transition: background .2s ease;
}
.mm-faq summary::-webkit-details-marker { display: none; }
.mm-faq summary:hover { background: rgba(255, 107, 61, 0.035); }

.mm-faq-q { text-align: start; }

.mm-faq-chev {
    flex: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--mm-soft);
    color: var(--mm-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease;
}
.mm-faq[open] .mm-faq-chev { transform: rotate(180deg); }

.mm-faq-a {
    padding: 0 clamp(22px, 2vw, 30px) clamp(20px, 2vw, 26px);
    color: var(--mm-body-text);
    font-weight: 500;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.95;
    text-align: start;
}

@media (max-width: 1020px) {
    .mm-faqs-grid { grid-template-columns: 1fr; }
    .mm-faqs-rail { position: static; }
    /* reserve room for the mascot's overhang so it never sits on the intro text */
    .mm-faqs-cta { margin-top: 62px; }
    .mm-faqs-desc { margin-bottom: 0; }
}

/* answers come from the admin rich editor: tame the injected markup */
.mm-faq-a p { margin: 0 0 10px; }
.mm-faq-a p:last-child { margin-bottom: 0; }
.mm-faq-a ul, .mm-faq-a ol { margin: 0 0 10px; padding-inline-start: 22px; }
.mm-faq-a li { margin-bottom: 4px; }
.mm-faq-a li::marker { color: var(--mm-orange); }
.mm-faq-a strong { color: #4A443C; }
.mm-faq-a a { color: var(--mm-teal); font-weight: 700; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.mm-cta { padding: clamp(28px, 3vw, 48px) 0 clamp(52px, 6vw, 84px); }

.mm-cta-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #FF7A47 0%, var(--mm-orange-deep) 100%);
    border-radius: clamp(24px, 2.6vw, 38px);
    box-shadow: 0 30px 65px rgba(244, 90, 42, 0.32);
    padding: clamp(46px, 5vw, 76px) clamp(28px, 4vw, 56px);
    text-align: center;
}

.mm-cta-deco { position: absolute; background: rgba(255, 255, 255, 0.10); pointer-events: none; }
.mm-cta-deco-1 { top: -60px; inset-inline-end: -30px; width: 230px; height: 230px; border-radius: 50%; }
.mm-cta-deco-2 { bottom: -80px; inset-inline-start: -30px; width: 250px; height: 250px; border-radius: 34px; background: rgba(255, 255, 255, 0.08); transform: rotate(18deg); }
.mm-cta-deco-3 { top: 34px; inset-inline-start: 9%; width: 88px; height: 88px; border-radius: 24px; background: rgba(255, 255, 255, 0.07); transform: rotate(-12deg); }

.mm-cta-content { position: relative; z-index: 1; }

.mm-cta-title { color: #ffffff; font-weight: 800; font-size: clamp(26px, 3vw, 46px); line-height: 1.3; margin-bottom: clamp(14px, 1.6vw, 20px); }

.mm-cta-hl {
    display: inline-block;
    background: var(--mm-footer-bg);
    padding: 0 0.42em 0.14em;
    border-radius: 0.36em;
    transform: rotate(-2deg);
}

.mm-cta-desc {
    margin: 0 auto clamp(26px, 3vw, 36px);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    font-size: clamp(15px, 1.4vw, 20px);
    line-height: 1.7;
    max-width: 36em;
}

.mm-cta-actions { display: flex; gap: clamp(12px, 1.4vw, 16px); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.mm-footer {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background: var(--mm-footer-bg);
    border-radius: clamp(26px, 3vw, 46px) clamp(26px, 3vw, 46px) 0 0;
    padding: clamp(48px, 5vw, 76px) 0 clamp(22px, 2.4vw, 32px);
}

.mm-footer-deco { position: absolute; inset: 0; pointer-events: none; }
.mm-dots-footer {
    inset-inline-start: clamp(20px, 4vw, 60px); top: clamp(34px, 4vw, 58px);
    width: 120px; height: 96px;
    background-image: radial-gradient(circle, #ffffff 2px, transparent 2.6px);
    background-size: 20px 20px;
    opacity: 0.06;
    -webkit-mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
    mask-image: radial-gradient(120% 120% at 0% 0%, #000 30%, transparent 72%);
}
.mm-footer-rocket-1 { position: absolute; inset-inline-end: clamp(120px, 22vw, 420px); top: clamp(30px, 4vw, 56px); width: clamp(80px, 8vw, 116px); opacity: 0.07; }
.mm-footer-rocket-2 { position: absolute; inset-inline-start: clamp(40px, 8vw, 180px); bottom: clamp(40px, 5vw, 90px); width: clamp(64px, 6vw, 92px); opacity: 0.05; transform: rotate(12deg); }
.mm-ring-footer-1 { inset-inline-start: -130px; bottom: -150px; width: 330px; height: 330px; border-color: rgba(255, 255, 255, 0.05); }
.mm-ring-footer-2 { inset-inline-start: -90px; bottom: -110px; width: 250px; height: 250px; border-color: rgba(255, 255, 255, 0.05); }

.mm-footer-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.25fr 0.8fr 1fr;
    gap: clamp(34px, 4vw, 64px);
    align-items: start;
}

.mm-footer-brand { text-align: center; }
/* direct child only: nested images (payment marks) must not inherit the
   brand logo's bottom margin, 280px width or drop shadow */
.mm-footer-brand > img { display: block; margin: 0 auto clamp(18px, 2vw, 26px); width: min(100%, 280px); height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); }
.mm-footer-brand p { color: #AAB7BC; font-weight: 500; line-height: 2.1; font-size: clamp(14px, 1.1vw, 16px); margin: 0 auto; max-width: 34em; }

/* accepted-payment marks: uniform white chips so three different brand
   lockups read as one row against the dark footer */
.mm-footer-pay { margin-top: clamp(24px, 2.6vw, 34px); }
.mm-footer-pay-label {
    display: block;
    color: #8FA0A7;
    font-weight: 700;
    font-size: clamp(12px, 0.95vw, 14px);
    margin-bottom: clamp(11px, 1.1vw, 14px);
}
.mm-footer-pay-list { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
/* outlined chips, same language as .mm-soc. The marks ship as dark-background
   variants (dark/): Mastercard keeps its full colour, PayPal swaps its navy
   half for white and keeps the cyan, Visa reverses to white — its navy is the
   one mark that cannot survive on this background. */
.mm-pay {
    width: 64px;
    height: 40px;
    border-radius: 12px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* each lockup is sized on its own so the three read at equal optical weight:
   wordmarks matched on width, the Mastercard symbol on height */
.mm-pay img { display: block; width: auto; height: auto; margin: 0; filter: none; }
.mm-pay-visa img { width: 38px; }
.mm-pay-paypal img { width: 42px; }
.mm-pay-mastercard img { height: 22px; }

.mm-footer-col { text-align: center; }

.mm-footer-head { font-weight: 800; font-size: clamp(18px, 1.6vw, 23px); color: #ffffff; }

.mm-footer-underline {
    display: block;
    width: 44px; height: 3px;
    border-radius: 3px;
    background: var(--mm-orange);
    margin: clamp(10px, 1.1vw, 14px) auto clamp(22px, 2.2vw, 30px);
}

.mm-footer-links { display: flex; flex-direction: column; gap: clamp(13px, 1.4vw, 18px); align-items: center; }
.mm-foot-link { color: #C2CDD2; font-weight: 500; font-size: clamp(14px, 1.1vw, 16px); transition: color .15s ease; }
.mm-foot-link:hover { color: #ffffff; }

.mm-footer-contacts { display: inline-grid; grid-template-columns: 24px 1fr; gap: clamp(14px, 1.5vw, 18px) 14px; direction: ltr; justify-self: center; transform: translateX(-19px); }
.mm-footer-contact { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; text-align: center; color: #C7D2D7; font-weight: 600; font-size: clamp(13px, 1.05vw, 16px); }
a.mm-footer-contact:hover { color: #fff; }
.mm-footer-contact svg { color: #E6EDF0; flex: none; width: 24px; height: 24px; }
.mm-footer-phones { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1vw, 14px); flex-wrap: wrap; }
.mm-footer-phone { color: inherit; transition: color .15s ease; }
.mm-footer-phone:hover { color: #fff; }
.mm-footer-sep { width: 1px; align-self: stretch; min-height: 14px; background: rgba(255, 255, 255, .26); }

.mm-footer-socials { display: flex; justify-content: center; gap: 11px; margin-top: clamp(24px, 2.4vw, 32px); flex-wrap: wrap; }
.mm-soc {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.mm-soc:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.07); }
.mm-soc img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }

.mm-footer-divider { height: 1px; background: rgba(255, 255, 255, 0.12); margin: clamp(34px, 4vw, 50px) 0 clamp(18px, 2vw, 24px); }

.mm-footer-copy { text-align: center; color: #9FAEB3; font-weight: 500; font-size: clamp(13px, 1.1vw, 15px); }
.mm-footer-copy a { color: #ffffff; font-weight: 700; }

/* ---- WhatsApp edge tab ------------------------------------------------------
   Sits flush on the inline-start border of the viewport (right in RTL, left in
   LTR) and opens inward. Closed it is icon-only; the label unrolls on hover /
   keyboard focus, or by itself once on touch and then stays open
   (.mm-whats-open, set by home.js).
   The label expands via grid-template-columns 0fr -> 1fr so it animates to the
   text's natural width in any locale, no hardcoded px. */
.mm-whats-float {
    position: fixed;
    bottom: 26px;
    inset-inline-start: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    /* gap opens with the label: closed, the tab is a clean 56x56 square */
    gap: 0;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--mm-line);
    border-inline-start-color: transparent;
    border-start-end-radius: 16px;
    border-end-end-radius: 16px;
    box-shadow: 0 10px 26px rgba(120, 80, 50, 0.14);
    color: #1E4B32;
    transition: box-shadow .25s ease, gap .3s ease, padding-inline-end .3s ease;
}

.mm-whats-disc {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(160deg, #2CE372, #1DB257);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(29, 178, 87, 0.35);
}

.mm-whats-ico { width: 21px; height: 21px; display: block; }

.mm-whats-label {
    display: grid;
    grid-template-columns: 0fr;
    opacity: 0;
    transition: grid-template-columns .38s cubic-bezier(.2, .85, .25, 1), opacity .22s ease;
}
.mm-whats-label > span { overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 14px; }

.mm-whats-float:hover,
.mm-whats-float:focus-visible,
.mm-whats-float.mm-whats-open {
    box-shadow: 0 14px 32px rgba(120, 80, 50, 0.2);
    gap: 10px;
    padding-inline-end: 14px;
}
.mm-whats-float:hover .mm-whats-label,
.mm-whats-float:focus-visible .mm-whats-label,
.mm-whats-float.mm-whats-open .mm-whats-label {
    grid-template-columns: 1fr;
    opacity: 1;
}

.mm-whats-float:focus-visible { outline: 2px solid var(--mm-orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .mm-whats-float, .mm-whats-label { transition: none; }
    .mm-struct-blob-deco { animation: none; }
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes mmfloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mmfloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mmsoftpulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---- scroll reveal (added by JS; off when reduced motion) --------------------- */
.mm-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--mm-rd, 0ms);
}
.mm-reveal.mm-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
    /* burger mode: links leave the flow, so drop the 3-col grid */
    .mm-nav-inner { display: flex; justify-content: space-between; }
    .mm-nav-links { display: none; position: absolute; top: 100%; inset-inline: 0; flex-direction: column; background: rgba(255, 252, 248, 0.98); padding: 18px; gap: 14px; border-bottom: 1px solid var(--mm-line); box-shadow: 0 24px 40px rgba(120, 80, 50, 0.10); }
    .mm-nav-links.open { display: flex; }
    .mm-nav-burger { display: flex; }
    .mm-nav-login { display: none; }
    /* Safety net for the tight band just above the phone breakpoint (and for any
       wider logo an admin uploads later): once max-width clips the box, contain
       keeps the artwork's own ratio instead of stretching it to fill. */
    .mm-nav-brand img { object-fit: contain; object-position: inline-start center; }
}

@media (max-width: 1020px) {
    .mm-stats { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
    .mm-stats .mm-stat + .mm-stat { border-inline-start: none; }
    .mm-stats .mm-stat:nth-child(even) { border-inline-start: 1px solid var(--mm-line); }
    .mm-stats .mm-stat:nth-child(n+3) { border-top: 1px solid var(--mm-line); padding-top: 14px; }
}

@media (max-width: 1420px) {
    .mm-proj-carousel { --mm-vis: 4; }
}

@media (max-width: 1200px) {
    .mm-proj-carousel { --mm-vis: 3; }
}

@media (max-width: 900px) {
    .mm-hero { min-height: 0; }
    .mm-fb-side { display: none; }
    .mm-fb-track { grid-template-columns: minmax(0, 1fr); }
    .mm-fb-center { height: auto; min-height: clamp(320px, 82vw, 400px); transform: none; }
    .mm-fb-quote p { -webkit-line-clamp: 8; }
    .mm-footer-grid { grid-template-columns: 1fr; gap: 44px; }
    .mm-blog-carousel { --mm-vis: 2.1; }
    .mm-proj-carousel { --mm-vis: 2.15; }
    .mm-why-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-price-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-struct-row { flex-direction: column; align-items: stretch; }
    .mm-struct-card, .mm-struct-kids { width: 100%; }
    .mm-struct-doodle, .mm-struct-arrow, .mm-struct-bulb { display: none; }
    /* the section deco above is off at this width, so the photo gets its own:
       an organic shape under it and the two doodles that fit inside the column */
    .mm-struct-kids { align-items: flex-end; }
    .mm-struct-blob, .mm-struct-blob-deco { display: block; }
    /* stacked, the photo is a companion to the facts, not the subject: at full
       620px it costs 672px of height on a tablet before the card even starts */
    .mm-struct-photo { width: min(100%, 420px); filter: drop-shadow(0 16px 24px rgba(120, 38, 10, 0.22)); }
    /* the side card becomes a light centered pills row above the cards;
       the cards keep their size and the row scrolls sideways on a phone */
    .mm-paths-row { flex-direction: column; align-items: stretch; gap: 14px; }
    .mm-levels {
        order: -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-self: center;
        width: auto;
        /* it is a pills row here, not a card: drop the card-height lock */
        min-height: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin-top: 0;
    }
    .mm-levels-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .mm-levels-title { flex-basis: 100%; margin-bottom: 4px; }
    .mm-levels-pointer { display: none; }
    .mm-level-btn { width: auto; border-radius: 999px; padding: 9px 20px; white-space: nowrap; }
    /* stacked layout: the cards block is full-width, no offset to undo */
    .mm-paths-row.mm-has-levels .mm-track-dots { inset-inline-start: 0; }
    .mm-about-orbit { display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: auto; }
    .mm-orbit-center { position: static; transform: none; margin-inline: auto; }
    .mm-orbit-anchor { position: static; transform: none; width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .mm-orbit-card { position: static; width: auto; }
    .mm-orbit-anchor .mm-orbit-card,
    .mm-orbit-anchor .mm-orbit-card:hover { transform: none; }
    .mm-orbit-glow, .mm-orbit-ring { display: none; }
    .mm-hero-art { min-height: auto; }
}

@media (max-width: 560px) {
    .mm-price-grid { grid-template-columns: 1fr; }
    .mm-blog-carousel { --mm-vis: 1.1; }

    /* ---- Student projects on phones ----------------------------------------
       The row used to park a card against the start edge (scroll-snap-align:
       start) and size it from --mm-vis, so exactly one neighbour peeked and
       only on the far side: the section read as if it ended there. Stand the
       card in the middle instead and let a slice of BOTH neighbours show.

       Three moves, no JS and no change to the card itself:
       1. the sliver becomes the constant (40px a side) and the card takes what
          is left; below ~358px the card would get too narrow for the coloured
          badge to stay on one line, so under that width the sliver yields, not
          the card.
       2. the row bleeds to the two screen edges (-16px cancels the container's
          own padding) so the slice is cut AT the edge, not 10px short of it.
       3. symmetric inline padding = (screen - card) / 2, which is what lets the
          FIRST and LAST card sit centred too; scroll-padding matches it so the
          native snap and the arrows agree.

       The scroller JS needs nothing: step() reads the item width + gap, and
       with this padding maxScroll works out to exactly 5 steps, so positions()
       still returns 6 dots and activeIndex() still maps 1:1 to the projects. */
    .mm-projects .mm-container { width: 100%; }
    .mm-proj-carousel { --pj-card: max(250px, calc(100vw - 108px)); }
    .mm-proj-track {
        grid-auto-columns: var(--pj-card);
        margin-inline: -16px;
        padding-inline: calc((100vw - var(--pj-card)) / 2);
        scroll-padding-inline: calc((100vw - var(--pj-card)) / 2);
    }
    .mm-proj-track > * { scroll-snap-align: center; }

    /* ---- the head, at phone scale ------------------------------------------
       28px forced the title onto two lines, and because .mm-bracketed is a flex
       row the two brackets got pushed to the container edges — a hundred pixels
       away from the words they belong to. Two fixes: let them run inline so they
       hug the text, and size the title so it holds ONE line down to 320px in
       BOTH languages. Measured: the Arabic title plus its brackets needs 11.9x
       the font-size, the English one 12.9x, the two spaces about 12px, and the
       available width is 100vw - 32 — hence 7.7vw - 3.5px, capped at 25. */
    .mm-projects { padding: 34px 0 28px; }
    .mm-projects .mm-section-head { margin-bottom: 22px; }
    .mm-projects .mm-eyebrow { font-size: 12px; padding: 6px 14px; margin-bottom: 12px; }
    .mm-projects .mm-h2 { font-size: min(25px, calc(7.7vw - 3.5px)); }
    .mm-projects .mm-bracketed { display: block; width: auto; text-align: center; }
    .mm-projects .mm-bracket { display: inline-block; font-size: 1.25em; }
    .mm-projects .mm-section-sub { margin-top: 11px; font-size: 14px; }

    /* ---- the card, at phone scale -----------------------------------------
       same elements, same order, same colours: only the proportions move. 3:2
       crops the photo top and bottom, which is where these portraits have room
       to spare, and 1.62 leading keeps the description at three lines without
       shrinking a single letter. */
    .mm-projects .mm-proj-media { aspect-ratio: 3 / 2; }
    /* 15px minus the 10px the card now pays itself — same text inset as before */
    .mm-projects .mm-proj-body { padding: 26px 5px 16px; }
    .mm-projects .mm-proj-name { font-size: 15.5px; }
    .mm-projects .mm-proj-age { margin-top: 5px; }
    .mm-projects .mm-proj-desc { margin: 9px 0 13px; line-height: 1.62; min-height: calc(3em * 1.62); }
    .mm-projects .mm-proj-pill { padding: 7px 15px; }

    /* two equal columns, so the pair stops breaking into a stack at 320 */
    .mm-projects .mm-actions-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .mm-projects .mm-actions-row > .mm-btn-md { width: 100%; min-width: 0; padding: 0 12px; }

    /* ---- Program structure on phones --------------------------------------
       The row turns into a column at <=900px, and that flips what flex-basis
       MEANS: `flex: 1 1 420px` stopped being a width and became a 420px height.
       Under ~396px wide the photo's own height falls below that 420, so the
       wrapper won the argument and — being a flex container itself — stretched
       the <img> to fill it, overriding `height: auto`. Measured distortion:
       0.943 natural against 0.825 shown at 390 (53px too tall) and 0.667 at
       320 (123px). `flex: none` gives both boxes back their content height.

       The same flip left `flex: 0 1 580px` forcing the card to 580px when its
       content needs 488, i.e. 92px of dead white under the booking button.
       NOTE: that half of the bug also affects 561-899px, which is left alone
       here on purpose — this block is phone-only. */
    .mm-struct-kids { flex: none; }
    .mm-struct-card { flex: none; }
    /* the photo is decoration beside the facts, not the subject: at its correct
       ratio a full-width 346px render costs 367px of height, so cap the width */
    .mm-struct-photo { width: min(100%, 320px); height: auto; align-self: flex-end; }

    .mm-structure { padding: 24px 12px 26px; }
    .mm-structure .mm-h2 { font-size: 25px; margin-bottom: 18px; }
    .mm-struct-row { gap: 16px; }
    .mm-struct-kids { padding: 14px 12px 0; }
    .mm-struct-card { padding: 6px 18px 20px; }
    .mm-struct-card .mm-btn-primary { margin-top: 16px; }

    /* ---- Journey on phones -------------------------------------------------
       14px was the smallest type on the page, below the 15px floor the hero
       itself uses, and 1.95 leading stretched it into five thin lines. */
    .mm-journey { padding: 16px 0 18px; }
    .mm-journey .mm-h2 { font-size: 25px; }
    .mm-journey-text { margin-top: 12px; font-size: 15px; line-height: 1.75; max-width: 38em; }

    /* ---- Why on phones -----------------------------------------------------
       Stacked, the four cards ran 885px: icon over title over description,
       four identical times. Laying the icon beside the text turns them into a
       list of reasons (which is what they are) and drops the section to ~515px
       without cutting a word. Grid, not flex-row, so the existing markup
       (icon + h3 + p as siblings) needs no wrapper element. */
    .mm-why { padding: 26px 16px 30px; }
    .mm-why-title { margin-bottom: 20px; }
    .mm-why-grid { grid-template-columns: 1fr; gap: 10px; }
    .mm-why-card {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-areas: "ico title" "ico desc";
        align-items: center;
        column-gap: 13px;
        row-gap: 2px;
        text-align: start;
        padding: 13px 14px;
        border-radius: 18px;
    }
    .mm-why-icon { grid-area: ico; width: 42px; height: 42px; margin-bottom: 0; }
    /* the halo sits 8px outside the 42px box; trim it so it can't graze the text */
    .mm-why-icon::after { inset: -5px; }
    .mm-why-card-title { grid-area: title; align-self: end; margin: 0; font-size: 15px; line-height: 1.45; }
    .mm-why-card-desc { grid-area: desc; align-self: start; font-size: 12.5px; line-height: 1.55; }

    /* ---- Hero on phones ---------------------------------------------------
       Approved order: photo -> title -> description -> four cards -> buttons
       -> counters. The photo leads because in the shipped layout 527px of copy
       ran ahead of it, so only its top third survived the first fold. */
    .mm-hero-grid { flex-direction: column; gap: 0; }
    .mm-hero-art { order: -1; flex: none; width: 100%; min-width: 0; padding-top: 4px; }
    .mm-hero-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* flex-basis is a HEIGHT once the grid turns into a column: the desktop
           `1 1 500px` was padding 80px of dead air under the photo */
        flex: none;
        width: 100%;
        min-width: 0;
        padding-top: 12px;
    }
    /* the badge is on the photo here, so the copy's own one steps aside */
    .mm-hero-copy .mm-hero-badge { display: none; }
    .mm-hero-badge.mm-hero-badge-art {
        display: inline-flex;
        position: absolute;
        z-index: 4;
        inset-inline-end: 7%;
        bottom: 4px;
        margin-bottom: 0;
        gap: 6px;
        padding: 5px 12px;
        font-size: 11.5px;
        box-shadow: 0 8px 20px rgba(196, 120, 70, 0.2);
    }
    .mm-hero-badge-art svg { width: 13px; height: 13px; }

    /* 33px is the largest size at which BOTH locales keep the title to two
       lines at 390px: at 34px "and Build Creative Minds" no longer fits and EN
       takes a third line while AR stays at two. Narrower phones need it to
       track the width or the AR title breaks to three and four lines. */
    .mm-hero-title { font-size: clamp(25px, 8.45vw, 33px); }
    .mm-hero-desc { margin-top: 10px; font-size: 15px; line-height: 1.7; }

    /* cards before the buttons: the reader gets four reasons, then the ask */
    .mm-hero-chips { order: 3; }
    .mm-hero-actions { order: 4; }

    /* four equal cards in a 2x2 grid, whichever way the balance script went */
    .mm-hero-chips,
    .mm-hero-chips.mm-chips-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
        margin-top: 16px;
    }
    .mm-hero-chip { justify-content: center; padding: 9px 6px; }
    [dir="rtl"] .mm-hero-chip { padding: 8px 6px; }
    .mm-hero-chip span,
    [dir="rtl"] .mm-hero-chip span { white-space: nowrap; font-size: 13px; }

    /* the two CTAs sit side by side, keeping the desktop shape and colour lip */
    .mm-hero-actions {
        display: grid;
        /* minmax(0,...) so a long label can't blow the track past half the row */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        margin-top: 14px;
    }
    .mm-hero-actions .mm-btn-lg {
        width: 100%;
        min-width: 0;
        height: 58px;
        padding: 0 10px;
        font-size: 15px;
    }
    .mm-hero-actions .mm-btn-arrow { width: 30px; height: 30px; }

    /* ---- Reviews on phones -------------------------------------------------
       The track already holds three slots; only the middle one survived here,
       so the section read as one card floating alone with two 44px arrows
       eating 104px of its width. Reveal the flanking slots (clipped at the
       screen edge, so a slice of each shows and the row becomes legible) and
       move the arrows under the dots at the site's usual 34px. The card design
       itself is untouched. */
    .mm-feedback .mm-container-md { max-width: 100%; }
    .mm-fb-carousel { gap: 0; }
    .mm-fb-carousel > .mm-fb-arrow { display: none; }
    .mm-fb-track { display: flex; align-items: center; justify-content: center; gap: 12px; }
    /* 282px is the agreed width at 390. Below that, hold the slice at 42px per
       side (2*42 + 2*12 gaps = 108) instead of the card, or the slice shrinks
       to 7px on a 320px phone and stops reading as a row at all. */
    .mm-fb-center { width: min(282px, calc(100vw - 108px)); flex: none; }
    .mm-fb-side {
        display: flex;
        width: 200px;
        flex: none;
        height: auto;
        min-height: 300px;
        padding: 22px 16px;
    }
    .mm-fb-arrow.mm-fb-arrow-under {
        display: flex;
        width: 34px;
        height: 34px;
        background: transparent;
        border: 1px solid #E3D3C2;
        color: var(--mm-muted);
        box-shadow: none;
    }
    .mm-fb-nav .mm-carousel-dots { margin-top: 0; }
    .mm-fb-nav { margin-top: clamp(22px, 2.6vw, 34px); }

    /* One mark per corner instead of two stacked down the same edge: the
       accreditation holds top-start, the rocket top-end, the code bubble drops
       diagonally to bottom-start, and the age badge takes bottom-end. */
    .mm-hero-rocket { inset-inline-end: 1%; top: -2px; width: 82px; }
    .mm-hero-code {
        inset-inline-start: 1%;
        inset-inline-end: auto;
        top: auto;
        bottom: 8px;
        width: 54px;
    }

    /* the supporting marks read as oversized furniture at desktop metrics */
    .mm-hero-accred { top: 14px; gap: 6px; border-radius: 11px; padding: 5px 9px; }
    .mm-hero-accred-emoji { font-size: 14px; }
    .mm-hero-accred-text { font-size: 10.5px; }

    /* counters: the single 391px column fell entirely below the fold, so the
       strip becomes four self-contained cards in a 2x2 grid */
    .mm-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 12px 0 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .mm-stats .mm-stat,
    .mm-stats .mm-stat + .mm-stat,
    .mm-stats .mm-stat:nth-child(even),
    .mm-stats .mm-stat:nth-child(n+3) {
        border: 1px solid rgba(255, 255, 255, 0.8);
        padding: 12px 8px;
    }
    .mm-stats .mm-stat {
        flex-direction: column;
        gap: 7px;
        border-radius: 16px;
        background: rgba(255, 253, 251, 0.95);
        box-shadow: 0 10px 26px rgba(184, 142, 108, 0.13);
    }
    .mm-stat-icon { width: 36px; height: 36px; }
    .mm-stat-copy { text-align: center; }
    .mm-stat-num { font-size: 21px; }
    .mm-stat-label { font-size: 11.5px; margin-top: 3px; }
    /* Navbar on phones. The wordmark file is 7.35:1 and a fixed height plus the
       global max-width:100% squeezed it to 54% of its width (43% at 360px).
       Drive it from the width instead so the ratio can never distort, and buy
       it the room back from the actions cluster rather than from the letters.

       A fixed 196px then left dead space in the middle as soon as the viewport
       grew past the actions cluster: 51px at 430, 121px at 500. The brand now
       takes the leftover track (flex-basis 0, not auto: the img is a percentage
       width, so an auto basis would resolve its content size to zero) and stops
       growing at 268px. The three actions share one height, one radius and one
       weight, so the end of the bar reads as a single cluster instead of three
       unrelated controls. */
    :root {
        --mm-nav-h: 68px;
        /* one control size for the whole cluster, so the three actions can never
           drift apart; it breathes with the viewport to hand the narrow phones
           back the pixels the brand needs */
        --mm-nav-ctl: clamp(36px, 9.4vw, 40px);
    }
    .mm-nav-inner { padding: 0 clamp(12px, 3.6vw, 16px); gap: clamp(10px, 2.8vw, 12px); }
    .mm-nav-brand { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
    .mm-nav-brand img { width: 100%; max-width: 268px; height: auto; }
    .mm-nav-end { flex: 0 0 auto; gap: clamp(6px, 1.6vw, 8px); }
    .mm-nav-book {
        height: var(--mm-nav-ctl);
        padding: 0 clamp(11px, 3.4vw, 16px);
        font-size: clamp(12.5px, 3.4vw, 13.5px);
        border-radius: 12px;
    }
    .mm-nav-burger { width: var(--mm-nav-ctl); height: var(--mm-nav-ctl); border-radius: 12px; }
    /* the globe reads as clutter next to a two-character label at this size, and
       the label itself gets the same white container as the burger so it stops
       floating between two framed buttons */
    .mm-nav-lang {
        width: var(--mm-nav-ctl);
        height: var(--mm-nav-ctl);
        justify-content: center;
        gap: 0;
        padding: 0;
        font-size: 13px;
        background: #fff;
        border: 2px solid #ECECEC;
        border-radius: 12px;
    }
    /* on the English pages the label is the single glyph "ع", which sits much
       smaller on the line than the two-letter "En" it replaces */
    [dir="rtl"] .mm-nav-lang { font-size: 13px; }
    [dir="ltr"] .mm-nav-lang { font-size: 15px; }
    .mm-nav-lang svg { display: none; }
    .mm-cta-actions .mm-btn-white, .mm-cta-actions .mm-btn-glass { width: 100%; }

    /* ---- Tracks on phones: the journey wraps instead of scrolling sideways ---
       The row is one horizontal line of cards on a desktop, which on a phone
       shrinks to a 346px window showing TWO of the five courses (two of eight
       on the longest level); the other 708px — the certificate medal with them
       — sit behind a sideways scroll inside the page that nobody finds.

       It becomes the SAME journey, folded two per line: same card, same photo,
       same orange frame, same numbered step, same lecture count, same medal at
       the end. Only the rail is rebuilt, because a folded path needs corners.

       The images decide the card width, not taste: every course photo in the
       database is 373x493, a portrait poster with its title printed across the
       bottom. A full-width card would stand 455px tall per course (3643 for a
       level of eight) and cropping it sideways cuts the character's head off.
       Two columns give 167px — within a pixel of the 168 the desktop uses — so
       the crop stays exactly what it is today. */
    .mm-timeline {
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .mm-timeline-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* dense, NOT the default sparse: the reversed lines below pin their two
           stops to explicit columns in the order end-then-start, and a sparse
           cursor refuses to walk back for the second one — it drops it onto a
           new line and the path comes apart. */
        grid-auto-flow: row dense;
        /* 34, not the 20 a pure stack would want: the drop between two lines
           lives entirely in this gap now (see below), so the gap IS the
           connector's canvas */
        gap: 34px 12px;
        width: auto;
        padding-inline: 0;
    }
    .mm-timeline-row::before { display: none; }   /* the one-line desktop rail */
    .mm-path-unit, .mm-path-finish { width: auto; }
    /* boustrophedon: every second line runs back the other way, the way a hand
       writes a line and returns. That is what keeps it ONE path rather than
       two disconnected rows — and it is what puts the next line's first stop
       directly under the line's last stop, so the corner is a straight drop. */
    .mm-timeline-row > :nth-child(4n+3) { grid-column: 2; }
    .mm-timeline-row > :nth-child(4n+4) { grid-column: 1; }

    /* the rail, redrawn per line. Each stop owns the segment LEAVING it: the
       odd stops (first on their line) reach across to their partner, the even
       stops (last on their line) drop to the line below. No new markup — the
       segment is the stop's own ::after. */
    .mm-timeline-row > * { position: relative; }
    .mm-path-unit::after {
        content: "";
        position: absolute;
        top: var(--mm-rail-y);
        z-index: 0;
        pointer-events: none;
    }
    /* across: half of this card + the column gap + half of the next one */
    .mm-path-unit:nth-child(odd)::after {
        inset-inline-start: 50%;
        width: calc(100% + 12px);
        border-top: 2.5px dashed #EFA984;
    }
    /* ...and on the lines that run backwards it reaches the other way */
    .mm-path-unit:nth-child(4n+3)::after { inset-inline-start: auto; inset-inline-end: 50%; }
    /* down: the whole of it lives in the gap BELOW the line, not from the dot.
       Running it dot-to-dot is geometrically tidy and visually wrong — it cuts
       straight through the numbered circle and then through the lecture count
       sitting under it. The desktop rail never touches a word; this one must
       not either. So it starts 6px under the count and stops 6px above
       whatever begins the next line, and the eye joins it to the next stop the
       same way it does on a desktop: card, then tick, then number.

       That also retires a special case: a lone medal on the last line sits at
       the line's top edge, so this segment stops above it without knowing. */
    .mm-path-unit:nth-child(even)::after {
        inset-inline-start: calc(50% - 1.25px);
        top: calc(100% + 6px);
        height: 22px;
        border-inline-start: 2.5px dashed #EFA984;
    }
    /* an even course count leaves the medal alone on the last line: with no
       card beside it there is nothing to line up with, so it drops the
       card-height offset */
    .mm-path-finish:nth-child(odd) { margin-top: 0; }
    /* and the across-segment leaves from the dot's own centre, so the circle
       has to be the thing on top where the two meet */
    .mm-path-step { position: relative; z-index: 1; }

    /* an ODD course count is the opposite case: the medal shares the last line
       with a single card. Left on the rail — the desktop position — it hangs
       level with the numbered dot, which here means a whole card's height of
       empty column above it, and the medal stops reading as the stop AFTER the
       card and starts reading as something parked under it.
       So when a card is beside it, the medal rises to that card's own middle
       and the segment that reaches it leaves the card's SIDE instead of the dot
       below it: the pair reads across, the way every other line does. 31px is
       the medal's radius, so the offset centres the circle, not its box. */
    .mm-path-finish:nth-child(even) {
        margin-top: calc((var(--mm-art-h) + 6px) / 2 - 31px);
        /* the medal's glow reads as part of the medal, so an evenly split gap
           on both sides of the number still left it stuck to the cup. The
           medal is centred in its column, so half of this padding is how far
           it shifts outward: it buys the number air on the side that needed
           it without taking any off the card's side. */
        padding-inline-start: 40px;
    }
    /* backwards line: the medal holds the first column, so out is the other way */
    .mm-path-finish:nth-child(4n+4) {
        padding-inline-start: 0;
        padding-inline-end: 40px;
    }
    .mm-path-unit:nth-last-child(2):nth-child(odd)::after {
        top: calc((var(--mm-art-h) + 6px) / 2);
        inset-inline-start: 100%;
        inset-inline-end: auto;
        /* the column gap, half of the medal's column, and the 20px the medal
           itself was nudged out by: it ends on the circle's centre and the
           circle covers the last 31px, the way the desktop rail dies under
           the same medal */
        width: calc(50% + 32px);
    }
    /* ...and on a line that runs backwards, the card's free side is the other one */
    .mm-path-unit:nth-last-child(2):nth-child(4n+3)::after {
        inset-inline-start: auto;
        inset-inline-end: 100%;
    }

    /* the numbered stop moves onto that side path with it. A stop wears its
       number ON the line it leaves by — everywhere else on this journey the
       circle sits on the rail — and leaving it under the card would fork the
       last card into two branches: one dropping to a number that goes nowhere,
       one reaching across to the medal.
       Both parts go absolute so the column's flow can't pull them back under
       the card, and the box they centre in is exactly card-edge → medal-edge:
       the 12px column gap plus half the medal's column, less its 31px radius. */
    .mm-path-unit:nth-last-child(2):nth-child(odd) .mm-path-step,
    .mm-path-unit:nth-last-child(2):nth-child(odd) .mm-path-count {
        position: absolute;
        inset-inline-start: 100%;
        width: calc(50% - 19px);
    }
    .mm-path-unit:nth-last-child(2):nth-child(odd) .mm-path-step {
        top: calc((var(--mm-art-h) + 6px) / 2 - 13.5px);   /* half the circle */
        margin-top: 0;
    }
    .mm-path-unit:nth-last-child(2):nth-child(odd) .mm-path-count {
        top: calc((var(--mm-art-h) + 6px) / 2 + 13.5px);   /* + its own 6px */
        /* the box is narrower than the caption on the smallest phones; wrapping
           is the honest way out — overflowing would print it over the medal */
        white-space: normal;
    }
    /* the tick is the DROP from a card down to its dot. There is no drop here */
    .mm-path-unit:nth-last-child(2):nth-child(odd) .mm-path-tick { display: none; }
    /* ...and backwards, again, from the other side */
    .mm-path-unit:nth-last-child(2):nth-child(4n+3) .mm-path-step,
    .mm-path-unit:nth-last-child(2):nth-child(4n+3) .mm-path-count {
        inset-inline-start: auto;
        inset-inline-end: 100%;
    }

    /* 1.3 is shorter than the descenders of ya and jim, so every course name
       loses the dots under its last letters — 3px on a phone, 5px on a desktop
       (that half is left alone here on purpose: this block is phone-only). */
    .mm-path-overlay span { line-height: 1.6; }

    /* the head and the pickers, at phone scale */
    .mm-tracks { padding: 34px 0 28px; }
    .mm-tracks .mm-section-head { margin-bottom: 20px; }
    .mm-tracks .mm-eyebrow { font-size: 12px; padding: 6px 14px; margin-bottom: 11px; }
    .mm-tracks .mm-h2 { font-size: 26px; }
    .mm-tracks .mm-section-sub { margin-top: 10px; font-size: 14px; line-height: 1.6; }
    .mm-tracks-tabs-wrap { margin: 18px 0 14px; }
    .mm-track-tab { padding: 10px 18px; font-size: 13.5px; }
    .mm-levels-title { font-size: 13.5px; }
    .mm-level-btn { padding: 8px 16px; font-size: 13px; }
    .mm-paths-row { margin-top: 20px; gap: 16px; }
    .mm-tracks-note-wrap { margin-top: 24px; }
    .mm-tracks-note { padding: 12px 16px; line-height: 1.5; }

    /* ---- and the path draws itself, once, as the level scrolls into view ----
       The rail segments grow by WIDTH and HEIGHT rather than by transform: each
       one is anchored by its logical start edge, so growing the box makes it
       run the right way in Arabic and in English without a second rule.

       Only under .mm-path-anim, which home.js adds to <html> — and only on a
       phone, and never under reduced motion. Without the class nothing is
       hidden, so a JS failure costs the animation, not the courses. */
    .mm-path-anim .mm-path-set .mm-path-unit:not(.mm-drawn),
    .mm-path-anim .mm-path-set .mm-path-finish:not(.mm-drawn) {
        animation: none;          /* beats the load-time fade's filled opacity */
        opacity: 0;
    }
    .mm-path-anim .mm-path-set .mm-path-unit:not(.mm-drawn)::after { width: 0; height: 0; }

    /* The delays are per LINE, not per level: the scroll is what paces the
       journey now, so each pair only has to stagger against itself. The first
       stop of a line lands, its line reaches across, then the second stop
       lands and drops the line to the pair below. */
    .mm-path-anim .mm-path-set .mm-path-unit.mm-drawn,
    .mm-path-anim .mm-path-set .mm-path-finish.mm-drawn {
        animation: mm-stop-in .5s cubic-bezier(.16, 1, .3, 1) both;
    }
    .mm-path-anim .mm-path-set .mm-path-unit.mm-drawn:nth-child(even),
    .mm-path-anim .mm-path-set .mm-path-finish.mm-drawn:nth-child(even) {
        animation-delay: 150ms;
    }
    .mm-path-anim .mm-path-set .mm-path-unit.mm-drawn:nth-child(odd)::after {
        animation: mm-rail-across .55s cubic-bezier(.4, 0, .2, 1) both;
        animation-delay: 190ms;
    }
    .mm-path-anim .mm-path-set .mm-path-unit.mm-drawn:nth-child(even)::after {
        animation: mm-rail-down .4s cubic-bezier(.4, 0, .2, 1) both;
        animation-delay: 400ms;   /* after its own card has landed */
    }
    .mm-path-anim .mm-path-set .mm-path-unit.mm-drawn .mm-path-step b {
        animation: mm-stop-pop .46s cubic-bezier(.34, 1.56, .64, 1) both;
        animation-delay: 200ms;
    }
    .mm-path-anim .mm-path-set .mm-path-unit.mm-drawn:nth-child(even) .mm-path-step b {
        animation-delay: 350ms;
    }
}

/* the rails grow along their own axis; the from-only keyframes let each
   segment finish at whatever width or height its layout rule gave it */
@keyframes mm-rail-across { from { width: 0; } }
@keyframes mm-rail-down   { from { height: 0; } }
@keyframes mm-stop-in     { from { opacity: 0; transform: translateY(14px); } }
@keyframes mm-stop-pop    { from { opacity: 0; transform: scale(.4); } }

/* ---- Pricing: the benefits fold, phones only ---------------------------------
   Above the phone breakpoint the fold must not exist at all. Overriding a
   closed <details> from CSS does NOT work — its content sits behind the
   element's own shadow slot and stays unrendered whatever you declare on the
   child (measured as present, then a screenshot showed the benefits gone from
   three desktop cards). So the cards ship open and a phone-only script in
   home.js closes them; here we only hide the handle. */
@media (min-width: 561px) {
    .mm-price-fold > summary { display: none; }
}

@media (max-width: 560px) {
    /* stacked cards: EVERY card now hangs its tags 13px above its own top edge,
       so the row gap has to pay for that overhang before it reads as a gap at
       all. 38 - 13 leaves the ~25px of air the eye actually sees. The featured
       card no longer needs its own lead-in: the rhythm is uniform. */
    .mm-price-grid { gap: 22px; row-gap: 38px; }

    .mm-price-fold > summary { list-style: none; cursor: pointer; }
    .mm-price-fold > summary::-webkit-details-marker { display: none; }
    .mm-price-fold-chev { display: flex; transition: transform .24s ease; }
    .mm-price-fold[open] > summary .mm-price-fold-chev { transform: rotate(180deg); }

    /* the handle takes the plan line's own shape, so the card reads as a stack
       of two identical soft rows and then the CTA — not as a stray label glued
       to the button, which is what a bare text row looked like. */
    .mm-price-fold { margin-bottom: 18px; }
    .mm-price-fold > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: #FBF5F0;
        color: #A0603A;
        font-weight: 700;
        font-size: 13.5px;
        padding: 11px 13px;
        border-radius: 11px;
    }
    .mm-price-fold[open] > summary { margin-bottom: 12px; }
    .mm-price-fold[open] > .mm-price-benefits { margin-bottom: 0; }
    .mm-price-feat .mm-price-fold > summary { background: rgba(255, 255, 255, 0.14); color: #fff; }
}

/* ---- Skills on phones -------------------------------------------------------
   Nothing here was broken, it was simply built at desktop scale: a pill ran
   221px in Arabic (247px in English) against a 390px screen, and the row's own
   9% edge fade took another 35px off each end, so 1.7 pills were legible at a
   time. The section is not tall either (384px), so this is a matter of size,
   not of space — the two counter-scrolling rows stay exactly as they are. */
@media (max-width: 560px) {
    .mm-skills { padding: 30px 0 26px; }
    .mm-skills .mm-section-head { margin-bottom: 22px; }
    /* 18, not the 11 this started at: the badge is a filled pill with its own
       shadow, so 11px read as glued to a 25px bold headline — and the title
       already sits 22px above the first pill row, which tipped the whole head
       upwards. 18 puts the badge nearer the title than the title is to the
       pills, without the two touching. */
    .mm-skills .mm-eyebrow { font-size: 12px; padding: 6px 14px; margin-bottom: 18px; }
    .mm-skills .mm-h2 { font-size: 25px; }

    /* 4%, not 9%: the fade should trim an edge, not half a word, on a row that
       only ever holds two or three pills. The padding/negative-margin pair is
       the shadow breathing room — it has to keep matching or the pill shadows
       are sheared into a band again. */
    .mm-marq {
        padding-block: 24px;
        margin-block: -24px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    }
    .mm-marq + .mm-marq { margin-top: calc(11px - 24px); }
    .mm-marq-set { padding-inline: 5px; }

    .mm-skill { gap: 9px; padding: 9px 15px; margin: 0 5px; font-size: 14px; }
    .mm-skill-ic { width: 30px; height: 30px; border-radius: 9px; }
    /* the icons carry width/height attributes, which CSS outranks */
    .mm-skill-ic svg { width: 16px; height: 16px; }

    /* the loop is a third shorter in pixels now, so shorten the cycle with it
       or the pills read as drifting */
    .mm-marq-track { animation-duration: 30s; }
}

/* ---- Hero on tablets (561-1052) ---------------------------------------------
   Placed after the <=900 and <=1020 blocks on purpose: it overlaps both, and at
   equal specificity the later rule is the one that lands.

   The ceiling is 1052, not the 1020 the rest of the page breaks at, because
   what matters here is the width at which the hero stops stacking, and that is
   set by its own flex maths, not by a chosen breakpoint: two 500px bases plus
   the clamp(8px, 1vw, 20px) gap have to fit the container's 96%, so
   1000 + 0.01w <= 0.96w, i.e. w >= 1052.6. Measured: 1052 still stacks (the
   copy is 1010px wide), 1053 is the first width that sits side by side. Ending
   the band at 1020 left 1021-1052 stacked AND lopsided — a 1044px window landed
   right in it.

   What was wrong. The desktop copy block is a single grid column sized to its
   widest child and centered (justify-content: center) with every line pinned to
   that column's start edge (justify-items: start). In the two-column desktop
   that column IS the half it lives in, so it reads correctly. The moment the
   hero stacks, the column collapses onto the widest child — the four-card row,
   586px — and centers, leaving the title, description and buttons clinging to
   its inner edge: a 128px lean off the page's centre at 768. So the copy stops
   being a grid here and becomes the phone's centred column.

   Order is the approved phone one: photo, title, description, four cards,
   buttons, counters. */
@media (min-width: 561px) and (max-width: 1052px) {
    .mm-hero { min-height: 0; }
    .mm-hero-grid { flex-direction: column; gap: 0; }

    /* the photo is 739x527: left full width it stands 647px tall at 1020 and
       takes the whole fold on its own. Capped, the section fits one screen. */
    .mm-hero-art {
        order: -1;
        flex: none;
        width: 100%;
        max-width: min(620px, 76vw);
        min-width: 0;
        margin-inline: auto;
        padding-top: 4px;
    }
    .mm-hero-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* flex-basis is a HEIGHT once the row turns into a column: the desktop
           `1 1 500px` was padding dead air under the photo */
        flex: none;
        width: 100%;
        min-width: 0;
        padding-top: 14px;
    }

    /* the badge rides the photo, as on phones, instead of pushing the title down */
    .mm-hero-copy .mm-hero-badge { display: none; }
    .mm-hero-badge.mm-hero-badge-art {
        display: inline-flex;
        position: absolute;
        z-index: 4;
        inset-inline-end: 4%;
        bottom: 2px;
        margin-bottom: 0;
        gap: 7px;
        padding: 6px 14px;
        font-size: 13px;
        box-shadow: 0 8px 20px rgba(196, 120, 70, 0.2);
    }
    .mm-hero-badge-art svg { width: 15px; height: 15px; }

    .mm-hero-title { font-size: clamp(34px, 5vw, 46px); }
    .mm-hero-desc { margin-top: 12px; font-size: clamp(15px, 1.9vw, 18px); line-height: 1.72; max-width: 44em; }

    /* cards before the buttons: four reasons, then the ask */
    .mm-hero-chips { order: 3; }
    .mm-hero-actions { order: 4; }

    .mm-hero-chips,
    .mm-hero-chips.mm-chips-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 470px;
        margin-top: 18px;
    }
    .mm-hero-chip { justify-content: center; padding: 10px 8px; }
    .mm-hero-chip span,
    [dir="rtl"] .mm-hero-chip span { white-space: nowrap; font-size: 14px; }

    .mm-hero-actions {
        display: grid;
        /* minmax(0,...) so a long label can't blow the track past half the row */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 470px;
        margin-top: 16px;
    }
    .mm-hero-actions .mm-btn-lg { width: 100%; min-width: 0; height: 60px; padding: 0 12px; font-size: 16px; }

    /* one mark per corner of the photo's narrower box, as on phones */
    .mm-hero-accred { top: 16px; }
    .mm-hero-rocket { top: -4px; width: clamp(88px, 11vw, 120px); }
    .mm-hero-code {
        inset-inline-start: -2%;
        inset-inline-end: auto;
        top: auto;
        bottom: 12px;
        width: clamp(56px, 6.5vw, 70px);
    }
}

/* from 768 the four cards fit one row and the button pair widens with them */
@media (min-width: 768px) and (max-width: 1052px) {
    .mm-hero-chips,
    .mm-hero-chips.mm-chips-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; }
    .mm-hero-actions { max-width: 520px; }
}

/* ---- «عن المنصة»: the orbit survives the phone ------------------------------
   Placed after the <=900 block on purpose: that block hides the ring and turns
   the six chips into a plain two-column grid, so below 900 the section lost the
   one thing that identifies it — a dashed circle with the mascot at its centre
   and the cards orbiting it. At equal specificity the later rule lands.

   Geometry, not taste. Six chips of width w, 60 degrees apart on a ring of side
   A inside a container of width C, must satisfy three inequalities at once:
       0.56A >= w          the top pair sits side by side
       0.485A >= h         the top pair clears the flank pair
       0.5A + w/2 <= C/2   the flank pair stays on screen
   The flank pair rides ON the ring here (left 0% / 100%) instead of the
   desktop's -6% / 106%; that is what buys the vertical room, letting A reach
   0.68C so the height budget is 114px at a 390 screen. The tallest chip is the
   English "American Accreditation / American Steam" at 107. Measured across
   320/360/390/414/430/480/560/768/900/1011 in both locales: zero overlaps,
   zero overflow, smallest gap 2px (English at 320).

   The ceiling is 1011, not the 900 the rest of the page breaks at. What matters
   here is the width at which .mm-about-row stops sitting in two columns, and
   that is set by its own flex maths, not by a chosen breakpoint: a 420px copy
   basis plus a 460px orbit basis plus the clamp(40px, 6vw, 110px) gap have to
   fit min(97vw, 1380px) minus 2 x clamp(16px, 2vw, 40px). Measured: 1011 still
   stacks, 1012 is the first width that sits side by side. Ending the band at
   900 would leave 901-1011 stacked with no ring at all. */
@media (max-width: 1011px) {
    .mm-about-orbit { display: block; position: relative; min-height: 0; }
    .mm-orbit-glow, .mm-orbit-ring { display: block; }

    /* relative, not static: the anchor must stay the containing block for the
       chips, or their width/left percentages resolve against the orbit box.
       In flow with auto margins, so the box grows with it and the chips
       overflow into those margins exactly as they do on desktop. */
    .mm-orbit-anchor {
        position: relative;
        inset: auto;
        transform: none;
        display: block;
        width: 68%;
        height: auto;
        aspect-ratio: 1;
        margin: 52px auto;
    }
    .mm-orbit-ring, .mm-orbit-glow {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
    }
    .mm-orbit-ring { width: 68%; height: auto; aspect-ratio: 1; }
    .mm-orbit-glow { width: 80%; height: auto; aspect-ratio: 1; }
    .mm-orbit-center {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 34%;
        max-height: none;
    }

    .mm-orbit-card { position: absolute; width: 44%; /* = 0.30C */ min-height: 0; }
    .mm-orbit-anchor .mm-orbit-card { transform: translate(-50%, -50%) rotate(var(--mm-rot, 0deg)); }
    .mm-orbit-anchor .mm-orbit-card:hover { transform: translate(-50%, -50%) rotate(0deg) translateY(-8px); }

    /* the flank pair rides the ring instead of standing clear of it */
    .mm-orbit-pos-3 { left: 0; }
    .mm-orbit-pos-4 { left: 100%; }
}

/* Once the row is stacked the copy is no longer a left-hand column, so it stops
   reading as one: every other section on this page centres its head below the
   fold, and this one kept the desktop's start alignment. */
@media (max-width: 1011px) {
    .mm-about-copy { text-align: center; }
    .mm-about-copy .mm-bracketed { margin-inline: auto; justify-content: center; }
    .mm-about-desc { margin-inline: auto; }
    /* the two cards keep their own paragraphs left-anchored: they sit beside an
       icon, they are not headings */
    .mm-about-card { text-align: start; }

    /* min-width: 300px against a 278px content box is what made the whole copy
       column hang off the start edge at 320: eyebrow, title, description and
       both cards sat 1px past the viewport while keeping a 21px gutter on the
       other side. Nothing here needs a floor once the row is a single column. */
    .mm-about-copy, .mm-about-orbit { min-width: 0; }
}

/* ---- the phone pass ---------------------------------------------------------
   Everything here is size, not structure. The section stood 1274px in Arabic
   and 1340 in English on a 390 screen. */
@media (max-width: 560px) {
    .mm-about { padding: 42px 0 44px; }
    .mm-about-row { gap: 24px; }
    /* 12 today, which is tighter than the site base (16) and than the 18 we
       settled on in the skills head */
    .mm-about-eyebrow { margin-bottom: 18px; letter-spacing: 1.6px; }
    /* 1.95 is a desktop measure: 29.25px per line, five lines in English */
    .mm-about-desc { margin: 14px 0 18px; line-height: 1.72; }
    .mm-about-cards { gap: 12px; }
    .mm-about-card { padding: 14px; gap: 10px; border-radius: 15px; }
    .mm-about-card-icon { width: 40px; height: 40px; border-radius: 11px; }
    .mm-about-card-icon svg { width: 20px; height: 20px; }
    .mm-about-card-text { line-height: 1.62; margin-top: 3px; }

    /* the chip turns vertical so six of them fit around a phone-sized ring */
    .mm-orbit-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
        padding: 8px 6px;
        border-radius: 13px;
        box-shadow: 0 10px 24px rgba(184, 142, 108, 0.16);
    }
    .mm-orbit-icon { width: 26px; height: 26px; border-radius: 9px; }
    .mm-orbit-icon svg { width: 14px; height: 14px; }
    .mm-orbit-title { font-size: 11px; line-height: 1.32; }
    .mm-orbit-sub { font-size: 9.5px; line-height: 1.32; margin-top: 1px; }

    .mm-world-wrap { margin-top: 18px; }
    .mm-world-pill { padding: 11px 18px; gap: 6px 14px; }
    /* the lead keeps the row of its own it already had below 640. Letting it
       share one looked balanced in Arabic and ragged in English, where the
       longer label pushed "20+ Countries" onto a half-empty second line. Two
       clean rows in both locales: the label, then the two figures. */
    .mm-world-stat { flex: 0 1 auto; }
}

/* Under 380 the container's content box is 278px, so the ring drops to 189 and
   with it the vertical budget (0.485A) to 92 - while the longest English chip,
   "American Accreditation / American Steam", still stands 97. Two moves: one
   notch down on type and padding, and a wider ring against a narrower chip
   (A = 0.76C, w = 0.28C) which lifts the budget to 102 and still satisfies
   0.5A + w/2 <= C/2. Swept 68/72/76 x 26/28/30 in both locales at 320/360/375:
   76/28 is the only column with a positive gap everywhere and no chip off
   screen. Arabic follows English so both locales keep the same chip. */
@media (max-width: 379px) {
    .mm-orbit-anchor, .mm-orbit-ring { width: 76%; }
    .mm-orbit-card { width: 36.8%; /* = 0.28C */ }
    .mm-orbit-glow { width: 88%; }
    .mm-orbit-center { width: 30%; }
    .mm-orbit-card { padding: 7px 5px; gap: 3px; }
    .mm-orbit-icon { width: 24px; height: 24px; border-radius: 8px; }
    .mm-orbit-icon svg { width: 13px; height: 13px; }
    .mm-orbit-title { font-size: 10.5px; line-height: 1.28; }
    .mm-orbit-sub { font-size: 9px; line-height: 1.28; }
}

/* ---- Pricing footnote on phones ---------------------------------------------
   A flex row of icon + sentence + icon. Once the sentence needs two lines - it
   does in English from 560 down - flex-wrap breaks it into three rows and both
   icons end up stranded on lines of their own, above and below the text. Let it
   be a block of text with the two marks set inline in it instead, which is what
   they read as anyway. */
@media (max-width: 560px) {
    .mm-price-footnote { display: block; text-align: center; line-height: 1.72; max-width: 30em; margin-inline: auto; }
    .mm-price-footnote svg { display: inline-block; vertical-align: -3px; margin-inline: 5px; }
}

/* at 320 the English sentence needs a third line and the closing lock is left
   on it alone; one notch down on type keeps it attached to the last word */
@media (max-width: 359px) {
    .mm-price-footnote { font-size: 12px; }
}

/* ---- FAQ rail once it stops being a rail -------------------------------------
   The rail is the left column of a two-column grid, so its badge, title and
   intro are start-aligned by design. At 1020 and below the grid collapses to a
   single column - measured: 1020 stacks, 1021 is the first two-column width, so
   the ceiling matches the existing block exactly - and the rail becomes a plain
   section head. Every other section on this page centres its head there; this
   one kept the desktop alignment, which is what read as "stuck to the side".

   The accordion below is untouched: a question sits beside its chevron and an
   answer is body copy, both of which stay start-aligned at every width. */
@media (max-width: 1020px) {
    .mm-faqs-rail { text-align: center; }
    .mm-faqs-desc { margin-inline: auto; }
    /* the WhatsApp card is part of the rail, and a centred head above a
       start-aligned card reads as two different alignments in one column */
    .mm-faqs-cta { text-align: center; }
}

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

/* ==========================================================================
   Flash toast (session('message') — shown by home/v3/flash.blade.php)
   ========================================================================== */
.mm-toast {
    position: fixed;
    top: calc(var(--mm-nav-h) + 14px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(92vw, 560px);
    background: #ffffff;
    border: 1.6px solid #CDEBD9;
    border-radius: 16px;
    box-shadow: 0 22px 48px rgba(184, 142, 108, 0.22);
    padding: 13px 18px;
    animation: mmToastIn .45s cubic-bezier(.16, 1, .3, 1);
}
[dir="rtl"] .mm-toast { transform: translateX(50%); }

.mm-toast-ic {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 10px;
    background: #E5F3E6;
    color: #2E9E54;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mm-toast-txt { font-weight: 700; color: var(--mm-ink); font-size: clamp(13.5px, 1.1vw, 15.5px); line-height: 1.6; }

.mm-toast-x {
    flex: none;
    border: none;
    background: transparent;
    color: var(--mm-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.mm-toast-x:hover { color: var(--mm-ink); }

.mm-toast-out { opacity: 0; transition: opacity .35s ease; }

@keyframes mmToastIn {
    from { opacity: 0; translate: 0 -12px; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-toast { animation: none; }
}

/* ---- Program structure on very narrow phones (<=360px) ---------------------
   At 320 the 40px chip plus a 14px gap left ~65px for the value, so both the
   label and the value broke onto a second line and the five rows lost their
   single-line rhythm. Trimming the chip and the gaps keeps every row on one
   line down to 320 without touching the sizes that already fit at 375. */
@media (max-width: 360px) {
    .mm-struct-card { padding: 6px 14px 18px; }
    .mm-struct-item { gap: 10px; }
    .mm-struct-item-label { gap: 9px; }
    .mm-struct-ico { width: 34px; }
    .mm-struct-item-label span { font-size: 14.5px; }
    .mm-struct-item-value { font-size: 13px; }
    .mm-struct-accred { padding: 10px 12px; gap: 10px; }
    .mm-struct-accred-label { font-size: 13.5px; }
    .mm-struct-accred-seal { padding: 7px 8px; }
    .mm-struct-accred-seal img { width: 92px; }
}