/* ============================================================
   Мафия Харьков — стили главной страницы.
   Обвязка (шапка, меню, подвал) — в chrome.css.

   Файл подключается ТОЛЬКО на странице с шаблоном
   «Главная — Мафия Харьков» (см. functions.php), поэтому
   остальные страницы сайта он не задевает.

   Все свои классы начинаются на mk- — чтобы гарантированно
   не столкнуться с классами Neve, Elementor и плагинов.
   ============================================================ */

/* Шрифт и токены живут в chrome.css — он грузится на всех страницах. */

/* ── База страницы ──────────────────────────────────────────
   body.mk-home — специфичность выше, чем у правил Neve для body. */
body.mk-home {
	background: var(--mk-ink);
	color: var(--mk-text);
	font-family: var(--mk-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
/* Своя область — свой border-box. Глобально не трогаем, чтобы не задеть
   шапку, подвал и админ-бар; но и полагаться на сброс от Neve нельзя —
   без него .mk-wrap раздувается на величину боковых полей. */
.mk-home .mk-main,
.mk-home .mk-main *,
.mk-home .mk-main *::before,
.mk-home .mk-main *::after { box-sizing: border-box; }

.mk-home .mk-main { margin: 0; padding: 0; max-width: none; }
.mk-home .mk-main img { max-width: 100%; display: block; }
/* Цвет ссылок здесь НЕ наследуем: у `.mk-home .mk-main a` специфичность
   выше, чем у `.mk-home .mkh-btn-red`, и `inherit` перекрашивал бы кнопки
   в цвет текста. Каждая ссылка на странице красится своим правилом. */
.mk-home .mk-main a { text-decoration: none; }
.mk-home .mk-main :focus-visible { outline: 2px solid var(--mk-red-hi); outline-offset: 3px; border-radius: 4px; }
.mk-home [id] { scroll-margin-top: 96px; }

.mk-wrap {
	width: 100%;
	max-width: var(--mk-max);
	margin-inline: auto;
	padding-inline: var(--mk-gut);
}

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */

/* Все заголовки главной — фирменным шрифтом. Без этого безклассовые
   заголовки (карточки, календарь «Ближайшие игры») наследуют серифный
   шрифт Neve, который тот навязывает по тегу h2/h3. */
.mk-home .mk-main h1,
.mk-home .mk-main h2,
.mk-home .mk-main h3,
.mk-home .mk-main h4,
.mk-home .mk-main h5,
.mk-home .mk-main h6 { font-family: var(--mk-display); }

.mk-display {
	font-family: var(--mk-display);
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: .86;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}
/* Потолок 140px: «ХАРЬКОВ» в Oswald ≈ 3.9em, а левая колонка на широких
   экранах сжимается до 568px. 3.9 × 140 = 546 — влезает с запасом. */
h1.mk-display { font-size: clamp(58px, 11.2vw, 140px); }

/* Единственный заголовок секции — отсюда кегль заголовочного размера
   и умеренная разрядка (на крупном кегле большая разрядка разваливает
   слово). Заголовок белый: красный оставлен кнопкам, счётчику мест и
   первой тройке рейтинга, чтобы он продолжал на что-то указывать.
   Начало секции размечает короткая красная черта. */
.mk-over {
	position: relative;
	display: block;
	font-family: var(--mk-display);
	font-size: clamp(24px, 3.2vw, 40px);
	font-weight: 600;
	letter-spacing: .075em;
	line-height: 1.05;
	text-transform: uppercase;
	color: #fff;
	padding-top: 22px;
	margin: 0 0 20px;
}
.mk-over::before {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 52px; height: 3px;
	background: var(--mk-red-hi);
	border-radius: 2px;
}
.mk-final-in .mk-over::before { left: 50%; transform: translateX(-50%); }

.mk-lede {
	color: var(--mk-muted);
	font-size: clamp(16px, 1.25vw, 18.5px);
	line-height: 1.65;
	margin: 0;
}
.mk-sect-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 60px); }
.mk-sect-head .mk-lede { margin-top: 18px; }

/* ── Кнопки ─────────────────────────────────────────────────
   Neve красит ссылки и кнопки довольно настойчиво, поэтому цвет
   и фон здесь задаются явно. */
.mk-home .mkh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 34px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: .005em;
	white-space: nowrap;
	text-decoration: none;
	transition: transform .22s var(--mk-ease), background .22s var(--mk-ease),
	            box-shadow .22s var(--mk-ease), border-color .22s var(--mk-ease), color .22s var(--mk-ease);
}
.mk-home .mkh-btn:hover { transform: translateY(-2px); }
.mk-home .mkh-btn:active { transform: translateY(0); }

.mk-home .mkh-btn-red {
	background-image: linear-gradient(135deg, var(--mk-red-hi), var(--mk-red-dp));
	color: #fff;
	box-shadow: 0 14px 30px rgba(139, 15, 42, .34);
}
.mk-home .mkh-btn-red:hover { box-shadow: 0 18px 40px rgba(139, 15, 42, .46); color: #fff; }

.mk-home .mkh-btn-light { background: var(--mk-white); color: #121214; border-color: var(--mk-white); }
.mk-home .mkh-btn-light:hover { background: #fff; border-color: #fff; color: #121214; }

.mk-home .mkh-btn-ghost { border-color: var(--mk-line-2); color: var(--mk-text); }
.mk-home .mkh-btn-ghost:hover { border-color: var(--mk-white); color: #fff; }

.mkh-btn-block { width: 100%; }

/* ============================================================
   ГЕРОЙ
   ============================================================ */
.mk-hero { position: relative; background: var(--mk-ink-deep); overflow: hidden; }
.mk-hero-bg {
	position: absolute; inset: 0;
	background-position: center 26%;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: .34;
	filter: grayscale(.5) contrast(1.06);
}
.mk-hero-veil {
	position: absolute; inset: 0;
	background:
		radial-gradient(120% 80% at 78% 10%, rgba(195, 22, 59, .20), transparent 58%),
		linear-gradient(100deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .78) 42%, rgba(8, 8, 10, .60) 100%),
		linear-gradient(180deg, rgba(8, 8, 10, .34) 0%, rgba(8, 8, 10, .42) 52%, var(--mk-ink) 100%);
}
.mk-hero-in { position: relative; padding-block: clamp(56px, 7vw, 104px) clamp(28px, 3vw, 44px); }
.mk-hero-grid {
	display: grid;
	gap: clamp(36px, 4.4vw, 72px);
	grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr);
	align-items: center;
}
.mk-hero h1 { margin-bottom: clamp(20px, 2.2vw, 28px); }
/* Единственная подпись под названием — поэтому крупнее обычного lede */
.mk-hero-lede {
	max-width: 560px;
	font-size: clamp(17px, 1.65vw, 22px);
	color: #C9C4BD;
	font-weight: 300;
	letter-spacing: .005em;
	line-height: 1.45;
	margin: 0;
}
.mk-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }

/* ── Кнопка прямой трансляции (только когда идёт эфир) ──────
   Лежит в верхнем пустом промежутке героя, по центру, поверх фона.
   position:absolute — из потока выведена, поэтому контент НЕ сдвигается
   ни когда кнопка есть, ни когда её нет; отступы остаются прежними. */
.mk-live {
	position: absolute;
	top: clamp(10px, 1.6vw, 24px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: inline-flex; align-items: center; gap: 12px;
	padding: 12px 22px;
	max-width: calc(100% - 2 * var(--mk-gut));
	border: 1px solid rgba(224, 38, 78, .55);
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(195, 22, 59, .3), rgba(195, 22, 59, .12));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff; text-decoration: none; white-space: nowrap;
	transition: border-color .2s var(--mk-ease), background .2s var(--mk-ease), transform .2s var(--mk-ease);
}
.mk-live:hover {
	border-color: var(--mk-red-hi);
	background: linear-gradient(90deg, rgba(195, 22, 59, .44), rgba(195, 22, 59, .16));
	transform: translateX(-50%) translateY(-2px);
}
.mk-live-dot {
	flex: none; width: 11px; height: 11px; border-radius: 50%;
	background: #ff2d4e; box-shadow: 0 0 0 0 rgba(255, 45, 78, .7);
	animation: mk-live-pulse 1.6s infinite;
}
@keyframes mk-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 45, 78, .6); }
	70%  { box-shadow: 0 0 0 12px rgba(255, 45, 78, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 45, 78, 0); }
}
.mk-live-txt { font-family: var(--mk-display); font-weight: 600; font-size: clamp(15px, 1.6vw, 19px); text-transform: uppercase; letter-spacing: .01em; }
.mk-live-cta { font-size: 14px; color: var(--mk-text); white-space: nowrap; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .mk-live-dot { animation: none; } }
@media (max-width: 600px) {
	.mk-live { gap: 9px; padding: 9px 16px; top: 8px; }
	.mk-live-cta { display: none; }
	.mk-live-txt { font-size: 14px; }
}

/* ── Таблица рейтинга ───────────────────────────────────── */
.mk-rate {
	margin-top: clamp(46px, 5vw, 76px);
	padding-top: clamp(24px, 2.6vw, 34px);
	border-top: 1px solid var(--mk-line);
}
.mk-rate-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.mk-rate-top .mk-over { margin: 0; }
.mk-home .mk-rate-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	color: var(--mk-muted);
	border-bottom: 1px solid var(--mk-line-2);
	padding-bottom: 2px;
	transition: color .2s var(--mk-ease), border-color .2s var(--mk-ease);
}
.mk-home .mk-rate-link:hover { color: #fff; border-color: #fff; }
.mk-rate-link svg { width: 11px; height: 11px; flex: none; }

/* table-layout:fixed — чтобы заданные ширины колонок соблюдались,
   а длинный ник обрезался многоточием, а не ломал сетку. */
.mk-rate-tbl {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	margin: 0;
}
/* Числовые колонки — правый край, фиксированная ширина и отступ слева,
   иначе значения слипаются в одну строку. */
.mk-rate-tbl th,
.mk-rate-tbl td { text-align: right; white-space: nowrap; padding-left: 24px; border: 0; }
.mk-rate-tbl th:first-child,
.mk-rate-tbl td:first-child { padding-left: 0; text-align: center; width: 46px; }
.mk-rate-tbl th:nth-child(2),
.mk-rate-tbl td:nth-child(2) { text-align: left; padding-left: 14px; width: auto; }
.mk-rate-tbl th:nth-child(3),
.mk-rate-tbl td:nth-child(3) { width: 132px; }
.mk-rate-tbl th:nth-child(4),
.mk-rate-tbl td:nth-child(4) { width: 78px; }
.mk-rate-tbl th:nth-child(5),
.mk-rate-tbl td:nth-child(5) { width: 98px; }

.mk-rate-tbl th {
	font-family: var(--mk-display);
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mk-dim);
	padding-top: 0;
	padding-bottom: 12px;
	background: none;
}
.mk-rate-tbl td {
	padding-top: 12px;
	padding-bottom: 12px;
	border-top: 1px solid var(--mk-line);
	font-size: 15px;
	color: var(--mk-muted);
	background: none;
}
.mk-rate-tbl tbody tr { transition: background .18s var(--mk-ease); background: none; }
.mk-rate-tbl tbody tr:hover { background: rgba(255, 255, 255, .035); }

/* Граница диапазона по числу сыгранных игр (0–9 / 10–19 / 20–29 / 30–39):
   заметнее обычной межстрочной линии, чтобы диапазоны читались. */
.mk-rate-tbl tbody tr.mk-r-band td { border-top-color: rgba(255, 255, 255, .3); }

.mk-r-pos { font-family: var(--mk-display); font-weight: 600; font-size: 17px; color: var(--mk-dim); }
.mk-top3 .mk-r-pos { color: var(--mk-red-hi); }
.mk-r-who { font-size: 16px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.mk-r-koef { color: var(--mk-text); font-weight: 600; }
.mk-r-wr { color: var(--mk-text); }
.mk-sm { display: none; }

.mk-rate-note { margin: 14px 0 0; font-size: 12.5px; color: var(--mk-dim); line-height: 1.5; }
.mk-home .mk-rate-note a { color: var(--mk-muted); text-decoration: underline; text-underline-offset: 2px; }
.mk-home .mk-rate-note a:hover { color: #fff; }

/* ── Карточка «Ближайшие игры» ──────────────────────────── */
.mk-cal {
	background: rgba(23, 23, 26, .72);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border: 1px solid var(--mk-line-2);
	border-radius: 20px;
	padding: clamp(20px, 2vw, 26px);
	box-shadow: 0 34px 80px rgba(0, 0, 0, .58);
}
.mk-cal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.mk-cal-top h2 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.mk-cal-top em { font-style: normal; font-size: 12.5px; color: var(--mk-dim); }

.mk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mk-day {
	position: relative;
	padding: 11px 2px 15px;
	border-radius: 11px;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, .035);
	text-align: center;
	color: var(--mk-dim);
	cursor: default;
	transition: background .2s var(--mk-ease), border-color .2s var(--mk-ease),
	            color .2s var(--mk-ease), transform .2s var(--mk-ease);
}
.mk-day u {
	display: block; font-family: var(--mk-display); font-size: 11px; font-weight: 500;
	text-transform: uppercase; letter-spacing: .12em; text-decoration: none; opacity: .75;
}
.mk-day b {
	display: block; margin-top: 4px; font-family: var(--mk-display); font-size: 22px;
	font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.mk-day i {
	position: absolute; left: 50%; bottom: 7px; translate: -50% 0;
	width: 5px; height: 5px; border-radius: 50%; background: var(--mk-red-hi);
}
.mk-day.mk-has { color: var(--mk-text); cursor: pointer; }
.mk-day.mk-has:hover { background: rgba(255, 255, 255, .08); border-color: var(--mk-line-2); transform: translateY(-2px); }
.mk-day.mk-today b { color: #fff; }
.mk-day.mk-today u { color: var(--mk-red-hi); opacity: 1; }
.mk-day.mk-on {
	background-image: linear-gradient(160deg, var(--mk-red-hi), var(--mk-red-dp));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 10px 24px rgba(139, 15, 42, .4);
}
.mk-day.mk-on u { color: rgba(255, 255, 255, .8); opacity: 1; }
.mk-day.mk-on i { background: #fff; }
.mk-day.mk-off { opacity: .46; }

.mk-pick {
	margin-top: 16px;
	padding: 15px 17px;
	border-radius: 13px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid var(--mk-line);
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
}
.mk-pick-l { flex: 1 1 auto; min-width: 0; }
.mk-pick-t { font-size: 15.5px; font-weight: 650; color: #fff; line-height: 1.3; }
.mk-pick-s { margin-top: 5px; font-size: 13px; color: var(--mk-dim); line-height: 1.4; }
.mk-home .mk-pick-s a {
	color: var(--mk-muted); text-decoration: underline; text-underline-offset: 2px;
	transition: color .18s var(--mk-ease);
}
.mk-home .mk-pick-s a:hover { color: #fff; }
.mk-pick-r { flex: none; font-size: 13px; font-weight: 650; white-space: nowrap; }
.mk-seats-ok { color: #6FBF8B; }
.mk-seats-low { color: var(--mk-red-hi); }

.mk-cal-go { margin-top: 16px; }
.mk-cal-note { margin: 12px 2px 0; font-size: 12px; color: var(--mk-dim); text-align: center; line-height: 1.45; }
.mk-home .mk-cal-note a { color: var(--mk-muted); text-decoration: underline; text-underline-offset: 2px; }
.mk-home .mk-cal-note a:hover { color: #fff; }

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.mk-sect { padding-block: var(--mk-pad); }
.mk-sect + .mk-sect { padding-top: 0; }
.mk-sect-first { padding-top: clamp(56px, 6vw, 84px); }

.mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.mk-card {
	background: var(--mk-surface);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-r);
	overflow: hidden;
	transition: border-color .25s var(--mk-ease), transform .25s var(--mk-ease), background .25s var(--mk-ease);
}
.mk-card:hover { border-color: var(--mk-line-2); background: var(--mk-surface-2); transform: translateY(-4px); }
.mk-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: #0D0D0F; }
.mk-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--mk-ease); filter: grayscale(.2); }
.mk-card:hover .mk-card-img img { transform: scale(1.045); filter: none; }
.mk-card-b { padding: 22px 24px 26px; }
.mk-card-b h3 { margin: 0 0 9px; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.012em; }
.mk-card-b p { margin: 0; font-size: 14.5px; color: var(--mk-muted); line-height: 1.6; }

/* Сплиты: история и основатели */
.mk-split {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(30px, 4.4vw, 72px);
	align-items: center;
}
.mk-split.mk-flip > .mk-split-media { order: 2; }
.mk-split-media { position: relative; border-radius: var(--mk-r); overflow: hidden; background: #0D0D0F; }
.mk-split-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(.25) contrast(1.03); }
.mk-split-media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 10, .5));
}
.mk-split-body p { color: var(--mk-muted); font-size: 16.5px; line-height: 1.7; margin: 0 0 16px; }
.mk-split-body p:last-of-type { margin-bottom: 0; }
.mk-split-body .mkh-btn { margin-top: 28px; }
.mk-split-body strong { color: var(--mk-text); font-weight: 650; }

.mk-who { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.mk-who span {
	padding: 9px 16px; border-radius: 999px; border: 1px solid var(--mk-line-2);
	font-size: 14px; color: var(--mk-text);
}
.mk-who span b { color: #fff; font-weight: 700; }

/* ── Победители сезонов ─────────────────────────────────── */
.mk-champs { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.2vw, 16px); }
/* Браузерный отступ у <figure> — 40px по бокам, без сброса плитки
   съёживаются внутри своих колонок. */
.mk-champ { position: relative; border-radius: 12px; overflow: hidden; background: #0D0D0F; margin: 0; }
.mk-champ img {
	width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	filter: grayscale(1) contrast(1.06) brightness(.85);
	transition: filter .45s var(--mk-ease), transform .55s var(--mk-ease);
}
.mk-champ:hover img { filter: none; transform: scale(1.05); }
.mk-champ-tag {
	position: absolute; inset: auto 0 0 0; margin: 0; padding: 32px 13px 12px;
	background: linear-gradient(180deg, transparent, rgba(6, 6, 8, .9) 62%);
}
.mk-champ-tag b { display: block; font-size: 14.5px; font-weight: 700; color: #fff; letter-spacing: -.01em; line-height: 1.2; }
.mk-champ-tag span {
	display: block; margin-top: 3px; font-family: var(--mk-display); font-size: 12.5px;
	font-weight: 600; letter-spacing: .1em; color: var(--mk-red-hi); font-variant-numeric: tabular-nums;
}

/* ── Финальный призыв ───────────────────────────────────── */
.mk-final {
	position: relative; overflow: hidden; border-radius: 20px;
	border: 1px solid var(--mk-line-2); background: var(--mk-surface);
}
.mk-final-bg {
	position: absolute; inset: 0;
	background-position: center 34%; background-size: cover; background-repeat: no-repeat;
	opacity: .16; filter: grayscale(.6);
}
.mk-final-veil {
	position: absolute; inset: 0;
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(195, 22, 59, .24), transparent 62%),
		linear-gradient(180deg, rgba(16, 16, 18, .72), rgba(16, 16, 18, .9));
}
.mk-final-in { position: relative; padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px); text-align: center; }
/* Отступ до кнопок равен прежнему — тому, что складывался из высоты
   удалённого абзаца. Поле заголовка обнулено, чтобы вся величина
   задавалась одним свойством: у inline-flex поля с соседом
   не схлопываются и просто сложились бы. */
.mk-final-in .mk-over { margin-bottom: 0; }
.mk-final-cta {
	display: inline-flex; flex-direction: column; gap: 14px;
	margin-top: clamp(72px, 11vw, 138px);
}
.mk-final-row { display: flex; gap: 14px; }
/* Ширину задаёт строка из двух кнопок, нижняя тянется ровно по ней */
.mk-final-wide { width: 100%; }

/* ── Появление при прокрутке ────────────────────────────────
   Прячем только когда JS точно есть (класс mk-js ставится в <head>).
   Без него страница видна целиком — это страховка от пустого экрана. */
.mk-js .mk-rise { opacity: 0; transform: translateY(20px); }
.mk-js .mk-rise.mk-seen {
	opacity: 1; transform: none;
	transition: opacity .75s var(--mk-ease), transform .75s var(--mk-ease);
}
@media (prefers-reduced-motion: reduce) {
	.mk-js .mk-rise { opacity: 1; transform: none; }
	.mk-js .mk-rise.mk-seen { transition: none; }
	.mk-home .mkh-btn:hover,
	.mk-card:hover,
	.mk-day.mk-has:hover { transform: none; }
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1080px) {
	.mk-hero-grid { grid-template-columns: 1fr; gap: 44px; }
	.mk-cal { max-width: 560px; }
	.mk-champs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
	.mk-cards { grid-template-columns: 1fr; }
	.mk-split { grid-template-columns: 1fr; gap: 30px; }
	.mk-split.mk-flip > .mk-split-media { order: 0; }
	.mk-split-media img { aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) {
	.mk-lg { display: none; }
	.mk-sm { display: inline; }
	.mk-rate-tbl th { font-size: 10.5px; letter-spacing: .08em; }
	.mk-rate-tbl td { font-size: 13.5px; padding-top: 10px; padding-bottom: 10px; }
	.mk-rate-tbl th,
	.mk-rate-tbl td { padding-left: 10px; }
	.mk-rate-tbl th:first-child,
	.mk-rate-tbl td:first-child { padding-left: 0; width: 26px; }
	.mk-rate-tbl th:nth-child(2),
	.mk-rate-tbl td:nth-child(2) { padding-left: 8px; }
	.mk-rate-tbl th:nth-child(3),
	.mk-rate-tbl td:nth-child(3) { width: 56px; }
	.mk-rate-tbl th:nth-child(4),
	.mk-rate-tbl td:nth-child(4) { width: 38px; }
	.mk-rate-tbl th:nth-child(5),
	.mk-rate-tbl td:nth-child(5) { width: 42px; }
	.mk-r-pos { font-size: 15px; }
	.mk-r-who { font-size: 14.5px; }
	.mk-champs { grid-template-columns: repeat(2, 1fr); }
	.mk-hero-btns .mkh-btn { flex: 1 1 100%; }
	.mk-final-cta { display: flex; width: 100%; }
	.mk-final-row { flex-direction: column; }
	.mk-week { gap: 4px; }
	.mk-day { padding: 9px 0 14px; }
	.mk-day b { font-size: 16px; }
}