/* Mega Mobiles Toolkit — shared tokens and components.
   Concept: Apple's store and support pages in Mega's own navy. White and light-grey
   bands, tight Inter headlines with a grey second clause, rounded cards, sideways rails.
   Token names are prefixed (--mm-*): Elementor containers define --display, --gap, --width… */

:root {
	--mm-ink: #1d1d1f;
	--mm-grey: #6e6e73;
	--mm-line: #d2d2d7;
	--mm-hair: #e8e8ed;
	--mm-mist: #f5f5f7;
	--mm-white: #ffffff;
	--mm-navy: #2d3d8e;
	--mm-navy-hi: #3b4fb8;
	--mm-navy-tint: #e9ecfa;
	--mm-link-dark: #8fa2ff;
	--mm-black: #000000;
	--mm-green: #30a14e;
	--mm-star: #f5a623;

	--mm-font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--mm-wrap: 1180px;
	--mm-gut: 22px;
	--mm-edge: max(22px, calc((100vw - var(--mm-wrap)) / 2 + 22px)); /* rails start in line with .wrap content */
	--mm-r-lg: 28px;
	--mm-r-md: 18px;
	--mm-r-sm: 12px;
	--mm-hdr: 52px;
	--mm-sec: 100px;
}

/* Page canvas (only when the new design is showing) */
html:has(body.mm-site) { overflow-x: hidden; scroll-padding-top: calc(var(--mm-hdr) + 12px); }
body.mm-site { margin: 0; background: var(--mm-white); color: var(--mm-ink); font: 400 17px/1.47 var(--mm-font); letter-spacing: -0.012em; overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.mm-site .site-main, body.mm-site .page-content { margin: 0; padding: 0; max-width: none; }
body.mm-site .page-header { display: none; }

/* Widget root reset — 0,2,0 component rules (.mm .x) win over Hello's element styles */
.mm { font-family: var(--mm-font); color: var(--mm-ink); line-height: 1.47; letter-spacing: -0.012em; }
.mm *, .mm *::before, .mm *::after { box-sizing: border-box; }
.mm :where(h1, h2, h3, h4) { font-family: var(--mm-font); font-weight: 650; line-height: 1.1; letter-spacing: -0.024em; margin: 0; color: inherit; text-wrap: balance; }
.mm :where(p, ul, ol, dl, dd, figure, blockquote, fieldset) { margin: 0; }
.mm :where(ul, ol) { list-style: none; padding: 0; }
.mm :where(a) { color: inherit; }
.mm :where(img) { display: block; max-width: 100%; height: auto; }
.mm :where(button, input, select, textarea) { font: inherit; color: inherit; text-transform: none; letter-spacing: normal; }
.mm :where(label, legend, output) { text-transform: none; letter-spacing: normal; font-family: inherit; }
.mm :focus-visible { outline: 2px solid var(--mm-navy-hi); outline-offset: 3px; border-radius: 6px; }
.mm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mm svg.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.mm .wrap { width: 100%; max-width: var(--mm-wrap); margin-inline: auto; padding-inline: var(--mm-gut); }
.mm .center { text-align: center; }

/* Type */
.mm .h-xl { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.07; font-weight: 650; letter-spacing: -0.028em; }
.mm .h-lg { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; font-weight: 650; letter-spacing: -0.028em; }
.mm .h-md { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.14; font-weight: 650; letter-spacing: -0.022em; }
.mm .soft { color: var(--mm-grey); }
.mm .lead { margin-top: 12px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.38; color: var(--mm-grey); max-width: 60ch; }
.mm .center .lead, .mm .lead.center { margin-inline: auto; }
.mm .kicker { font-size: 17px; font-weight: 600; color: var(--mm-navy); margin-bottom: 10px; }
.mm .fine { font-size: 13px; color: var(--mm-grey); }

/* Section head: heading left, aside or rail arrows right */
.mm .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.mm .head > :first-child { max-width: 820px; }
.mm .head__aside { flex: none; font-size: 15px; color: var(--mm-grey); }

/* Buttons and links */
.mm .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--mm-navy); color: #fff; font-family: var(--mm-font); font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, color .2s; white-space: normal; max-width: 100%; }
.mm .pill:hover { background: var(--mm-navy-hi); color: #fff; }
.mm .pill--sm { min-height: 30px; padding: 5px 14px; font-size: 13px; }
.mm .pill--light { background: #fff; color: var(--mm-ink); }
.mm .pill--light:hover { background: #e8e8ed; color: var(--mm-ink); }
.mm .pill--ghost { background: transparent; color: var(--mm-navy); box-shadow: inset 0 0 0 1.5px currentColor; }
.mm .pill--ghost:hover { background: var(--mm-navy-tint); color: var(--mm-navy); }
.mm .link { color: var(--mm-navy); text-decoration: none; font-size: 17px; }
.mm .link::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .32em; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: translateY(-.08em) rotate(45deg); }
.mm .link:hover { text-decoration: underline; color: var(--mm-navy); }
.mm .link--light { color: var(--mm-link-dark); }
.mm .link--light:hover { color: var(--mm-link-dark); }
.mm .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.mm .center .ctas, .mm .ctas.center { justify-content: center; }
@media (pointer: coarse) {
	.mm .link { display: inline-block; padding-block: 8px; margin-block: -8px; }
}

/* Sideways rails (Apple store style) */
.mm .rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--mm-edge); padding: 4px var(--mm-edge) 40px; scrollbar-width: none; overscroll-behavior-x: contain; }
.mm .rail::-webkit-scrollbar { display: none; }
.mm .rail > * { flex: none; scroll-snap-align: start; }
.mm .rail-nav { display: flex; gap: 10px; flex: none; }
.mm .rail-nav button { width: 36px; height: 36px; padding: 8px !important; border: 0 !important; border-radius: 50% !important; background: rgba(210, 210, 215, .64) !important; color: var(--mm-ink) !important; cursor: pointer; box-shadow: none !important; }
.mm .rail-nav button:hover { background: rgba(210, 210, 215, .95) !important; }
.mm .rail-nav button:disabled { opacity: .35; cursor: default; }
.mm .rail-nav svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Bands */
.mm.tone-white { background: var(--mm-white); }
.mm.tone-mist { background: var(--mm-mist); }
.mm.tone-black { background: var(--mm-black); color: #f5f5f7; }

/* Full-bleed widgets inside Elementor containers. Elementor 4 markup: .e-con.e-con-full > .elementor-widget
   (boxed containers add .e-con-inner). Its defaults (10px padding, boxed width, gap) never apply around
   our widgets; a page's own per-element CSS (0,3,0) still wins when someone sets values on purpose. */
.elementor-widget[class*="elementor-widget-mm_"] { width: 100%; }
.e-con:has(> .elementor-widget[class*="elementor-widget-mm_"]),
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-mm_"]) {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--gap: 0px 0px; --row-gap: 0px; --column-gap: 0px;
	--content-width: 100%; max-width: none;
}
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-mm_"]) > .e-con-inner { max-width: none; width: 100%; padding: 0; }

@media (max-width: 833px) {
	:root { --mm-hdr: 48px; --mm-sec: 70px; }
	body.mm-site { font-size: 16px; }
	.mm .head { flex-direction: column; align-items: flex-start; margin-bottom: 26px; }
	.mm .head .rail-nav { display: none; }
	.mm .rail { gap: 14px; padding-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	html:has(body.mm-site) { scroll-behavior: auto; }
	.mm *, .mm *::before, .mm *::after { animation: none !important; transition: none !important; }
}