/* =========================================================================
   MarathonX v3 · "שרטוט"
   Paper, ink, one orange for action, one blueprint field.
   Tokens first; everything below reads tokens only. See DESIGN.md.
   ========================================================================= */

:root {
	/* colour */
	--mx-paper: #F5F6F8;
	--mx-surface: #FFFFFF;
	--mx-tone: #ECEFF3;
	--mx-tone-2: #E2E7EC;
	--mx-ink: #10181F;
	--mx-ink-2: #3D4955;
	--mx-ink-3: #5F6B77;
	--mx-line: #D5DCE3;
	--mx-brand: #F5A000;
	--mx-brand-strong: #DB8B00;
	--mx-on-brand: #170F00;
	--mx-brand-soft: #FFF1D6;
	--mx-blue: #0D2742;
	--mx-blue-2: #12304F;
	--mx-blue-ink: #EAF1F8;
	--mx-blue-ink-2: #A9BDD2;
	--mx-blue-line: rgba(234, 241, 248, .16);
	--mx-ok: #1E7A4C;
	--mx-err: #B42318;
	--mx-focus: #0B6BCB;

	/* type */
	--mx-font: 'Heebo', 'Assistant', 'Arial Hebrew', Arial, sans-serif;
	--mx-t-display: clamp(2.25rem, 1.3rem + 3.4vw, 4.5rem);
	--mx-t-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
	--mx-t-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
	--mx-t-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
	--mx-t-body: 1.0625rem;
	--mx-t-small: .9375rem;

	/* space */
	--mx-gutter: clamp(16px, 4vw, 48px);
	--mx-max: 1320px;
	--mx-section: clamp(88px, 9vw + 40px, 176px);
	--mx-radius: 4px;
	--mx-radius-lg: 8px;
	--mx-header-h: 72px;

	/* motion */
	--mx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--mx-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--mx-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--mx-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
	--mx-t-press: 140ms;
	--mx-t-hover: 180ms;
	--mx-t-ui: 220ms;
	--mx-t-reveal: 800ms;

	/* layers */
	--mx-z-header: 50;
	--mx-z-drawer: 80;
	--mx-z-float: 40;
}

/* ---------- base ---------- */

html { scroll-padding-top: calc(var(--mx-header-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body.mx {
	margin: 0;
	background: var(--mx-paper);
	color: var(--mx-ink);
	font-family: var(--mx-font);
	font-size: var(--mx-t-body);
	line-height: 1.6;
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.mx *, body.mx *::before, body.mx *::after { box-sizing: border-box; }
body.mx img, body.mx svg { max-width: 100%; }
body.mx a { color: inherit; }
body.mx :focus-visible { outline: 3px solid var(--mx-focus); outline-offset: 2px; border-radius: 2px; }
body.mx ::selection { background: var(--mx-brand); color: var(--mx-on-brand); }
body.mx button { font: inherit; color: inherit; }
body.mx bdi { unicode-bidi: isolate; }

.mx-wrap {
	width: 100%;
	max-width: calc(var(--mx-max) + 2 * var(--mx-gutter));
	margin-inline: auto;
	padding-left: max(var(--mx-gutter), env(safe-area-inset-left, 0px));
	padding-right: max(var(--mx-gutter), env(safe-area-inset-right, 0px));
}
.mx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mx-skip { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; background: var(--mx-ink); color: var(--mx-surface) !important; padding: 12px 18px; border-radius: var(--mx-radius); text-decoration: none; font-weight: 700; }
.mx-skip:focus { top: 12px; }
.mx-main { display: block; outline: none; }
.mx-i { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; }

.mx-display {
	font-size: var(--mx-t-display);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.028em;
	margin: 0;
	text-wrap: balance;
}
.mx-h2 {
	font-size: var(--mx-t-h2);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.025em;
	margin: 0;
	text-wrap: balance;
}
.mx-lead { font-size: var(--mx-t-lead); line-height: 1.55; color: var(--mx-ink-2); margin: 0; max-width: 46ch; text-wrap: pretty; }
.mx-section-lead { font-size: var(--mx-t-lead); color: var(--mx-ink-2); margin: 0; max-width: 48ch; text-wrap: pretty; }
.mx-price { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- controls ---------- */

.mx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 46px; padding: 0 20px;
	border: 1.5px solid transparent; border-radius: var(--mx-radius);
	font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap;
	cursor: pointer; user-select: none;
	transition: transform var(--mx-t-press) var(--mx-ease-out), background-color var(--mx-t-hover) ease, border-color var(--mx-t-hover) ease, color var(--mx-t-hover) ease;
}
.mx-btn:active { transform: scale(.97); }
.mx-btn-primary { background: var(--mx-brand); color: var(--mx-on-brand) !important; }
.mx-btn-quiet { background: transparent; color: var(--mx-ink) !important; }
.mx-btn-line { background: transparent; color: var(--mx-ink) !important; border-color: var(--mx-ink); }
.mx-btn-dark { background: var(--mx-ink); color: var(--mx-surface) !important; }
@media (hover: hover) and (pointer: fine) {
	.mx-btn-primary:hover { background: var(--mx-brand-strong); }
	.mx-btn-quiet:hover { background: var(--mx-tone); }
	.mx-btn-line:hover { background: var(--mx-ink); color: var(--mx-surface) !important; }
	.mx-btn-dark:hover { background: #24313D; }
}

.mx-iconbtn {
	position: relative; display: inline-grid; place-items: center;
	width: 44px; height: 44px; border-radius: var(--mx-radius);
	background: transparent; border: 0; color: var(--mx-ink); cursor: pointer; text-decoration: none;
	transition: transform var(--mx-t-press) var(--mx-ease-out), background-color var(--mx-t-hover) ease;
}
.mx-iconbtn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .mx-iconbtn:hover { background: var(--mx-tone); } }
.mx-badge { position: absolute; top: 4px; inset-inline-start: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--mx-brand); color: var(--mx-on-brand); font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }

.mx-chip {
	display: inline-flex; align-items: center; gap: .45em;
	min-height: 40px; padding: 0 14px;
	border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius);
	background: var(--mx-surface); color: var(--mx-ink); text-decoration: none;
	font-weight: 600; font-size: .9875rem; white-space: nowrap; cursor: pointer;
	transition: transform var(--mx-t-press) var(--mx-ease-out), border-color var(--mx-t-hover) ease, background-color var(--mx-t-hover) ease, color var(--mx-t-hover) ease;
}
.mx-chip:active { transform: scale(.97); }
.mx-chip[hidden] { display: none; }
.mx-chip-sm { min-height: 34px; padding: 0 12px; font-size: .9375rem; }
.mx-chip[aria-pressed="true"] { background: var(--mx-ink); border-color: var(--mx-ink); color: var(--mx-surface); }
.mx-chip-n { color: var(--mx-ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.mx-chip[aria-pressed="true"] .mx-chip-n { color: var(--mx-blue-ink-2); }
@media (hover: hover) and (pointer: fine) { .mx-chip:hover { border-color: var(--mx-ink); } }

.mx-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; text-decoration-color: var(--mx-brand); }
.mx-link .mx-i { transition: transform var(--mx-t-hover) var(--mx-ease-out); }
@media (hover: hover) and (pointer: fine) { .mx-link:hover .mx-i { transform: translateX(-4px); } }

/* ---------- header ---------- */

.mx-header {
	position: sticky; top: 0; z-index: var(--mx-z-header);
	background: var(--mx-paper);
	padding-top: env(safe-area-inset-top, 0px);
	transition: background-color var(--mx-t-ui) ease, box-shadow var(--mx-t-ui) ease;
}
.mx-header[data-scrolled] { background: var(--mx-surface); box-shadow: 0 1px 0 var(--mx-line); }
.admin-bar .mx-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mx-header { top: 0; } }
.mx-header-row { display: flex; align-items: center; gap: 28px; height: var(--mx-header-h); }

.mx-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mx-ink); flex: none; }
.mx-logo-mark { display: block; width: 44px; height: 36px; overflow: hidden; flex: none; }
body.mx .mx-logo-mark img { display: block; width: 64px; height: 64px; max-width: none; margin: -2px -10px 0 0; }
.mx-logo-word { font-weight: 900; font-size: 1.1875rem; letter-spacing: .02em; direction: ltr; }
.mx-logo-word b { color: var(--mx-brand); font-weight: 900; }

.mx-nav { flex: 1; min-width: 0; }
.mx-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mx-nav li { position: relative; }
.mx-nav-link {
	display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px;
	border: 0; background: none; border-radius: var(--mx-radius);
	font-weight: 600; font-size: 1rem; color: var(--mx-ink-2); text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: color var(--mx-t-hover) ease, background-color var(--mx-t-hover) ease;
}
.mx-nav-link .mx-i { width: 16px; height: 16px; transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-nav-link[aria-expanded="true"] .mx-i { transform: rotate(180deg); }
.mx-nav-link[aria-current="page"] { color: var(--mx-ink); box-shadow: inset 0 -2px 0 var(--mx-brand); border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .mx-nav-link:hover { color: var(--mx-ink); background: var(--mx-tone); } }

.mx-sub {
	position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 300px;
	background: var(--mx-surface); border-radius: var(--mx-radius-lg);
	box-shadow: 0 18px 50px -12px rgba(16, 24, 31, .28), 0 0 0 1px rgba(16, 24, 31, .06);
	padding: 8px; transform-origin: top right;
	transition: opacity var(--mx-t-ui) var(--mx-ease-out), transform var(--mx-t-ui) var(--mx-ease-out);
}
.mx-sub[hidden] { display: block; opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none; visibility: hidden; }
.mx-sub ul { list-style: none; margin: 0; padding: 0; }
.mx-sub a { display: block; padding: 10px 14px; border-radius: var(--mx-radius); text-decoration: none; font-weight: 500; color: var(--mx-ink); transition: background-color var(--mx-t-hover) ease; }
.mx-sub a[aria-current="page"] { font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .mx-sub a:hover { background: var(--mx-tone); } }

.mx-header-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.mx-user { display: flex; align-items: center; gap: 6px; }
.mx-user .mx-btn { min-height: 42px; padding: 0 16px; }
.mx-user .mx-btn .mx-i { width: 18px; height: 18px; }
.mx-points { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 10px; font-size: .9375rem; color: var(--mx-ink-2); text-decoration: none; white-space: nowrap; }
.mx-points-n { font-weight: 800; color: var(--mx-ink); font-variant-numeric: tabular-nums; }
.mx-menu-btn { display: none; }

.mx-search { background: var(--mx-surface); box-shadow: 0 1px 0 var(--mx-line); overflow: hidden; transition: opacity var(--mx-t-ui) var(--mx-ease-out), transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-search[hidden] { display: block; opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden; height: 0; }
.mx-search-form { display: flex; align-items: center; gap: 12px; padding-block: 14px; }
.mx-search-form > .mx-i { color: var(--mx-ink-3); }
.mx-search-form input[type="search"] { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font: inherit; font-size: 1.375rem; font-weight: 600; color: var(--mx-ink); outline: none; }
.mx-search-form input::placeholder { color: var(--mx-ink-3); font-weight: 400; }

/* drawer (phones) */
.mx-drawer { position: fixed; inset: 0; z-index: var(--mx-z-drawer); }
.mx-drawer[hidden] { display: block; visibility: hidden; pointer-events: none; }
.mx-drawer-scrim { position: absolute; inset: 0; background: rgba(16, 24, 31, .48); opacity: 1; transition: opacity 300ms ease; }
.mx-drawer[hidden] .mx-drawer-scrim { opacity: 0; }
.mx-drawer-panel {
	position: absolute; inset-block: 0; inset-inline-start: 0; width: min(88vw, 400px);
	background: var(--mx-paper); overflow-y: auto; overscroll-behavior: contain;
	padding: calc(env(safe-area-inset-top, 0px) + 12px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 24px) 20px;
	display: flex; flex-direction: column; gap: 20px;
	transition: transform 400ms var(--mx-ease-drawer);
}
.mx-drawer[hidden] .mx-drawer-panel { transform: translateX(100%); }
.mx-drawer-top { display: flex; align-items: center; justify-content: space-between; }
.mx-drawer-search { display: flex; align-items: center; background: var(--mx-surface); border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); padding-inline-start: 14px; }
.mx-drawer-search input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; font: inherit; font-size: 1.0625rem; outline: none; color: var(--mx-ink); }
.mx-drawer-nav, .mx-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.mx-drawer-nav > li > a, .mx-drawer-label { display: block; padding: 12px 0; font-size: 1.375rem; font-weight: 800; text-decoration: none; color: var(--mx-ink); }
.mx-drawer-label { color: var(--mx-ink-3); font-size: .9375rem; font-weight: 700; padding-bottom: 4px; }
.mx-drawer-nav ul a { display: block; padding: 8px 0; font-size: 1.0625rem; font-weight: 600; text-decoration: none; color: var(--mx-ink); }
.mx-drawer-user { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mx-drawer-user .mx-btn { flex: 1; }

/* floating WhatsApp */
.mx-wa {
	position: fixed; z-index: var(--mx-z-float);
	inset-inline-end: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
	background: #1E8F4E; color: #fff !important;
	box-shadow: 0 10px 24px -8px rgba(16, 24, 31, .45);
	transition: transform var(--mx-t-press) var(--mx-ease-out);
}
.mx-wa .mx-i { width: 28px; height: 28px; }
.mx-wa:active { transform: scale(.94); }

/* ---------- home: continue ---------- */

.mx-continue { background: var(--mx-ink); color: var(--mx-surface); padding-block: 22px; }
.mx-continue-h { font-size: 1rem; font-weight: 700; color: var(--mx-blue-ink-2); margin: 0 0 12px; }
.mx-continue-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mx-continue-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; border-radius: var(--mx-radius); background: rgba(255, 255, 255, .07); text-decoration: none; transition: background-color var(--mx-t-hover) ease; }
.mx-continue-name { font-weight: 800; }
.mx-continue-meta { grid-row: 2; color: var(--mx-blue-ink-2); font-size: .875rem; }
.mx-continue-go { grid-row: 1 / 3; grid-column: 2; align-self: center; display: inline-flex; gap: 6px; align-items: center; color: var(--mx-brand); font-weight: 700; font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) { .mx-continue-list a:hover { background: rgba(255, 255, 255, .13); } }

/* ---------- home: hero ---------- */

.mx-hero { padding-block: clamp(36px, 6vw, 88px) clamp(48px, 6vw, 96px); }
.mx-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "title title" "text fig"; gap: clamp(28px, 3.5vw, 56px) clamp(32px, 5vw, 80px); align-items: start; }
.mx-hero-grid > h1 { grid-area: title; }
.mx-hero-text { grid-area: text; padding-top: 8px; }
.mx-hero-figure { grid-area: fig; }
.mx-hero-text { display: flex; flex-direction: column; gap: 30px; }
.mx-lines .mx-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.mx-lines .mx-line > span { display: block; }
.mx-hero .mx-display .mx-line:last-child > span { color: var(--mx-ink); }

.mx-finder { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.mx-finder-label { font-weight: 700; font-size: 1rem; }
.mx-finder-field {
	display: flex; align-items: center; gap: 10px;
	background: var(--mx-surface); border: 2px solid var(--mx-ink); border-radius: var(--mx-radius);
	padding: 6px; padding-inline-start: 16px;
	transition: box-shadow var(--mx-t-hover) ease;
}
.mx-finder-field:focus-within { box-shadow: 0 0 0 4px rgba(245, 160, 0, .35); }
.mx-finder-field > .mx-i { color: var(--mx-ink-3); }
.mx-finder-field input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font: inherit; font-size: 1.125rem; color: var(--mx-ink); outline: none; }
.mx-finder-field input::placeholder { color: var(--mx-ink-3); }
.mx-hero-insts { display: flex; flex-direction: column; gap: 10px; }
.mx-hero-insts-label { margin: 0; font-weight: 700; font-size: 1rem; }
.mx-hero-insts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.mx-hero-figure { margin: 0; }
.mx-sheet {
	position: relative; background: var(--mx-surface); border-radius: var(--mx-radius-lg);
	padding: 18px 18px 18px; isolation: isolate;
}
.mx-sheet-head { display: flex; justify-content: space-between; font-size: .8125rem; font-weight: 600; color: var(--mx-ink-3); padding: 0 4px 10px; font-variant-numeric: tabular-nums; }
.mx-fbd { display: block; width: 100%; height: auto; overflow: visible; }
.mx-fbd text { font-family: var(--mx-font); fill: var(--mx-ink); font-size: 17px; font-weight: 700; direction: ltr; }
.mx-fbd-grid path { stroke: var(--mx-tone); stroke-width: 1; fill: none; }
.mx-fbd-members path { stroke: var(--mx-ink); stroke-width: 4; stroke-linecap: round; fill: none; }
.mx-fbd-joints circle { fill: var(--mx-surface); stroke: var(--mx-ink); stroke-width: 3; }
.mx-fbd-supports path, .mx-fbd-supports circle { stroke: var(--mx-ink); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.mx-fbd-load path { stroke: var(--mx-brand-strong); stroke-width: 4; fill: none; stroke-linecap: round; }
.mx-fbd-load .mx-fbd-head { fill: var(--mx-brand-strong); stroke: none; }
.mx-fbd-load text { fill: var(--mx-ink); }
.mx-fbd-dims path { stroke: var(--mx-ink-3); stroke-width: 1.5; fill: none; }
.mx-fbd-dims text { fill: var(--mx-ink-2); font-size: 15px; font-weight: 600; }
.mx-fbd-labels text { fill: var(--mx-ink-2); font-size: 16px; }

.mx-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 4px 0; }
.mx-sheet-meta { color: var(--mx-ink-3); font-size: .9375rem; }
.mx-sheet-play {
	position: relative;
	display: inline-flex; align-items: center; gap: 12px;
	background: var(--mx-ink); color: var(--mx-surface) !important; text-decoration: none;
	padding: 10px 18px 10px 10px; border-radius: 999px;
	transition: transform var(--mx-t-press) var(--mx-ease-out), background-color var(--mx-t-hover) ease;
}
.mx-sheet-play:active { transform: scale(.97); }
.mx-sheet-play strong { display: block; font-size: .9375rem; line-height: 1.2; }
.mx-sheet-play small { display: block; font-size: .8125rem; color: var(--mx-blue-ink-2); line-height: 1.3; }
.mx-sheet-play-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--mx-brand); color: var(--mx-on-brand); display: grid; place-items: center; flex: none; transition: transform var(--mx-t-hover) var(--mx-ease-out); }
.mx-sheet-play-dot .mx-i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .mx-sheet-play:hover { background: #24313D; } .mx-sheet-play:hover .mx-sheet-play-dot { transform: scale(1.08); } }

.mx-facts {
	margin: clamp(40px, 5vw, 72px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	background: var(--mx-surface); border-radius: var(--mx-radius-lg);
}
.mx-facts > div { padding: 20px 24px; display: flex; flex-direction: column-reverse; gap: 2px; }
.mx-facts > div + div { box-shadow: inset -1px 0 0 var(--mx-tone); }
.mx-facts dt { font-size: .9375rem; color: var(--mx-ink-2); }
.mx-facts dd { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mx-facts dd.mx-facts-word { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); letter-spacing: -.01em; }

/* ---------- catalog ---------- */

.mx-catalog { padding-block: var(--mx-section) calc(var(--mx-section) * .8); background: var(--mx-surface); }
.mx-catalog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.mx-catalog-count { margin: 0; font-size: 1.125rem; color: var(--mx-ink-2); font-variant-numeric: tabular-nums; }
.mx-catalog-count [data-finder-count] { font-weight: 900; color: var(--mx-ink); font-size: 1.5rem; }
.mx-filters { display: grid; gap: 12px; margin-bottom: 18px; }
.mx-filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-filter-search { position: relative; max-width: 420px; }
.mx-filter-search .mx-i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--mx-ink-3); pointer-events: none; }
.mx-filter-search input { width: 100%; height: 46px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); background: var(--mx-paper); padding: 0 44px 0 14px; font: inherit; color: var(--mx-ink); transition: border-color var(--mx-t-hover) ease, background-color var(--mx-t-hover) ease; }
.mx-filter-search input:focus { outline: none; border-color: var(--mx-ink); background: var(--mx-surface); }

.mx-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.mx-row { min-width: 0; }
.mx-row[hidden] { display: none; }
.mx-row > a {
	display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto 28px; align-items: center; gap: 18px;
	padding: 18px 4px; text-decoration: none; color: var(--mx-ink);
	box-shadow: inset 0 -1px 0 var(--mx-tone-2);
	transition: background-color var(--mx-t-hover) ease;
}
.mx-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mx-row-name { font-weight: 800; font-size: 1.125rem; line-height: 1.3; }
.mx-row-meta { color: var(--mx-ink-3); font-size: .9375rem; line-height: 1.4; }
.mx-row-lessons { color: var(--mx-ink-2); font-size: .9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mx-row-price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: 1.125rem; line-height: 1.2; text-align: left; }
.mx-row-price s { font-weight: 500; font-size: .875rem; color: var(--mx-ink-3); }
.mx-row-go { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--mx-ink); transition: transform var(--mx-t-hover) var(--mx-ease-out), background-color var(--mx-t-hover) ease, color var(--mx-t-hover) ease; }
.mx-row-go .mx-i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
	.mx-row > a:hover { background: var(--mx-paper); }
	.mx-row > a:hover .mx-row-go { background: var(--mx-brand); color: var(--mx-on-brand); transform: translateX(-4px); }
}
.mx-row.is-entering { animation: mx-row-in 360ms var(--mx-ease-out) both; animation-delay: calc(var(--d, 0) * 22ms); }
@keyframes mx-row-in { from { opacity: 0; transform: translateY(8px); } }
.mx-empty { margin: 24px 0 0; font-size: 1.125rem; color: var(--mx-ink-2); }
.mx-empty a { font-weight: 700; }
.mx-more-wrap { margin-top: 32px; display: flex; justify-content: center; }
.mx-more-wrap[hidden] { display: none; }

/* ---------- blueprint field ---------- */

.mx-blueprint {
	background-color: var(--mx-blue);
	background-image: linear-gradient(var(--mx-blue-line) 1px, transparent 1px), linear-gradient(90deg, var(--mx-blue-line) 1px, transparent 1px);
	background-size: 32px 32px; background-position: -1px -1px;
	color: var(--mx-blue-ink); padding-block: var(--mx-section);
}
.mx-bp-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.mx-bp-text { position: sticky; top: calc(var(--mx-header-h) + 40px); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.mx-bp-lead { font-size: var(--mx-t-lead); color: var(--mx-blue-ink-2); margin: 0; max-width: 44ch; }
.mx-bp-lead a { color: var(--mx-blue-ink); font-weight: 700; text-decoration-color: var(--mx-brand); text-underline-offset: .25em; }

.mx-bp-lessons { list-style: none; margin: 0; padding: 0; counter-reset: none; background: var(--mx-blue-2); border-radius: var(--mx-radius-lg); padding: 8px 0; }
.mx-bp-lessons li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 22px; font-size: 1.0625rem; }
.mx-bp-lessons li + li { box-shadow: inset 0 1px 0 var(--mx-blue-line); }
.mx-bp-n { font-weight: 900; font-size: 1.25rem; color: var(--mx-brand); font-variant-numeric: tabular-nums; }
.mx-bp-name { font-weight: 600; }
.mx-bp-lessons .mx-i { color: var(--mx-blue-ink-2); width: 18px; height: 18px; }
.mx-bp-tag { font-size: .8125rem; font-weight: 800; background: var(--mx-brand); color: var(--mx-on-brand); padding: 3px 8px; border-radius: 3px; }
.mx-bp-rest { color: var(--mx-blue-ink-2); display: block !important; text-align: center; font-weight: 600; }

/* ---------- bundles ---------- */

.mx-bundles { padding-block: var(--mx-section); }
.mx-section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.mx-bundle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mx-bundle > a {
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 40px; grid-template-areas: "name math go" "what math go"; gap: 6px 32px; align-items: center;
	background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: 26px 28px; text-decoration: none; color: var(--mx-ink);
	transition: background-color var(--mx-t-hover) ease;
}
.mx-bundle-name { grid-area: name; font-size: var(--mx-t-h3); font-weight: 800; line-height: 1.25; }
.mx-bundle-what { grid-area: what; color: var(--mx-ink-2); font-size: .9875rem; }
.mx-bundle-math { grid-area: math; display: flex; align-items: flex-end; justify-content: flex-end; gap: 22px; flex-wrap: wrap; }
.mx-bundle-math small { display: block; font-size: .8125rem; color: var(--mx-ink-3); font-weight: 600; }
.mx-bundle-sep s { font-size: 1.125rem; color: var(--mx-ink-3); }
.mx-bundle-now .mx-price { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.mx-bundle-save { background: var(--mx-brand-soft); color: #6B4500; font-weight: 800; padding: 6px 10px; border-radius: 3px; font-size: .9375rem; }
.mx-bundle .mx-row-go { grid-area: go; width: 40px; height: 40px; }
@media (hover: hover) and (pointer: fine) { .mx-bundle > a:hover .mx-row-go { background: var(--mx-brand); color: var(--mx-on-brand); transform: translateX(-4px); } .mx-bundle > a:hover { background: #FBFBFC; } }

/* ---------- people ---------- */

.mx-people { padding-block: var(--mx-section); background: var(--mx-surface); }
.mx-people-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.mx-people-head { position: sticky; top: calc(var(--mx-header-h) + 40px); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.mx-people-frame { position: relative; width: min(100%, 320px); aspect-ratio: 4 / 5; margin-top: 16px; border-radius: var(--mx-radius-lg); overflow: hidden; background: var(--mx-tone); }
.mx-people-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0; transform: scale(1.04); transition: opacity 320ms ease, transform 600ms var(--mx-ease-soft); }
.mx-people-frame img.is-on { opacity: 1; transform: none; }
.mx-people-list { list-style: none; margin: 0; padding: 0; }
.mx-people-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "what n"; gap: 2px 16px; align-items: center; padding: 22px 0; text-decoration: none; color: var(--mx-ink); box-shadow: inset 0 -1px 0 var(--mx-tone-2); transition: opacity var(--mx-t-hover) ease, padding var(--mx-t-ui) var(--mx-ease-out); }
.mx-people-thumb { display: none; }
.mx-initials { place-items: center; background: var(--mx-tone); color: var(--mx-ink-2); font-weight: 800; font-size: 1.125rem; }
.mx-people-name { grid-area: name; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.mx-people-what { grid-area: what; color: var(--mx-ink-3); }
.mx-people-n { grid-area: n; color: var(--mx-ink-2); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
	.mx-people-list:hover a { opacity: .38; }
	.mx-people-list a:hover, .mx-people-list a:focus-visible { opacity: 1; padding-inline-start: 12px; }
}

/* ---------- terms / more ---------- */

.mx-terms { padding-block: var(--mx-section) calc(var(--mx-section) * .6); }
.mx-terms-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.mx-terms-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
.mx-terms-list dt { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; margin-bottom: 6px; }
.mx-terms-list dt .mx-i { color: var(--mx-brand-strong); width: 26px; height: 26px; }
.mx-terms-list dd { margin: 0; color: var(--mx-ink-2); }

.mx-more { padding-block: 0 var(--mx-section); }
.mx-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mx-more-item { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--mx-tone); border-radius: var(--mx-radius-lg); text-decoration: none; color: var(--mx-ink); transition: background-color var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-more-item:active { transform: scale(.98); }
.mx-more-item .mx-i { width: 28px; height: 28px; color: var(--mx-ink); margin-bottom: 10px; }
.mx-more-t { font-weight: 800; font-size: 1.1875rem; }
.mx-more-d { color: var(--mx-ink-2); font-size: .9875rem; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .mx-more-item:hover { background: var(--mx-tone-2); } }

/* ---------- footer ---------- */

.mx-footer { background: var(--mx-ink); color: var(--mx-blue-ink); padding-block: clamp(64px, 8vw, 120px) calc(28px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.mx-footer a { color: var(--mx-blue-ink); text-decoration: none; }
.mx-footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr); gap: 40px; }
.mx-footer-claim { margin: 0; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 900; line-height: 1.02; letter-spacing: -.03em; color: var(--mx-surface); }
.mx-footer-h { font-size: .9375rem; font-weight: 700; color: var(--mx-blue-ink-2); margin: 0 0 14px; }
.mx-footer-contact p { margin: 0 0 14px; color: var(--mx-blue-ink-2); }
.mx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mx-footer-contact a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.mx-footer-contact a span { color: var(--mx-blue-ink-2); font-weight: 500; min-width: 56px; }
.mx-footer-contact .mx-i { color: var(--mx-brand); }
.mx-footer-nav a { transition: color var(--mx-t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .mx-footer a:hover { color: var(--mx-brand); } }
.mx-footer-word { display: block; width: 100%; height: auto; margin: clamp(48px, 7vw, 96px) 0 28px; overflow: visible; direction: ltr; user-select: none; }
.mx-footer-word text { font-family: var(--mx-font); font-weight: 900; font-size: 168px; letter-spacing: -6px; fill: #1C2731; }
.mx-footer-word tspan { fill: #2C2412; }
.mx-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .875rem; color: var(--mx-blue-ink-2); }
.mx-footer-legal a { color: var(--mx-blue-ink-2); text-decoration: underline; text-underline-offset: .2em; }

/* plugins replaced by v3 */
body.mx #rmp_menu_trigger-450, body.mx #rmp-container-450, body.mx .rmp-container, body.mx .rmp_menu_trigger, body.mx .whatsapp-float-icon, body.mx #scroll.responsive-scroll { display: none !important; }

/* ---------- notices ---------- */

.mx-notices:empty { display: none; }
.mx-notices .woocommerce-message, .mx-notices .woocommerce-error, .mx-notices .woocommerce-info { margin: 16px 0 0; padding: 14px 18px; border-radius: var(--mx-radius); background: var(--mx-surface); list-style: none; box-shadow: inset 4px 0 0 var(--mx-brand); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
	/* headline lines rise from behind their baselines */
	.js .mx-lines .mx-line > span { transform: translateY(105%); animation: mx-line-up 900ms var(--mx-ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
	.js [data-rise] { opacity: 0; transform: translateY(18px); animation: mx-rise var(--mx-t-reveal) var(--mx-ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }

	/* section parts arrive in reading order, once */
	.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--mx-ease-out), transform 900ms var(--mx-ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
	.js [data-reveal].is-in { opacity: 1; transform: none; }
	.js [data-stagger] > li { opacity: 0; transform: translateX(-16px); transition: opacity 600ms var(--mx-ease-out), transform 700ms var(--mx-ease-out); transition-delay: calc(var(--i, 0) * 55ms + 120ms); }
	.js [data-stagger].is-in > li { opacity: 1; transform: none; }

	/* the drawing draws itself: members, joints, supports, loads, dimensions */
	/* hero truss: a pencil ghost is there from the first frame; members trace over it, joints light,
	   loads land with a short settle, reactions grow while their values count up, then member forces show. */
	.js .mx-fbd-members path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mx-draw 620ms var(--mx-ease-in-out) forwards; animation-delay: var(--d, 0ms); }
	.js .mx-fbd-joints circle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); animation: mx-pop 360ms cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: 620ms; }
	.js .mx-fbd-joints circle:nth-child(2n) { animation-delay: 680ms; }
	.js .mx-fbd-joints circle:nth-child(3n) { animation-delay: 740ms; }
	.js .mx-fbd-supports { opacity: 0; animation: mx-fade 400ms ease forwards 650ms; }
	.js .mx-fbd-load { opacity: 0; transform: translateY(-34px); animation: mx-land 620ms cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: 880ms; }
	.js .mx-fbd-load:nth-child(2) { animation-delay: 980ms; }
	.js .mx-fbd-members { animation: mx-settle 420ms var(--mx-ease-out) 1180ms; }
	.js .mx-fbd-reacts .mx-fbd-shaft { transform-box: fill-box; transform-origin: top; transform: scaleY(0); animation: mx-grow 520ms var(--mx-ease-out) forwards 1250ms; }
	.js .mx-fbd-reacts, .js .mx-fbd-track, .js .mx-fbd-hint { opacity: 0; animation: mx-fade 400ms ease forwards 1200ms; }
	.js .mx-fbd-dims, .js .mx-fbd-labels { opacity: 0; animation: mx-fade 500ms ease forwards 900ms; }
	.js .mx-sheet-play { opacity: 0; transform: translateY(10px); animation: mx-rise 700ms var(--mx-ease-out) forwards 2050ms; }
	.js .mx-sheet-head { opacity: 0; animation: mx-fade 600ms ease forwards 200ms; }

	/* a slow drift on the drawing as the hero scrolls away */
	@supports (animation-timeline: view()) {
		.mx-fbd { animation: mx-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
	}

	/* the footer wordmark slides in as the page ends */
	@supports (animation-timeline: view()) {
		.mx-footer-word { animation: mx-word linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.mx-row.is-entering { animation: none; }
	.mx-drawer-panel, .mx-sub, .mx-search { transition-duration: 1ms; }
}

@keyframes mx-line-up { to { transform: none; } }
@keyframes mx-rise { to { opacity: 1; transform: none; } }
@keyframes mx-fade { to { opacity: 1; } }
@keyframes mx-draw { to { stroke-dashoffset: 0; } }
@keyframes mx-pop { to { opacity: 1; transform: none; } }
@keyframes mx-drop { to { opacity: 1; transform: none; } }
@keyframes mx-drift { to { transform: translateY(-5%); } }
@keyframes mx-word { from { transform: translateX(-12%); opacity: .2; } to { transform: none; opacity: 1; } }

/* ---------- responsive ---------- */

@media (max-width: 1023px) { /* full menu down to 1024 (owner 18.10: Chrome at 100% on a laptop is ~1280 or less); between 1024 and 1440 the compact menu below; the JS check (mx-nav-tight) still switches to the menu button if it does not fit */
	.mx-nav { display: none; }
	.mx-menu-btn { display: inline-grid; }
	.mx-points { display: none; }
}

@media (max-width: 980px) {
	.mx-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text" "fig"; }
	.mx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx-facts > div:nth-child(3) { box-shadow: inset 0 1px 0 var(--mx-tone); }
	.mx-facts > div:nth-child(4) { box-shadow: inset -1px 0 0 var(--mx-tone), inset 0 1px 0 var(--mx-tone); }
	.mx-rows { grid-template-columns: 1fr; }
	.mx-bp-grid, .mx-people-grid, .mx-terms-grid { grid-template-columns: 1fr; }
	.mx-bp-text, .mx-people-head { position: static; }
	.mx-people-frame { display: none; }
	.mx-people-thumb { display: grid; grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
	.mx-people-list a { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img name n" "img what n"; }
	.mx-people-thumb { grid-area: img; }
	.mx-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx-footer-top { grid-template-columns: 1fr 1fr; }
	.mx-footer-claim { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	:root { --mx-header-h: 64px; }

	.mx-logo-word { font-size: 1.0625rem; }
	.mx-user { display: none; }
	.mx-hero { padding-top: 20px; }
	.mx-hero-text { gap: 22px; }
	.mx-finder-field { flex-wrap: wrap; padding: 6px; padding-inline-start: 12px; }
	.mx-finder-field input { font-size: 1.0625rem; }
	.mx-finder-field .mx-btn { display: none; }
	.mx-hero-insts ul { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--mx-gutter)); padding-inline: var(--mx-gutter); scrollbar-width: none; }
	.mx-hero-insts ul::-webkit-scrollbar { display: none; }
	.mx-hero-insts li { scroll-snap-align: start; }
	.mx-sheet { padding: 12px 10px 12px; }
	.mx-sheet-play { width: 100%; }
	.mx-facts > div { padding: 16px; }
	.mx-filter-group { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--mx-gutter)); padding-inline: var(--mx-gutter); scrollbar-width: none; }
	.mx-filter-group::-webkit-scrollbar { display: none; }
	.mx-filter-search { max-width: none; }
	.mx-row > a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 16px 0; }
	.mx-row-lessons { grid-row: 2; grid-column: 1; }
	.mx-row-price { grid-row: 1 / 3; grid-column: 2; }
	.mx-row-go { display: none; }
	.mx-bundle > a { grid-template-columns: 1fr; grid-template-areas: "name" "what" "math"; padding: 22px 18px; }
	.mx-bundle .mx-row-go { display: none; }
	.mx-bundle-math { justify-content: flex-start; margin-top: 10px; }
	.mx-bp-lessons li { padding: 12px 16px; grid-template-columns: 32px minmax(0, 1fr) auto; }
	.mx-terms-list { grid-template-columns: 1fr; gap: 26px; }
	.mx-more-grid { grid-template-columns: 1fr; }
	.mx-footer-top { grid-template-columns: 1fr; }
	.mx-wa { width: 52px; height: 52px; }
}

/* ---------- category ---------- */

.mx-cat-head { padding-block: 8px clamp(28px, 4vw, 48px); }
.mx-cat-title { font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.75rem); margin: 18px 0 16px; }
.mx-catalog-page { padding-top: clamp(32px, 4vw, 56px); }
.mx-cat-packs { margin-top: clamp(48px, 6vw, 80px); }
.mx-cat-packs .mx-h3 { margin-bottom: 14px; }
.mx-cat-packs .mx-bundle > a { background: var(--mx-paper); }
.mx-cat-missing { margin-top: clamp(40px, 5vw, 64px); padding: 22px 24px; border-radius: var(--mx-radius-lg); background: var(--mx-tone); }
.mx-cat-missing p { margin: 0; }
.mx-cat-missing a { font-weight: 700; }
.mx-h3 { font-size: var(--mx-t-h3); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; margin: 0; }
.mx-crumbs { padding-block: 22px 8px; }
.mx-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .9375rem; color: var(--mx-ink-3); }
.mx-crumbs li + li::before { content: "\203A"; margin-inline-end: 8px; color: var(--mx-ink-3); }
.mx-crumbs a { color: var(--mx-ink-2); text-decoration: none; }
.mx-crumbs a:hover { text-decoration: underline; }
.mx-crumbs [aria-current] { color: var(--mx-ink); font-weight: 600; }

/* ---------- lecturer ---------- */

.mx-person { padding-bottom: var(--mx-section); }
.mx-person-head { display: grid; grid-template-columns: minmax(200px, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; padding-block: 18px clamp(40px, 5vw, 72px); }
.mx-person-photo { aspect-ratio: 4 / 5; border-radius: var(--mx-radius-lg); overflow: hidden; background: var(--mx-tone); display: grid; max-height: 460px; }
.mx-person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.mx-person-photo .mx-initials { display: grid; font-size: 4rem; }
.mx-person-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mx-person-name { font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.75rem); }
.mx-person-role { margin: 0; font-size: var(--mx-t-lead); color: var(--mx-ink-2); font-weight: 600; }
.mx-person-facts { margin-top: 10px; }
.mx-person-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mx-person-about .mx-h3, .mx-person-body section > .mx-h3 { margin-bottom: 14px; }
.mx-initials { display: grid; place-items: center; background: var(--mx-tone); color: var(--mx-ink-2); font-weight: 800; }

/* ---------- lecturers index ---------- */

.mx-team { padding-block: clamp(24px, 3vw, 40px) var(--mx-section); }
.mx-team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 36px 24px; }
.mx-team-grid a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--mx-ink); }
.mx-team-photo { display: grid; aspect-ratio: 4 / 5; border-radius: var(--mx-radius-lg); overflow: hidden; background: var(--mx-tone); margin-bottom: 10px; }
.mx-team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 700ms var(--mx-ease-soft); }
.mx-team-photo .mx-initials { font-size: 2.75rem; }
.mx-team-name { font-weight: 800; font-size: 1.25rem; line-height: 1.25; }
.mx-team-role { color: var(--mx-ink-2); font-size: .9375rem; }
.mx-team-courses { color: var(--mx-ink-3); font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) { .mx-team-grid a:hover .mx-team-photo img { transform: scale(1.035); } .mx-team-grid a:hover .mx-team-name { text-decoration: underline; text-decoration-color: var(--mx-brand); text-decoration-thickness: 2px; text-underline-offset: .25em; } }

/* ---------- search ---------- */

.mx-search-page-form { margin-top: 8px; }
.mx-noresults { max-width: 680px; }
.mx-noresults p { color: var(--mx-ink-2); }
.mx-noresults-insts { list-style: none; margin: 14px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 980px) {
	.mx-person-head, .mx-person-body { grid-template-columns: minmax(0, 1fr); }
	.mx-person-photo { max-width: 260px; }
}
@media (max-width: 640px) {
	.mx-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
	.mx-team-name { font-size: 1.0625rem; }
	.mx-team-courses { display: none; }
}

/* =========================================================================
   Motion & interaction layer v2
   ========================================================================= */

/* ---------- interactive diagram ---------- */
.mx-fbd-hit { fill: transparent; }
.mx-fbd-load-main { cursor: grab; outline: none; }
.mx-fbd.is-dragging .mx-fbd-load-main { cursor: grabbing; }
.mx-fbd-grip circle { fill: var(--mx-brand); stroke: var(--mx-surface); stroke-width: 3; transition: transform var(--mx-t-ui) var(--mx-ease-out); transform-box: fill-box; transform-origin: center; }
.mx-fbd-grip path { stroke: var(--mx-on-brand); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mx-fbd-load-main:hover .mx-fbd-grip circle, .mx-fbd.is-dragging .mx-fbd-grip circle { transform: scale(1.18); }
.mx-fbd-load-main:focus-visible .mx-fbd-grip circle { stroke: var(--mx-focus); stroke-width: 4; }
.mx-fbd-track path { stroke: var(--mx-brand); stroke-width: 2; stroke-dasharray: 4 6; opacity: 0; transition: opacity var(--mx-t-ui) ease; }
.mx-fbd:hover .mx-fbd-track path, .mx-fbd.is-dragging .mx-fbd-track path, .mx-fbd-load-main:focus-visible ~ * .mx-fbd-track path { opacity: .55; }
.mx-fbd-reacts .mx-fbd-shaft { stroke: var(--mx-blue-2); stroke-width: 4; fill: none; stroke-linecap: round; }
.mx-fbd-reacts .mx-fbd-head { fill: var(--mx-blue-2); }
.mx-fbd-reacts text { fill: var(--mx-blue-2); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mx-fbd-hint { fill: var(--mx-ink-2); font-size: 15px; font-weight: 700; transition: opacity 400ms ease; }
.mx-fbd.is-used .mx-fbd-hint { opacity: 0; }
.mx-fbd { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mx-sheet { transform-style: preserve-3d; will-change: transform; transition: box-shadow var(--mx-t-ui) ease; }
@media (hover: hover) and (pointer: fine) { .mx-sheet:hover { box-shadow: 0 30px 60px -30px rgba(13, 39, 66, .35); } }

/* ---------- marquee as a technical scale rule, closing the page ---------- */
.mx-marquee { position: relative; overflow: hidden; direction: ltr; user-select: none; background: var(--mx-ink); padding-block: 26px 22px; box-shadow: inset 0 -1px 0 rgba(234, 241, 248, .06); }
.mx-marquee-track { display: flex; width: max-content; }
.mx-marquee-set {
	display: flex; align-items: flex-end; height: 66px;
	background-image:
		linear-gradient(90deg, rgba(234, 241, 248, .55) 0 1.5px, transparent 1.5px),
		linear-gradient(90deg, rgba(234, 241, 248, .32) 0 1px, transparent 1px),
		linear-gradient(90deg, rgba(234, 241, 248, .16) 0 1px, transparent 1px),
		linear-gradient(rgba(234, 241, 248, .22), rgba(234, 241, 248, .22));
	background-size: 400px 22px, 40px 13px, 8px 7px, 100% 1px;
	background-position: 0 0, 0 0, 0 0, 0 0;
	background-repeat: repeat-x;
}
.mx-marquee-item { display: flex; align-items: flex-end; gap: 14px; width: 400px; flex: none; padding-inline: 8px 18px; padding-bottom: 2px; }
.mx-marquee-cm { flex: none; font: 600 12px/1 var(--mx-font); color: var(--mx-brand); font-variant-numeric: tabular-nums; align-self: flex-start; margin-top: 26px; }
.mx-marquee span.mx-marquee-name {
	flex: 1; min-width: 0; direction: rtl; text-align: right;
	font: 700 clamp(1.0625rem, .95rem + .55vw, 1.375rem)/1.2 var(--mx-font); color: var(--mx-blue-ink); letter-spacing: -.005em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mx-marquee::before, .mx-marquee::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(40px, 8vw, 140px); pointer-events: none; }
.mx-marquee::before { left: 0; background: linear-gradient(90deg, var(--mx-ink), transparent); }
.mx-marquee::after { right: 0; background: linear-gradient(-90deg, var(--mx-ink), transparent); }
@media (prefers-reduced-motion: no-preference) {
	.mx-marquee-track { animation: mx-marquee 90s linear infinite; will-change: transform; }
	.mx-marquee.is-off .mx-marquee-track { animation-play-state: paused; }
	.mx-marquee:hover .mx-marquee-track { animation-play-state: paused; }
}
@keyframes mx-marquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
	.mx-marquee-item { width: 300px; }
	.mx-marquee-set { background-size: 300px 18px, 30px 11px, 6px 6px, 100% 1px; height: 58px; }
}

/* ---------- reading progress as a measuring tape pulled out under the header ---------- */
.mx-tape { position: absolute; inset-inline: 0; bottom: -7px; height: 7px; pointer-events: none; overflow: hidden; }
.mx-tape-fill {
	position: absolute; inset: 0; clip-path: inset(0 0 0 100%);
	background-color: #F7B500;
	background-image: linear-gradient(90deg, rgba(16, 24, 31, .8) 0 1px, transparent 1px), linear-gradient(90deg, rgba(16, 24, 31, .45) 0 1px, transparent 1px);
	background-size: 40px 7px, 8px 3px;
	background-position: right top, right top;
	background-repeat: repeat-x;
	box-shadow: 0 1px 0 rgba(16, 24, 31, .25);
}
.mx-tape-fill::after { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; width: 4px; background: #3B4955; border-radius: 0 1px 1px 0; }

/* ---------- spotlight on cards ---------- */
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx-sx, 50%) var(--mx-sy, 50%), rgba(245, 160, 0, .16), transparent 60%);
	opacity: 0; transition: opacity 260ms ease;
}
@media (hover: hover) and (pointer: fine) { [data-spot]:hover::before { opacity: 1; } }

/* ---------- spec sheet (what you get) ---------- */
.mx-spec { margin: 0; display: grid; }
.mx-spec > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px 40px; align-items: baseline; padding-block: 24px; box-shadow: inset 0 -1px 0 var(--mx-tone-2); }
.mx-spec > div:first-child { padding-top: 6px; }
.mx-spec dt { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; }
.mx-spec dd { margin: 0; color: var(--mx-ink-2); font-size: 1.0625rem; max-width: 46ch; }
@media (max-width: 640px) { .mx-spec > div { grid-template-columns: 1fr; padding-block: 18px; } }

/* ---------- reading progress ---------- */
.mx-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: calc(var(--mx-z-header) + 1); background: var(--mx-brand); transform: scaleX(0); transform-origin: right; pointer-events: none; }
.admin-bar .mx-progress { top: 32px; }

/* ---------- page-to-page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
.mx-header { view-transition-name: mx-header; }
.mx-footer { view-transition-name: mx-footer; }
::view-transition-old(root) { animation: 180ms var(--mx-ease-out) both mx-vt-out; }
::view-transition-new(root) { animation: 420ms var(--mx-ease-out) both mx-vt-in; }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--mx-ease-in-out); }
@keyframes mx-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes mx-vt-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}


/* ---------- blueprint field: the grid slowly drifts ---------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.mx-blueprint { animation: mx-grid-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
	}
}
@keyframes mx-grid-drift { from { background-position: -1px -40px; } to { background-position: -1px 40px; } }

/* ---------- buttons: a sheen sweeps across the primary action on hover ---------- */
.mx-btn-primary { position: relative; overflow: hidden; }
.mx-btn-primary::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
	transform: translateX(110%);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.mx-btn-primary:hover::after { transform: translateX(-110%); transition: transform 700ms var(--mx-ease-out); }
}

/* anonymous academic portrait for lecturers without a photo */
.mx-avatar { display: block; width: 100%; height: 100%; }
.mx-people-thumb.mx-avatar { border-radius: 50%; width: 56px; height: 56px; }

/* ---------- blocks printed by course-extras.php, in the v3 language ---------- */
.mx-suggest-wrap { padding-bottom: clamp(40px, 5vw, 72px); }
body.mx .mx-suggest {
	margin: 0 !important; padding: clamp(22px, 3vw, 36px) !important; border: 0 !important; border-radius: var(--mx-radius-lg) !important;
	background: var(--mx-tone) !important; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px 40px; align-items: start;
}
body.mx .mx-suggest h4 { font-size: var(--mx-t-h3) !important; font-weight: 800 !important; margin: 0 !important; letter-spacing: -.015em; text-align: right !important; }
body.mx .mx-suggest > p { margin: 0; color: var(--mx-ink-2); grid-column: 1; }
body.mx .mx-suggest form { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 6px; }
body.mx .mx-suggest label { font-weight: 600 !important; font-size: .9375rem; margin-top: 6px; }
body.mx .mx-suggest textarea, body.mx .mx-suggest input[type="text"] {
	width: 100% !important; margin: 0 !important; font: inherit; color: var(--mx-ink); background: var(--mx-surface);
	border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); padding: 12px 14px; min-height: 48px;
}
body.mx .mx-suggest input[name="website"] { position: absolute !important; left: auto !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%) !important; }
body.mx .mx-suggest textarea:focus, body.mx .mx-suggest input[type="text"]:focus { outline: none; border-color: var(--mx-ink); }
body.mx .mx-suggest button {
	justify-self: start; margin-top: 8px; min-height: 46px; padding: 0 22px !important; border-radius: var(--mx-radius) !important;
	background: var(--mx-ink) !important; color: var(--mx-surface) !important; font-weight: 700; transition: transform var(--mx-t-press) var(--mx-ease-out);
}
body.mx .mx-suggest button:active { transform: scale(.97); }
body.mx .mx-suggest-msg { font-weight: 600; }
@media (max-width: 800px) {
	body.mx .mx-suggest { grid-template-columns: 1fr; }
	body.mx .mx-suggest form { grid-column: 1; grid-row: auto; }
}

.mx-cc-wrap { max-width: 72ch; margin-top: 18px; }
body.mx .mx-cc-intro { font-size: 1.0625rem !important; line-height: 1.75 !important; color: var(--mx-ink-2); margin: 0 !important; }
body.mx .mx-cc-intro a { color: var(--mx-ink); font-weight: 700; text-decoration-color: var(--mx-brand); text-underline-offset: .25em; }
.mx-cc-after { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: clamp(40px, 5vw, 64px); }
body.mx .mx-cc-info { margin: 0 !important; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px 48px; align-items: start; }
body.mx .mx-cc-info h2 { font-size: var(--mx-t-h3) !important; font-weight: 800 !important; margin: 0 0 10px !important; }
body.mx .mx-cc-info ul.mx-get { list-style: none !important; padding: 0 !important; margin: 0 0 24px !important; display: grid; gap: 6px; }
body.mx .mx-cc-info ul.mx-get a { font-weight: 700; text-decoration: none; }
body.mx .mx-cc-info ul.mx-get a:hover { text-decoration: underline; text-decoration-color: var(--mx-brand); }
body.mx .mx-cc-info .mx-faq { grid-column: 2; grid-row: 1 / span 4; display: grid; gap: 8px; margin: 0; }
body.mx .mx-cc-info h2:nth-of-type(2), body.mx .mx-cc-info h2:last-of-type { grid-column: 2; }
body.mx .mx-faq details { border: 0 !important; border-radius: var(--mx-radius-lg) !important; padding: 0 !important; margin: 0 !important; background: var(--mx-paper) !important; }
body.mx .mx-faq details summary { padding: 18px 22px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
body.mx .mx-faq details summary::-webkit-details-marker { display: none; }
body.mx .mx-faq details summary::after { content: ""; width: 10px; height: 10px; flex: none; margin-top: 6px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--mx-t-ui) var(--mx-ease-out); }
body.mx .mx-faq details[open] summary::after { transform: rotate(-135deg); }
body.mx .mx-faq details p { margin: 0 !important; padding: 0 22px 20px; color: var(--mx-ink-2); line-height: 1.7 !important; }
@media (max-width: 800px) { body.mx .mx-cc-info { grid-template-columns: 1fr; } body.mx .mx-cc-info .mx-faq, body.mx .mx-cc-info h2 { grid-column: 1 !important; grid-row: auto !important; } }

/* ---------- course covers ---------- */
.mx-cover { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: var(--mx-radius-lg); background: var(--mx-blue); color: var(--mx-blue-ink); container-type: inline-size; }
.mx-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mx-cover-text { position: absolute; inset-block: 0; inset-inline-start: 0; width: 46%; padding: 7cqw 6cqw; display: flex; flex-direction: column; gap: 1.6cqw; justify-content: flex-end; }
.mx-cover-tag { align-self: flex-start; font-size: max(11px, 2.3cqw); font-weight: 800; color: var(--mx-on-brand); background: var(--mx-brand); padding: .25em .6em; border-radius: 3px; }
.mx-cover-name { font-size: max(16px, 5.4cqw); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.mx-cover-inst { font-size: max(12px, 2.6cqw); color: var(--mx-blue-ink-2); font-weight: 600; }

.mx-row-thumb { width: 96px; height: 54px; border-radius: var(--mx-radius); object-fit: cover; background: var(--mx-blue); transition: transform var(--mx-t-ui) var(--mx-ease-out); }
@media (hover: hover) and (pointer: fine) { .mx-row > a:hover .mx-row-thumb { transform: scale(1.06) rotate(-1deg); } }
@media (max-width: 640px) {
	.mx-row > a { grid-template-columns: 72px minmax(0, 1fr) auto; }
	.mx-row-thumb { width: 72px; height: 40.5px; grid-row: 1 / 3; }
	.mx-row-lessons { grid-column: 2; }
	.mx-row-price { grid-column: 3; }
}
.mx-player-poster img.mx-player-cover { opacity: 1; }
.mx-bundle-cover { margin-top: -8px; }

/* ---------- institutions as a north-to-south line map ---------- */
.mx-linemap { margin-top: clamp(40px, 5vw, 64px); background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 36px) clamp(26px, 3vw, 38px); }
.mx-lm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.5vw, 30px); }
.mx-lm-title { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 900; letter-spacing: -.02em; }
.mx-lm-sub { margin: 0; color: var(--mx-ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.mx-lm {
	--row: 46px; /* height of the name row above the line */
	list-style: none; margin: 0; padding: 0; position: relative;
	display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}
/* the track, and the stretch already travelled (set from JS on hover) */
.mx-lm::before, .mx-lm::after {
	content: ""; position: absolute; top: calc(var(--row) + 18px); height: 6px; margin-top: -3px; border-radius: 3px;
	inset-inline: calc(50% / var(--n));
	transform-origin: right;
}
.mx-lm::before { background: var(--mx-tone-2); }
.mx-lm::after { background: var(--mx-brand); transform: scaleX(var(--p, 0)); transition: transform 520ms var(--mx-ease-in-out); }
.mx-lm li { position: relative; display: flex; justify-content: center; min-width: 0; }
.mx-lm a {
	display: grid; grid-template-rows: var(--row) 36px auto auto; justify-items: center; align-items: center; gap: 2px;
	text-decoration: none; color: var(--mx-ink); text-align: center; padding-inline: 4px; width: 100%;
}
.mx-lm-name { align-self: end; padding-bottom: 6px; font-weight: 800; font-size: clamp(.9375rem, .85rem + .4vw, 1.1875rem); line-height: 1.15; text-wrap: balance; transition: color var(--mx-t-hover) ease, transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-lm-dot {
	position: relative; z-index: 1; width: var(--s); height: var(--s); border-radius: 50%;
	background: var(--mx-surface); box-shadow: inset 0 0 0 4px var(--mx-ink);
	transition: transform var(--mx-t-ui) var(--mx-ease-out), background-color var(--mx-t-hover) ease, box-shadow var(--mx-t-hover) ease;
}
.mx-lm-dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--mx-brand); opacity: 0; transform: scale(.7); transition: opacity var(--mx-t-ui) ease, transform 420ms var(--mx-ease-out); }
.mx-lm-city { font-size: .8125rem; color: var(--mx-ink-3); margin-top: 6px; }
.mx-lm-n { font-size: .875rem; font-weight: 700; color: var(--mx-ink-2); font-variant-numeric: tabular-nums; }
.mx-lm a:is(:hover, :focus-visible) .mx-lm-dot { background: var(--mx-brand-soft); }
.mx-lm a[aria-current] .mx-lm-dot { background: var(--mx-brand); box-shadow: inset 0 0 0 4px var(--mx-on-brand); }
.mx-lm a:is(:hover, :focus-visible, [aria-current]) .mx-lm-dot::after { opacity: 1; transform: none; }

.mx-lm a:active .mx-lm-dot { transform: scale(.96); }
.mx-lm a:focus-visible { outline: none; }
.mx-lm a:focus-visible .mx-lm-name { text-decoration: underline; text-decoration-color: var(--mx-focus); text-decoration-thickness: 3px; text-underline-offset: .25em; }

/* the line draws from north to south; stations simply fade in, no bounce */
@media (prefers-reduced-motion: no-preference) {
	.js .mx-lm::before { transform: scaleX(0); animation: mx-lm-draw 900ms var(--mx-ease-in-out) forwards 300ms; }
	.js .mx-lm li { opacity: 0; animation: mx-fade 420ms ease forwards; animation-delay: calc(500ms + var(--i) * 45ms); }
}
@keyframes mx-lm-draw { to { transform: scaleX(1); } }
/* choosing one of several: the chosen station fills, the others step back */
.mx-lm.has-choice li { transition: opacity var(--mx-t-ui) ease; }
.mx-lm.has-choice li:not(:has([aria-current])) { opacity: .45; }
.mx-lm.has-choice li:not(:has([aria-current])):hover { opacity: 1; }

/* phones: the line runs down the page */
@media (max-width: 720px) {
	.mx-lm { grid-template-columns: 1fr; --row: 0px; }
	.mx-lm::before, .mx-lm::after { top: 24px; bottom: 24px; height: auto; width: 6px; margin: 0; inset-inline: auto; inset-inline-start: 23px; transform-origin: top; }
	.mx-lm::after { transform: scaleY(var(--p, 0)); }
	.js .mx-lm::before { transform: scaleY(0); animation-name: mx-lm-draw-y; }
	.mx-lm li { justify-content: flex-start; }
	.mx-lm a { grid-template-rows: auto auto; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "dot name n" "dot city n"; justify-items: start; text-align: right; gap: 0 12px; padding: 10px 0; }
	.mx-lm-dot { grid-area: dot; justify-self: center; }
	.mx-lm-name { grid-area: name; padding: 0; align-self: end; }
	.mx-lm-city { grid-area: city; margin: 0; align-self: start; }
	.mx-lm-n { grid-area: n; }
}
@keyframes mx-lm-draw-y { to { transform: scaleY(1); } }

/* =========================================================================
   Home v3.2: secondary colours, best sellers, branded sheet, podcasts
   ========================================================================= */
:root {
	/* Civil-engineering palette (colour review 16.10), each colour has one meaning:
	   concrete greys = ground (--mx-paper/tone/ink) · safety yellow = action (--mx-brand)
	   steel blue = information, podcasts, tension · rebar rust = "under construction" (courses coming)
	   survey red = compression / errors · green = money saved, progress done. */
	--mx-steel: #2A5A85;
	--mx-steel-soft: #E4ECF4;
	--mx-rust: #9A4A1E;
	--mx-rust-soft: #F7E9E0;
	--mx-survey: #C2362B;
	--mx-teal: var(--mx-steel); /* legacy names, kept so old rules follow the palette */
	--mx-teal-soft: var(--mx-steel-soft);
	--mx-green: #237A4B;
	--mx-green-soft: #E2F3E8;
	--mx-sky: var(--mx-steel);
	--mx-sky-soft: var(--mx-steel-soft);
	--mx-amber-soft: #FFF4DB;
}

/* best sellers under the search */
.mx-best { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.mx-best-label { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mx-best-label::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--mx-brand); } /* sales ranking, not a live signal */
.mx-best ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-best a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img text" "img price"; gap: 0 12px; align-items: center; padding: 8px; background: var(--mx-surface); border-radius: var(--mx-radius-lg); text-decoration: none; color: var(--mx-ink); box-shadow: 0 0 0 1px var(--mx-tone); transition: box-shadow var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); overflow: hidden; }
.mx-best a:active { transform: scale(.98); }
.mx-best img { grid-area: img; width: 64px; height: 48px; object-fit: cover; border-radius: var(--mx-radius); }
.mx-best-text { grid-area: text; min-width: 0; display: flex; flex-direction: column; }
.mx-best-name { font-weight: 800; font-size: .9875rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-best-meta { font-size: .8125rem; color: var(--mx-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-best-price { grid-area: price; font-weight: 800; font-size: .9375rem; color: var(--mx-green); }
@media (hover: hover) and (pointer: fine) { .mx-best a:hover { box-shadow: 0 0 0 1.5px var(--mx-ink); } }
@media (max-width: 640px) { .mx-best ul { grid-template-columns: 1fr; } }

/* stations still being built */
.mx-lm-build { margin-top: 4px; font-size: .75rem; font-weight: 700; color: var(--mx-rust); background: var(--mx-rust-soft); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.mx-lm li.is-building .mx-lm-dot { box-shadow: inset 0 0 0 3px var(--mx-rust); background-image: repeating-linear-gradient(45deg, var(--mx-rust-soft) 0 3px, transparent 3px 6px); }
.mx-lm-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--mx-rust); margin-inline-end: 14px; }
.mx-lm-legend i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--mx-rust); background-image: repeating-linear-gradient(45deg, var(--mx-rust-soft) 0 2px, transparent 2px 4px); }
@media (max-width: 720px) { .mx-lm-build { grid-area: city; justify-self: start; margin-top: 22px; } .mx-lm li.is-building a { padding-bottom: 22px; } }

/* branded drawing sheet */
.mx-sheet { padding: 22px 22px 0; overflow: hidden; box-shadow: 0 0 0 1px var(--mx-tone), 0 40px 70px -40px rgba(13, 39, 66, .35); }
.mx-sheet-corner { position: absolute; width: 18px; height: 18px; border-color: var(--mx-ink); border-style: solid; border-width: 0; pointer-events: none; }
.mx-sheet-corner:nth-of-type(1) { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.mx-sheet-corner:nth-of-type(2) { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.mx-sheet-corner:nth-of-type(3) { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }
.mx-sheet-corner:nth-of-type(4) { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }
.mx-sheet-live { display: inline-flex; align-items: center; gap: 6px; color: var(--mx-green); font-weight: 700; }
.mx-sheet-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mx-green); }
.mx-sheet-live i { position: relative; }
.mx-sheet-live i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: rgba(35, 122, 75, .18); opacity: 0; transform: scale(.4); }
@media (prefers-reduced-motion: no-preference) { .mx-sheet-live i::after { animation: mx-live 2s ease-in-out infinite; } }
@keyframes mx-live { 50% { opacity: 1; transform: none; } }

.mx-calc { margin: 6px 0 14px; padding: 12px 14px; border-radius: var(--mx-radius); background: var(--mx-blue); color: var(--mx-blue-ink); font-size: .9375rem; display: grid; gap: 6px; }
.mx-calc-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.mx-calc-k { color: var(--mx-brand); font-weight: 800; direction: ltr; text-align: left; }
.mx-calc-eq { color: var(--mx-blue-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.mx-calc-r { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-calc b { color: #fff; font-weight: 800; }
.mx-calc sub { font-size: .7em; }

.mx-titleblock { display: grid; grid-template-columns: 1.3fr 1.4fr .7fr .8fr .9fr; margin: 0 -22px; border-top: 2px solid var(--mx-ink); font-size: .8125rem; font-weight: 700; color: var(--mx-ink); }
.mx-titleblock > span { padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-titleblock > span + span { border-inline-start: 1px solid var(--mx-ink); }
.mx-titleblock small { font-size: .6875rem; font-weight: 600; color: var(--mx-ink-3); }
.mx-tb-logo { flex-direction: row !important; align-items: center; gap: 6px !important; font-weight: 900; direction: ltr; justify-content: flex-end !important; }
.mx-tb-logo img { width: 30px; height: 30px; object-fit: cover; object-position: center 10%; }
.mx-tb-logo b { color: var(--mx-brand-strong); }
.mx-sheet-foot { padding: 0 0 14px; }
@media (max-width: 640px) {
	.mx-titleblock { grid-template-columns: 1fr 1fr 1fr; }
	.mx-titleblock > span:nth-child(n+4) { display: none; }
	.mx-calc-row { grid-template-columns: 1fr auto; }
	.mx-calc-eq { display: none; }
}

/* "this is what a course looks like" */
.mx-bp-kicker { margin: 0; color: var(--mx-brand); font-weight: 800; }
.mx-bp-cover { width: 100%; max-width: 520px; box-shadow: 0 0 0 1px var(--mx-blue-line), 0 30px 60px -30px rgba(0, 0, 0, .6); }
.mx-bp-facts { margin: 0; display: flex; gap: 0; border-radius: var(--mx-radius); overflow: hidden; box-shadow: 0 0 0 1px var(--mx-blue-line); }
.mx-bp-facts > div { padding: 10px 18px; display: flex; flex-direction: column-reverse; }
.mx-bp-facts > div + div { box-shadow: inset -1px 0 0 var(--mx-blue-line); }
.mx-bp-facts dt { font-size: .8125rem; color: var(--mx-blue-ink-2); }
.mx-bp-facts dd { margin: 0; font-size: 1.5rem; font-weight: 900; color: #fff; }
.mx-bp-facts dd.mx-bp-teacher { font-size: 1.0625rem; padding-top: 6px; }
.mx-bp-register { background: var(--mx-blue-2); border-radius: var(--mx-radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--mx-blue-line); }
.mx-bp-reghead { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 12px 22px; font-size: .8125rem; font-weight: 700; color: var(--mx-blue-ink-2); background: rgba(0, 0, 0, .18); }
.mx-bp-register .mx-bp-lessons { background: transparent; border-radius: 0; padding: 0; }
.mx-bp-lessons li:first-child { background: rgba(245, 160, 0, .1); }
@media (max-width: 640px) { .mx-bp-reghead { padding: 10px 16px; grid-template-columns: 32px minmax(0, 1fr) auto; } }

/* podcasts */
.mx-pods { padding-block: var(--mx-section); background: var(--mx-teal-soft); }
.mx-pods-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.mx-pods-head > div { display: flex; flex-direction: column; gap: 12px; }
.mx-pods-kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--mx-teal); }
.mx-pods .mx-link { text-decoration-color: var(--mx-teal); }
.mx-pods-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.mx-pod-lead { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--mx-ink); background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: 14px 14px 22px; }
.mx-pod-media { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--mx-radius); overflow: hidden; background: var(--mx-teal); margin-bottom: 8px; }
.mx-pod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--mx-ease-soft); }
.mx-pod-play { position: absolute; inset-inline-start: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background: var(--mx-teal); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-pod-play .mx-i { width: 22px; height: 22px; }
.mx-pod-tag { align-self: flex-start; font-size: .8125rem; font-weight: 800; color: var(--mx-teal); background: var(--mx-teal-soft); padding: 3px 10px; border-radius: 99px; margin-inline: 8px; }
.mx-pod-lead .mx-pod-title { font-size: var(--mx-t-h3); font-weight: 800; line-height: 1.25; padding-inline: 8px; }
.mx-pod-lead .mx-pod-desc { color: var(--mx-ink-2); padding-inline: 8px; }
@media (hover: hover) and (pointer: fine) { .mx-pod-lead:hover .mx-pod-media img { transform: scale(1.04); } .mx-pod-lead:hover .mx-pod-play { transform: scale(1.08); } }
.mx-pod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mx-pod-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 12px; border-radius: var(--mx-radius-lg); text-decoration: none; color: var(--mx-ink); transition: background-color var(--mx-t-hover) ease; }
.mx-pod-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mx-surface); color: var(--mx-teal); box-shadow: 0 0 0 1.5px var(--mx-teal); transition: background-color var(--mx-t-hover) ease, color var(--mx-t-hover) ease; }
.mx-pod-n .mx-i { width: 16px; height: 16px; }
.mx-pod-list .mx-pod-title { display: block; font-weight: 800; font-size: 1.0625rem; }
.mx-pod-list .mx-pod-desc { display: block; color: var(--mx-ink-2); font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) { .mx-pod-list a:hover { background: rgba(255, 255, 255, .6); } .mx-pod-list a:hover .mx-pod-n { background: var(--mx-teal); color: #fff; } }
@media (max-width: 900px) { .mx-pods-grid { grid-template-columns: 1fr; } }

/* colour accents elsewhere */
.mx-bundle-save { background: var(--mx-green-soft); color: var(--mx-green); }
body.mx .mx-buy-save { background: var(--mx-green-soft); color: var(--mx-green); }
.mx-bundle-sum-save dd { color: var(--mx-green); background: var(--mx-green-soft); }

/* ---------- one treatment for every face on the site ----------
   Photos arrive with white, grey, outdoor and studio backgrounds, in colour
   and black-and-white. Grey-scaled and multiplied onto one cool tint they read
   as a set; the real colour comes back under the pointer. */
.mx-face, .mx-team-photo, .mx-people-frame, .mx-teacher-photo, .mx-person-photo { background-color: #D6E0EA !important; }
.mx-face img, .mx-team-photo img, .mx-people-frame img, .mx-teacher-photo img, .mx-person-photo img, img.mx-face-img {
	object-fit: cover; object-position: center 22%;
	transition: filter 450ms ease, transform 700ms var(--mx-ease-soft);
}
img.mx-face-img { background-color: #D6E0EA; }



/* ---------- podcast tiles ---------- */
.mx-pod-media { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--mx-radius); overflow: hidden; margin-bottom: 8px; background: var(--mx-teal); }
.mx-pod-wave { position: absolute; inset: 12% 6% 36%; display: flex; align-items: center; gap: 5px; justify-content: center; opacity: .6; }
.mx-pod-wave i { flex: 1; height: var(--h); max-width: 8px; border-radius: 4px; background: #E7F6F4; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
	.mx-pod-lead:hover .mx-pod-wave i { animation: mx-wave 900ms ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
}
@keyframes mx-wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.mx-pod-who { position: absolute; inset-inline-start: 18px; bottom: 16px; display: flex; align-items: center; gap: 12px; color: #fff; text-align: right; }
.mx-pod-who small { display: block; font-size: .8125rem; color: #CBEAE6; }
.mx-pod-who strong { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.mx-face { display: block; overflow: hidden; border-radius: 50%; flex: none; }
.mx-pod-face { width: 64px; height: 64px; box-shadow: 0 0 0 3px #fff; }
.mx-face img, .mx-face .mx-avatar { width: 100%; height: 100%; display: block; }
.mx-pod-play { inset-inline-start: auto; inset-inline-end: 16px; background: var(--mx-brand); color: var(--mx-on-brand); }
.mx-pod-n { position: relative; width: 56px; height: 56px; background: none; box-shadow: none; display: block; }
.mx-pod-n .mx-face { width: 56px; height: 56px; }
.mx-pod-badge { position: absolute; inset-inline-end: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--mx-teal); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--mx-teal-soft); }
.mx-pod-badge .mx-i { width: 11px; height: 11px; }
.mx-pod-list a { grid-template-columns: 56px minmax(0, 1fr); }
.mx-pod-guest { display: block; font-size: .875rem; font-weight: 700; color: var(--mx-teal); }
@media (hover: hover) and (pointer: fine) { .mx-pod-list a:hover .mx-pod-n { background: none; } }

/* institution with few courses: we are building more */
.mx-building { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 24px; padding: 20px 22px; border-radius: var(--mx-radius-lg); background: var(--mx-teal-soft); color: var(--mx-ink); }
.mx-building-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--mx-surface); color: var(--mx-rust); }
.mx-building strong { display: block; font-size: 1.125rem; font-weight: 800; }
.mx-building p { margin: 4px 0 12px; color: var(--mx-ink-2); max-width: 62ch; }
.mx-building .mx-btn { min-height: 42px; }

/* processed portraits: head near the top of the frame */
.mx-team-photo img, .mx-people-frame img, .mx-teacher-photo img, .mx-person-photo img, img.mx-face-img, .mx-face img { object-position: center 18% !important; }
.mx-team-photo, .mx-people-frame, .mx-teacher-photo, .mx-person-photo { background-color: #DCE5EE !important; }

/* ---------- sign-in / sign-up / reset / code pages ---------- */
.mx-auth { padding-block: clamp(28px, 4vw, 56px) var(--mx-section); }
.mx-auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.mx-auth-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.mx-auth-title { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; margin: 0; }
.mx-auth-lead { margin: 0 0 10px; font-size: var(--mx-t-lead); color: var(--mx-ink-2); }
.mx-auth-card { background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: clamp(20px, 3vw, 32px); box-shadow: 0 0 0 1px var(--mx-tone), 0 30px 60px -40px rgba(13, 39, 66, .35); }
.mx-auth-switch { margin: 6px 0 0; color: var(--mx-ink-2); }
.mx-auth-switch a { font-weight: 800; color: var(--mx-ink); text-decoration-color: var(--mx-brand); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.mx-auth-side {
	position: sticky; top: calc(var(--mx-header-h) + 24px);
	border-radius: var(--mx-radius-lg); padding: clamp(24px, 3vw, 40px); color: var(--mx-blue-ink);
	background-color: var(--mx-blue);
	background-image: linear-gradient(var(--mx-blue-line) 1px, transparent 1px), linear-gradient(90deg, var(--mx-blue-line) 1px, transparent 1px);
	background-size: 28px 28px;
	display: flex; flex-direction: column; gap: 16px;
}
.mx-auth-art { width: 100%; max-width: 380px; height: auto; }
.mx-auth-side-h { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 900; letter-spacing: -.02em; color: #fff; }
.mx-auth-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mx-auth-list li { position: relative; padding-inline-start: 28px; color: var(--mx-blue-ink); line-height: 1.55; }
.mx-auth-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: 14px; height: 8px; border-inline-start: 2.5px solid var(--mx-brand); border-bottom: 2.5px solid var(--mx-brand); transform: rotate(-45deg); }
.mx-auth-list b { color: var(--mx-brand); font-weight: 900; }
.mx-link-light { color: #fff !important; text-decoration-color: var(--mx-brand); }

/* Ultimate Member forms, restyled in place */
.mx-auth-card .um { max-width: none !important; margin: 0 !important; opacity: 1 !important; }
.mx-auth-card .um-form { font-family: var(--mx-font) !important; }
.mx-auth-card .um-field { padding-top: 14px !important; }
.mx-auth-card .um-field-label label, .mx-auth-card .um-field-label { font-size: .9375rem !important; font-weight: 700 !important; color: var(--mx-ink) !important; margin-bottom: 6px !important; }
.mx-auth-card .um-field-label .um-field-label-icon { display: none !important; }
.mx-auth-card input[type="text"], .mx-auth-card input[type="email"], .mx-auth-card input[type="tel"], .mx-auth-card input[type="password"], .mx-auth-card input[type="number"], .mx-auth-card select, .mx-auth-card textarea,
.mx-auth-card .um-form input[type="text"], .mx-auth-card .um-form input[type="password"], .mx-auth-card .um-form select {
	width: 100% !important; min-height: 50px !important; padding: 0 14px !important; font: inherit !important; font-size: 1rem !important;
	color: var(--mx-ink) !important; background: var(--mx-paper) !important; border: 1.5px solid var(--mx-line) !important; border-radius: var(--mx-radius) !important; box-shadow: none !important;
	transition: border-color var(--mx-t-hover) ease, background-color var(--mx-t-hover) ease;
}
.mx-auth-card input:focus, .mx-auth-card select:focus, .mx-auth-card textarea:focus { border-color: var(--mx-ink) !important; background: var(--mx-surface) !important; outline: none !important; }
.mx-auth-card .select2-container .select2-selection { min-height: 50px !important; border: 1.5px solid var(--mx-line) !important; border-radius: var(--mx-radius) !important; background: var(--mx-paper) !important; }
.mx-auth-card .select2-container .select2-selection__rendered { line-height: 48px !important; }
.mx-auth-card .select2-container .select2-selection__placeholder { color: var(--mx-ink-3) !important; }
.mx-auth-card .um-field-checkbox-option, .mx-auth-card .um-field-radio-option { color: var(--mx-ink-2) !important; font-size: .9375rem !important; }
.mx-auth-card .um-button, .mx-auth-card input[type="submit"].um-button, .mx-auth-card .um-form input[type="submit"] {
	width: 100% !important; min-height: 52px !important; border: 0 !important; border-radius: var(--mx-radius) !important;
	background: var(--mx-brand) !important; color: var(--mx-on-brand) !important; font: 800 1.0625rem var(--mx-font) !important; box-shadow: none !important;
	transition: transform var(--mx-t-press) var(--mx-ease-out), background-color var(--mx-t-hover) ease !important;
}
.mx-auth-card .um-button:hover { background: var(--mx-brand-strong) !important; }
.mx-auth-card .um-button:active { transform: scale(.98); }
.mx-auth-card .um-button.um-alt, .mx-auth-card .um-left.um-half + .um-right a { background: transparent !important; color: var(--mx-ink) !important; box-shadow: inset 0 0 0 1.5px var(--mx-ink) !important; }
.mx-auth-card .um-col-alt { margin-top: 18px !important; }
.mx-auth-card .um-col-alt-b a, .mx-auth-card .um-link-alt { color: var(--mx-ink-2) !important; font-weight: 700 !important; text-decoration: underline !important; }
.mx-auth-card .um-field-error { background: #FDECEA !important; color: #7A1A12 !important; border-radius: var(--mx-radius) !important; font-size: .875rem !important; }
.mx-auth-card .um-field-error .um-field-arrow { color: #FDECEA !important; }
.mx-auth-card .um-notice { border-radius: var(--mx-radius) !important; }
.mx-auth-card .um-field-area-password { position: relative; }
@media (max-width: 900px) {
	.mx-auth-grid { grid-template-columns: minmax(0, 1fr); }
	.mx-auth-side { position: static; }
	.mx-auth-form { max-width: none; }
}

/* anti-spam honeypot fields are pushed far left; in RTL that scrolls the page sideways */
body.mx .maspik-field, body.mx input[name="full-name-maspik-hp"] { position: absolute !important; left: auto !important; right: 0 !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; }

/* lecturers on home: the photo sits with its name; the rest open in place */
.mx-people-list a { grid-template-columns: 64px minmax(0, 1fr) !important; grid-template-areas: "img name" "img what" !important; gap: 2px 18px !important; }
.mx-people-thumb { display: block !important; grid-area: img; width: 64px !important; height: 64px !important; border-radius: 12px !important; object-fit: cover; object-position: center center !important; background: #DCE5EE; overflow: hidden; }
.mx-people-thumb.mx-avatar { border-radius: 12px !important; }
.mx-people-list li[hidden] { display: none; }
.mx-people-list li.is-entering { animation: mx-row-in 420ms var(--mx-ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.mx-people-more { margin-top: 24px; }
.mx-people-more .mx-i { transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-people-more [aria-expanded="true"] .mx-i { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .mx-people-list a:hover .mx-people-thumb { transform: scale(1.06); } .mx-people-thumb { transition: transform var(--mx-t-ui) var(--mx-ease-out); } }
body.mx img.mx-people-thumb { object-position: center center !important; }

.mx-hero-sample { align-self: flex-start; margin-top: -8px; }
.mx-hero-sample .mx-i { width: 18px; height: 18px; }
.mx-people-name { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem) !important; }

/* phones: best sellers as a swipeable row so the institution choice stays near the top */
@media (max-width: 640px) {
	.mx-best ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(-1 * var(--mx-gutter)); padding-inline: var(--mx-gutter); scrollbar-width: none; }
	.mx-best ul::-webkit-scrollbar { display: none; }
	.mx-best li { flex: 0 0 78%; scroll-snap-align: start; }
}

/* =========================================================================
   Content pages: about, podcasts, episode, loyalty/referral, jobs, prose, 404
   ========================================================================= */
.mx-page-head { padding-bottom: clamp(24px, 3vw, 40px); }
.mx-page-kicker { margin: 18px 0 -6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--mx-teal); }
.mx-page-kicker .mx-i { width: 18px; height: 18px; }

/* steps (referral, jobs) */
.mx-loyal { padding-block: clamp(24px, 3vw, 40px) var(--mx-section); }
.mx-loyal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.mx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: none; }
.mx-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px 0; box-shadow: inset 0 -1px 0 var(--mx-tone-2); }
.mx-steps li:last-child { box-shadow: none; }
.mx-step-n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 900; color: var(--mx-on-brand); background: var(--mx-brand); font-variant-numeric: tabular-nums; }
.mx-steps h2 { margin: 6px 0 4px; font-size: var(--mx-t-h3); font-weight: 800; }
.mx-steps p { margin: 0; color: var(--mx-ink-2); max-width: 56ch; }
.mx-rules { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mx-rules > div { background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: 22px; box-shadow: 0 0 0 1px var(--mx-tone); }
.mx-rules dt { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 900; letter-spacing: -.02em; }
.mx-rules dd { margin: 6px 0 0; color: var(--mx-ink-2); }
.mx-loyal-note { margin-top: 18px; color: var(--mx-ink-2); }
.mx-loyal-card { position: sticky; top: calc(var(--mx-header-h) + 24px); background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 0 0 1px var(--mx-tone), 0 30px 60px -40px rgba(13, 39, 66, .35); }
.mx-loyal-card p { margin: 0; color: var(--mx-ink-2); }
.mx-loyal-k { font-size: .875rem; font-weight: 700; color: var(--mx-ink-3) !important; margin: 0; }
.mx-loyal-big { font-size: 1.5rem; font-weight: 900; color: var(--mx-ink) !important; line-height: 1.2; }
.mx-loyal-bal b { color: var(--mx-green); }
.mx-code { display: flex; gap: 8px; align-items: stretch; }
.mx-code-val { flex: 1; display: grid; place-items: center; font-size: 1.5rem; font-weight: 900; letter-spacing: .12em; direction: ltr; background: var(--mx-paper); border: 2px dashed var(--mx-line); border-radius: var(--mx-radius); padding: 8px; }
.mx-code-status { min-height: 1.4em; font-weight: 700; color: var(--mx-green) !important; }
@media (max-width: 900px) { .mx-loyal-grid { grid-template-columns: minmax(0, 1fr); } .mx-loyal-card { position: static; order: -1; } .mx-rules { grid-template-columns: 1fr; } }

/* about */
.mx-about-page { padding-bottom: clamp(48px, 6vw, 88px); }
.mx-about-facts { margin-top: 8px; }
.mx-about-rows { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 0; }
.mx-about-row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 16px 48px; padding-block: 28px; box-shadow: inset 0 -1px 0 var(--mx-tone-2); }
.mx-about-row p { margin: 0 0 12px; max-width: 64ch; }
.mx-about-list li { color: var(--mx-ink); }
.mx-about-list li::before { border-color: var(--mx-brand-strong); }
.mx-about-people { background: var(--mx-surface); }
.mx-cta-band { background: var(--mx-blue); color: var(--mx-blue-ink); padding-block: clamp(56px, 7vw, 96px); }
.mx-cta-band .mx-h2 { color: #fff; }
.mx-cta-band .mx-section-lead { color: var(--mx-blue-ink-2); margin-top: 10px; }
.mx-cta-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mx-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mx-cta-band .mx-btn-line { color: #fff !important; border-color: rgba(255, 255, 255, .5); }
@media (max-width: 800px) { .mx-about-row { grid-template-columns: 1fr; } }

/* podcasts page + episode */
.mx-pods-page { padding-top: clamp(16px, 2vw, 28px); background: transparent; }
.mx-episode-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 64px); align-items: start; padding-bottom: var(--mx-section); }
.mx-ep-player { margin-bottom: 28px; background: var(--mx-teal); }
.mx-ep-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; padding: 0; margin: 0; aspect-ratio: auto; }
.mx-ep-poster:hover .mx-pod-wave i { animation: mx-wave 900ms ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
.mx-ep-text { font-size: 1.0625rem; }
.mx-ep-side { position: sticky; top: calc(var(--mx-header-h) + 24px); display: grid; gap: 12px; }
.mx-ep-side .mx-pod-list a { padding: 12px 6px; }
@media (max-width: 900px) { .mx-episode-grid { grid-template-columns: minmax(0, 1fr); } .mx-ep-side { position: static; } }

/* prose (policies, reservists, students) */
.mx-prose-page { padding-bottom: var(--mx-section); }
.mx-prose-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(28px, 5vw, 80px); align-items: start; }
.mx-prose-doc { background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: clamp(22px, 4vw, 48px); box-shadow: 0 0 0 1px var(--mx-tone); max-width: none; }
.mx-prose-doc h2 { font-size: var(--mx-t-h3); font-weight: 800; margin: 1.6em 0 .5em; letter-spacing: -.01em; }
.mx-prose-doc h2:first-child { margin-top: 0; }
.mx-prose-doc p, .mx-prose-doc li { max-width: 70ch; line-height: 1.8; }
.mx-prose-doc a { color: var(--mx-ink); font-weight: 700; text-decoration-color: var(--mx-brand); text-underline-offset: .2em; }
.mx-prose-doc img { height: auto; border-radius: var(--mx-radius); }
.mx-prose-note { background: var(--mx-amber-soft); border-radius: var(--mx-radius); padding: 14px 16px; font-weight: 600; }
.mx-prose-side { position: sticky; top: calc(var(--mx-header-h) + 24px); }
.mx-prose-side p { margin: 0 0 12px; }
@media (max-width: 900px) { .mx-prose-grid { grid-template-columns: minmax(0, 1fr); } .mx-prose-side { position: static; } }


/* ---------- reservists ---------- */
.mx-mil { padding-bottom: var(--mx-section); --mx-olive: #4B5D35; --mx-olive-soft: #E9EEDF; }
.mx-mil .mx-page-kicker { color: var(--mx-olive); }
.mx-mil-note { margin: 0 0 clamp(24px, 3vw, 40px); }
.mx-mil-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.mx-mil-calc { position: sticky; top: calc(var(--mx-header-h) + 24px); background: var(--mx-blue); color: var(--mx-blue-ink); border-radius: var(--mx-radius-lg); padding: clamp(22px, 3vw, 34px);
	background-image: linear-gradient(var(--mx-blue-line) 1px, transparent 1px), linear-gradient(90deg, var(--mx-blue-line) 1px, transparent 1px); background-size: 28px 28px; }
.mx-mil-calc .mx-h3 { color: #fff; margin-bottom: 14px; }
.mx-mil-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mx-mil-opt { position: relative; cursor: pointer; }
.mx-mil-opt input { position: absolute; opacity: 0; inset: 0; }
.mx-mil-opt span { display: grid; place-items: center; min-height: 54px; border-radius: var(--mx-radius); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px var(--mx-blue-line); font-weight: 800; transition: background-color var(--mx-t-hover) ease, box-shadow var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-mil-opt input:checked + span { background: var(--mx-brand); color: var(--mx-on-brand); box-shadow: none; }
.mx-mil-opt input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.mx-mil-opt:active span { transform: scale(.97); }
.mx-mil-out { margin-top: 22px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--mx-blue-line); }
.mx-mil-k { margin: 0; color: var(--mx-blue-ink-2); font-weight: 700; font-size: .9375rem; }
.mx-mil-num { margin: 2px 0 6px; font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem); font-weight: 900; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mx-mil-sub { margin: 0; color: var(--mx-blue-ink); }
.mx-mil-sub b { color: var(--mx-brand); }
.mx-mil-fine { margin: 14px 0 0; font-size: .875rem; color: var(--mx-blue-ink-2); }
.mx-mil-steps h3 { margin: 6px 0 4px; font-size: var(--mx-t-h3); font-weight: 800; }
.mx-mil-steps .mx-step-n { background: var(--mx-olive); color: #fff; }
.mx-mil-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.mx-mil-table { margin-top: clamp(40px, 5vw, 64px); width: 100%; max-width: 640px; border-collapse: collapse; background: var(--mx-surface); border-radius: var(--mx-radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--mx-tone); }
.mx-mil-table caption { text-align: right; font-weight: 800; padding-bottom: 10px; }
.mx-mil-table th, .mx-mil-table td { text-align: right; padding: 14px 18px; border-bottom: 1px solid var(--mx-tone); }
.mx-mil-table th { background: var(--mx-olive-soft); font-weight: 800; }
@media (max-width: 900px) { .mx-mil-grid { grid-template-columns: minmax(0, 1fr); } .mx-mil-calc { position: static; } }

/* ---------- contact pair: WhatsApp + mail, same outline language as chips ---------- */
.mx-reach { display: inline-flex; vertical-align: middle; margin-inline: 4px; border-radius: 999px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line); overflow: hidden; }
.mx-reach a { display: grid; place-items: center; width: 44px; height: 38px; color: var(--mx-ink-2) !important; text-decoration: none !important; transition: background var(--mx-t-hover) ease, color var(--mx-t-hover) ease; }
.mx-reach a + a { box-shadow: inset -1px 0 0 var(--mx-line); }
.mx-reach .mx-i { width: 20px; height: 20px; transition: transform var(--mx-t-press) var(--mx-ease-out); }
.mx-reach a:active .mx-i { transform: scale(.9); }
.mx-reach a:focus-visible { outline: 3px solid var(--mx-focus); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
	.mx-reach .mx-reach-wa:hover { background: var(--mx-green-soft); color: var(--mx-green) !important; }
	.mx-reach .mx-reach-mail:hover { background: var(--mx-brand-soft); color: #6B4500 !important; }
}
.mx-loyal-card .mx-reach a { width: 56px; height: 48px; }
.mx-footer .mx-reach { background: transparent; box-shadow: inset 0 0 0 1px var(--mx-blue-line); margin: 0; }
.mx-footer .mx-reach a { color: var(--mx-blue-ink) !important; }
.mx-footer .mx-reach a + a { box-shadow: inset -1px 0 0 var(--mx-blue-line); }
.mx-footer .mx-reach .mx-i { color: currentColor; }
@media (hover: hover) and (pointer: fine) { .mx-footer .mx-reach a:hover { background: rgba(255, 255, 255, .08); color: #fff !important; } }
.mx-footer-reach { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mx-footer-contact a.mx-footer-mail { color: var(--mx-blue-ink-2); font-weight: 500; }
.mx-wa { background: var(--mx-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 24px -8px rgba(16, 24, 31, .45); transition: transform var(--mx-t-press) var(--mx-ease-out), background var(--mx-t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .mx-wa:hover { background: var(--mx-green); } }

/* ---------- home: lecturers strip ---------- */
.mx-strip-sec { padding-block: var(--mx-section); background: var(--mx-surface); overflow: hidden; }
.mx-strip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.mx-strip-head .mx-section-lead { margin: 12px 0 0; max-width: 46ch; }
.mx-strip-ctrl { display: flex; align-items: center; gap: 8px; }
.mx-strip-ctrl .mx-link { margin-inline-start: 12px; }
.mx-strip-btn { width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--mx-line); transition: opacity var(--mx-t-hover) ease, background var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-strip-btn:not(.mx-strip-next) .mx-i { transform: scaleX(-1); }
.mx-strip-btn:disabled { opacity: .35; cursor: default; }
.mx-strip { --pad: max(var(--mx-gutter), calc((100% - var(--mx-max)) / 2 + var(--mx-gutter))); }
.mx-strip-track { list-style: none; margin: 0; display: flex; gap: clamp(12px, 1.6vw, 20px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 4px var(--pad) 8px; scrollbar-width: none; }
.mx-strip-track::-webkit-scrollbar { display: none; }
.mx-strip-track.is-drag { scroll-snap-type: none; cursor: grabbing; }
.mx-strip-track.is-drag a { pointer-events: none; }
.mx-strip-item { flex: 0 0 clamp(200px, 21vw, 264px); scroll-snap-align: start; }
.mx-strip-item a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--mx-ink); -webkit-user-drag: none; }
.mx-strip-photo { position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: 12px; border-radius: var(--mx-radius-lg); overflow: hidden; background-color: var(--mx-tone); background-image: linear-gradient(var(--mx-tone-2) 1px, transparent 1px), linear-gradient(90deg, var(--mx-tone-2) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; transition: background-color var(--mx-t-ui) ease; }
.mx-strip-photo::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--mx-brand); transform: scaleX(0); transform-origin: right; transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-strip-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 500ms var(--mx-ease-soft); }
.mx-strip-photo .mx-avatar { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; font-size: 3rem; }
.mx-strip-name { font-size: 1.1875rem; font-weight: 800; line-height: 1.25; }
.mx-strip-role { color: var(--mx-ink-2); font-size: var(--mx-t-small); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-strip-courses { color: var(--mx-ink-3); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-strip-bar { position: relative; height: 28px; margin: 12px var(--pad) 0; cursor: pointer; touch-action: none; user-select: none; }
.mx-strip-bar::before { content: ""; position: absolute; inset-inline: 0; top: 13px; height: 2px; border-radius: 2px; background: var(--mx-tone-2); }
.mx-strip-bar i { position: absolute; top: 10px; height: 8px; border-radius: 4px; background: var(--mx-ink); right: calc(var(--o, 0) * 100%); width: calc(var(--w, .2) * 100%); cursor: grab; transition: height var(--mx-t-hover) ease, top var(--mx-t-hover) ease; }
.mx-strip-bar.is-drag i { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .mx-strip-bar:hover i { top: 8px; height: 12px; border-radius: 6px; } }
.mx-strip-item a:focus-visible { outline: none; }
.mx-strip-item a:focus-visible .mx-strip-photo { box-shadow: 0 0 0 3px var(--mx-focus); }
@media (hover: hover) and (pointer: fine) {
	.mx-strip-track { cursor: grab; }
	.mx-strip-item a:hover .mx-strip-photo { background-color: var(--mx-brand-soft); }
	.mx-strip-item a:hover .mx-strip-photo::after { transform: scaleX(1); }
	.mx-strip-item a:hover .mx-strip-photo img { transform: scale(1.035); }
	.mx-strip-btn:not(:disabled):hover { background: var(--mx-tone); }
}
.mx-strip-btn:not(:disabled):active { transform: scale(.94); }
@media (max-width: 640px) {
	.mx-strip-btn { display: none; }
	.mx-strip-ctrl .mx-link { margin: 0; }
	.mx-strip-item { flex-basis: 64vw; }
}

/* ---------- home: refer a friend ---------- */
.mx-refer { padding-block: clamp(64px, 7vw, 120px); background: var(--mx-brand-soft); }
.mx-refer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.mx-refer-text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.mx-refer-text .mx-section-lead { margin: 0; color: var(--mx-ink-2); max-width: 44ch; }
.mx-refer-kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #6B4500; }
.mx-refer-kicker .mx-i { width: 22px; height: 22px; }
.mx-refer-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; }
.mx-refer-steps::before { content: ""; position: absolute; inset-inline-start: 27px; top: 28px; bottom: 28px; width: 2px; background: repeating-linear-gradient(to bottom, var(--mx-brand-strong) 0 6px, transparent 6px 12px); }
.mx-refer-steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; font-size: 1.0625rem; color: var(--mx-ink-2); }
.mx-refer-steps b { color: var(--mx-ink); display: block; font-size: 1.1875rem; }
.mx-refer-steps .mx-step-n { box-shadow: 0 0 0 6px var(--mx-brand-soft); }
@media (max-width: 860px) { .mx-refer-grid { grid-template-columns: 1fr; } }

/* ---------- home: course showcase ---------- */
.mx-showcase .mx-sc-head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 720px; margin-bottom: clamp(32px, 5vw, 64px); }
.mx-sc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.mx-sc-player { position: relative; display: block; border-radius: var(--mx-radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--mx-blue-line), 0 40px 80px -40px rgba(0, 0, 0, .7); color: #fff; text-decoration: none; }
.mx-sc-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 600ms var(--mx-ease-soft); }
.mx-sc-play { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 22px 22px; background: var(--mx-blue-2); }
.mx-sc-play strong { display: block; font-size: 1.125rem; }
.mx-sc-play small { display: block; color: var(--mx-blue-ink-2); font-size: var(--mx-t-small); }
.mx-sc-play .mx-player-dot { width: 64px; height: 64px; border-radius: 50%; background: var(--mx-brand); color: var(--mx-on-brand); display: grid; place-items: center; flex: none; transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-sc-play .mx-player-dot .mx-i { width: 40%; height: 40%; }
.mx-sc-bar { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .15); }
.mx-sc-bar i { display: block; height: 100%; width: 18%; background: var(--mx-brand); }
.mx-sc-player:active .mx-player-dot { transform: scale(.94); }
.mx-sc-player:focus-visible { outline: 3px solid var(--mx-brand); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .mx-sc-player:hover .mx-sc-cover { transform: scale(1.025); } .mx-sc-player:hover .mx-player-dot { transform: scale(1.06); } }
.mx-sc-side { display: flex; flex-direction: column; gap: 20px; }
.mx-sc-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--mx-radius); box-shadow: 0 0 0 1px var(--mx-blue-line); }
.mx-sc-facts > div { padding: 12px 18px; display: flex; flex-direction: column-reverse; }
.mx-sc-facts > div + div { box-shadow: inset -1px 0 0 var(--mx-blue-line); }
.mx-sc-facts dt { font-size: .8125rem; color: var(--mx-blue-ink-2); }
.mx-sc-facts dd { margin: 0; font-size: 1.5rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.mx-sc-lessons { list-style: none; margin: 0; padding: 0; position: relative; }
.mx-sc-lessons::before { content: ""; position: absolute; inset-inline-start: 7px; top: 22px; bottom: 22px; width: 2px; background: var(--mx-blue-line); }
.mx-sc-lessons li { position: relative; display: grid; grid-template-columns: 16px 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; font-size: 1.0625rem; }
.mx-sc-node { width: 16px; height: 16px; border-radius: 50%; background: var(--mx-blue); box-shadow: inset 0 0 0 2px var(--mx-blue-ink-2); }
.mx-sc-lessons li.is-open .mx-sc-node { background: var(--mx-brand); box-shadow: 0 0 0 5px rgba(245, 160, 0, .22); }
.mx-sc-n { font-weight: 900; color: var(--mx-brand); font-variant-numeric: tabular-nums; }
.mx-sc-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-sc-lessons li:not(.is-open) .mx-sc-name { opacity: .82; }
.mx-sc-lessons .mx-i { width: 18px; height: 18px; color: var(--mx-blue-ink-2); }
.mx-sc-more { margin: 0; color: var(--mx-blue-ink-2); }
.mx-sc-more a { color: var(--mx-blue-ink); font-weight: 700; text-decoration-color: var(--mx-brand); text-underline-offset: .25em; }
@media (prefers-reduced-motion: no-preference) {
	.js .mx-sc-bar i { transform-origin: right; transform: scaleX(0); transition: transform 1400ms var(--mx-ease-soft) 400ms; }
	.js .mx-sc-player.is-in .mx-sc-bar i { transform: scaleX(1); }
}
@media (max-width: 900px) { .mx-sc-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .mx-sc-facts > div { padding: 10px 12px; } .mx-sc-facts dd { font-size: 1.25rem; } .mx-sc-play { padding: 14px 16px 18px; } .mx-sc-play .mx-player-dot { width: 52px; height: 52px; } }
.mx-mil-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx-mil-opt span { padding: 8px 6px; text-align: center; line-height: 1.25; }
.mx-mil-meter { display: block; height: 6px; margin: 10px 0 14px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.mx-mil-meter i { display: block; height: 100%; width: 100%; background: var(--mx-brand); transform-origin: right; transform: scaleX(var(--v, 1)); transition: transform 520ms var(--mx-ease-out); }
.mx-mil-blocks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; }
.mx-mil-blocks li { aspect-ratio: 3 / 4; border-radius: 2px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--mx-blue-line); transition: background 240ms ease, box-shadow 240ms ease, transform 320ms var(--mx-ease-out); transition-delay: calc(var(--b) * 18ms); }
.mx-mil-blocks li.is-on { background: var(--mx-brand); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
	.js .mx-mil-calc .mx-mil-blocks li { transform: scaleY(.2); }
	.js .mx-mil-calc .mx-mil-blocks li { animation: mx-block-up 500ms var(--mx-ease-out) forwards; animation-delay: calc(var(--b) * 35ms + 700ms); }
	.js .mx-mil-calc .mx-mil-meter i { animation: mx-meter-in 900ms var(--mx-ease-out) 500ms both; }
}
@keyframes mx-block-up { to { transform: none; } }
@keyframes mx-meter-in { from { transform: scaleX(0); } }

/* ---------- home: institutions on a north-to-south map ---------- */
.mx-geo { margin-top: clamp(40px, 5vw, 64px); background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: center; }
.mx-geo-title { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.mx-geo-sub { margin: 8px 0 clamp(16px, 2vw, 24px); color: var(--mx-ink-2); font-weight: 500; }
.mx-geo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); gap: 0 28px; }
.mx-geo-list a { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 6px; text-decoration: none; color: var(--mx-ink); box-shadow: inset 0 -1px 0 var(--mx-tone); border-radius: var(--mx-radius); transition: background var(--mx-t-hover) ease; }
.mx-geo-pin { width: 12px; height: 12px; border-radius: 50%; background: var(--mx-brand); box-shadow: 0 0 0 3px var(--mx-brand-soft); transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-geo-list li.is-building .mx-geo-pin { background: var(--mx-surface); box-shadow: inset 0 0 0 2px var(--mx-rust); }
.mx-geo-name { font-weight: 800; font-size: 1.0625rem; min-width: 0; }
.mx-geo-name small { display: block; font-weight: 500; font-size: .8125rem; color: var(--mx-ink-3); }
.mx-geo-n { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--mx-ink-2); font-size: .9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mx-geo-build { font-size: .75rem; color: var(--mx-rust); background: var(--mx-rust-soft); padding: 2px 8px; border-radius: 99px; }
.mx-geo-list a.is-hot, .mx-geo-list a:focus-visible { background: var(--mx-brand-soft); outline: none; }
.mx-geo-list a.is-hot .mx-geo-pin, .mx-geo-list a:focus-visible .mx-geo-pin { transform: scale(1.35); }
.mx-geo-list a:active { background: var(--mx-tone); }
.mx-geo-map { margin: 0; width: clamp(120px, 15vw, 190px); }
.mx-geo-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.mx-geo-land { fill: var(--mx-paper); stroke: var(--mx-ink-3); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mx-geo-compass path { fill: var(--mx-ink-3); }
.mx-geo-compass text { font: 700 10px var(--mx-font); fill: var(--mx-ink-3); }
.mx-geo-core { fill: var(--mx-brand); stroke: var(--mx-surface); stroke-width: 2; transition: fill var(--mx-t-hover) ease; }
.mx-geo-ring { fill: none; stroke: var(--mx-brand); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mx-geo-dot.is-building .mx-geo-core { fill: var(--mx-surface); stroke: var(--mx-rust); stroke-width: 2; }
.mx-geo-dot.is-building .mx-geo-ring { stroke: var(--mx-rust); }
.mx-geo-dot.is-hot .mx-geo-core { fill: var(--mx-ink); }
.mx-geo-dot.is-hot .mx-geo-ring { opacity: 1; transform: scale(2); transition: transform var(--mx-t-ui) var(--mx-ease-out), opacity var(--mx-t-ui) ease; }
@media (prefers-reduced-motion: no-preference) {
	.js .mx-geo-land { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; animation: mx-geo-draw 1600ms var(--mx-ease-in-out) 300ms forwards, mx-geo-fill 600ms ease 1500ms forwards; }
	.js .mx-geo-core { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: mx-geo-pop 480ms cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(1100ms + var(--i) * 110ms); } /* north to south */
	.js .mx-geo-dot:not(.is-hot) .mx-geo-ring { animation: mx-geo-pulse 3.6s ease-out infinite; animation-delay: calc(2200ms + var(--d) * 4); }
}
@keyframes mx-geo-draw { to { stroke-dashoffset: 0; } }
@keyframes mx-geo-fill { to { fill-opacity: 1; } }
@keyframes mx-geo-pop { to { transform: none; } }
@keyframes mx-geo-pulse { 0% { opacity: .7; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(2.8); } }
@media (max-width: 900px) { .mx-geo-list { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; } }
@media (max-width: 560px) {
	.mx-geo { grid-template-columns: minmax(0, 1fr) 76px; gap: 0 12px; padding: 20px 14px; align-items: start; }
	.mx-geo-text { display: contents; }
	.mx-geo-title, .mx-geo-sub { grid-column: 1 / -1; }
	.mx-geo-list { grid-column: 1; grid-row: 3; }
	.mx-geo-map { grid-column: 2; grid-row: 3; width: 76px; margin-top: 12px; }
	.mx-geo-list a { padding: 10px 2px; gap: 10px; }
	.mx-geo-build { display: none; }
	.mx-geo-compass { display: none; }
}

/* ---------- auth: the beam takes the load ---------- */
.mx-auth-art { overflow: visible; }
.mx-aa-load, .mx-aa-beam, .mx-aa-curve, .mx-aa-react, .mx-aa-sup { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
	.js .mx-aa-beam { stroke-dasharray: 400; stroke-dashoffset: 400; animation: mx-aa-draw 900ms var(--mx-ease-in-out) 200ms forwards, mx-aa-bend 3.2s ease-in-out 1700ms infinite; }
	.js .mx-aa-sup { opacity: 0; animation: mx-fade 400ms ease 700ms forwards; }
	.js .mx-aa-load { opacity: 0; animation: mx-aa-fly 1300ms cubic-bezier(.33, 1, .5, 1) 800ms forwards, mx-aa-bob 3.2s ease-in-out 1700ms infinite; }
	.js .mx-aa-react { opacity: 0; transform: translateY(8px); animation: mx-aa-up 500ms var(--mx-ease-out) 1500ms forwards; }
	.js .mx-aa-curve { clip-path: inset(0 0 0 100%); animation: mx-aa-wipe 1100ms var(--mx-ease-in-out) 1600ms forwards; }
}
@keyframes mx-aa-draw { to { stroke-dashoffset: 0; } }
@keyframes mx-aa-drop { to { opacity: 1; transform: none; } }
@keyframes mx-aa-up { to { opacity: 1; transform: none; } }
@keyframes mx-aa-wipe { to { clip-path: inset(0); } }
@keyframes mx-aa-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@keyframes mx-aa-bend { 0%, 100% { d: path("M20 170 Q200 172 380 170"); } 50% { d: path("M20 170 Q200 184 380 170"); } }

/* ---------- registration / checkout pop-ups (Bootstrap 3 modals, v3 skin) ---------- */
.modal-backdrop.in, .modal-backdrop.fade.in { opacity: 1 !important; background: rgba(13, 39, 66, .55) !important; backdrop-filter: blur(3px); }
.mx-modal.modal { position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: auto !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow-y: auto; z-index: 1050; }
.mx-modal .modal-dialog { width: auto; max-width: 520px; margin: max(6vh, 24px) auto; padding: 0 16px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform 320ms var(--mx-ease-out), opacity 220ms ease; }
.mx-modal.in .modal-dialog { transform: none; opacity: 1; }
.mx-modal .modal-content { position: relative; background: var(--mx-surface); border: 0; border-radius: var(--mx-radius-lg); box-shadow: 0 40px 80px -30px rgba(13, 39, 66, .55); overflow: hidden; font-family: var(--mx-font); color: var(--mx-ink); direction: rtl; text-align: right; }
.mx-modal .modal-content::before { content: ""; display: block; height: 6px; background: var(--mx-brand); }
.mx-modal .modal-body { padding: clamp(22px, 4vw, 34px); display: flex; flex-direction: column; gap: 14px; }
.mx-modal-x.close { position: absolute; top: 18px; inset-inline-end: 14px; inset-inline-start: auto; float: none !important; width: 40px; height: 40px; display: grid; place-items: center; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--mx-ink-2) !important; opacity: 1 !important; text-shadow: none !important; cursor: pointer; transition: background var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-modal-x.close:hover { background: var(--mx-tone) !important; }
.mx-modal-x.close:active { transform: scale(.94); }
.mx-modal-x .mx-i { width: 20px; height: 20px; }
.mx-modal .mx-refer-kicker { margin: 0; }
.mx-modal-h { margin: 0; padding-inline-end: 40px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.mx-modal-lead { margin: 0; color: var(--mx-ink-2); font-size: 1.0625rem; }
.mx-modal-steps { list-style: none; margin: 4px 0 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--mx-brand-soft); border-radius: var(--mx-radius); }
.mx-modal-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--mx-ink-2); }
.mx-modal-steps b { color: var(--mx-ink); }
.mx-modal-steps .mx-step-n { width: 36px; height: 36px; font-size: 1.0625rem; }
.mx-modal-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.mx-modal-prose { max-height: 60vh; overflow-y: auto; padding-inline-end: 40px; line-height: 1.7; color: var(--mx-ink-2); }
.mx-modal-prose :is(h1, h2, h3) { color: var(--mx-ink); font-size: 1.25rem; margin: 0 0 8px; }
@media (prefers-reduced-motion: no-preference) {
	.mx-modal.in .mx-modal-steps li { animation: mx-modal-in 420ms var(--mx-ease-out) both; }
	.mx-modal.in .mx-modal-steps li:nth-child(2) { animation-delay: 80ms; }
	.mx-modal.in .mx-modal-steps li:nth-child(3) { animation-delay: 160ms; }
}
@media (prefers-reduced-motion: reduce) { .mx-modal .modal-dialog { transition: none; transform: none; } }

/* the trigger under the sign-up form */
.mx-auth-card .point-icon { display: none; }
.mx-auth-card #openrefral-popup { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 16px; padding: 14px 16px; border-radius: var(--mx-radius); background: var(--mx-brand-soft); color: #6B4500; font: 800 1rem var(--mx-font); cursor: pointer; transition: background var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-auth-card #openrefral-popup::before { content: ""; width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='1'/%3E%3Cpath d='M4 13h16M12 9v11M12 9c-1-3-5-4-5-1.5S10 9 12 9zm0 0c1-3 5-4 5-1.5S14 9 12 9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11' rx='1'/%3E%3Cpath d='M4 13h16M12 9v11M12 9c-1-3-5-4-5-1.5S10 9 12 9zm0 0c1-3 5-4 5-1.5S14 9 12 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mx-auth-card #openrefral-popup:hover { background: #FFE6B3; }
.mx-auth-card #openrefral-popup:active { transform: scale(.98); }
.mx-auth-card #openrefral-popup:focus-visible { outline: 3px solid var(--mx-focus); outline-offset: 2px; }
@keyframes mx-modal-in { from { opacity: 0; transform: translateY(8px); } }
.mx-cart-nudge { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--mx-radius); background: var(--mx-brand-soft); color: #4A3000; font-weight: 700; font-family: var(--mx-font); }
.mx-cart-nudge .mx-i { width: 20px; height: 20px; flex: none; color: #6B4500; }
.mx-cart-nudge-row td { padding: 0 0 12px !important; border: 0 !important; }
.mx-cart-nudge-row .mx-cart-nudge { margin: 0; }

/* ---------- הלימודים שלי (page 338) ---------- */
.mx-ms { padding-block: 8px var(--mx-section); font-family: var(--mx-font); }
.mx-ms-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.mx-ms-me, .mx-ms-stat { background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); padding: 20px 22px; }
.mx-ms-me { display: flex; align-items: center; gap: 16px; }
.mx-ms-avatar { position: relative; flex: none; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%; background: var(--mx-tone); cursor: pointer; transition: transform var(--mx-t-press) var(--mx-ease-out); }
.mx-ms-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mx-ms-avatar-edit { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mx-ink); color: #fff; box-shadow: 0 0 0 3px var(--mx-surface); }
.mx-ms-avatar:active { transform: scale(.96); }
.mx-ms-avatar:focus-visible { outline: 3px solid var(--mx-focus); outline-offset: 3px; }
.mx-ms-name { margin: 0; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.mx-ms-year { margin: 4px 0 0; color: var(--mx-ink-3); }
.mx-ms-stat { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--mx-ink); }
a.mx-ms-stat { transition: box-shadow var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
@media (hover: hover) and (pointer: fine) { a.mx-ms-stat:hover { box-shadow: 0 0 0 1px var(--mx-brand); } }
a.mx-ms-stat:active { transform: scale(.99); }
.mx-ms-k { font-size: .875rem; font-weight: 700; color: var(--mx-ink-3); }
.mx-ms-v { font-size: 2rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mx-ms-s { font-size: .9375rem; color: var(--mx-ink-2); }
.mx-ms-s a { font-weight: 700; color: var(--mx-ink); }
.mx-ms-ref { background: var(--mx-brand-soft); box-shadow: none; }
.mx-ms-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mx-ms-code bdi { font-size: 1.5rem; font-weight: 900; letter-spacing: .06em; font-family: ui-monospace, monospace; }
.mx-btn-sm { min-height: 36px; padding: 6px 14px; font-size: .875rem; }
.mx-ms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mx-ms-head .mx-h3 { margin: 0; }
.mx-ms-count { margin: 0; color: var(--mx-ink-3); font-weight: 700; }
.mx-ms-head-orders { margin-top: clamp(40px, 5vw, 64px); }
.mx-ms-empty { background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: 28px; box-shadow: 0 0 0 1px var(--mx-tone); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mx-ms-empty p { margin: 0; max-width: 52ch; }
.mx-ms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mx-ms-course { background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); overflow: hidden; }
.mx-ms-card { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px; }
.mx-ms-cover { display: block; border-radius: var(--mx-radius); overflow: hidden; }
.mx-ms-cover-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mx-ms-title { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.mx-ms-title a { color: var(--mx-ink); text-decoration: none; }
.mx-ms-title a:hover { text-decoration: underline; text-decoration-color: var(--mx-brand); text-underline-offset: .2em; }
.mx-ms-meta { margin: 4px 0 12px; color: var(--mx-ink-3); font-size: .9375rem; }
.mx-ms-progress { display: flex; align-items: center; gap: 12px; }
.mx-ms-bar { flex: 1; max-width: 320px; height: 8px; border-radius: 8px; background: var(--mx-tone); overflow: hidden; }
.mx-ms-bar i { display: block; height: 100%; width: 100%; background: var(--mx-green); transform-origin: right; transform: scaleX(var(--p, 0)); }
.mx-ms-pct { font-weight: 700; font-size: .9375rem; color: var(--mx-ink-2); white-space: nowrap; }
.mx-ms-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 200px; }
.mx-ms-resume a, .mx-ms-lplay a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important; font-weight: 800; border-radius: var(--mx-radius); transition: background var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-ms-resume a { width: 100%; min-height: 46px; padding: 10px 18px; background: var(--mx-brand); color: var(--mx-on-brand) !important; }
.mx-ms-resume a::before, .mx-ms-lplay a::before { content: ""; width: 0; height: 0; border-block: 6px solid transparent; border-inline-end: 9px solid currentColor; }
.mx-ms-resume a:hover { background: var(--mx-brand-strong); }
.mx-ms-resume a:active, .mx-ms-lplay a:active { transform: scale(.97); }
.mx-ms-rate { text-align: center; padding: 9px 14px; border-radius: var(--mx-radius); box-shadow: inset 0 0 0 1.5px var(--mx-line); font-weight: 700; cursor: pointer; color: var(--mx-ink-2); transition: box-shadow var(--mx-t-hover) ease, color var(--mx-t-hover) ease; }
.mx-ms-rate:hover, .mx-ms-rate:focus-visible { box-shadow: inset 0 0 0 1.5px var(--mx-ink); color: var(--mx-ink); outline: none; }
.mx-ms-rated { margin: 0; text-align: center; font-size: 1.25rem; letter-spacing: 2px; color: var(--mx-tone-2); }
.mx-ms-rated .is-on { color: var(--mx-brand); }
.mx-ms-lessons { border-top: 1px solid var(--mx-tone); }
.mx-ms-lessons summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; cursor: pointer; font-weight: 700; color: var(--mx-ink-2); }
.mx-ms-lessons summary::-webkit-details-marker { display: none; }
.mx-ms-lessons summary .mx-i { width: 18px; height: 18px; transform: rotate(-90deg); transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-ms-lessons[open] summary .mx-i { transform: rotate(90deg); }
.mx-ms-lessons summary:hover { background: var(--mx-paper); }
.mx-ms-lessons ol { list-style: none; margin: 0; padding: 0 20px 12px; }
.mx-ms-lessons li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 140px 96px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--mx-tone); }
.mx-ms-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .875rem; background: var(--mx-tone); color: var(--mx-ink-2); }
.mx-ms-lessons li.is-done .mx-ms-n { background: var(--mx-green); color: #fff; }
.mx-ms-lessons li.is-started .mx-ms-n { background: var(--mx-brand-soft); color: #6B4500; box-shadow: inset 0 0 0 2px var(--mx-brand); }
.mx-ms-lname { font-weight: 600; min-width: 0; }
.mx-ms-lprog { display: flex !important; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; color: var(--mx-ink-3); font-variant-numeric: tabular-nums; }
.mx-ms-lprog .progress-bar { position: static !important; display: block; flex: 1; height: 6px; border-radius: 6px; background: var(--mx-tone) !important; overflow: hidden; float: none !important; width: auto !important; box-shadow: none !important; }
.mx-ms-lprog .progress-bar span { display: block; height: 100%; background: var(--mx-green); border-radius: 6px; transition: width 400ms var(--mx-ease-out); }
.mx-ms-lplay a { min-height: 36px; padding: 6px 12px; font-size: .9375rem; color: var(--mx-ink) !important; box-shadow: inset 0 0 0 1.5px var(--mx-ink); width: 100%; }
.mx-ms-lplay a:hover { background: var(--mx-ink); color: #fff !important; }
.mx-ms-orders-wrap { overflow-x: auto; background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); }
.mx-ms-orders { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mx-ms-orders th, .mx-ms-orders td { text-align: right; padding: 12px 18px; border-bottom: 1px solid var(--mx-tone); white-space: nowrap; }
.mx-ms-orders th { font-size: .875rem; color: var(--mx-ink-3); font-weight: 700; background: var(--mx-paper); }
.mx-ms-orders tr:last-child td { border-bottom: 0; }
.mx-ms-orders a { font-weight: 700; color: var(--mx-ink); }
.mx-ms-status { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .8125rem; font-weight: 700; background: var(--mx-tone); color: var(--mx-ink-2); }
.mx-ms-status.is-completed, .mx-ms-status.is-processing { background: var(--mx-green-soft); color: var(--mx-green); }
.mx-ms-status.is-cancelled, .mx-ms-status.is-failed, .mx-ms-status.is-refunded { background: #FDECEA; color: var(--mx-err); }
.mx-ms-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mx-ms-pics .profile-pic { position: relative; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; cursor: pointer; box-shadow: 0 0 0 1px var(--mx-tone); transition: box-shadow var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-ms-pics .profile-pic input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mx-ms-pics .profile-pic.selected { box-shadow: 0 0 0 3px var(--mx-brand); }
.mx-ms-pics .profile-pic:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--mx-focus); }
.mx-ms-pics .profile-pic:active { transform: scale(.96); }
.mx-ms-stars { margin: 0; direction: ltr; text-align: right; }
.mx-ms-stars span { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.mx-ms-stars a { font-size: 0 !important; text-decoration: none; width: 36px; height: 36px; display: grid; place-items: center; }
.mx-ms-stars a::before { content: "★"; font-size: 32px; line-height: 1; color: var(--mx-brand); transition: transform var(--mx-t-press) var(--mx-ease-out); }
.mx-ms-stars a.active ~ a::before { color: var(--mx-tone-2); }
.mx-ms-stars a:active::before { transform: scale(.9); }
.mx-modal .reviewText textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); font: inherit; resize: vertical; }
.mx-modal .reviewText textarea:focus { border-color: var(--mx-ink); outline: none; }
.mx-modal.modal { display: none; }
@media (max-width: 1000px) { .mx-ms-top { grid-template-columns: 1fr 1fr; } .mx-ms-me { grid-column: 1 / -1; } }
@media (max-width: 720px) {
	.mx-ms-top { grid-template-columns: 1fr; }
	.mx-ms-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
	.mx-ms-actions { grid-column: 1 / -1; min-width: 0; flex-direction: row; }
	.mx-ms-actions > * { flex: 1; }
	.mx-ms-title { font-size: 1.0625rem; }
	.mx-ms-lessons li { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "n name play" "n prog play"; gap: 4px 12px; }
	.mx-ms-n { grid-area: n; } .mx-ms-lname { grid-area: name; } .mx-ms-lprog { grid-area: prog; } .mx-ms-lplay { grid-area: play; }
	.mx-ms-lplay a { width: auto; }
	.mx-ms-pics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* logged in, the header carries credit + cart + "הלימודים שלי": give the menu to the drawer sooner */
@media (max-width: 1440px) {
	.mx-header:has(.mx-points) .mx-points { font-size: 0; gap: 0; }
	.mx-header:has(.mx-points) .mx-points-n { font-size: .9375rem; }
}
@media (max-width: 1100px) {
	.mx-header:has(.mx-points) .mx-nav { display: none; }
	.mx-header:has(.mx-points) .mx-menu-btn { display: inline-grid; }
}
/* the closed drawer sits off-canvas; on the older page shells it must not widen the page */
.mx-drawer { overflow: hidden; }
/* rating button: the old theme colours #rateCourse orange */
#rateCourse.mx-ms-rate { color: var(--mx-ink-2) !important; background: transparent !important; border: 0 !important; }
.mx-ms-orders-wrap { position: relative; }
@media (max-width: 560px) { .mx-ms-orders th, .mx-ms-orders td { padding: 10px 12px; } .mx-ms-orders th:nth-child(4), .mx-ms-orders td:nth-child(4) { display: none; } }

/* ---------- type: figures in a technical face (owner's choice C, 16.10.2026) ----------
   Headlines and text stay Heebo; numbers, prices and calculations read like a drawing or a calculator.
   Plex Mono has no Hebrew, so any Hebrew word inside these falls back to Heebo. */
:root { --mx-font-tech: 'IBM Plex Mono', var(--mx-font), ui-monospace, monospace; }
.mx-facts dd, .mx-calc, .mx-row-price, .mx-best-price, .mx-sc-facts dd, .mx-sc-n,
.mx-geo-n, .mx-step-n, .mx-bundle-now, .mx-bundle-sep s, .mx-mil-num, .mx-ms-v, .mx-ms-pct, .mx-ms-n, .mx-points-n {
	font-family: var(--mx-font-tech);
	letter-spacing: 0;
}

/* the big footer word is decoration: it must never cover the legal links under it */
.mx-footer-word { pointer-events: none; }
.mx-footer-legal { position: relative; z-index: 1; }
.mx-geo-grow { margin: -8px 0 clamp(16px, 2vw, 22px); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9375rem; color: var(--mx-green); }
.mx-geo-grow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-green); box-shadow: 0 0 0 4px var(--mx-green-soft); }
@media (max-width: 560px) { .mx-geo-grow { grid-column: 1 / -1; margin: 6px 0 4px; } }
@media (max-width: 560px) { .mx-geo-grow { grid-row: 3; } .mx-geo-list, .mx-geo-map { grid-row: 4; } }

/* legal and info pages: clear headings, real bullets, readable measure */
.mx-prose-doc { max-width: 72ch; }
.mx-prose-doc h2 { margin: 2em 0 .5em !important; font-size: 1.375rem !important; font-weight: 800 !important; letter-spacing: -.01em; line-height: 1.3; color: var(--mx-ink); padding-top: 1.25em; border-top: 1px solid var(--mx-tone); }
.mx-prose-doc > h2:first-child, .mx-prose-doc > p:first-child + h2 { border-top: 0; padding-top: 0; }
.mx-prose-doc p { margin: 0 0 1em; line-height: 1.75; }
.mx-prose-doc ul { margin: 0 0 1.25em; padding: 0; list-style: none; display: grid; gap: .6em; }
.mx-prose-doc ul li { position: relative; padding-inline-start: 22px; line-height: 1.7; }
.mx-prose-doc ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .7em; width: 8px; height: 8px; border-radius: 2px; background: var(--mx-brand); }
.mx-prose-doc a { color: var(--mx-ink); font-weight: 700; text-decoration-color: var(--mx-brand); text-underline-offset: .2em; }

/* ---------- deals: thin bar above the header (every page) ---------- */
.mx-deals-bar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 38px; padding: 7px 16px; background: var(--mx-ink); color: #E9EDF1 !important; font-family: var(--mx-font); font-size: .9375rem; text-decoration: none !important; position: relative; z-index: calc(var(--mx-z-header) + 1); }
.mx-deals-bar b { color: var(--mx-brand); font-weight: 800; font-family: var(--mx-font-tech, var(--mx-font)); }
.mx-deals-bar i { font-style: normal; margin: 0 10px; color: #6F7B87; }
.mx-deals-bar > .mx-i { width: 18px; height: 18px; color: var(--mx-brand); flex: none; }
.mx-deals-go { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; font-weight: 700; color: #fff; text-decoration: underline; text-decoration-color: var(--mx-brand); text-underline-offset: .25em; }
.mx-deals-go .mx-i { width: 14px; height: 14px; }
.mx-deals-short { display: none; }
@media (hover: hover) and (pointer: fine) { .mx-deals-bar:hover .mx-deals-go { text-decoration-thickness: 2px; } }
.mx-deals-bar:focus-visible { outline: 3px solid var(--mx-brand); outline-offset: -3px; }
@media (max-width: 860px) {
	.mx-deals-full { display: none; }
	.mx-deals-short { display: inline; }
	.mx-deals-bar { font-size: .875rem; gap: 8px; }
	.mx-deals-go { margin: 0; font-size: 0; }
	.mx-deals-go .mx-i { width: 16px; height: 16px; }
}

/* ---------- home: ככה חוסכים ---------- */
.mx-save { padding-block: clamp(56px, 6vw, 104px); background: var(--mx-surface); }
.mx-save-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.mx-save-card { background: var(--mx-paper); border-radius: var(--mx-radius-lg); padding: clamp(20px, 2.5vw, 30px); display: flex; flex-direction: column; gap: 8px; }
.mx-save-card p { margin: 0; color: var(--mx-ink-2); }
.mx-save-card a:not(.mx-btn) { font-weight: 700; color: var(--mx-ink); text-decoration-color: var(--mx-brand); text-underline-offset: .2em; }
.mx-save-main { background: var(--mx-ink); color: #fff; }
.mx-save-main .mx-save-k { color: #fff !important; font-size: 1.375rem; }
.mx-save-main .mx-save-note { color: #A9B4BF; font-size: .875rem; }
.mx-save-main .mx-btn { align-self: flex-start; margin-top: 8px; }
.mx-save-k { font-size: 1.1875rem; font-weight: 800; color: var(--mx-ink) !important; }
.mx-save-big { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 900; line-height: 1; color: var(--mx-ink) !important; font-family: var(--mx-font-tech, var(--mx-font)); letter-spacing: -.02em; }
.mx-save-tiers { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 2px; }
.mx-save-tiers li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mx-save-tiers li:last-child { border-bottom: 0; }
.mx-save-tiers span { font-weight: 700; }
.mx-save-tiers em { font-style: normal; margin-inline-start: 6px; padding: 1px 8px; border-radius: 99px; background: var(--mx-brand); color: var(--mx-on-brand); font-size: .8125rem; font-weight: 800; direction: ltr; display: inline-block; }
.mx-save-tiers s { color: #8995A1; font-family: var(--mx-font-tech, var(--mx-font)); font-size: .9375rem; }
.mx-save-tiers b { font-family: var(--mx-font-tech, var(--mx-font)); font-size: 1.25rem; color: var(--mx-brand); }
.mx-save-tiers li:first-child b { grid-column: 3; color: #fff; }
@media (max-width: 960px) { .mx-save-grid { grid-template-columns: 1fr 1fr; } .mx-save-main { grid-column: 1 / -1; } }
@media (max-width: 560px) { .mx-save-grid { grid-template-columns: 1fr; } }
.mx-cat-deal { margin: 0 0 14px; }
.mx-buy-multi { margin: 6px 0 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--mx-radius); background: var(--mx-brand-soft); color: #4A3000; font-size: .9375rem; line-height: 1.5; }
.mx-buy-multi .mx-i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #6B4500; }
/* auth art: a crane hook flies the load in, sets it on the beam and lifts away */
.mx-aa-crane { opacity: 0; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
	.js .mx-aa-crane { animation: mx-aa-fly 1300ms cubic-bezier(.33, 1, .5, 1) 800ms forwards, mx-aa-away 1000ms var(--mx-ease-in-out) 2300ms forwards; }
}
@keyframes mx-aa-fly {
	0% { opacity: 0; transform: translate(-250px, -110px) rotate(-4deg); }
	12% { opacity: 1; }
	65% { transform: translate(-24px, -26px) rotate(1.5deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes mx-aa-away { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(70px, -190px); } }
.mx-mil-kinds { margin: 0 0 clamp(24px, 3vw, 36px); }
.mx-mil-kinds p { margin: 0 0 8px; }
.mx-mil-kinds ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; flex-wrap: wrap; }
.mx-mil-kinds li { padding: 8px 14px; border-radius: 99px; background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-line); }

/* ---------- course sets ---------- */
.mx-sets-sec { margin-block: clamp(32px, 4vw, 56px); }
.mx-sets-sec > .mx-h3 { margin: 0 0 16px; }
.mx-sets-cat { margin: 0 0 clamp(28px, 4vw, 44px); }
.mx-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.mx-set { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); overflow: hidden; }
.mx-set::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--mx-brand); transform-origin: right; }
.mx-set-kicker { margin: 0; font-size: .8125rem; font-weight: 800; color: #6B4500; }
.mx-set-title { margin: 2px 0 0; font-size: 1.1875rem; font-weight: 800; line-height: 1.3; }
.mx-set-lead { margin: 4px 0 0; color: var(--mx-ink-3); font-size: .9375rem; }
.mx-set-items { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2px; }
.mx-set-items::before { content: ""; position: absolute; inset-inline-start: 6px; top: 14px; bottom: 14px; width: 2px; background: var(--mx-tone-2); transform-origin: top; }
.mx-set-items li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; }
.mx-set-node { width: 14px; height: 14px; border-radius: 50%; background: var(--mx-surface); box-shadow: inset 0 0 0 2px var(--mx-ink-3); }
.mx-set-items li.is-current .mx-set-node { background: var(--mx-brand); box-shadow: 0 0 0 4px var(--mx-brand-soft); }
.mx-set-items a { color: var(--mx-ink); font-weight: 700; text-decoration: none; }
.mx-set-items a:hover { text-decoration: underline; text-decoration-color: var(--mx-brand); text-underline-offset: .2em; }
.mx-set-price { color: var(--mx-ink-3); font-family: var(--mx-font-tech); font-size: .875rem; }
.mx-set-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--mx-tone); }
.mx-set-math { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mx-set-math s { color: var(--mx-ink-3); font-family: var(--mx-font-tech); }
.mx-set-math b { font-size: 1.375rem; font-family: var(--mx-font-tech); }
.mx-set-pct { padding: 2px 8px; border-radius: 99px; background: var(--mx-green-soft); color: var(--mx-green); font-weight: 800; font-size: .8125rem; }
@media (prefers-reduced-motion: no-preference) {
	.js .mx-set::before { transform: scaleX(0); transition: transform 700ms var(--mx-ease-out) 150ms; }
	.js .mx-set.is-in::before { transform: none; }
	.js .mx-set .mx-set-items::before { transform: scaleY(0); transition: transform 600ms var(--mx-ease-in-out) 250ms; }
	.js .mx-set.is-in .mx-set-items::before { transform: none; }
	.js .mx-set .mx-set-node { transform: scale(0); transition: transform 360ms cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(350ms + var(--i) * 110ms); }
	.js .mx-set.is-in .mx-set-node { transform: none; }
	.js .mx-set .mx-set-pct { opacity: 0; transform: scale(.7); transition: opacity 300ms ease, transform 420ms cubic-bezier(.3, 1.6, .5, 1); transition-delay: 750ms; }
	.js .mx-set.is-in .mx-set-pct { opacity: 1; transform: none; }
}

/* ---------- cart: one more course ---------- */
.mx-upsell { margin: 0 0 18px; padding: 18px 20px; border-radius: var(--mx-radius-lg); background: var(--mx-surface); box-shadow: 0 0 0 1px var(--mx-tone); font-family: var(--mx-font); }
.mx-upsell-h { margin: 0 0 12px; font-size: 1.125rem; font-weight: 800; color: var(--mx-ink); }
.mx-upsell-h b { color: var(--mx-green); }
.mx-upsell-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.mx-upsell-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: var(--mx-radius); background: var(--mx-paper); }
.mx-upsell-cover img { display: block; width: 72px; height: 45px; object-fit: cover; border-radius: 3px; }
.mx-upsell-name { display: flex; flex-direction: column; min-width: 0; }
.mx-upsell-name a { color: var(--mx-ink); font-weight: 700; text-decoration: none; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mx-upsell-name small { color: var(--mx-ink-3); font-family: var(--mx-font-tech); }
.mx-upsell-add { padding: 8px 12px; border-radius: var(--mx-radius); background: var(--mx-brand); color: var(--mx-on-brand) !important; font-weight: 800; text-decoration: none !important; white-space: nowrap; transition: background var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-upsell-add:hover { background: var(--mx-brand-strong); }
.mx-upsell-add:active { transform: scale(.95); }
@media (prefers-reduced-motion: no-preference) {
	.mx-upsell { animation: mx-upsell-in 520ms var(--mx-ease-out) both; }
	.mx-upsell-list li { animation: mx-upsell-in 480ms var(--mx-ease-out) both; animation-delay: calc(180ms + var(--i) * 90ms); }
}
@keyframes mx-upsell-in { from { opacity: 0; transform: translateY(-10px); } }

/* hero truss: ghost, member forces, legend */
.mx-fbd-ghost path { fill: none; stroke: var(--mx-sky); stroke-width: 2; stroke-dasharray: 3 5; opacity: .35; }
.mx-fbd-members path { stroke-width: var(--w, 4); transition: stroke 260ms ease, stroke-width 200ms ease; }
.mx-fbd.is-forces .mx-fbd-members path.is-t { stroke: var(--mx-steel); }
.mx-fbd.is-forces .mx-fbd-members path.is-c { stroke: var(--mx-survey); }
.mx-fbd-members path { stroke-width: 4; }
.mx-fbd.is-forces .mx-fbd-members path { stroke-width: var(--w, 4); }
.mx-fbd-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 4px 10px; font-size: .875rem; color: var(--mx-ink-2); opacity: 0; transition: opacity 400ms ease; }
.mx-fbd-legend.is-on { opacity: 1; }
.mx-fbd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mx-fbd-legend span::before { content: ""; width: 18px; height: 4px; border-radius: 2px; }
.mx-fbd-legend .is-t::before { background: var(--mx-steel); }
.mx-fbd-legend .is-c::before { background: var(--mx-survey); }
.mx-fbd-legend b { margin-inline-start: auto; color: var(--mx-ink); font-family: var(--mx-font-tech); font-weight: 600; }
.no-js .mx-fbd-legend, html:not(.js) .mx-fbd-legend { display: none; }
@keyframes mx-land { 0% { opacity: 0; transform: translateY(-34px); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes mx-settle { 0%, 100% { transform: none; } 40% { transform: translateY(2px); } }
@keyframes mx-grow { to { transform: none; } }

/* nav: the bundles, marked */
.mx-nav-hot { position: relative; color: var(--mx-ink) !important; font-weight: 800 !important; }
.mx-nav-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 99px; background: var(--mx-brand); color: var(--mx-on-brand); font-size: .6875rem; font-weight: 800; line-height: 1.5; vertical-align: 2px; }
@media (prefers-reduced-motion: no-preference) {
	.mx-nav-badge { animation: mx-badge-in 600ms cubic-bezier(.3, 1.6, .5, 1) 600ms both; }
}
@keyframes mx-badge-in { from { opacity: 0; transform: scale(.4) translateY(-4px); } }
.mx-drawer-nav .mx-nav-hot { font-weight: 800; }
#bundles { scroll-margin-top: calc(var(--mx-header-h) + 16px); }
@media (max-width: 1440px) { .mx-nav-link { padding-inline: 9px !important; } }
@media (max-width: 1340px) { .mx-nav-link { padding-inline: 7px !important; font-size: .9375rem; } .mx-nav-link::after { inset-inline: 7px; } }

/* nav bundles badge: two messages take turns, plus a passing shine */
.mx-nav-badge.is-flip { display: inline-grid; padding: 1px 8px; overflow: hidden; vertical-align: 1px; }
.mx-nav-badge.is-flip > span { grid-area: 1 / 1; text-align: center; white-space: nowrap; }
.mx-nav-badge.is-flip > span:last-child { visibility: hidden; }
.mx-nav-hot { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.mx-nav-badge.is-flip > span { animation: mx-badge-a 6s var(--mx-ease-in-out) 1.2s infinite both; }
	.mx-nav-badge.is-flip > span:last-child { visibility: visible; animation-name: mx-badge-b; }
	.mx-nav-hot::after { content: ""; position: absolute; inset-block: 6px; inset-inline-start: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(245, 160, 0, .28), transparent); transform: skewX(-18deg); animation: mx-shine 6s ease-in-out 2.4s infinite; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mx-nav-badge.is-flip > span:first-child { visibility: hidden; }
	.mx-nav-badge.is-flip > span:last-child { visibility: visible; }
}
@keyframes mx-badge-a { 0%, 40% { opacity: 1; transform: none; } 48%, 92% { opacity: 0; transform: translateY(-110%); } 100% { opacity: 1; transform: none; } }
@keyframes mx-badge-b { 0%, 40% { opacity: 0; transform: translateY(110%); } 48%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(110%); } }
@keyframes mx-shine { 0%, 70% { transform: translateX(0) skewX(-18deg); opacity: 0; } 72% { opacity: 1; } 100% { transform: translateX(-520%) skewX(-18deg); opacity: 0; } }

/* track bundle <-> podcast episode */
.mx-ep-bundle { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; padding: 18px 20px; border-radius: var(--mx-radius-lg); background: var(--mx-ink); color: #fff !important; text-decoration: none !important; position: relative; overflow: hidden; transition: transform var(--mx-t-press) var(--mx-ease-out); }
.mx-ep-bundle::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--mx-brand); }
.mx-ep-bundle-k { font-size: .8125rem; font-weight: 800; color: var(--mx-brand); }
.mx-ep-bundle strong { font-size: 1.125rem; }
.mx-ep-bundle s { color: #8995A1; font-family: var(--mx-font-tech); }
.mx-ep-bundle b { color: var(--mx-brand); font-family: var(--mx-font-tech); font-size: 1.125rem; }
.mx-ep-bundle-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 800; }
.mx-ep-bundle-go .mx-i { width: 16px; height: 16px; transition: transform var(--mx-t-ui) var(--mx-ease-out); }
@media (hover: hover) and (pointer: fine) { .mx-ep-bundle:hover .mx-ep-bundle-go .mx-i { transform: translateX(-4px); } }
.mx-ep-bundle:active { transform: scale(.98); }
.mx-bundle-ep { display: flex; gap: 10px; align-items: center; margin: 0 0 22px; padding: 12px 16px; border-radius: var(--mx-radius); background: var(--mx-teal-soft); color: var(--mx-ink-2); }
.mx-bundle-ep .mx-i { width: 20px; height: 20px; color: var(--mx-teal); flex: none; }
.mx-bundle-ep a { font-weight: 800; color: var(--mx-ink); }

/* lecturer strip: the card at the far edge is an intentional peek, so it fades out instead of being cut */
.mx-strip-track { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(24px, 6vw, 96px)); mask-image: linear-gradient(to right, transparent 0, #000 clamp(24px, 6vw, 96px)); }


/* the map draws itself when it comes into view, not at page load */
.js .mx-geo:not(.is-in) .mx-geo-land, .js .mx-geo:not(.is-in) .mx-geo-core, .js .mx-geo:not(.is-in) .mx-geo-ring { animation-play-state: paused; }

/* ---------- course cards (motion #6): an amber vector runs under the card toward the action,
   the arrow advances, the cover leans in. Same on keyboard focus and on touch press. ---------- */
.mx-row > a { position: relative; outline: none; transition: background-color var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
.mx-row > a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--mx-brand); transform: scaleX(0); transform-origin: right; transition: transform 420ms var(--mx-ease-out); }
.mx-row-thumb { transition: transform 420ms var(--mx-ease-out), box-shadow var(--mx-t-ui) ease; }
.mx-row > a:focus-visible { background: var(--mx-paper); box-shadow: inset 0 -1px 0 var(--mx-tone-2), 0 0 0 3px var(--mx-focus); }
.mx-row > a:focus-visible::after, .mx-row > a:active::after { transform: scaleX(1); }
.mx-row > a:focus-visible .mx-row-go { background: var(--mx-brand); color: var(--mx-on-brand); transform: translateX(-4px); }
.mx-row > a:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
	.mx-row > a:hover::after { transform: scaleX(1); }
	.mx-row > a:hover .mx-row-thumb { transform: scale(1.04) rotate(-.6deg); box-shadow: 0 10px 22px -12px rgba(13, 39, 66, .55); }
}
@media (prefers-reduced-motion: reduce) { .mx-row > a::after, .mx-row-thumb { transition: none; } }

/* ---------- catalogue filter (motion #7) ---------- */
.mx-chip.is-flash { animation: mx-chip-flash 520ms var(--mx-ease-out); }
@keyframes mx-chip-flash { 0% { box-shadow: 0 0 0 0 rgba(245, 160, 0, .55); } 100% { box-shadow: 0 0 0 10px rgba(245, 160, 0, 0); } }
.mx-empty { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mx-empty[hidden] { display: none; }
.mx-empty-art { width: 120px; height: 70px; flex: none; }
.mx-empty-art path, .mx-empty-art circle { fill: none; stroke: var(--mx-ink-3); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mx-empty-art circle, .mx-empty-art path:nth-child(4) { stroke: var(--mx-brand-strong); }
.mx-empty-art .mx-empty-q { stroke: var(--mx-brand-strong); }
@media (prefers-reduced-motion: no-preference) {
	.mx-empty-art path, .mx-empty-art circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.mx-empty.is-on .mx-empty-art path, .mx-empty.is-on .mx-empty-art circle { animation: mx-draw 600ms var(--mx-ease-in-out) forwards; }
	.mx-empty.is-on .mx-empty-art path:nth-child(2) { animation-delay: 300ms; }
	.mx-empty.is-on .mx-empty-art circle { animation-delay: 450ms; }
	.mx-empty.is-on .mx-empty-art path:nth-child(4) { animation-delay: 750ms; }
	.mx-empty.is-on .mx-empty-art .mx-empty-q { animation-delay: 900ms; }
}

/* ---------- buying (motion #8): busy button, cart confirmation with a check that draws ---------- */
a.mx-btn.is-busy, a.mx-upsell-add.is-busy { pointer-events: none; opacity: .85; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
a.mx-btn.is-busy::after, a.mx-upsell-add.is-busy::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-inline-start-color: transparent; animation: mx-spin 700ms linear infinite; }
@keyframes mx-spin { to { transform: rotate(360deg); } }
body.mx-legacy .woocommerce-notices-wrapper .woocommerce-message { position: relative; padding-inline-start: 56px !important; }
body.mx-legacy .woocommerce-notices-wrapper .woocommerce-message::before { content: "" !important; position: absolute; inset-inline-start: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--mx-green) !important; color: transparent !important; }
body.mx-legacy .woocommerce-notices-wrapper .woocommerce-message::after { content: ""; position: absolute; inset-inline-start: 24px; top: 50%; width: 12px; height: 6px; margin-top: -5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
	body.mx-legacy .woocommerce-notices-wrapper .woocommerce-message { animation: mx-note-in 520ms var(--mx-ease-out) both; }
	body.mx-legacy .woocommerce-notices-wrapper .woocommerce-message::before { animation: mx-pop 420ms cubic-bezier(.3, 1.6, .5, 1) 200ms both; }
	body.mx-legacy .woocommerce-notices-wrapper .woocommerce-message::after { clip-path: inset(0 100% 0 0); animation: mx-check 360ms var(--mx-ease-out) 480ms forwards; }
}
@keyframes mx-note-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes mx-check { to { clip-path: inset(0); } }
a.mx-btn.mx-btn-block.is-busy { display: flex; }
a.mx-btn.is-busy::after { flex: none; }
a.mx-btn.is-busy::after { position: static; inset: auto; background: none; transition: none; }

/* Main nav v2 (16.10): an amber rule draws under the item instead of a grey box; the institutions
   menu shows the real course count per institution, "all courses" closes the list. */
.mx-nav-link { position: relative; }
.mx-nav-link::after {
	content: ""; position: absolute; inset-inline: 12px; bottom: 6px; height: 2px; border-radius: 2px;
	background: var(--mx-brand); opacity: .55; transform: scaleX(0); transform-origin: center;
	transition: transform var(--mx-t-ui) var(--mx-ease-out);
}
.mx-nav-link[aria-current="page"] { box-shadow: none; border-radius: var(--mx-radius); }
.mx-nav-link[aria-current="page"]::after, .mx-nav-link[aria-expanded="true"]::after { transform: scaleX(1); opacity: 1; }
.mx-nav-link:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
	.mx-nav-link:hover { background: none; }
	.mx-nav-link:hover::after { transform: scaleX(1); }
}
.mx-sub { min-width: 320px; }
.mx-sub a { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mx-sub-n {
	flex: none; min-width: 28px; padding: 2px 8px; border-radius: 999px; text-align: center;
	background: var(--mx-tone); color: var(--mx-ink-2); font-size: .8125rem; font-weight: 700;
	font-family: var(--mx-font-tech); font-variant-numeric: tabular-nums;
}
.mx-sub-all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mx-line); }
.mx-sub-all a { font-weight: 800; color: var(--mx-ink); }
.mx-sub-all .mx-sub-n { background: var(--mx-ink); color: #fff; }
.mx-drawer-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .mx-nav-link::after { transition: none; } }
/* Drawer: institutions as a compact two-column grid of chips with their count, so bundles and
   the other main items stay within the first screen on a phone. */
.mx-drawer-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 8px; }
.mx-drawer-nav ul a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--mx-radius); background: var(--mx-tone); font-size: .9375rem; line-height: 1.25; }
.mx-drawer-nav ul .mx-sub-n { background: var(--mx-surface); }
.mx-drawer-nav ul li:last-child { grid-column: 1 / -1; }
.mx-drawer-nav ul li:last-child a { background: var(--mx-ink); color: #fff; }
.mx-drawer-nav ul li:last-child .mx-sub-n { background: rgba(255, 255, 255, .16); color: #fff; }
.mx-drawer-nav > li > a { justify-content: flex-start; }

/* Section rail (16.10): a vertical dimension line on the inline-end edge with a tick per section.
   The filled part of the line grows to the current tick; labels show on hover/focus, the current
   one stays visible. Phones get a short-lived label under the header instead. */
.mx-rail { display: none; }
@media (min-width: 1180px) {
	.mx-rail {
		display: block; position: fixed; inset-inline-end: 18px; top: 50%; z-index: 40;
		transform: translate(-8px, -50%); opacity: 0; pointer-events: none;
		transition: opacity 300ms var(--mx-ease-out), transform 300ms var(--mx-ease-out);
	}
	.mx-rail.is-on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
	.mx-rail ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
	.mx-rail ol::before, .mx-rail ol::after {
		content: ""; position: absolute; left: 5px; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--mx-line);
	}
	.mx-rail ol::after { background: var(--mx-brand); transform-origin: top; transform: scaleY(var(--rail-p, 0)); transition: transform 420ms var(--mx-ease-out); }
	.mx-rail a {
		position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-direction: row-reverse;
		min-height: 24px; text-decoration: none; color: var(--mx-ink-2); font-size: .8125rem; font-weight: 700;
	}
	.mx-rail a::before {
		content: ""; flex: none; width: 12px; height: 2px; border-radius: 2px; background: #8a96a0;
		transition: width var(--mx-t-ui) var(--mx-ease-out), background-color var(--mx-t-ui) ease;
	}
	.mx-rail .is-past a::before { background: var(--mx-brand); }
	.mx-rail a[aria-current]::before { width: 20px; height: 3px; background: var(--mx-brand); }
	.mx-rail-t {
		padding: 3px 9px; border-radius: 999px; background: var(--mx-surface); box-shadow: 0 2px 10px -4px rgba(16, 24, 31, .25);
		white-space: nowrap; opacity: 0; transform: translateX(-6px);
		transition: opacity var(--mx-t-ui) var(--mx-ease-out), transform var(--mx-t-ui) var(--mx-ease-out);
	}
	.mx-rail a[aria-current] { color: var(--mx-ink); }
	.mx-rail a:focus-visible .mx-rail-t, .mx-rail:hover .mx-rail-t { opacity: 1; transform: none; }
}
@media (min-width: 1600px) {
	.mx-rail a[aria-current] .mx-rail-t { opacity: 1; transform: none; }
}
.mx-rail-now { display: none; }
@media (max-width: 1179px) {
	.mx-rail-now {
		display: block; position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, -4px);
		padding: 4px 12px; border-radius: 999px; background: var(--mx-ink); color: #fff; font-size: .8125rem; font-weight: 700;
		opacity: 0; pointer-events: none; transition: opacity 220ms var(--mx-ease-out), transform 220ms var(--mx-ease-out);
	}
	.mx-rail-now:empty { display: none; }
	.mx-rail-now.is-on { opacity: .92; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.mx-rail, .mx-rail ol::after, .mx-rail-t, .mx-rail a::before, .mx-rail-now { transition: none; }
}

/* Podcast cards say where they lead (16.10): the card opens the episode page, it does not play. */
.mx-pod-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--mx-ink); font-size: .9375rem; }
.mx-pod-lead .mx-pod-go { padding-inline: 8px; margin-top: 4px; }
.mx-pod-go .mx-i { width: 16px; height: 16px; transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-pod-list .mx-pod-go { display: block; margin-top: 4px; font-size: .8125rem; color: var(--mx-ink-2); }
@media (hover: hover) and (pointer: fine) { .mx-pod-lead:hover .mx-pod-go .mx-i { transform: translateX(-4px); } }
/* Real player state under the episode video (signature #9). */
.mx-ep-state { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; font-size: .875rem; font-weight: 700; color: var(--mx-ink-2); }
.mx-ep-state[hidden] { display: none; }
.mx-ep-state .mx-pod-wave { position: static; inset: auto; flex: 0 0 140px; height: 22px; gap: 2px; opacity: 1; justify-content: flex-start; }
.mx-ep-state .mx-pod-wave i { max-width: 3px; background: var(--mx-brand); transform: scaleY(.3); transition: transform 300ms var(--mx-ease-out); }
@media (prefers-reduced-motion: no-preference) {
	.mx-ep-state.is-playing .mx-pod-wave i { animation: mx-wave 900ms ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
}
.mx-ep-state.is-playing { color: var(--mx-ink); }

/* Lecturers index (16.10): field + course count from data instead of a cut list of names; less air
   under the intro; hover marks the card (frame ring + name rule) and never moves or zooms a face. */
.mx-team-head { padding-bottom: clamp(12px, 2vw, 24px); }
.mx-team-head + .mx-team { padding-top: 8px; }
.mx-team-courses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.mx-team-field { color: var(--mx-ink-2); font-weight: 600; }
.mx-team-n { padding: 1px 9px; border-radius: 999px; background: var(--mx-tone); color: var(--mx-ink-2); font-size: .8125rem; font-weight: 700; }
.mx-team-n bdi { font-family: var(--mx-font-tech); }
.mx-team-photo { position: relative; }
.mx-team-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--mx-brand); transition: box-shadow var(--mx-t-ui) var(--mx-ease-out); pointer-events: none; }
.mx-team-grid a:focus-visible .mx-team-photo::after { box-shadow: inset 0 0 0 3px var(--mx-brand); }
@media (hover: hover) and (pointer: fine) {
	.mx-team-grid a:hover .mx-team-photo img { transform: none; }
	.mx-team-grid a:hover .mx-team-photo::after { box-shadow: inset 0 0 0 3px var(--mx-brand); }
}
@media (max-width: 640px) { .mx-team-courses { display: flex; } .mx-team-field { font-size: .875rem; } }

/* Touch screens (16.10): text links in sets, course facts and "see all" links get a 43px tall
   hit area; the padding is cancelled by a negative margin, so nothing moves. */
@media (pointer: coarse) {
	.mx-set-items a, .mx-course-facts a, a.mx-link { padding-block: 8px; margin-block: -8px; }
	.mx-set-items a { display: inline-block; }
}

/* Podcast cover (16.10): portrait + guest name + the episode's subject as a tag above the name. */
.mx-pod-topic { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: var(--mx-brand); color: var(--mx-ink); font-size: .8125rem; font-weight: 800; }

/* "I want this course" (sales idea 7): from the empty search state to the suggestion box. */
.mx-ask-course {
	display: block; margin: 12px auto 0; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--mx-brand); color: var(--mx-ink); font: inherit; font-weight: 800;
}
.mx-ask-course[hidden] { display: none; }

/* "הלימודים שלי": filter chips + search above a long course list. */
.mx-ms-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.mx-ms-filter[hidden] { display: none; }
.mx-ms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-ms-chips bdi { opacity: .7; font-variant-numeric: tabular-nums; margin-inline-start: 2px; }
.mx-ms-search { flex: 1 1 220px; max-width: 340px; margin-inline-start: auto; }
.mx-ms-search input { width: 100%; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--mx-tone-2); border-radius: var(--mx-radius); background: var(--mx-surface); font: inherit; color: var(--mx-ink); }
.mx-ms-search input:focus-visible { outline: 3px solid var(--mx-focus); outline-offset: 1px; }
.mx-ms-none { flex-basis: 100%; margin: 0; color: var(--mx-ink-2); }
.mx-ms-course[hidden] { display: none; }
@media (max-width: 640px) { .mx-ms-search { max-width: none; margin-inline-start: 0; flex-basis: 100%; } }

/* Checkout: payment method icons (local SVGs, see mx/pay-icons.php). */
.wc_payment_method > label img { display: inline-block; width: 48px; height: 32px; max-width: none; vertical-align: middle; margin-inline-start: 10px; border-radius: 5px; }
.wc_payment_method .payment_box:not(:has(*)) { display: none !important; }

/* Hero truss, engineering layers (17.10.2026): member tag, deflected shape, bending moment diagram. */
.mx-fbd-mtag { opacity: 0; transition: opacity 240ms ease; pointer-events: none; }
.mx-fbd.is-forces .mx-fbd-mtag { opacity: 1; }
.mx-fbd-mtag rect { fill: var(--mx-steel); }
.mx-fbd-mtag.is-c rect { fill: var(--mx-survey); }
.mx-fbd .mx-fbd-mtag text { fill: #fff; font-family: var(--mx-font-tech); font-size: 13px; font-weight: 600; text-anchor: middle; }
.mx-fbd-defl path { fill: none; stroke: var(--mx-brand-strong); stroke-width: 1.6; stroke-dasharray: 5 4; stroke-linecap: round; opacity: 0; transition: opacity 400ms ease; }
.mx-fbd .mx-fbd-defl text { fill: var(--mx-ink-2); font-family: var(--mx-font-tech); font-size: 13px; font-weight: 600; opacity: 0; transition: opacity 400ms ease; }
.mx-fbd.is-defl .mx-fbd-defl path { opacity: .9; }
.mx-fbd.is-defl .mx-fbd-defl text { opacity: 1; }
.mx-fbd-members path { cursor: default; }
.mx-fbd-mdia-base { stroke: var(--mx-ink-3); stroke-width: 1.5; fill: none; }
.mx-fbd-mdia-fill { fill: color-mix(in srgb, var(--mx-steel) 16%, transparent); stroke: var(--mx-steel); stroke-width: 2; stroke-linejoin: round; }
.mx-fbd-mdia-peak { stroke: var(--mx-steel); stroke-width: 1.2; stroke-dasharray: 3 3; }
.mx-fbd .mx-fbd-mdia-v { fill: var(--mx-steel); font-family: var(--mx-font-tech); font-size: 14px; font-weight: 600; }
.mx-fbd .mx-fbd-mdia-k { fill: var(--mx-steel); font-size: 16px; font-weight: 800; }
.mx-fbd .mx-fbd-mdia-u { fill: var(--mx-ink-3); font-size: 11px; font-weight: 600; }
.mx-fbd-mdia { clip-path: inset(0 100% 0 0); }
.mx-fbd.is-beam .mx-fbd-mdia { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--mx-ease-in-out); }
html:not(.js) .mx-fbd-mdia, html:not(.js) .mx-fbd-defl path, html:not(.js) .mx-fbd-defl text { clip-path: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mx-fbd-mdia, .mx-fbd.is-beam .mx-fbd-mdia { clip-path: none; transition: none; } }
.mx-sheet-title b { font-family: var(--mx-font-tech); font-weight: 600; }
.mx-sheet-note { margin: -4px 4px 12px; font-size: .875rem; line-height: 1.55; color: var(--mx-ink-2); }
.mx-sheet-more { margin: 0 4px 10px; font-size: .875rem; font-weight: 600; } .mx-sheet-more a { color: var(--mx-ink); text-decoration-color: var(--mx-brand); text-underline-offset: 3px; }

/* Hero truss toys: layer chips, load stepper, material (17.10.2026). */
.mx-fbd-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 4px 12px; }
.mx-fbd-tools[hidden] { display: none; }
.mx-fbd-tool { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mx-fbd-tools .mx-chip { min-height: 36px; padding: 6px 12px; font-size: .875rem; }
.mx-fbd-tools .mx-chip sub { font-size: .7em; }
.mx-fbd-step { gap: 4px; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--mx-line); }
.mx-fbd-step .mx-iconbtn { width: 36px; height: 36px; border-radius: 50%; font-size: 1.125rem; font-weight: 800; }
.mx-fbd-step span { font-family: var(--mx-font-tech); font-size: .875rem; min-width: 9ch; text-align: center; }
.mx-fbd-step b { font-weight: 700; color: var(--mx-ink); }
.mx-fbd.no-forces .mx-fbd-members path { stroke: var(--mx-ink) !important; stroke-width: 4 !important; }
.mx-fbd.no-forces .mx-fbd-mtag { opacity: 0 !important; }
.mx-fbd.no-moment .mx-fbd-mdia { opacity: 0; }
.mx-fbd.no-defl .mx-fbd-defl { opacity: 0; }
.mx-fbd-mdia, .mx-fbd-defl, .mx-fbd-infl { transition: opacity 260ms ease; }
.mx-fbd-infl { opacity: 0; pointer-events: none; }
.mx-fbd.is-infl .mx-fbd-infl { opacity: 1; }
.mx-fbd-infl-fill { fill: color-mix(in srgb, var(--mx-brand) 18%, transparent); stroke: var(--mx-brand-strong); stroke-width: 2; stroke-linejoin: round; }
.mx-fbd-infl-at { stroke: var(--mx-brand-strong); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mx-fbd-infl-dot { fill: var(--mx-brand); stroke: var(--mx-surface); stroke-width: 2; }
.mx-fbd .mx-fbd-infl-one { fill: var(--mx-ink-2); font-family: var(--mx-font-tech); font-size: 12px; font-weight: 600; }
.mx-fbd .mx-fbd-infl text.mx-fbd-mdia-v { fill: var(--mx-ink); }
/* Phone: the drawing shrinks to ~330px, so its small technical labels grow to stay readable. */
@media (max-width: 640px) {
	.mx-fbd .mx-fbd-mtag text { font-size: 19px; }
	.mx-fbd-mtag rect { height: 30px; transform: translateY(-3px); }
	.mx-fbd .mx-fbd-defl text, .mx-fbd .mx-fbd-mdia-v { font-size: 20px; }
	.mx-fbd .mx-fbd-mdia-k { font-size: 22px; }
	.mx-fbd .mx-fbd-mdia-u, .mx-fbd .mx-fbd-infl-one { font-size: 16px; }
}

/* Hero: free tools instead of best sellers (17.10.2026). */
.mx-tools-ico { grid-area: img; width: 64px; height: 48px; padding: 4px; border-radius: var(--mx-radius); background: var(--mx-paper); color: var(--mx-ink); }
.mx-tools-teaser .mx-best-price { color: var(--mx-green); }

/* Mailing-list opt-in under the suggestion form */
.mx-news-opt { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: .9375rem; color: var(--mx-ink-2); cursor: pointer; }
.mx-news-opt input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--mx-brand-strong); }

/* Truss sheet: link to the lab; hidden on the lab page itself */
.mx-sheet-open { margin: 0 4px 6px; }
.mx-tool-truss .mx-sheet-open { display: none; }
.mx-tool-truss .mx-sheet { max-width: 760px; margin-inline: auto; }

.mx-tools-all { margin-inline-start: auto; font-size: .875rem; font-weight: 700; }
.mx-tools-teaser .mx-best-label { flex-wrap: wrap; }

/* Long dropdowns (the lab: 19 tools) in two columns */
@media (min-width: 900px) { .mx-sub-wide { min-width: 460px; } .mx-sub-wide ul { columns: 2; column-gap: 8px; } .mx-sub-wide li { break-inside: avoid; } }

/* Home bundles: grouped (preparatory / by year / by track), institution + access on each */
.mx-bundle-group { margin: clamp(22px, 3vw, 32px) 0 10px; font-size: 1rem; font-weight: 800; color: var(--mx-ink-2); }
.mx-bundle-group:first-of-type { margin-top: 0; }
.mx-bundle-meta { display: block; font-size: .875rem; color: var(--mx-ink-3); }

/* Podcast lead cover around the guest (finishing pass 17.10.2026): portrait, subject, thin wave strip */
.mx-pod-cover { display: grid; grid-template-columns: minmax(0, 1fr) 42%; background: var(--mx-blue); }
.mx-pod-cover-pic { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; }
.mx-pod-cover-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.mx-pod-cover-pic .mx-avatar { width: 100%; height: 100%; border-radius: 0; font-size: 3rem; }
.mx-pod-cover-text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: clamp(16px, 3vw, 32px); padding-bottom: 48px; color: #fff; text-align: right; }
.mx-pod-cover-k { font-size: .8125rem; font-weight: 700; color: var(--mx-brand); }
.mx-pod-cover-topic { font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.mx-pod-cover-guest { font-size: 1.0625rem; font-weight: 700; }
.mx-pod-cover-guest small, .mx-pod-cover-host { font-size: .8125rem; font-weight: 500; color: #C9D6E3; }
.mx-pod-wave.mx-pod-wave-strip { inset: auto 0 0 0; height: 30px; padding: 0 16px 8px; gap: 3px; opacity: .45; justify-content: flex-start; }
.mx-pod-wave-strip i { max-width: 4px; background: #EAF1F8; }
.mx-pod-cover .mx-pod-play { z-index: 2; }
@media (max-width: 560px) { .mx-pod-cover { grid-template-columns: minmax(0, 1fr) 40%; } .mx-pod-cover-topic { font-size: 1.375rem; } }

/* Home truss, finishing pass: two levels of controls, a quieter grid, changed values flash once */
.mx-fbd-grid path { opacity: .55; }
.mx-fbd-more { flex-basis: 100%; }
.mx-fbd-more summary { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; font-size: .875rem; font-weight: 700; color: var(--mx-ink-2); }
.mx-fbd-more[open] summary { margin-bottom: 8px; }
.mx-fbd-more .mx-fbd-tool + .mx-fbd-tool { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
	.mx-calc.is-flash b { animation: mx-calc-flash 700ms var(--mx-ease-out); }
}
@keyframes mx-calc-flash { 0% { color: var(--mx-brand); text-shadow: 0 0 10px rgba(245, 160, 0, .6); } 100% { color: #fff; text-shadow: none; } }

/* Lab dropdown grouped by field (18.10.2026) */
.mx-sub-head { padding: 10px 12px 2px; font-size: .75rem; font-weight: 800; letter-spacing: .02em; color: var(--mx-brand-strong); break-after: avoid; }
.mx-sub-head:first-child { padding-top: 2px; }
@media (min-width: 900px) { .mx-sub-wide { min-width: 640px; } .mx-sub-wide ul { columns: 3; column-gap: 12px; } }
.mx-drawer-head { padding: 12px 4px 4px; font-size: .8125rem; font-weight: 800; color: var(--mx-brand-strong); }
/* Hero tools teaser: the "all tools" link as its own bar under the tiles */
.mx-tools-teaser .mx-tools-cta-link { display: flex; grid-template-columns: none; grid-template-areas: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding: 12px 16px; border-radius: var(--mx-radius); background: var(--mx-blue); color: #EAF1F8; text-decoration: none; font-size: .9375rem; line-height: 1.4; }
.mx-tools-teaser .mx-tools-cta-link b { color: var(--mx-brand); font-weight: 800; }
.mx-tools-teaser .mx-tools-cta-link .mx-i { flex: none; color: var(--mx-brand); transition: transform var(--mx-t-hover) var(--mx-ease-out); }
@media (hover: hover) and (pointer: fine) { .mx-tools-teaser .mx-tools-cta-link:hover { box-shadow: none; } .mx-tools-teaser .mx-tools-cta-link:hover .mx-i { transform: translateX(-4px); } }
.mx-tools-teaser ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-tools-teaser li { min-width: 0; }
/* Phone: the four tools as a tidy 2×2 grid (the carousel is for course tiles) */
@media (max-width: 640px) {
	.mx-tools-teaser ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
	.mx-tools-teaser li { flex: none; }
	.mx-tools-teaser a { grid-template-columns: 1fr; grid-template-areas: "img" "text" "price"; gap: 6px; padding: 10px; }
	.mx-tools-teaser .mx-tools-ico { width: 56px; height: 42px; }
	.mx-tools-teaser .mx-best-meta { display: none; }
	.mx-tools-teaser .mx-best-name { white-space: normal; }
}

/* Lesson status tag (בקרוב / העשרה), 18.10.2026 */
.mx-lesson-note { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: var(--mx-paper); color: var(--mx-ink-3); font-size: .75rem; font-weight: 600; vertical-align: 1px; }

/* Study groups box + exam promo countdown (18.10.2026) */
.mx-grp { margin: 16px 0 0; padding: 14px; border: 1px dashed var(--mx-line); border-radius: var(--mx-radius); background: var(--mx-paper); }
.mx-grp-pitch { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-size: .9375rem; line-height: 1.55; color: var(--mx-ink-2); }
.mx-grp-pitch .mx-i { flex: none; margin-top: 3px; color: var(--mx-brand-strong); }
.mx-grp-pitch b, .mx-grp-state b { color: var(--mx-ink); }
.mx-grp-state { margin: 0 0 10px; font-size: .9375rem; line-height: 1.55; color: var(--mx-ink-2); }
.mx-grp-left { color: var(--mx-ink-3); }
.mx-grp-link { display: flex; gap: 6px; margin: 0 0 8px; }
.mx-grp-link input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--mx-line); border-radius: var(--mx-radius); background: #fff; font: inherit; font-size: .8125rem; direction: ltr; text-align: left; color: var(--mx-ink-2); }
.mx-btn-wa { background: #1FA855 !important; border-color: #1FA855 !important; color: #fff !important; }
.mx-btn-wa:hover { background: #178A45 !important; }
.mx-grp-msg { margin: 6px 0 0; font-size: .8125rem; color: var(--mx-ink-3); min-height: 0; }
.mx-grp-msg:empty { display: none; }
.mx-cd { display: block; margin: 0 0 10px; font-size: .875rem; color: var(--mx-ink-2); }
.mx-cd b, .mx-deals-cd b { font-family: var(--mx-font-tech, var(--mx-font)); font-variant-numeric: tabular-nums; }
.mx-deals-cd { margin-inline-start: 10px; color: #E9EDF1; }
@media (max-width: 640px) { .mx-deals-bar.is-exam .mx-deals-cd { display: none; } }
.mx-grp .mx-btn-wa { white-space: normal; text-align: center; }

/* ambassadors (mx/ambassadors.php): progress to the 10-friend bonus */
.mx-amb { margin: 18px 0 14px; padding: 14px 16px; border-radius: 8px; background: var(--mx-tone); border-inline-start: 3px solid var(--mx-brand); }
.mx-amb .mx-loyal-k { margin: 0 0 4px; }
.mx-amb-line { margin: 6px 0 0; font-size: .95rem; }
.mx-amb-bar { height: 8px; margin: 10px 0 4px; border-radius: 99px; background: color-mix(in srgb, var(--mx-ink) 10%, transparent); overflow: hidden; }
.mx-amb-bar span { display: block; height: 100%; width: var(--p); background: var(--mx-brand); border-radius: inherit; transform-origin: right; animation: mx-amb-grow .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mx-amb-grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .mx-amb-bar span { animation: none; } }

/* the full menu is kept in the layout (measurable) but hidden when it does not fit; the menu button takes over */
.mx-header.mx-nav-tight .mx-nav { position: absolute; visibility: hidden; pointer-events: none; inset-inline-start: -9999px; }
.mx-header.mx-nav-tight .mx-nav > ul .mx-sub { display: none; }
.mx-header.mx-nav-tight .mx-menu-btn { display: inline-grid; }

/* podcast list: the guest is the episode (18.10): bigger portrait, a ring that lights on hover/focus */
.mx-pods-page .mx-pod-list a { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
.mx-pods-page .mx-pod-n, .mx-pods-page .mx-pod-n .mx-face { width: 84px; height: 84px; }
.mx-pods-page .mx-pod-n .mx-face { box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 3.5px var(--mx-line); transition: box-shadow var(--mx-t-ui) var(--mx-ease-out), transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-pods-page .mx-pod-list a:focus-visible .mx-face { box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 4px var(--mx-brand); }
@media (hover: hover) and (pointer: fine) { .mx-pods-page .mx-pod-list a:hover .mx-face { box-shadow: 0 0 0 2px var(--mx-surface), 0 0 0 4px var(--mx-brand); transform: scale(1.03); } }
@media (max-width: 560px) { .mx-pods-page .mx-pod-list a { grid-template-columns: 64px minmax(0, 1fr); } .mx-pods-page .mx-pod-n, .mx-pods-page .mx-pod-n .mx-face { width: 64px; height: 64px; } }

/* designer credit at the end of the footer's last row: quiet, on the far side */
.mx-credit { margin-inline-start: auto; opacity: .85; }
.mx-credit a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mx-brand) 70%, transparent); text-underline-offset: 3px; }
.mx-credit a:hover, .mx-credit a:focus-visible { color: var(--mx-brand); }
@media (max-width: 640px) { .mx-credit { margin-inline-start: 0; flex-basis: 100%; } }
.mx-footer-legal { padding-inline-end: 76px; } /* keep the last row clear of the floating WhatsApp button */ @media (max-width: 640px) { .mx-footer-legal { padding-inline-end: 0; padding-bottom: 64px; } }

/* student area: my devices (mx/devices-screen.php) */
.mx-devs { margin: 40px 0 0; padding: 20px 22px; border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); background: var(--mx-surface); }
.mx-devs-lead, .mx-devs-note { color: var(--mx-ink-2); font-size: .9375rem; }
.mx-devs-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.mx-devs-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; border-radius: var(--mx-radius); background: var(--mx-paper); }
.mx-devs-list li.is-gone { opacity: .5; text-decoration: line-through; }
.mx-devs-name { font-weight: 700; flex: 1 1 200px; }
.mx-devs-last { color: var(--mx-ink-2); font-size: .875rem; }
.mx-devs-rm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex-basis: 100%; }
.mx-devs-rm input { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); background: var(--mx-surface); color: var(--mx-ink); font: inherit; }
.mx-devs-msg { font-size: .875rem; }

/* ---------- /jobs/: lecturer recruitment (18.10.2026) ---------- */
.mx-jobs { padding-block: clamp(20px, 3vw, 36px) var(--mx-section); }
.mx-jobs-stats { list-style: none; margin: 0 0 clamp(28px, 4vw, 48px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mx-jobs-stats li { background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: 20px 22px; box-shadow: 0 0 0 1px var(--mx-tone); }
.mx-jobs-stats b { display: block; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 900; line-height: 1; color: var(--mx-ink); font-variant-numeric: tabular-nums; }
.mx-jobs-stats span { color: var(--mx-ink-2); font-weight: 600; }
.mx-jobs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.mx-jobs-h { margin: 40px 0 14px; font-size: var(--mx-t-h2, 1.75rem); font-weight: 900; }
.mx-jobs-main > .mx-jobs-h:first-child { margin-top: 0; }
.mx-jobs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mx-jobs-list li { display: flex; gap: 14px; align-items: flex-start; background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: 18px 20px; box-shadow: 0 0 0 1px var(--mx-tone); }
.mx-jobs-list li > .mx-i { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--mx-brand-soft, #FFF4DC); color: var(--mx-ink); }
.mx-jobs-list h3 { margin: 2px 0 4px; font-size: 1.0625rem; font-weight: 800; }
.mx-jobs-list p { margin: 0; color: var(--mx-ink-2); line-height: 1.6; }
.mx-jobs-who { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mx-jobs-who li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.mx-jobs-who .mx-i { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--mx-green, #1E6B45); }
.mx-jobs .mx-steps h3 { margin: 6px 0 4px; font-size: var(--mx-t-h3); font-weight: 800; }
.mx-jobs .mx-faq { display: grid; gap: 8px; }
.mx-jobs .mx-acc-body p { margin: 0; padding: 0 22px 20px; color: var(--mx-ink-2); line-height: 1.7; }
.mx-jobs-form { display: grid; gap: 12px; margin-top: 4px; }
.mx-jobs-form label { display: grid; gap: 5px; font-weight: 700; font-size: .9375rem; color: var(--mx-ink); }
.mx-jobs-form small { font-weight: 500; color: var(--mx-ink-3); }
.mx-jobs-form input, .mx-jobs-form textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); background: var(--mx-paper); font: inherit; font-weight: 500; color: var(--mx-ink); }
.mx-jobs-form textarea { resize: vertical; min-height: 92px; }
.mx-jobs-form input:focus, .mx-jobs-form textarea:focus { outline: none; border-color: var(--mx-ink); background: var(--mx-surface); }
.mx-jobs-form [aria-invalid="true"] { border-color: #B42318; }
.mx-jobs-form .mx-btn { width: 100%; margin-top: 4px; }
.mx-jobs-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mx-jobs-out { margin: 0; font-weight: 700; min-height: 1.4em; }
.mx-jobs-out.is-ok { color: var(--mx-green, #1E6B45) !important; }
.mx-jobs-out.is-err { color: #B42318 !important; }
.mx-jobs-alt { font-size: .875rem; }
.mx-jobs-alt a { color: var(--mx-ink); font-weight: 700; }
@media (max-width: 960px) {
	.mx-jobs-grid { grid-template-columns: minmax(0, 1fr); }
	.mx-jobs-card { position: static; }
}
@media (max-width: 640px) {
	.mx-jobs-list { grid-template-columns: minmax(0, 1fr); }
	.mx-jobs-stats { gap: 8px; }
	.mx-jobs-stats li { padding: 14px 12px; }
	.mx-jobs-stats span { font-size: .8125rem; }
}
.mx-jobs .mx-acc { background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); }
.mx-jobs .mx-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; font-weight: 700; font-size: 1.0625rem; cursor: pointer; list-style: none; }
.mx-jobs .mx-acc summary::-webkit-details-marker { display: none; }
.mx-jobs .mx-acc summary .mx-i { flex: none; transition: transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-jobs .mx-acc[open] summary .mx-i { transform: rotate(180deg); }
body.mx .mx-jobs .mx-faq details summary::after { display: none; }
.mx-jobs-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 960px) { .mx-jobs-card { order: 2; } }

/* Lecturers page: "רוצים להצטרף לנבחרת?" (owner 18.10.2026) */
.mx-team-photo.mx-team-plus { place-items: center; background: transparent !important; border: 2px dashed var(--mx-line); color: var(--mx-ink-3); font-size: 4rem; font-weight: 300; line-height: 1; transition: border-color var(--mx-t-ui) var(--mx-ease-out), color var(--mx-t-ui) var(--mx-ease-out); }
@media (hover: hover) and (pointer: fine) { .mx-team-join a:hover .mx-team-plus { border-color: var(--mx-brand); color: var(--mx-ink); } }
.mx-team-cta { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; background: var(--mx-ink); color: #fff; border-radius: var(--mx-radius-lg); padding: clamp(24px, 4vw, 44px); }
.mx-team-cta-k { margin: 0 0 6px; color: var(--mx-brand) !important; font-weight: 800; font-size: .9375rem; }
.mx-team-cta h2 { margin: 0 0 10px; font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 900; color: #fff; }
.mx-team-cta p { margin: 0 0 14px; color: #CFD8E1; max-width: 62ch; }
.mx-team-cta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mx-team-cta li { display: flex; gap: 10px; align-items: flex-start; color: #fff; font-weight: 600; }
.mx-team-cta li .mx-i { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--mx-brand); }
.mx-team-cta-go { display: grid; gap: 10px; min-width: 220px; }
.mx-team-cta .mx-btn-line { color: #fff !important; border-color: rgba(255, 255, 255, .6); }
@media (max-width: 760px) { .mx-team-cta { grid-template-columns: minmax(0, 1fr); } .mx-team-cta-go { min-width: 0; } }
.mx-jobs-kind { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-jobs-kind legend { padding: 0; margin-bottom: 5px; font-weight: 700; font-size: .9375rem; color: var(--mx-ink); }
.mx-jobs-form .mx-jobs-kind label { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 12px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); background: var(--mx-paper); font-weight: 600; cursor: pointer; }
.mx-jobs-form .mx-jobs-kind label:has(input:checked) { border-color: var(--mx-ink); background: var(--mx-surface); }
.mx-jobs-form .mx-jobs-kind input { width: 18px; min-height: 0; height: 18px; margin: 0; accent-color: var(--mx-ink); flex: none; }
.mx-jobs-list li > .mx-i { box-sizing: border-box; }
.mx-jobs-stats li { border-top: 4px solid var(--mx-brand); }
.mx-jobs-jump { display: none; margin: -16px 0 28px; }
.mx-jobs-jump .mx-btn { width: 100%; }
@media (max-width: 960px) { .mx-jobs-jump { display: block; } }
#apply { scroll-margin-top: calc(var(--mx-header-h, 72px) + 16px); }
.mx-jobs-who strong { font-weight: 900; }
.mx-jobs-help { display: block; font-weight: 500 !important; color: var(--mx-ink-2) !important; line-height: 1.5; }

/* course pass offer (mx_pass_offer_html) */
.mx-pass-offer { margin-top: clamp(40px, 6vw, 72px); }
.mx-pass-cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mx-pass-card { background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: 22px; display: grid; gap: 6px; box-shadow: 0 0 0 1px var(--mx-tone); }
.mx-pass-card.is-mid { box-shadow: 0 0 0 2px var(--mx-brand); }
.mx-pass-n { margin: 0; font-weight: 800; color: var(--mx-ink-2); }
.mx-pass-price { margin: 0; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 900; color: var(--mx-ink); line-height: 1.1; }
.mx-pass-per { margin: 0 0 8px; color: var(--mx-ink-2); font-size: .9375rem; }
.mx-pass-fine { margin: 12px 0 0; color: var(--mx-ink-3); font-size: .875rem; }
@media (max-width: 760px) { .mx-pass-cards { grid-template-columns: minmax(0, 1fr); } }

/* reservists: eligibility check first (18.10.2026) */
.mx-mil-elig { background: var(--mx-surface); border-radius: var(--mx-radius-lg); padding: clamp(18px, 3vw, 28px); margin: 0 0 28px; box-shadow: 0 0 0 2px var(--mx-brand); }
.mx-mil-elig > p { margin: 4px 0 12px; color: var(--mx-ink-2); }
.mx-mil-q { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: q; }
.mx-mil-q li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--mx-tone); font-weight: 700; }
.mx-mil-yn { display: flex; gap: 8px; }
.mx-mil-yn label { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1.5px solid var(--mx-line); border-radius: 99px; cursor: pointer; font-weight: 600; min-height: 44px; }
.mx-mil-yn label:has(input:checked) { border-color: var(--mx-ink); background: var(--mx-tone); }
.mx-mil-yn input { accent-color: var(--mx-ink); margin: 0; }
.mx-mil-verdict { margin: 14px 0 0 !important; font-weight: 800; color: var(--mx-ink) !important; }
.mx-mil-verdict.is-ok { color: var(--mx-green, #1E6B45) !important; }
.mx-mil-verdict.is-warn { color: #8A4B00 !important; }

/* ambassadors, public (18.10.2026) */
.mx-amb-pub { padding-block: var(--mx-section); background: var(--mx-ink); color: #fff; }
.mx-amb-pub-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 56px; align-items: center; }
.mx-amb-pub .mx-h2 { color: #fff; }
.mx-amb-pub .mx-section-lead { color: #CFD8E1; }
.mx-amb-pub-k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--mx-brand); font-weight: 800; }
.mx-amb-pub-k .mx-i { width: 18px; height: 18px; }
.mx-amb-pub-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mx-amb-pub-facts li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--mx-radius-lg); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.mx-amb-pub-facts b { font-size: 1.75rem; font-weight: 900; color: var(--mx-brand); line-height: 1; }
.mx-amb-pub-facts span { color: #E3E9EF; font-weight: 600; }
.mx-amb-pub-state { display: flex; gap: 8px; align-items: center; font-weight: 700; color: #fff; }
.mx-amb-pub-msg { margin: 10px 0 0; font-weight: 700; color: #fff; min-height: 1.2em; }
.mx-amb-pub-fine { margin: 16px 0 0; color: #9FB0C0; font-size: .875rem; }
.mx-refer-amb { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-weight: 700; }
.mx-refer-amb .mx-i { width: 18px; height: 18px; color: var(--mx-brand); flex: none; }
.mx-refer-amb a { color: inherit; text-decoration: underline; text-decoration-color: var(--mx-brand); text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (max-width: 800px) { .mx-amb-pub-grid { grid-template-columns: minmax(0, 1fr); } .mx-amb-pub-facts li { grid-template-columns: 90px minmax(0, 1fr); } }

/* compact top menu 1024–1439 (owner 18.10.2026: the menu was hidden at 100% zoom in Chrome) */
.mx-nav-short { display: none; }
@media (max-width: 1439px) {
	.mx-nav-link { padding: 0 9px; font-size: .9375rem; gap: 3px; }
	.mx-nav-full { display: none; }
	.mx-nav-short { display: inline; }
	.mx-header-row { gap: 12px; }
	.mx-header .mx-btn-primary > span { display: none; } /* "הלימודים שלי" → icon only (the link keeps its name) */
}
@media (max-width: 1279px) {
	.mx-nav-link { padding: 0 7px; }
	.mx-nav-badge { display: none; }
	.mx-logo-word { font-size: 1.0625rem; }
	.mx-header .mx-header-actions .mx-btn { padding-inline: 12px; }
}

/* header bar: the menu sits in a soft rail, the current item is a white pill with an amber dot */
.mx-header { border-bottom: 1px solid transparent; }
.mx-header[data-scrolled] { background: color-mix(in srgb, var(--mx-surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--mx-line), 0 10px 30px -22px rgba(13, 39, 66, .35); }
@media (min-width: 1024px) {
	.mx-nav > ul { width: max-content; margin-inline: auto; padding: 4px; gap: 2px; border-radius: 14px; background: var(--mx-tone); box-shadow: inset 0 0 0 1px rgba(16, 24, 31, .04); }
	.mx-nav-link { height: 38px; border-radius: 10px; font-weight: 700; color: var(--mx-ink-2); }
	.mx-nav-link[aria-current="page"] { background: var(--mx-surface); color: var(--mx-ink); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 31, .08), 0 0 0 1px rgba(16, 24, 31, .04); }
	.mx-nav-link[aria-current="page"]::after { content: ""; position: absolute; bottom: 3px; inset-inline-start: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--mx-brand); transform: translateX(50%); }
	.mx-nav li { position: relative; }
	.mx-nav-link[aria-expanded="true"] { background: var(--mx-surface); color: var(--mx-ink); }
	@media (hover: hover) and (pointer: fine) { .mx-nav-link:hover { background: var(--mx-surface); color: var(--mx-ink); } }
}
@media (min-width: 1024px) { body.mx .mx-nav .mx-nav-link { font-family: inherit; font-weight: 700; font-size: .96875rem; letter-spacing: 0; } }








/* ---------- logo (18.10.2026, owner: "קוהרנטי", "תזוזה תמידית", "שינויי גוונים") ----------
 * One beat T = 3s drives everything, no pauses, no jumps:
 *   letters: a wave that crosses MARATHON once per beat; each letter warms toward amber at its crest;
 *   X: sways and glows on the same beat, right after the last letter;
 *   helmet floats up and brightens while the book floats down; the gear turns one full turn every 4 beats and shifts tone.
 * Static look = the design approved before (sizes, colours, font). Reduced motion: no animation. */
.mx-logo-mark, .mx-logo-svg { display: block; width: 46px; height: 46px; overflow: visible; flex: none; }
.mx-logo-svg .mxl-gear { fill: #8B96A2; transform-box: fill-box; transform-origin: center; }
.mx-logo-svg .mxl-book { stroke: #10181F; }
.mx-logo-svg .mxl-paper { fill: #fff; }
.mx-logo-svg .mxl-shine { opacity: 0; }
.mx-logo-word { font-size: 1.25rem; letter-spacing: .035em; line-height: 1; }
.mx-logo-word > span, .mx-logo-word > b { display: inline-block; }
body.mx .mx-logo-mark img { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.mx-logo { --mxl-t: 3s; }
	.mx-logo-word > span { will-change: transform; animation: mxl-letter var(--mxl-t) ease-in-out infinite; animation-delay: calc(var(--i) * var(--mxl-t) / 9 - var(--mxl-t)); }
	.mx-logo-word > b { will-change: transform; animation: mxl-x var(--mxl-t) ease-in-out infinite; animation-delay: calc(8 * var(--mxl-t) / 9 - var(--mxl-t)); }
	.mx-logo-svg .mxl-hat { will-change: transform; animation: mxl-hat-beat var(--mxl-t) ease-in-out infinite; }
	.mx-logo-svg .mxl-book { will-change: transform; animation: mxl-book-beat var(--mxl-t) ease-in-out infinite; }
	.mx-logo-svg .mxl-gear { will-change: transform; animation: mxl-turn calc(var(--mxl-t) * 4) linear infinite, mxl-gear-tone var(--mxl-t) ease-in-out infinite; }
}
@keyframes mxl-letter { 0%, 100% { transform: translateY(0); color: var(--mx-ink, #10181F); } 50% { transform: translateY(-.085em); color: #C97A00; } }
@keyframes mxl-x { 0%, 100% { transform: rotate(-8deg); color: #F5A000; } 50% { transform: rotate(8deg) scale(1.08); color: #FFB830; } }
@keyframes mxl-hat-beat { 0%, 100% { transform: translateY(0); filter: none; } 50% { transform: translateY(-1.8px); filter: brightness(1.12) saturate(1.08); } }
@keyframes mxl-book-beat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.2px); } }
@keyframes mxl-turn { to { transform: rotate(360deg); } }
@keyframes mxl-gear-tone { 0%, 100% { fill: #8B96A2; } 50% { fill: #6D7B8A; } }

/* behind the home truss: the animated logo, faint, with a line (owner 18.10.2026) */
.mx-sheet-brand { --mxl-t: 3s; position: absolute; z-index: -1; inset-inline: 0; top: 13%; display: grid; justify-items: center; gap: 6px; pointer-events: none; opacity: .09; }
.mx-sheet-brand .mx-logo-svg { width: min(56%, 300px); height: auto; aspect-ratio: 1; }
.mx-sheet-brand > span { font-weight: 900; font-size: clamp(1rem, 2.2vw, 1.5rem); color: var(--mx-ink); letter-spacing: .01em; white-space: nowrap; }
.mx-sheet .mx-fbd { position: relative; }
.mx-tb-logo { --mxl-t: 3s; }
.mx-tb-logo .mx-logo-svg { width: 28px; height: 28px; }
.mx-sheet-brand { top: 16%; opacity: .1; }
.mx-sheet-head { align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-sheet-gift { padding: 2px 10px; border-radius: 99px; background: var(--mx-brand-soft, #FFF4DC); color: #7A4A00; font-weight: 800; font-size: .75rem; white-space: nowrap; }
@media (max-width: 420px) { .mx-sheet-gift { order: 3; } }

/* logo lockup (owner 18.10.2026: bigger text, centred on the drawing; richer drawing) */
.mx-logo { gap: 12px; align-items: center; }
.mx-logo-mark, .mx-logo-svg { width: 50px; height: 50px; }
.mx-logo-word { font-size: 1.625rem; letter-spacing: .03em; line-height: 1; transform: translateY(.06em); }
.mx-logo-svg .mxl-pshade { fill: #E3E8EE; }
.mx-logo-svg .mxl-gear { stroke: #5E6B79; stroke-width: .9; }
@media (max-width: 1439px) { .mx-logo-word { font-size: 1.4375rem; } .mx-logo-mark, .mx-logo-svg { width: 46px; height: 46px; } }
@media (max-width: 1279px) { .mx-logo-word { font-size: 1.25rem; } }
@media (max-width: 640px) { .mx-logo-word { font-size: 1.3125rem; } .mx-logo-mark, .mx-logo-svg { width: 42px; height: 42px; } }
.mx-tb-logo { font-size: .9375rem; gap: 8px !important; }
.mx-tb-logo .mx-logo-svg { width: 32px; height: 32px; }
.mx-sheet-brand .mx-logo-svg { width: min(56%, 300px); height: auto; }

/* sign-in on the way to checkout: what is waiting in the cart (19.10.2026) */
.mx-auth-cart { margin: 0 0 16px; padding: 14px 16px; border-radius: var(--mx-radius-lg); background: var(--mx-surface); box-shadow: 0 0 0 2px var(--mx-brand); }
.mx-auth-cart-k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 800; color: var(--mx-ink); }
.mx-auth-cart-k .mx-i { width: 18px; height: 18px; }
.mx-auth-cart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mx-auth-cart li { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.mx-auth-cart li b { white-space: nowrap; }

/* logo book: a page turns every two beats (owner 19.10.2026). The turning page sits exactly on a page of the book,
 * so it is invisible at rest on either side; it turns around the spine (x = 32). */
.mx-logo-svg .mxl-flip { transform-box: view-box; transform-origin: 32px 0; }
.mx-logo-svg .mxl-flip > path:first-child { fill: #fff; }
@media (prefers-reduced-motion: no-preference) {
	.mx-logo-svg .mxl-flip { animation: mxl-page calc(var(--mxl-t, 3s) * 2) cubic-bezier(.45, 0, .25, 1) infinite; }
	.mx-logo-svg .mxl-flip > path:first-child { animation: mxl-page-tone calc(var(--mxl-t, 3s) * 2) cubic-bezier(.45, 0, .25, 1) infinite; }
}
@keyframes mxl-page { 0%, 40% { transform: scaleX(1); } 55% { transform: scaleX(.12) skewY(-9deg); } 70%, 100% { transform: scaleX(-1); } }
@keyframes mxl-page-tone { 0%, 40% { fill: #fff; } 55% { fill: #DCE3EA; } 70%, 100% { fill: #fff; } }

/* registration (19.10.2026) */
.mx-reg-code-open { display: block; margin: 4px 0 14px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--mx-ink); text-decoration: underline; text-decoration-color: var(--mx-brand); text-decoration-thickness: 2px; text-underline-offset: .25em; cursor: pointer; }
.um-register .um-field-mailbox_declaration .um-field-checkbox-option { font-weight: 600; }
.mx-reg-terms { margin: 6px 0 16px; }
.mx-reg-terms-l { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--mx-ink); cursor: pointer; line-height: 1.5; }
.mx-reg-terms-l input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--mx-ink); }
.mx-reg-terms-l a { color: var(--mx-ink); text-decoration: underline; text-decoration-color: var(--mx-brand); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.mx-reg-terms .um-field-error { margin-top: 6px; }
.mx-btn-auth { gap: 8px; }
.mx-btn-auth .mx-i { width: 18px; height: 18px; }
.mx-auth-new { font-weight: 700; }
.mx-auth-new a { color: var(--mx-ink); text-decoration: underline; text-decoration-color: var(--mx-brand); text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (max-width: 640px) { .mx-btn-auth { padding-inline: 12px; font-size: .875rem; } }
/* 19.10.2026: with the single "כניסה / הרשמה" button the short menu labels are used at every width (the header row is the same width above 1440) */
@media (min-width: 1440px) { .mx-nav-full { display: none; } .mx-nav-short { display: inline; } .mx-nav-link { padding: 0 11px; } }

/* floating cart (19.10.2026) */
.mx-cd { position: fixed; inset: 0; z-index: calc(var(--mx-z-header, 50) + 20); }
.mx-cd[hidden] { display: none; }
.mx-cd-scrim { position: absolute; inset: 0; background: rgba(13, 24, 31, .45); opacity: 0; transition: opacity 200ms ease; }
.mx-cd-panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 100vw); background: var(--mx-surface); box-shadow: -20px 0 50px -20px rgba(13, 39, 66, .4); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 240ms cubic-bezier(.2, .8, .2, 1); }
[dir="rtl"] .mx-cd-panel, html[dir="rtl"] .mx-cd-panel { transform: translateX(-100%); }
.mx-cd.is-open .mx-cd-scrim { opacity: 1; }
.mx-cd.is-open .mx-cd-panel { transform: none; }
.mx-cd-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--mx-tone); }
.mx-cd-head h2 { margin: 0; font-size: 1.25rem; font-weight: 900; }
.mx-cd-body { flex: 1; overflow-y: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.mx-cd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mx-cd-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; padding: 10px; border-radius: var(--mx-radius-lg); background: var(--mx-paper); transition: opacity 200ms ease, transform 200ms ease; }
.mx-cd-item.is-leaving { opacity: .35; transform: translateX(-8px); }
.mx-cd-item img, .mx-cd-ph { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--mx-tone); display: block; }
.mx-cd-it { min-width: 0; display: grid; gap: 2px; }
.mx-cd-it a { color: var(--mx-ink); font-weight: 800; text-decoration: none; line-height: 1.3; }
.mx-cd-it small { color: var(--mx-ink-3); font-weight: 600; }
.mx-cd-pr { white-space: nowrap; font-weight: 800; }
.mx-cd-rm { width: 40px; height: 40px; }
.mx-cd-sum { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--mx-tone); }
.mx-cd-line { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.mx-cd-line.is-off { color: var(--mx-green, #1E6B45); }
.mx-cd-line.is-total { font-size: 1.25rem; font-weight: 900; color: var(--mx-ink); }
.mx-cd-hint { margin: 0; color: var(--mx-ink-3); font-size: .875rem; }
.mx-cd-go { display: grid; gap: 8px; margin-top: auto; }
.mx-cd-empty { display: grid; gap: 8px; text-align: center; padding: 24px 6px; }
.mx-cd-empty-h { margin: 0; font-size: 1.25rem; font-weight: 900; }
.mx-cd-empty p { margin: 0; color: var(--mx-ink-2); }
.mx-cd-loading { color: var(--mx-ink-3); }
html.mx-cd-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mx-cd-panel, .mx-cd-scrim, .mx-cd-item { transition: none; } }
.mx-cd { z-index: 2147483000; } /* above the accessibility toolbar (pojo), which sits on the same edge */
.mx-cart-m { display: none; }
@media (max-width: 1023px) { .mx-cart-m { display: inline-grid; position: relative; } .mx-header .mx-user .mx-iconbtn[data-cart-open] { display: none; } }
.mx-co-rm { margin-inline-start: 8px; padding: 2px 10px; border: 1.5px solid var(--mx-line, #CDD5DD); border-radius: 99px; background: var(--mx-surface, #fff); font: inherit; font-size: .8125rem; font-weight: 700; color: var(--mx-ink-2, #3A4652); cursor: pointer; vertical-align: 1px; }
@media (hover: hover) and (pointer: fine) { .mx-co-rm:hover { border-color: #B42318; color: #B42318; } }
.mx-co-rm:disabled { opacity: .5; }
@media (max-width: 380px) { .mx-header-row { gap: 8px; } .mx-header-actions { gap: 0; } .mx-logo { gap: 8px; } .mx-logo-word { font-size: 1.125rem; } .mx-logo-mark, .mx-logo-svg { width: 38px; height: 38px; } } /* 360px: logo + cart + search + menu fit (19.10.2026) */

/* Google button: styled in mu-plugins/mx-google-login.php (claude-laptop, owner 19.10.2026) */

/* sign-in card: full-width button, links tidy under it */
body.mx .mx-auth-card .um-login .um-col-alt { display: flex; flex-direction: column; gap: 12px; }
body.mx .mx-auth-card .um-login .um-col-alt > div { width: 100% !important; float: none !important; padding: 0 !important; text-align: center; }
body.mx .mx-auth-card .um-login .um-col-alt .um-button, body.mx .mx-auth-card .um-login input[type="submit"].um-button { width: 100% !important; }
body.mx .mx-auth-card .um-login .um-col-alt-b { text-align: center; }
body.mx .mx-auth-card .um-login .um-col-alt > div:has(input[type="checkbox"]) { text-align: right; } body.mx .mx-auth-card .um-login .um-col-alt .um-field-checkbox { justify-content: flex-start; }

/* lecturers filter (19.10.2026) */
.mx-team-filter { display: grid; gap: 12px; margin: 0 0 clamp(20px, 3vw, 32px); }
.mx-team-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-team-chips .mx-chip bdi { opacity: .6; font-weight: 600; margin-inline-start: 2px; }
.mx-team-q { position: relative; display: block; max-width: 420px; }
.mx-team-q .mx-i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mx-ink-3); pointer-events: none; }
.mx-team-q input { width: 100%; height: 46px; padding-inline: 44px 14px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); background: var(--mx-surface); font: inherit; color: var(--mx-ink); }
.mx-team-q input:focus { outline: none; border-color: var(--mx-ink); }
.mx-team-count { margin: 0; min-height: 1.2em; font-weight: 700; color: var(--mx-ink-2); }
@media (max-width: 640px) { .mx-team-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--mx-gutter, 16px)); padding-inline: var(--mx-gutter, 16px); scrollbar-width: none; } .mx-team-chips .mx-chip { flex: none; } }

/* recommendations from other institutions (verified syllabus matches) */
.mx-reco { margin-top: clamp(32px, 5vw, 56px); }
.mx-reco-lead { margin: 0 0 14px; color: var(--mx-ink-2); max-width: 70ch; }
.mx-reco-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mx-reco-item { background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); overflow: hidden; }
.mx-reco-course > li, .mx-reco-course .mx-row { list-style: none; }
.mx-reco-fit summary { padding: 10px 16px; font-weight: 800; cursor: pointer; color: var(--mx-ink); border-top: 1px solid var(--mx-tone); }
.mx-reco-fit-in { padding: 0 16px 14px; }
.mx-reco-k { margin: 8px 0 4px; font-weight: 800; }
.mx-reco-yes, .mx-reco-no { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mx-reco-yes li::before { content: "✓ "; color: var(--mx-green, #1E6B45); font-weight: 900; }
.mx-reco-no li::before { content: "✗ "; color: #B42318; font-weight: 900; }
.mx-reco-src { margin: 10px 0 0; color: var(--mx-ink-3); font-size: .875rem; }
/* "המעבדה החינמית" in the menu, with a flask (owner 20.10.2026) */
.mx-nav-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--mx-brand, #F5A000); color: #170F00; margin-inline-end: 6px; }
.mx-nav-ic .mx-i { width: 15px; height: 15px; stroke-width: 2.2; }
@media (prefers-reduced-motion: no-preference) { .mx-nav-ic .mx-i { animation: mx-flask 3s ease-in-out infinite; transform-origin: 50% 90%; } }
@keyframes mx-flask { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 93% { transform: rotate(-4deg); } }
.mx-nav-lab-short { display: none; }
@media (max-width: 1499px) { .mx-nav-lab-full { display: none; } .mx-nav-lab-short { display: inline; } }

/* subject pages (SEO 20.10.2026) */
.mx-subj { padding-block: clamp(16px, 3vw, 32px) var(--mx-section); }
.mx-subj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.mx-subj-main > .mx-h3 { margin: 28px 0 12px; }
.mx-subj-main > .mx-h3:first-child { margin-top: 0; }
.mx-subj-inst { margin: 0 0 18px; }
.mx-subj-inst h3 { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 800; color: var(--mx-ink-2); }
.mx-subj-note { margin: 0 0 10px; color: var(--mx-ink-3); font-size: .9375rem; }
.mx-subj-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mx-subj-topics li { padding: 10px 14px; border-radius: var(--mx-radius); background: var(--mx-surface); box-shadow: 0 0 0 1px var(--mx-tone); font-weight: 600; }
.mx-subj-faq { display: grid; gap: 8px; }
.mx-subj-faq .mx-acc { background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: 0 0 0 1px var(--mx-tone); }
.mx-subj-faq .mx-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font-weight: 700; cursor: pointer; list-style: none; }
.mx-subj-faq .mx-acc summary::-webkit-details-marker { display: none; }
.mx-subj-faq .mx-acc-body p { margin: 0; padding: 0 20px 16px; color: var(--mx-ink-2); }
.mx-subj-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mx-subj-facts b { font-size: 1.25rem; font-weight: 900; color: var(--mx-ink); }
.mx-subj-hub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mx-subj-hub a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 18px 20px; border-radius: var(--mx-radius-lg); background: var(--mx-surface); box-shadow: 0 0 0 1px var(--mx-tone); text-decoration: none; color: var(--mx-ink); }
.mx-subj-hub b { font-size: 1.125rem; font-weight: 900; }
.mx-subj-hub span { grid-row: 2; color: var(--mx-ink-3); font-size: .9375rem; }
.mx-subj-hub .mx-i { grid-row: 1 / span 2; grid-column: 2; }
@media (max-width: 900px) { .mx-subj-grid { grid-template-columns: minmax(0, 1fr); } .mx-subj-topics { grid-template-columns: minmax(0, 1fr); } }
.mx-subj .mx-rows { grid-template-columns: minmax(0, 1fr) !important; }
body.mx .mx-subj-faq details summary::after { display: none; }
.mx-course-subj { margin: 6px 0 0; font-size: .9375rem; color: var(--mx-ink-2); }
.mx-course-subj a { color: var(--mx-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--mx-brand); text-decoration-thickness: 2px; text-underline-offset: .25em; }
/* home H1 starts with what people search (owner 20.10.2026: "מאשר כותרת"); the slogan stays the big line */
.mx-hero-kicker { display: block; margin: 0 0 12px; font-size: clamp(.9375rem, 1.4vw, 1.0625rem); font-weight: 800; letter-spacing: .01em; line-height: 1.4; color: var(--mx-ink-2); }
.mx-hero-kicker::before { content: ""; display: inline-block; width: 22px; height: 3px; border-radius: 2px; background: var(--mx-brand); vertical-align: middle; margin-inline-end: 10px; }

/* "חדש" badge + promotion of the truss builder (20.10.2026) */
.mx-new { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--mx-brand, #F5A000); color: #170F00; font-size: .6875rem; font-weight: 900; line-height: 1.5; vertical-align: 2px; margin-inline: 6px 0; }
.mx-tools-new { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 14px 18px; border-radius: var(--mx-radius-lg); background: var(--mx-brand-soft, #FFF4DC); color: var(--mx-ink); text-decoration: none; box-shadow: 0 0 0 1.5px var(--mx-brand, #F5A000); }
.mx-tools-new .mx-new { margin: 0; }
.mx-tools-new .mx-i { margin-inline-start: auto; }
.mx-sheet-build { margin: 8px 4px 0; font-weight: 700; }
.mx-sheet-build .mx-new { margin: 0 0 0 6px; }
.mx-sheet-build a, .mx-atlas-new a { color: var(--mx-ink); text-decoration: underline; text-decoration-color: var(--mx-brand); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.mx-atlas-new { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--mx-radius); background: var(--mx-brand-soft, #FFF4DC); font-weight: 600; }
.mx-atlas-new .mx-new { margin: 0 0 0 6px; }
.mx-fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--mx-radius); background: none; font: inherit; font-weight: 800; color: var(--mx-ink); cursor: pointer; text-align: start; }
.mx-fold bdi { margin-inline-start: auto; font-size: .75rem; color: var(--mx-ink-3); background: var(--mx-tone); border-radius: 99px; padding: 0 8px; }
.mx-fold::after { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 200ms ease; opacity: .6; flex: none; }
.mx-fold[aria-expanded="true"]::after { transform: rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .mx-fold:hover { background: var(--mx-paper); } }
/* folds: arrow down when closed, up when open; the wide lab menu is one column now that categories fold */
.mx-fold::after, .mx-lab-side-g > summary::after { border: 0 !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: rotate(45deg) translateY(-2px); }
.mx-fold[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.mx-sub.mx-sub-wide { min-width: 340px; max-height: min(70vh, 640px); overflow-y: auto; }
.mx-sub.mx-sub-wide ul { columns: auto !important; column-count: 1 !important; display: grid; grid-template-columns: minmax(0, 1fr) !important; }