/* ==========================================================================
   MX1 blog archive — the home page's brand system applied to reading:
   navy surfaces, electric-blue accents, chamfered MX1 cuts on every shape.
   Scoped to .mx1bl.
   ========================================================================== */
.mx1bl {
	--bl-blue: #365de3;
	--bl-blue-2: #4672f9;
	--bl-glow: #5f98fd;
	--bl-navy: #080e38;
	--bl-deep: #0f172a;
	--bl-paper: #f2f4ff;
	--bl-mute: rgba(242, 244, 255, 0.7);
	--bl-faint: rgba(242, 244, 255, 0.5);
	--bl-line: rgba(242, 244, 255, 0.12);
	--bl-glass: rgba(242, 244, 255, 0.045);
	--bl-cut: 18px;
	--bl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--bl-gutter: clamp(1rem, 0.4rem + 3vw, 3.5rem);
	--bl-chamfer: polygon(var(--bl-cut) 0, 100% 0, 100% calc(100% - var(--bl-cut)), calc(100% - var(--bl-cut)) 100%, 0 100%, 0 var(--bl-cut));
	--bl-font: "MX1 Readex", "Readex Pro", Tajawal, system-ui, sans-serif;

	position: relative; isolation: isolate;
	width: 100vw; margin-inline: calc(50% - 50vw);
	background: linear-gradient(180deg, var(--bl-navy) 0%, var(--bl-deep) 22%, #0b1238 60%, var(--bl-deep) 100%);
	color: var(--bl-paper); text-align: start;
	font-family: var(--bl-font); font-size: 16px; line-height: 1.7;
}
/* The site's custom CSS forces Tajawal on h1,h2,h3,span,div with !important. */
.mx1bl, .mx1bl :is(h1, h2, h3, h4, p, span, div, a, li, button, input, small, strong, time, em, label) { font-family: var(--bl-font) !important; }
.mx1bl *, .mx1bl *::before, .mx1bl *::after { box-sizing: border-box; }
.mx1bl :where(h1, h2, h3, h4, p, ul, ol, li, figure) { margin: 0; padding: 0; letter-spacing: normal; text-transform: none; }
.mx1bl :where(ul, ol) { list-style: none; }
.mx1bl a { color: inherit; text-decoration: none; }
.mx1bl svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx1bl img { max-width: 100%; height: auto; }
.mx1bl :focus-visible { outline: 2px solid var(--bl-glow); outline-offset: 3px; }
.mx1bl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* WoodMart chrome around our template. */
body.mx1-blog-page { overflow-x: clip; background: var(--bl-navy, #080e38); }
body.mx1-blog-page .page-title { display: none !important; }
/* These pages set the header to overlay the content; our hero starts below the bar instead. */
body.mx1-blog-page .whb-header.whb-overcontent .whb-main-header { position: relative !important; }
body.mx1-blog-page .main-page-wrapper { padding-top: 0 !important; background: #080e38; }
body.mx1-blog-page .main-page-wrapper > .container,
body.mx1-blog-page .content-layout-wrapper { padding-top: 0 !important; margin-top: 0 !important; }

/* Theme rules pad bare sections; our wraps carry the gutter. */
.mx1bl > :is(header, nav, section) { padding-inline: 0; margin-inline: 0; }
.mx1bl-main { padding-inline: 0 !important; margin-inline: 0; }
.mx1bl-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--bl-gutter); }

/* ---------- type ---------- */
.mx1bl-kicker {
	display: inline-flex; align-items: center; gap: 0.6rem; margin-block-end: 1rem !important;
	padding: 0.35rem 0.95rem; font-size: 0.9rem; font-weight: 600; color: var(--bl-paper);
	background: rgba(70, 114, 249, 0.12); box-shadow: inset 0 0 0 1px rgba(95, 152, 253, 0.35); border-radius: 999px;
}
.mx1bl-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bl-glow); }
.mx1bl-grad { background: linear-gradient(100deg, var(--bl-glow) 0%, var(--bl-blue-2) 45%, #b9ccff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Inline gradient text: extend the painted box so Arabic dots below the baseline are not clipped. */
span.mx1bl-grad:not(.mx1bl-h1-sub) { padding-block: 0.1em 0.3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mx1bl .mx1bl-h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 4rem); font-weight: 800; line-height: 1.2; color: #fff; }
.mx1bl-h1-sub { display: block; margin-block-start: 0.35rem; font-size: 0.62em; font-weight: 700; line-height: 1.35; }
.mx1bl .mx1bl-h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); font-weight: 800; line-height: 1.3; color: #fff; }
.mx1bl-lead { max-width: 40rem; margin-block: 1.1rem 1.75rem !important; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.95; color: var(--bl-mute); }
.mx1bl-head { max-width: 46rem; margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ---------- buttons ---------- */
.mx1bl .mx1bl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
	min-height: 50px; padding: 0 1.5rem; font-size: 1rem; font-weight: 700; white-space: nowrap;
	--bl-cut: 13px; clip-path: var(--bl-chamfer);
	transition: background 0.3s, color 0.3s, filter 0.3s;
}
.mx1bl .mx1bl-btn span { transition: transform 0.3s var(--bl-ease); }
.mx1bl .mx1bl-btn:hover span { transform: translateX(-4px); }
.mx1bl .mx1bl-btn--lg { min-height: 58px; padding: 0 2rem; font-size: 1.05rem; }
.mx1bl .mx1bl-btn--primary { background: linear-gradient(120deg, var(--bl-blue-2), var(--bl-blue)); color: #fff; }
.mx1bl .mx1bl-btn--primary:hover, .mx1bl .mx1bl-btn--primary:focus-visible { background: linear-gradient(120deg, var(--bl-glow), var(--bl-blue-2)); color: #fff; filter: drop-shadow(0 8px 24px rgba(70, 114, 249, 0.5)); }
.mx1bl .mx1bl-btn--light { background: #fff; color: var(--bl-navy); }
.mx1bl .mx1bl-btn--light:hover, .mx1bl .mx1bl-btn--light:focus-visible { background: var(--bl-paper); color: var(--bl-blue); }
.mx1bl .mx1bl-btn--ghost { background: rgba(242, 244, 255, 0.06); color: var(--bl-paper); box-shadow: inset 0 0 0 1px rgba(242, 244, 255, 0.3); }
.mx1bl .mx1bl-btn--ghost:hover { background: rgba(242, 244, 255, 0.16); color: #fff; }
.mx1bl .mx1bl-btn svg { width: 20px; height: 20px; }

/* ---------- hero ---------- */
.mx1bl-hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); }
.mx1bl-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(42% 60% at 85% 10%, rgba(70, 114, 249, 0.28), transparent 70%),
		radial-gradient(35% 50% at 10% 90%, rgba(95, 152, 253, 0.12), transparent 70%);
}
.mx1bl-hero__bg::after { /* faint MX1 cut grid */
	content: ""; position: absolute; inset: 0; opacity: 0.35;
	background-image: linear-gradient(rgba(242, 244, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 244, 255, 0.05) 1px, transparent 1px);
	background-size: 64px 64px; mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%);
}
.mx1bl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mx1bl-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.mx1bl-hero__grid--solo .mx1bl-hero__copy { max-width: 52rem; }

.mx1bl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-block-end: 1.4rem; font-size: 0.9rem; color: var(--bl-faint); }
.mx1bl-crumbs li { display: inline-flex; align-items: center; gap: 0.4rem; }
.mx1bl-crumbs li + li::before { content: "‹"; color: var(--bl-faint); }
.mx1bl-crumbs a { color: var(--bl-mute); transition: color 0.2s; }
.mx1bl-crumbs a:hover { color: #fff; }
.mx1bl-crumbs [aria-current] { color: var(--bl-paper); }

.mx1bl-search {
	position: relative; display: flex; align-items: center; gap: 0.5rem; max-width: 34rem; padding: 0.4rem; padding-inline-start: 1rem;
	background: rgba(242, 244, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(242, 244, 255, 0.18);
	--bl-cut: 14px; clip-path: var(--bl-chamfer); transition: box-shadow 0.3s, background 0.3s;
}
.mx1bl-search:focus-within { background: rgba(242, 244, 255, 0.1); box-shadow: inset 0 0 0 1px var(--bl-glow); }
.mx1bl-search > svg { color: var(--bl-glow); }
.mx1bl .mx1bl-search input[type="search"] {
	flex: 1; min-width: 0; height: 46px; margin: 0; padding: 0 0.25rem; border: 0; border-radius: 0;
	background: transparent; box-shadow: none; color: #fff; font-size: 1rem;
}
.mx1bl .mx1bl-search input::placeholder { color: var(--bl-faint); opacity: 1; }
.mx1bl .mx1bl-search input:focus { outline: 0; }
.mx1bl .mx1bl-search button {
	flex: none; height: 46px; min-height: 0; margin: 0; padding: 0 1.4rem; border: 0; border-radius: 0;
	background: linear-gradient(120deg, var(--bl-blue-2), var(--bl-blue)); color: #fff; font-size: 0.98rem; font-weight: 700; text-transform: none; letter-spacing: 0;
	--bl-cut: 10px; clip-path: var(--bl-chamfer); cursor: pointer; transition: background 0.3s;
}
.mx1bl .mx1bl-search button:hover { background: linear-gradient(120deg, var(--bl-glow), var(--bl-blue-2)); }

.mx1bl-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-block-start: 1.5rem !important; font-size: 0.92rem; color: var(--bl-mute); }
.mx1bl-facts li { display: inline-flex; align-items: center; gap: 0.4rem; }
.mx1bl-facts li + li::before { content: ""; width: 5px; height: 5px; margin-inline-end: 0.9rem; background: var(--bl-blue-2); transform: rotate(45deg); }
.mx1bl-facts strong { color: #fff; font-weight: 800; font-size: 1.05rem; }

/* ---------- post cards ---------- */
.mx1bl-card {
	position: relative; display: flex; flex-direction: column; height: 100%;
	background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line);
	clip-path: var(--bl-chamfer); transition: background 0.4s var(--bl-ease), transform 0.4s var(--bl-ease);
}
.mx1bl-card:hover { background: rgba(70, 114, 249, 0.09); transform: translateY(-4px); }
.mx1bl-card__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #dfe5f6; }
.mx1bl .mx1bl-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--bl-ease); }
.mx1bl-card:hover .mx1bl-card__img { transform: scale(1.04); }
.mx1bl-card__ph { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(140deg, var(--bl-blue-2), var(--bl-navy)); }
.mx1bl-card__ph img { width: 40%; opacity: 0.5; }
.mx1bl-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1.3rem 1.35rem 1.4rem; }
.mx1bl-tag {
	display: inline-flex; padding: 0.22rem 0.75rem; font-size: 0.82rem; font-weight: 600; color: var(--bl-glow);
	background: rgba(70, 114, 249, 0.12); --bl-cut: 7px; clip-path: var(--bl-chamfer); transition: background 0.3s, color 0.3s;
}
.mx1bl-tag:hover { background: var(--bl-blue-2); color: #fff; }
.mx1bl .mx1bl-card__title { font-size: clamp(1.08rem, 1rem + 0.3vw, 1.22rem); font-weight: 700; line-height: 1.6; color: #fff; }
.mx1bl-card__title a { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size 0.4s var(--bl-ease), color 0.3s; }
.mx1bl-card:hover .mx1bl-card__title a { color: #dce5ff; background-size: 100% 1px; }
.mx1bl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* whole card clickable */
.mx1bl-tag, .mx1bl-card .mx1bl-btn { position: relative; z-index: 1; }
.mx1bl-card__excerpt { font-size: 0.95rem; line-height: 1.85; color: var(--bl-mute); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mx1bl-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-block-start: auto; padding-block-start: 0.4rem; font-size: 0.84rem; color: var(--bl-faint); }
.mx1bl-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.mx1bl-meta svg { width: 16px; height: 16px; color: var(--bl-glow); }

/* hero feature */
.mx1bl-hero__feature { position: relative; }
.mx1bl-hero__feature::before { /* offset frame, the MX1 cut behind the card */
	content: ""; position: absolute; inset: 18px 18px -18px -18px; z-index: -1;
	background: linear-gradient(140deg, rgba(70, 114, 249, 0.55), rgba(54, 93, 227, 0.08));
	--bl-cut: 26px; clip-path: var(--bl-chamfer);
}
.mx1bl-card--feature { --bl-cut: 26px; background: rgba(11, 18, 56, 0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mx1bl-card--feature:hover { transform: none; background: rgba(15, 24, 72, 0.92); }
.mx1bl-card--feature .mx1bl-card__body { gap: 0.8rem; padding: 1.5rem 1.6rem 1.7rem; }
.mx1bl .mx1bl-card--feature .mx1bl-card__title { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem); line-height: 1.5; }
.mx1bl-card--feature .mx1bl-meta { margin-block-start: 0; }
.mx1bl-card--feature .mx1bl-btn { margin-block-start: 0.4rem; }
.mx1bl-card__flag { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; font-size: 0.82rem; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--bl-blue-2), var(--bl-blue)); --bl-cut: 9px; clip-path: var(--bl-chamfer); }
.mx1bl-card__flag svg { width: 16px; height: 16px; }

/* ---------- category rail ---------- */
.mx1bl-cats { position: relative; border-block: 1px solid var(--bl-line); background: rgba(8, 14, 56, 0.55); }
.mx1bl-chips { display: flex; gap: 0.6rem; padding-block: 1rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.mx1bl-chips::-webkit-scrollbar { display: none; }
.mx1bl-chips li { flex: none; }
@media (min-width: 1025px) { .mx1bl-chips { flex-wrap: wrap; overflow: visible; } }
.mx1bl-chip {
	display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 1.05rem; font-size: 0.95rem; font-weight: 600; white-space: nowrap; color: var(--bl-paper);
	background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); --bl-cut: 11px; clip-path: var(--bl-chamfer);
	transition: background 0.3s, color 0.3s;
}
.mx1bl-chip span { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.45rem; padding-inline: 0.4rem; font-size: 0.78rem; color: var(--bl-mute); background: rgba(242, 244, 255, 0.08); border-radius: 999px; }
.mx1bl-chip:hover { background: rgba(70, 114, 249, 0.14); color: #fff; }
.mx1bl-chip[aria-current] { background: linear-gradient(120deg, var(--bl-blue-2), var(--bl-blue)); color: #fff; box-shadow: none; }
.mx1bl-chip[aria-current] span { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ---------- list + sidebar ---------- */
.mx1bl-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.mx1bl-main__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: 1.5rem; }
.mx1bl-main__page { font-size: 0.9rem; color: var(--bl-faint); white-space: nowrap; }
.mx1bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.mx1bl-empty { display: grid; justify-items: start; gap: 1rem; padding: 2rem; color: var(--bl-mute); background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); clip-path: var(--bl-chamfer); }

.mx1bl-pager { margin-block-start: clamp(2rem, 4vw, 3rem); }
.mx1bl-pager ul { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.mx1bl-pager :is(a, span) {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 46px; height: 46px; padding-inline: 0.9rem; font-weight: 700; color: var(--bl-paper);
	background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); --bl-cut: 10px; clip-path: var(--bl-chamfer); transition: background 0.3s;
}
.mx1bl-pager a:hover { background: rgba(70, 114, 249, 0.18); }
.mx1bl-pager .current { background: linear-gradient(120deg, var(--bl-blue-2), var(--bl-blue)); color: #fff; box-shadow: none; }
.mx1bl-pager .dots { background: none; box-shadow: none; }
.mx1bl-pager :is(a, span) .mx1bl-sr { position: absolute !important; }

.mx1bl-side { display: grid; gap: 1.1rem; }
.mx1bl-side__sticky { display: grid; gap: 1.1rem; position: sticky; top: 1.5rem; }
.mx1bl-box { padding: 1.35rem; background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); clip-path: var(--bl-chamfer); }
.mx1bl .mx1bl-box__title { display: flex; align-items: center; gap: 0.55rem; margin-block-end: 0.9rem; font-size: 1.05rem; font-weight: 800; color: #fff; }
.mx1bl-box__title svg { color: var(--bl-glow); }
.mx1bl-catlist li + li { border-block-start: 1px solid var(--bl-line); }
.mx1bl-catlist a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.15rem; font-size: 0.96rem; color: var(--bl-mute); transition: color 0.25s, padding 0.3s var(--bl-ease); }
.mx1bl-catlist a:hover, .mx1bl-catlist a[aria-current] { color: #fff; padding-inline-start: 0.5rem; }
.mx1bl-catlist a[aria-current] span { color: var(--bl-glow); }
.mx1bl-catlist em { font-style: normal; font-size: 0.8rem; min-width: 1.8rem; padding: 0.1rem 0.45rem; text-align: center; color: var(--bl-glow); background: rgba(70, 114, 249, 0.12); border-radius: 999px; }
.mx1bl-guides { counter-reset: g; }
.mx1bl-guides li { position: relative; counter-increment: g; display: grid; gap: 0.2rem; padding-block: 0.75rem; padding-inline-start: 2.6rem; }
.mx1bl-guides li + li { border-block-start: 1px solid var(--bl-line); }
.mx1bl-guides li::before { content: counter(g, decimal-leading-zero); position: absolute; inset-inline-start: 0; inset-block-start: 0.8rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; font-size: 0.78rem; font-weight: 700; color: var(--bl-glow); background: rgba(70, 114, 249, 0.12); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.mx1bl-guides a { font-size: 0.95rem; font-weight: 600; line-height: 1.6; color: var(--bl-paper); transition: color 0.25s; }
.mx1bl-guides a:hover { color: var(--bl-glow); }
.mx1bl-guides small { font-size: 0.8rem; color: var(--bl-faint); }

.mx1bl-promo { position: relative; overflow: hidden; display: grid; gap: 0.75rem; justify-items: start; padding: 1.6rem 1.45rem; background: linear-gradient(140deg, var(--bl-blue-2) 0%, var(--bl-blue) 55%, #2445b8 100%); --bl-cut: 24px; clip-path: var(--bl-chamfer); }
.mx1bl-promo__mark { position: absolute; inset-inline-start: -14%; inset-block-end: -20%; width: 85%; opacity: 0.12; pointer-events: none; }
.mx1bl .mx1bl-promo h2 { position: relative; font-size: 1.3rem; font-weight: 800; line-height: 1.45; color: #fff; }
.mx1bl-promo p { position: relative; font-size: 0.94rem; line-height: 1.8; color: rgba(255, 255, 255, 0.88); }
.mx1bl-promo .mx1bl-btn { position: relative; margin-block-start: 0.35rem; }
.mx1bl-links li + li { border-block-start: 1px solid var(--bl-line); }
.mx1bl-links a { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.65rem 0.15rem; font-size: 0.95rem; color: var(--bl-mute); transition: color 0.25s; }
.mx1bl-links a:hover { color: #fff; }
.mx1bl-links svg { width: 18px; height: 18px; color: var(--bl-glow); transition: transform 0.3s var(--bl-ease); }
.mx1bl-links a:hover svg { transform: translateX(-4px); }

/* ---------- topic hubs ---------- */
.mx1bl-hubs { position: relative; padding-block: clamp(3.5rem, 7vw, 6rem); border-block-start: 1px solid var(--bl-line); }
.mx1bl-hubs::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 55% at 15% 30%, rgba(70, 114, 249, 0.16), transparent 70%); }
.mx1bl-hubs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.1rem); }
.mx1bl-hub { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem; background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); clip-path: var(--bl-chamfer); transition: background 0.4s var(--bl-ease); }
.mx1bl-hub:hover { background: rgba(70, 114, 249, 0.09); }
.mx1bl-hub__top { display: grid; gap: 0.35rem; padding-block-end: 1rem; border-block-end: 1px solid var(--bl-line); }
.mx1bl .mx1bl-hub h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.5; color: #fff; }
.mx1bl-hub h3 a:hover { color: var(--bl-glow); }
.mx1bl-hub__count { font-size: 0.82rem; color: var(--bl-glow); }
.mx1bl-hub ul { display: grid; gap: 0.75rem; }
.mx1bl-hub li { position: relative; padding-inline-start: 1.1rem; }
.mx1bl-hub li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; width: 6px; height: 6px; background: var(--bl-blue-2); transform: rotate(45deg); }
.mx1bl-hub li a { font-size: 0.93rem; line-height: 1.7; color: var(--bl-mute); transition: color 0.25s; }
.mx1bl-hub li a:hover { color: #fff; }
.mx1bl-hub__more { display: inline-flex; align-items: center; gap: 0.45rem; margin-block-start: auto; font-size: 0.92rem; font-weight: 700; color: var(--bl-glow); }
.mx1bl-hub__more svg { width: 18px; height: 18px; transition: transform 0.3s var(--bl-ease); }
.mx1bl-hub__more:hover svg { transform: translateX(-4px); }

/* ---------- closing CTA ---------- */
.mx1bl-cta { padding-block: 0 clamp(3.5rem, 7vw, 6rem); }
.mx1bl-hubs + .mx1bl-cta { padding-block-start: 0; }
.mx1bl-cta__card {
	position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
	padding: clamp(1.75rem, 4vw, 3.25rem); background: linear-gradient(130deg, var(--bl-blue-2) 0%, var(--bl-blue) 50%, #1f3da8 100%);
	--bl-cut: 32px; clip-path: var(--bl-chamfer);
}
.mx1bl-cta__mark { position: absolute; inset-inline-end: -4%; inset-block-start: 50%; width: min(46%, 480px); translate: 0 -50%; opacity: 0.1; pointer-events: none; }
.mx1bl-cta__copy { position: relative; flex: 1 1 26rem; display: grid; gap: 0.6rem; }
.mx1bl .mx1bl-cta h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 800; line-height: 1.3; color: #fff; }
.mx1bl-cta h2 span { color: var(--bl-navy); }
.mx1bl-cta p { max-width: 38rem; color: rgba(255, 255, 255, 0.88); line-height: 1.85; }
.mx1bl-cta .mx1bl-btn { position: relative; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
	.mx1bl-body { grid-template-columns: minmax(0, 1fr) 300px; }
	.mx1bl-hubs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.mx1bl-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.mx1bl-hero__feature { max-width: 640px; }
	.mx1bl-body { grid-template-columns: minmax(0, 1fr); }
	.mx1bl-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx1bl-side__sticky { position: static; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mx1bl-grid, .mx1bl-side, .mx1bl-side__sticky, .mx1bl-hubs__grid { grid-template-columns: minmax(0, 1fr); }
	.mx1bl-hero__feature::before { inset: 12px 8px -12px -8px; }
	.mx1bl .mx1bl-search button { padding: 0 1rem; }
	.mx1bl-main__head { flex-direction: column; gap: 0.3rem; }
	.mx1bl-cta__card .mx1bl-btn { width: 100%; }
	.mx1bl-chips { margin-inline: calc(var(--bl-gutter) * -1); padding-inline: var(--bl-gutter); }
}
@media (prefers-reduced-motion: reduce) {
	.mx1bl *, .mx1bl *::before, .mx1bl *::after { transition: none !important; animation: none !important; }
}