/* ==========================================================================
   MX1 marketing pages (portfolio, about, services). Builds on the blog's
   .mx1bl tokens and components: navy surfaces, electric blue, MX1 chamfers.
   ========================================================================== */
.mx1pg { --pg-sec: clamp(3.5rem, 7vw, 6.5rem); }
.mx1pg > :is(header, section) { padding-inline: 0; margin-inline: 0; }
.mx1pg .mx1bl-wrap { text-align: start; }
.mx1pg-sec { position: relative; padding-block: var(--pg-sec) 0; }
.mx1pg-head--center { margin-inline: auto; text-align: center; }
.mx1pg-head--center .mx1bl-lead { margin-inline: auto; }
.mx1pg-para { max-width: 44rem; margin-block-end: 1rem !important; font-size: 1.04rem; line-height: 2; color: var(--bl-mute); }
.mx1pg .mx1bl-btn svg { width: 22px; height: 22px; }
.mx1pg-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- hero ---------- */
.mx1pg-hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.mx1pg-hero .mx1bl-lead { max-width: 38rem; }
.mx1pg-hero .mx1bl-hero__bg { -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.mx1pg-hero--solo .mx1bl-hero__copy { max-width: 56rem; }
.mx1pg-hero--solo .mx1bl-lead { max-width: 46rem; }

.mx1pg-collage { position: relative; aspect-ratio: 16 / 12.5; }
.mx1pg-collage__item { position: absolute; margin: 0; overflow: hidden; background: #111a4a; clip-path: var(--bl-chamfer); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.mx1pg-collage__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx1pg-collage__item--1 { inset-block-start: 0; inset-inline-end: 0; width: 84%; aspect-ratio: 16 / 10; --bl-cut: 28px; z-index: 1; }
.mx1pg-collage__item--2 { inset-block-end: 0; inset-inline-start: 0; width: 48%; aspect-ratio: 16 / 10; --bl-cut: 18px; z-index: 2; outline: 6px solid var(--bl-navy); }
.mx1pg-collage__item--3 { inset-block-end: 4%; inset-inline-end: 6%; width: 40%; aspect-ratio: 16 / 10; --bl-cut: 16px; z-index: 3; }
.mx1pg-collage::before { /* offset MX1 frame */
	content: ""; position: absolute; inset-block-start: 6%; inset-inline-end: -3%; width: 84%; aspect-ratio: 16 / 10;
	background: linear-gradient(140deg, rgba(70, 114, 249, 0.6), rgba(54, 93, 227, 0.05)); --bl-cut: 28px; clip-path: var(--bl-chamfer);
}

/* ---------- cards ---------- */
.mx1pg-cards { display: grid; gap: clamp(0.85rem, 1.6vw, 1.25rem); }
.mx1pg-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx1pg-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx1pg-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx1pg-card {
	position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.35rem, 2vw, 1.75rem);
	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);
}
.mx1pg-card:hover { background: rgba(70, 114, 249, 0.09); transform: translateY(-4px); }
.mx1pg-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-block-end: 0.35rem; }
.mx1pg-card__icon {
	display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; color: #fff;
	background: linear-gradient(135deg, var(--bl-blue-2), var(--bl-blue)); --bl-cut: 12px; clip-path: var(--bl-chamfer);
}
.mx1pg-card__icon svg { width: 26px; height: 26px; stroke-width: 1.8; }
.mx1pg-card__num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(95, 152, 253, 0.55); }
.mx1pg .mx1pg-card__title { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 800; line-height: 1.5; color: #fff; }
.mx1pg-card__text { font-size: 0.97rem; line-height: 1.9; color: var(--bl-mute); }
.mx1pg-cards--warn .mx1pg-card__icon { background: rgba(70, 114, 249, 0.14); color: var(--bl-glow); box-shadow: inset 0 0 0 1px rgba(95, 152, 253, 0.35); }
.mx1pg-cards--num .mx1pg-card { padding: clamp(1.5rem, 2.5vw, 2.25rem); }

.mx1pg-ticks { display: grid; gap: 0.55rem; margin-block-start: auto !important; padding-block-start: 0.85rem !important; border-block-start: 1px solid var(--bl-line); }
.mx1pg-ticks li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.94rem; line-height: 1.7; color: var(--bl-paper); }
.mx1pg-ticks svg { width: 18px; height: 18px; margin-block-start: 0.2rem; color: var(--bl-glow); stroke-width: 2.4; }

/* ---------- works ---------- */
.mx1pg-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.mx1pg .mx1pg-filters .mx1bl-chip { min-height: 44px; margin: 0; padding: 0 1.05rem; border: 0; border-radius: 0; cursor: pointer; font-family: var(--bl-font); font-size: 0.95rem; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; color: var(--bl-paper); background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); }
.mx1pg .mx1pg-filters .mx1bl-chip:hover { background: rgba(70, 114, 249, 0.14); color: #fff; }
.mx1pg .mx1pg-filters .mx1bl-chip[aria-pressed="true"] { background: linear-gradient(120deg, var(--bl-blue-2), var(--bl-blue)); color: #fff; box-shadow: none; }
.mx1pg-filters .mx1bl-chip[aria-pressed="true"] span { background: rgba(255, 255, 255, 0.2); color: #fff; }

.mx1pg-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.85rem, 1.6vw, 1.25rem); }
.mx1pg-work[hidden] { display: none; }
.mx1pg-work__link { 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); }
.mx1pg-work__link:hover, .mx1pg-work__link:focus-visible { background: rgba(70, 114, 249, 0.1); transform: translateY(-4px); }
.mx1pg-work__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #111a4a; }
.mx1pg .mx1pg-work__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--bl-ease); }
.mx1pg-work__link:hover .mx1pg-work__img { transform: scale(1.05); }
.mx1pg-work__hover {
	position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
	background: linear-gradient(180deg, transparent 40%, rgba(8, 14, 56, 0.55)); opacity: 0; transition: opacity 0.35s;
}
.mx1pg-work__hover svg { width: 58px; height: 58px; padding: 16px; background: linear-gradient(120deg, var(--bl-blue-2), var(--bl-blue)); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.mx1pg-work__link:hover .mx1pg-work__hover, .mx1pg-work__link:focus-visible .mx1pg-work__hover { opacity: 1; }
.mx1pg-work--video .mx1pg-work__hover { opacity: 1; background: linear-gradient(180deg, transparent 30%, rgba(8, 14, 56, 0.45)); }
.mx1pg-work--video .mx1pg-work__hover svg { fill: #fff; stroke: none; padding: 18px 16px 18px 20px; }
.mx1pg-work__cap { display: grid; gap: 0.25rem; padding: 1rem 1.15rem 1.15rem; }
.mx1pg-work__label { justify-self: start; padding: 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 600; color: var(--bl-glow); background: rgba(70, 114, 249, 0.12); --bl-cut: 6px; clip-path: var(--bl-chamfer); }
.mx1pg .mx1pg-work__title { font-size: 1.08rem; font-weight: 800; line-height: 1.5; color: #fff; }
.mx1pg-work__desc { font-size: 0.9rem; line-height: 1.7; color: var(--bl-mute); }
.mx1pg-more { display: flex; justify-content: center; margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }

/* ---------- steps ---------- */
.mx1pg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.85rem, 1.6vw, 1.25rem); counter-reset: none; }
.mx1pg-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx1pg-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mx1pg-step { position: relative; display: grid; align-content: start; gap: 0.6rem; padding: 1.5rem 1.4rem 1.6rem; background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); clip-path: var(--bl-chamfer); }
.mx1pg-step::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--bl-cut) 0; height: 3px; background: linear-gradient(90deg, transparent, var(--bl-blue-2)); }
.mx1pg-step__num { font-size: 2.6rem; font-weight: 800; line-height: 1; background: linear-gradient(160deg, var(--bl-glow), var(--bl-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx1pg .mx1pg-step__title { font-size: 1.12rem; font-weight: 800; line-height: 1.5; color: #fff; }
.mx1pg-step__text { font-size: 0.95rem; line-height: 1.85; color: var(--bl-mute); }

/* ---------- split ---------- */
.mx1pg-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mx1pg-split .mx1bl-head { margin-block-end: 1.25rem; }
.mx1pg-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1.5rem !important; }
.mx1pg-tags li { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0 1.05rem; font-size: 0.95rem; font-weight: 600; 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); }
.mx1pg-tags svg { width: 20px; height: 20px; color: var(--bl-glow); }
.mx1pg-aside { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); background: linear-gradient(150deg, rgba(70, 114, 249, 0.2), rgba(70, 114, 249, 0.05)); box-shadow: inset 0 0 0 1px rgba(95, 152, 253, 0.3); --bl-cut: 26px; clip-path: var(--bl-chamfer); }
.mx1pg .mx1pg-aside__title { margin-block-end: 1rem; font-size: 1.2rem; font-weight: 800; color: #fff; }
.mx1pg-aside li { display: flex; gap: 0.9rem; padding-block: 0.85rem; font-size: 0.98rem; line-height: 1.8; color: var(--bl-paper); }
.mx1pg-aside li + li { border-block-start: 1px solid var(--bl-line); }
.mx1pg-aside li span { flex: none; font-weight: 800; color: var(--bl-glow); }

/* ---------- checks ---------- */
.mx1pg-checks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.75rem, 4vw, 3rem); background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); --bl-cut: 30px; clip-path: var(--bl-chamfer); }
.mx1pg-checks .mx1bl-head { margin: 0; }
.mx1pg-checks__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.mx1pg-checks__list li { display: flex; align-items: center; gap: 0.7rem; min-height: 56px; padding: 0.6rem 1rem; font-weight: 700; color: #fff; background: rgba(8, 14, 56, 0.55); box-shadow: inset 0 0 0 1px var(--bl-line); --bl-cut: 10px; clip-path: var(--bl-chamfer); }
.mx1pg-checks__list svg { width: 22px; height: 22px; padding: 3px; color: #fff; background: var(--bl-blue-2); border-radius: 50%; stroke-width: 3; }
.mx1pg-checks__cta { grid-column: 1 / -1; }

/* ---------- plans ---------- */
.mx1pg-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.85rem, 1.6vw, 1.25rem); align-items: stretch; max-width: 1100px; margin-inline: auto; }
.mx1pg-plan { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); --bl-cut: 24px; clip-path: var(--bl-chamfer); }
.mx1pg-plan--hot { background: linear-gradient(150deg, var(--bl-blue-2), var(--bl-blue) 60%, #2445b8); box-shadow: none; }
.mx1pg-plan__flag { position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.1rem; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 700; color: var(--bl-navy); background: #fff; --bl-cut: 7px; clip-path: var(--bl-chamfer); }
.mx1pg .mx1pg-plan__name { font-size: 1.15rem; font-weight: 800; color: #fff; }
.mx1pg-plan__price { display: flex; align-items: baseline; gap: 0.4rem; color: var(--bl-mute); font-weight: 600; }
.mx1pg-plan__price strong { font-size: clamp(2.4rem, 2rem + 1.5vw, 3.2rem); font-weight: 800; line-height: 1.1; color: #fff; }
.mx1pg-plan__per { font-size: 0.88rem; color: var(--bl-faint); }
.mx1pg-plan--hot :is(.mx1pg-plan__price, .mx1pg-plan__per) { color: rgba(255, 255, 255, 0.85); }
.mx1pg-plan .mx1pg-ticks { margin-block: 0.5rem 1.25rem !important; }
.mx1pg-plan--hot .mx1pg-ticks { border-color: rgba(255, 255, 255, 0.25); }
.mx1pg-plan--hot .mx1pg-ticks svg { color: #fff; }
.mx1pg-plan .mx1bl-btn { margin-block-start: auto; width: 100%; }

/* ---------- numbers ---------- */
.mx1pg-numbers-sec { padding-block: 0; }
.mx1pg-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); --bl-cut: 26px; clip-path: var(--bl-chamfer); }
.mx1pg-numbers li { display: grid; gap: 0.3rem; padding: clamp(1.25rem, 3vw, 2.25rem); font-size: 0.98rem; color: var(--bl-mute); }
.mx1pg-numbers li + li { border-inline-start: 1px solid var(--bl-line); }
.mx1pg-numbers strong { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 800; line-height: 1.1; color: #fff; }
.mx1pg-numbers strong span { background: linear-gradient(160deg, #fff, var(--bl-glow)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- internal links ---------- */
.mx1pg-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.85rem, 1.6vw, 1.25rem); }
.mx1pg-links--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx1pg-link { display: flex; flex-direction: column; gap: 0.7rem; height: 100%; padding: 1.5rem; 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); }
.mx1pg-link:hover, .mx1pg-link:focus-visible { background: rgba(70, 114, 249, 0.12); transform: translateY(-4px); }
.mx1pg .mx1pg-link__title { margin-block-start: 0.3rem; font-size: 1.12rem; font-weight: 800; line-height: 1.5; color: #fff; }
.mx1pg-link__text { font-size: 0.94rem; line-height: 1.85; color: var(--bl-mute); }
.mx1pg-link__go { display: inline-flex; align-items: center; gap: 0.45rem; margin-block-start: auto; padding-block-start: 0.4rem; font-size: 0.92rem; font-weight: 700; color: var(--bl-glow); }
.mx1pg-link__go svg { width: 18px; height: 18px; transition: transform 0.3s var(--bl-ease); }
.mx1pg-link:hover .mx1pg-link__go svg { transform: translateX(-4px); }

/* ---------- logos ---------- */
.mx1pg-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.mx1pg-logos li { display: grid; place-items: center; min-height: 96px; padding: 1rem; background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); --bl-cut: 12px; clip-path: var(--bl-chamfer); }
.mx1pg .mx1pg-logos img { max-width: 100%; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: 0.8; transition: opacity 0.3s, filter 0.3s; }
.mx1pg-logos li:hover img { opacity: 1; }
.mx1pg-partners { margin: 0 auto; max-width: 1100px; overflow: hidden; --bl-cut: 30px; clip-path: var(--bl-chamfer); }
.mx1pg .mx1pg-partners img { display: block; width: 100%; height: auto; }

/* ---------- faq ---------- */
.mx1pg-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.mx1pg-faq__head { position: sticky; top: 1.5rem; }
.mx1pg-faq__head .mx1bl-head { margin-block-end: 1.25rem; }
.mx1pg-faq__head .mx1pg-para { margin-block-end: 0.85rem !important; }
.mx1pg-faq__list { display: grid; gap: 0.75rem; }
.mx1pg-q { background: var(--bl-glass); box-shadow: inset 0 0 0 1px var(--bl-line); --bl-cut: 14px; clip-path: var(--bl-chamfer); transition: background 0.3s; }
.mx1pg-q[open] { background: rgba(70, 114, 249, 0.1); box-shadow: inset 0 0 0 1px rgba(95, 152, 253, 0.4); }
.mx1pg-q summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; cursor: pointer; list-style: none; }
.mx1pg-q summary::-webkit-details-marker { display: none; }
.mx1pg .mx1pg-q h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.6; color: #fff; }
.mx1pg-q__icon { position: relative; flex: none; width: 34px; height: 34px; background: rgba(70, 114, 249, 0.16); --bl-cut: 8px; clip-path: var(--bl-chamfer); }
.mx1pg-q__icon::before, .mx1pg-q__icon::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--bl-glow); transition: transform 0.3s var(--bl-ease); }
.mx1pg-q__icon::after { transform: rotate(90deg); }
.mx1pg-q[open] .mx1pg-q__icon::after { transform: rotate(0deg); }
.mx1pg-q p { padding: 0 1.35rem 1.25rem; font-size: 0.98rem; line-height: 1.95; color: var(--bl-mute); }

/* ---------- SEO text ---------- */
.mx1pg-text { max-width: 60rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--bl-line); }
.mx1pg .mx1pg-text h2 { margin-block-end: 0.6rem; font-size: 1.15rem; font-weight: 800; color: #fff; }
.mx1pg-text p { font-size: 0.96rem; line-height: 2; color: var(--bl-faint); }

/* ---------- CTA ---------- */
.mx1pg-cta { padding-block-start: var(--pg-sec); }
.mx1pg-cta .mx1pg-ctas { position: relative; }
.mx1pg-cta .mx1bl-btn--ghost { background: rgba(8, 14, 56, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }

/* ---------- lightbox ---------- */
.mx1pg-lb { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: clamp(0.75rem, 2vw, 1.5rem); background: rgba(5, 9, 36, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f2f4ff; font-family: "MX1 Readex", "Readex Pro", Tajawal, sans-serif; direction: rtl; }
.mx1pg-lb[hidden] { display: none; }
.mx1pg-lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block-end: 0.75rem; }
.mx1pg-lb__cap { display: grid; gap: 0.1rem; margin: 0; }
.mx1pg-lb__cap strong { font-size: 1.05rem; font-weight: 800; color: #fff; font-family: inherit !important; }
.mx1pg-lb__cap span { font-size: 0.9rem; color: rgba(242, 244, 255, 0.7); font-family: inherit !important; }
.mx1pg-lb__stage { display: grid; place-items: center; min-height: 0; }
.mx1pg-lb .mx1pg-lb__stage img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; object-fit: contain; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.mx1pg-lb__frame { width: min(100%, calc((100vh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; }
.mx1pg-lb__frame--v { width: min(100%, calc((100vh - 140px) * 9 / 16)); aspect-ratio: 9 / 16; }
.mx1pg-lb__frame--s { width: min(100%, calc(100vh - 140px)); aspect-ratio: 1; }
.mx1pg-lb__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.mx1pg-lb .mx1pg-lb__btn { display: inline-grid; place-items: center; width: 48px; height: 48px; min-height: 0; padding: 0; margin: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #fff !important; background: rgba(242, 244, 255, 0.1) !important; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background 0.3s; }
.mx1pg-lb .mx1pg-lb__btn:hover, .mx1pg-lb .mx1pg-lb__btn:focus-visible { background: #4672f9 !important; }
.mx1pg-lb .mx1pg-lb__btn[hidden] { display: none; }
.mx1pg-lb .mx1pg-lb__btn svg { width: 22px !important; height: 22px !important; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mx1pg-lb .mx1pg-lb__nav { position: absolute !important; top: 50% !important; bottom: auto !important; margin: 0 !important; transform: translateY(-50%) !important; }
.mx1pg-lb .mx1pg-lb__nav--prev { right: clamp(0.5rem, 2vw, 1.5rem) !important; left: auto !important; }
.mx1pg-lb .mx1pg-lb__nav--next { left: clamp(0.5rem, 2vw, 1.5rem) !important; right: auto !important; }
body.mx1pg-lb-open { overflow: hidden; }
body.mx1pg-lb-open :is(#wa, .scrollToTop) { display: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
	.mx1pg-cards--4, .mx1pg-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx1pg-steps--5, .mx1pg-steps--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mx1pg-steps--4 .mx1pg-step:last-child { grid-column: auto; }
}
@media (max-width: 1024px) {
	.mx1pg-collage { max-width: 640px; width: 100%; margin-inline: auto; }
	.mx1pg-works, .mx1pg-cards--3, .mx1pg-links--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx1pg-steps, .mx1pg-steps--4, .mx1pg-steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx1pg-split, .mx1pg-checks, .mx1pg-faq { grid-template-columns: minmax(0, 1fr); }
	.mx1pg-faq__head { position: static; }
	.mx1pg-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx1pg-numbers li:nth-child(3) { border-inline-start: 0; }
	.mx1pg-numbers li:nth-child(n + 3) { border-block-start: 1px solid var(--bl-line); }
	.mx1pg-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
	.mx1pg-plan--hot { order: -1; }
}
@media (max-width: 640px) {
	.mx1pg-works, .mx1pg-cards--2, .mx1pg-cards--3, .mx1pg-cards--4, .mx1pg-links, .mx1pg-links--6, .mx1pg-steps, .mx1pg-steps--4, .mx1pg-steps--5, .mx1pg-checks__list { grid-template-columns: minmax(0, 1fr); }
	.mx1pg-ctas .mx1bl-btn { flex: 1 1 100%; }
	.mx1pg-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--bl-gutter) * -1); padding-inline: var(--bl-gutter); scrollbar-width: none; }
	.mx1pg-filters::-webkit-scrollbar { display: none; }
	.mx1pg-filters .mx1bl-chip { flex: none; }
	.mx1pg-collage__item--2 { outline-width: 4px; }
	.mx1pg-lb .mx1pg-lb__nav { top: auto !important; bottom: 1rem !important; transform: none !important; }
}