/* =====================================================================
   Mode IPTV homepage (page 55228): the [mode_*] shortcode sections.
   Source of truth: _design-handoff/homepage-preview.html (desktop 1440).
   Loaded on the homepage only, by ../10-modeiptv-home-sections.php.
   Everything is scoped to .mh (each section's root) so the NORFLO theme
   styles elsewhere on the site are untouched, and the theme's own element
   styles (h2 colours, p colours, list bullets) can't leak in here.
   ===================================================================== */

/* ---------- Fonts: Manrope, self-hosted like League Spartan ----------- */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(fonts/manrope-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(fonts/manrope-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens (mode-homepage.css from the handoff) --------------- */
:root {
	--mode-blue: #0171C9;        /* logo blue: primary buttons, links, icons */
	--mode-blue-hover: #015A9F;  /* hover / pressed for every blue or outlined button */
	--mode-ink: #0A1424;         /* hero, dark cards */
	--mode-navy: #0F1B2E;        /* dark bands (reseller card) */
	--mode-navy-card: #16263D;
	--mode-sky: #8CC8FF;         /* accents on dark */
	--mode-paper: #F4F7FB;       /* light section background */
	--mode-white: #FFFFFF;
	--mode-tint: #E6F1FB;        /* icon tiles */
	--mode-chip: #EEF3F9;        /* chips, toggle track */
	--mode-line: #E3EAF3;        /* borders */
	--mode-text: #0E1A2C;
	--mode-text-2: #1E2B40;
	--mode-muted: #4F5E75;
	--mode-gold: #F5B84C;        /* Premium / 4K */
	--mode-gold-hover: #D99A2B;
	--mode-gold-text: #8A5A00;   /* gold text on light backgrounds */
	--mode-gold-icon: #B7791F;
	--mode-gold-ink: #2A1C00;    /* text on gold */
	--mode-star: #E8A33A;
	--mode-radius-btn: 10px;
	--mode-radius-card: 18px;
	--mode-radius-band: 24px;
	--mode-container: 1360px;    /* content width (the owner's reference: 272px margins at 1900px) */
	--mh-gutter: 40px;           /* minimum side margin */
	--mode-section-pad: 104px;
	--mode-font-display: 'League Spartan', sans-serif;
	--mode-font-body: 'Manrope', system-ui, sans-serif;
	--mh-header: 100px;          /* NORFLO's fixed header sits over the top of the page */
}
@media (max-width: 1024px) { :root { --mode-section-pad: 72px; } }
@media (max-width: 991px)  { :root { --mh-header: 76px; } }
@media (max-width: 640px)  { :root { --mode-section-pad: 56px; } }

/* ---------- Page guards ---------------------------------------------- */
html,
body { overflow-x: clip; }
body.page-id-55228 { background: #FFFFFF; }

/* Elementor containers that only hold a section shortcode: no padding, no gaps */
.elementor-55228 .mh-host {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--gap: 0px; --row-gap: 0px; --column-gap: 0px; --widgets-spacing: 0px;
	padding: 0;
}
.elementor-55228 .mh-host > .elementor-widget,
.elementor-55228 .mh-host .elementor-widget-shortcode { width: 100%; margin: 0 !important; }

/* ---------- Base inside the sections ---------------------------------- */
.mh {
	box-sizing: border-box;
	font-family: var(--mode-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--mode-text);
	-webkit-font-smoothing: antialiased;
	text-align: left;
}
.mh *,
.mh *::before,
.mh *::after { box-sizing: border-box; }
.mh :where(h1, h2, h3, p, ul, li, figure, blockquote, dl, dd) { margin: 0; padding: 0; }
.mh :where(ul) { list-style: none; }
.mh :where(h1, h2, h3) {
	font-family: var(--mode-font-display);
	font-weight: 700;
	color: inherit;
	text-transform: none;
}
.mh :where(p) { color: inherit; }
.mh :where(img) { max-width: 100%; height: auto; }
.mh a { color: var(--mode-blue); transition: color .2s ease; }
.mh a:hover { color: var(--mode-blue-hover); }
.mh button { font-family: inherit; cursor: pointer; }
.mh svg { flex-shrink: 0; }
.mh :is(a, button, [tabindex="0"]):focus-visible { outline: 3px solid var(--mode-blue); outline-offset: 3px; }
.mh.mh-dark :is(a, button):focus-visible, .mh .mh-dark :is(a, button):focus-visible { outline-color: var(--mode-sky); }
.mh .mh-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;
}

.mh.mh-sec { padding: var(--mode-section-pad) 0; }
.mh.mh-paper { background: var(--mode-paper); }
.mh.mh-white { background: #FFFFFF; }
.mh .mh-wrap { width: min(var(--mode-container), 100% - 2 * var(--mh-gutter)); margin-inline: auto; }
@media (max-width: 1199px) { :root { --mh-gutter: 24px; } }
@media (max-width: 640px)  { :root { --mh-gutter: 16px; } }

/* Section intro: eyebrow, title, lead */
.mh .mh-eyebrow {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--mode-font-display); font-size: 14px; font-weight: 700; line-height: 1.2;
	letter-spacing: .14em; text-transform: uppercase; color: var(--mode-blue);
}
.mh .mh-eyebrow::before {
	content: ""; display: block; flex-shrink: 0; width: 18px; height: 10px;
	background: var(--mode-blue); transform: skewX(-18deg);
}
.mh .mh-eyebrow--plain::before { display: none; }
.mh .mh-h2 { font-size: 46px; line-height: 1.06; letter-spacing: -.01em; }
.mh .mh-h2--sm { font-size: 40px; line-height: 1.08; }
.mh .mh-lead { font-size: 17px; line-height: 1.65; color: var(--mode-muted); }
.mh .mh-lead--loose { line-height: 1.7; }
.mh .mh-intro { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.mh .mh-intro--center { align-items: center; text-align: center; margin-inline: auto; max-width: 800px; }
@media (max-width: 1024px) { .mh .mh-h2 { font-size: 38px; } .mh .mh-h2--sm { font-size: 34px; } }
@media (max-width: 640px)  { .mh .mh-h2 { font-size: 30px; line-height: 1.1; } .mh .mh-h2--sm { font-size: 28px; } .mh .mh-lead { font-size: 16px; } }

/* Check bullets (blue disc with a tick) */
.mh .mh-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; padding: 6px 0 8px; }
.mh .mh-ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--mode-text); }
.mh .mh-tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 13px; background: var(--mode-blue); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.mh .mh-ticks--row { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 4px 0 6px; }
.mh .mh-ticks--row li { align-items: center; }
@media (max-width: 640px) { .mh .mh-ticks { grid-template-columns: 1fr; } }

.mh .mh-stars { display: flex; gap: 2px; color: var(--mode-star); }

/* ---------- Buttons: NORFLO's hover (fill change + running light streaks) ---------- */
.mh .mbtn {
	position: relative; z-index: 1; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 52px; padding: 0 26px;
	border: 1.5px solid transparent; border-radius: var(--mode-radius-btn);
	background: var(--mode-blue); color: #FFFFFF;
	font-family: var(--mode-font-body); font-size: 16px; font-weight: 700; line-height: 1.2;
	text-align: center; text-decoration: none; white-space: nowrap;
	transition: all ease .5s;
}
.mh .mbtn::before,
.mh .mbtn::after,
.mh .mbtn .mb-edge::before,
.mh .mbtn .mb-edge::after {
	content: ""; position: absolute; opacity: 0; pointer-events: none; transition: all ease .5s;
}
.mh .mbtn::before { top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, #FFFFFF, transparent); }
.mh .mbtn::after { bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to left, #FFFFFF, transparent); }
.mh .mbtn .mb-edge { position: absolute; inset: 0; pointer-events: none; }
.mh .mbtn .mb-edge::before { top: 0; left: 0; width: 2px; height: 100%; background: linear-gradient(to top, #FFFFFF, transparent); }
.mh .mbtn .mb-edge::after { bottom: 0; right: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, #FFFFFF, transparent); }
/* Every blue or outlined button hovers to #015A9F with white text */
.mh .mbtn:is(:hover, :focus-visible) { background-color: var(--mode-blue-hover); border-color: var(--mode-blue-hover); color: #FFFFFF; }
.mh .mbtn:is(:hover, :focus-visible)::before { opacity: 1; animation: mbRight 2s linear infinite; }
.mh .mbtn:is(:hover, :focus-visible)::after { opacity: 1; animation: mbLeft 2s linear infinite; }
.mh .mbtn:is(:hover, :focus-visible) .mb-edge::before { opacity: 1; animation: mbTop 2s linear infinite; animation-delay: 1s; }
.mh .mbtn:is(:hover, :focus-visible) .mb-edge::after { opacity: 1; animation: mbBottom 2s linear infinite; animation-delay: 1s; }
@keyframes mbRight { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes mbLeft { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes mbTop { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } }
@keyframes mbBottom { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

.mh .mbtn--lg { height: 56px; padding: 0 28px; }
.mh .mbtn--sm { height: 44px; padding: 0 18px; font-size: 14px; }
.mh .mbtn--md { height: 48px; padding: 0 22px; font-size: 15px; }
.mh .mbtn--block { display: flex; width: 100%; }
/* Outline on dark (hero "IPTV Free Trial") */
.mh .mbtn--ghost-dark { background: transparent; border-color: #3A4B66; color: #FFFFFF; }
/* Outline blue on light */
.mh .mbtn--outline { background: #FFFFFF; border-color: var(--mode-blue); color: var(--mode-blue); }
.mh .mbtn--outline.mbtn--clear:not(:hover):not(:focus-visible) { background: transparent; } /* resting state only, so the hover fill still shows */
/* White on the blue trial card, and white outline beside it */
.mh .mbtn--white { background: #FFFFFF; color: var(--mode-blue); font-weight: 800; }
.mh .mbtn--outline-white { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
/* Premium: gold, hovers to #D99A2B with dark text */
.mh .mbtn--gold { background: var(--mode-gold); color: var(--mode-gold-ink); }
.mh .mbtn--gold:is(:hover, :focus-visible) { background-color: var(--mode-gold-hover); border-color: var(--mode-gold-hover); color: var(--mode-gold-ink); }
.mh .mbtn--gold::before,
.mh .mbtn--gold::after,
.mh .mbtn--gold .mb-edge::before,
.mh .mbtn--gold .mb-edge::after { filter: brightness(1); }

/* Text links with an arrow ("Learn More", "Read customer reviews"): no motion,
   only the colour change on hover. */
.mh .mlink {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 15px; font-weight: 700; text-decoration: none; color: var(--mode-blue);
	transition: none;
}

.mh .mh-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 640px) {
	.mh .mh-actions { flex-direction: column; align-items: stretch; }
	.mh .mh-actions .mbtn { width: 100%; white-space: normal; }
	.mh .mh-actions .mlink { justify-content: center; min-height: 44px; }
}

/* ---------- 1. Hero --------------------------------------------------- */
.mh.mh-hero {
	position: relative; overflow: hidden;
	background: var(--mode-ink); color: #FFFFFF;
	padding: calc(var(--mh-header) + 104px) 0 128px;
}
/* Static poster wall, anchored right so the right-hand posters stay whole.
   The box is at most 1600px wide so the 1672px image is never enlarged. */
.mh .mh-hero__media {
	position: absolute; top: var(--mh-header); bottom: 0; right: 0;
	left: max(calc(50% - 480px), calc(100% - 1600px));
	overflow: hidden;
}
.mh .mh-hero__media img {
	display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: 100% 50%;
}
/* Soft left edge of the image (it never shows as a hard line) */
.mh .mh-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0A1424 0, rgba(10,20,36,0) 200px); }
/* The shade: solid behind the text, still strong at the middle of the screen,
   then fading gradually across the posters (clear from about 80%). */
.mh.mh-hero::before {
	content: ""; position: absolute; z-index: 1; top: var(--mh-header); bottom: 0; left: 0; right: 0;
	background: linear-gradient(90deg, #0A1424 0%, #0A1424 30%, rgba(10,20,36,.92) 38%, rgba(10,20,36,.8) 45%, rgba(10,20,36,.65) 50%, rgba(10,20,36,.45) 57%, rgba(10,20,36,.25) 65%, rgba(10,20,36,.1) 73%, rgba(10,20,36,0) 82%);
	pointer-events: none;
}
.mh .mh-hero__inner { position: relative; z-index: 2; }
.mh .mh-hero__copy { width: 600px; max-width: 100%; display: flex; flex-direction: column; gap: 28px; }
.mh.mh-hero h1 { font-size: 58px; line-height: 1.02; letter-spacing: -.015em; color: #FFFFFF; }
.mh .mh-hero__lead { font-size: 17px; line-height: 1.7; color: #C3CFDF; max-width: 560px; }
.mh .mh-trust { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 24px; border-top: 1px solid #1B2A42; }
.mh .mh-trust li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: #C3CFDF; }
.mh .mh-trust svg { color: var(--mode-sky); }
@media (max-width: 1024px) {
	.mh.mh-hero { padding: calc(var(--mh-header) + 72px) 0 80px; }
	.mh .mh-hero__media { left: 0; top: var(--mh-header); }
	.mh.mh-hero::before { display: none; } /* text spans the width here: the image gets an even overlay instead */
	.mh .mh-hero__media::before { background: linear-gradient(90deg, rgba(10,20,36,.94) 0%, rgba(10,20,36,.82) 55%, rgba(10,20,36,.6) 100%); }
	.mh.mh-hero h1 { font-size: 46px; }
}
@media (max-width: 640px) {
	.mh.mh-hero { padding: calc(var(--mh-header) + 48px) 0 56px; }
	.mh .mh-hero__media::before { background: rgba(10,20,36,.84); }
	.mh.mh-hero h1 { font-size: 36px; line-height: 1.06; }
	.mh .mh-hero__lead { font-size: 16px; }
	.mh .mh-hero__copy { gap: 22px; }
}

/* ---------- 2. Stats -------------------------------------------------- */
.mh.mh-stats { padding: 48px 0; border-bottom: 1px solid var(--mode-line); }
.mh .mh-stats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mh .mh-stat { padding: 0 24px; border-right: 1px solid var(--mode-line); }
.mh .mh-stat:last-child { border-right: 0; }
.mh .mh-stat__num { font-family: var(--mode-font-display); font-size: 44px; font-weight: 700; line-height: 1; color: var(--mode-text); font-variant-numeric: tabular-nums; }
.mh .mh-stat__label { font-size: 14px; line-height: 1.4; color: var(--mode-muted); margin-top: 8px; }
/* Same single row of five as on desktop; figures and labels shrink with the screen. */
@media (max-width: 1024px) {
	.mh .mh-stat { padding: 0 16px; }
	.mh .mh-stat__num { font-size: clamp(30px, 4.4vw, 44px); }
	.mh .mh-stat__label { font-size: 13px; }
}
@media (max-width: 640px) {
	.mh.mh-stats { padding: 28px 0; }
	.mh .mh-stat { padding: 0 6px; }
	.mh .mh-stat__num { font-size: clamp(16px, 5vw, 28px); letter-spacing: -.01em; }
	.mh .mh-stat__label { font-size: clamp(10px, 2.9vw, 12px); line-height: 1.25; margin-top: 6px; }
}
/* Smallest phones: a little more width so "experience" fits its column */
@media (max-width: 360px) {
	.mh.mh-stats .mh-wrap { width: calc(100% - 16px); }
	.mh .mh-stat { padding: 0 4px; }
}

/* ---------- 3. Pricing: Standard / Premium reference design ----------- */
.mh.mh-pricing { scroll-margin-top: 24px; }
.mh.mh-pricing .mh-pricing__inner {
    display: flex; flex-direction: column; align-items: center; gap: 40px;
    /* width comes from .mh-wrap, the same as every other section */
}
.mh.mh-pricing .mh-tabs {
    display: flex; flex-wrap: nowrap; gap: 4px; padding: 6px;
    background: var(--mode-chip); border-radius: 14px;
}
.mh.mh-pricing .mh-tab {
    display: flex; align-items: center; gap: 4px;
    min-width: 0; height: 48px; margin: 0; padding: 0 24px;
    border: 0; border-radius: 10px; background: transparent;
    color: var(--mode-text-2); font-family: var(--mode-font-body);
    font-size: 15px; font-weight: 800; line-height: 1;
    text-transform: none; letter-spacing: normal;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.mh.mh-pricing .mh-tab__sub { font-weight: 600; opacity: .75; }
.mh.mh-pricing .mh-tab__chip {
    display: inline-block; margin-left: 6px; padding: 3px 8px;
    border-radius: 6px; font-size: 12px; font-weight: 800;
    background: var(--mode-gold); color: var(--mode-gold-ink);
}
.mh.mh-pricing .mh-tab[aria-selected="true"] {
    background: var(--mode-blue); color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(1,113,201,.28);
}
.mh.mh-pricing .mh-tab--premium[aria-selected="true"] {
    background: var(--mode-gold); color: var(--mode-gold-ink);
    box-shadow: 0 6px 16px rgba(201,138,18,.28);
}
.mh.mh-pricing .mh-tab--premium[aria-selected="true"] .mh-tab__chip {
    background: var(--mode-gold-ink); color: var(--mode-gold);
}
.mh.mh-pricing .mh-tab:not([aria-selected="true"]):hover { background: #FFFFFF; }
.mh.mh-pricing .mh-panel { width: 100%; min-width: 0; padding-top: 18px; }
.mh.mh-pricing .mh-panel[hidden] { display: none; }
.mh.mh-pricing .mh-plans {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px; align-items: stretch; width: 100%;
}

/* Tier variables belong to each card, so switching tabs cannot reset them. */
.mh.mh-pricing .mh-plan {
    --mh-plan-accent: #0171C9;
    --mh-plan-surface: #F4F7FB;
    --mh-plan-border: #DCE7F5;
    --mh-plan-text: #0E1A2C;
    --mh-plan-label: #0171C9;
    --mh-plan-price: #0171C9;
    --mh-plan-muted: #4F5E75;
    --mh-plan-rule: #DCE7F5;
    --mh-plan-check-bg: #E6F1FB;
    --mh-plan-check-ink: #0171C9;
    --mh-plan-accent-ink: #FFFFFF;
    --mh-plan-hover: #015A9F;
    position: relative; display: flex; flex-direction: column; gap: 0;
    min-width: 0; height: auto; margin: 0; padding: 32px 24px 24px;
    border: 1px solid var(--mh-plan-border); border-radius: 20px;
    background: var(--mh-plan-surface); color: var(--mh-plan-text);
    box-shadow: none; overflow: visible;
}
.mh.mh-pricing .mh-plan.mh-plan--premium {
    --mh-plan-accent: #F5B84C;
    --mh-plan-surface: #FFFBF2;
    --mh-plan-border: #F1DDB0;
    --mh-plan-label: #8A5A00;
    --mh-plan-price: #AF7714;
    --mh-plan-rule: #F1DDB0;
    --mh-plan-check-bg: #F5B84C;
    --mh-plan-check-ink: #2A1C00;
    --mh-plan-accent-ink: #2A1C00;
    --mh-plan-hover: #D99A2B;
    box-shadow: inset 0 2px 0 #F5B84C;
}
.mh.mh-pricing .mh-plan.mh-plan--featured {
    --mh-plan-surface: #0A1424;
    --mh-plan-text: #F4F7FB;
    --mh-plan-label: #8CC8FF;
    --mh-plan-price: #8CC8FF;
    --mh-plan-muted: #BACADC;
    --mh-plan-rule: #26364D;
    --mh-plan-check-bg: #1E2B40;
    --mh-plan-check-ink: #8CC8FF;
    border: 2px solid var(--mh-plan-accent);
    padding: 31px 23px 23px;
    background: var(--mh-plan-surface); transform: translateY(-14px);
    box-shadow: 0 24px 44px -16px rgba(1,113,201,.38);
}
.mh.mh-pricing .mh-plan.mh-plan--premium.mh-plan--featured {
    --mh-plan-label: #F5B84C;
    --mh-plan-price: #FFD17B;
    --mh-plan-rule: #4A3B26;
    --mh-plan-check-bg: #F5B84C;
    --mh-plan-check-ink: #2A1C00;
    background: radial-gradient(ellipse at 50% 0, rgba(245,184,76,.13), transparent 38%), #0A1424;
    box-shadow: 0 24px 44px -16px rgba(201,138,18,.35);
}

/* Reset only pricing-card content. Specific rules below define each gap. */
.mh.mh-pricing .mh-plan :where(p, h3, ul, li) {
    margin: 0; padding: 0; border: 0; text-transform: none;
    letter-spacing: normal;
}
.mh.mh-pricing .mh-plan .mh-plan__badge {
    position: absolute; z-index: 1; top: -16px; left: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    width: max-content; min-height: 32px; margin: 0; padding: 7px 16px;
    transform: translateX(-50%); border-radius: 999px;
    background: var(--mh-plan-accent); color: var(--mh-plan-accent-ink);
    font-family: var(--mode-font-body); font-size: 12px; font-weight: 800;
    line-height: 18px; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap;
}
.mh.mh-pricing .mh-plan .mh-plan__head {
    display: flex; flex-direction: column; min-width: 0;
}
.mh.mh-pricing .mh-plan .mh-plan__tier {
    color: var(--mh-plan-label); font-family: var(--mode-font-body);
    font-size: 12px; font-weight: 800; line-height: 16px;
    letter-spacing: 1px; text-transform: uppercase;
}
.mh.mh-pricing .mh-plan .mh-plan__dur {
    margin-top: 4px; color: var(--mh-plan-text);
    font-family: var(--mode-font-display); font-size: 20px;
    font-weight: 700; line-height: 24px;
}
.mh.mh-pricing .mh-plan .mh-plan__pricing {
    display: flex; flex-direction: column; align-items: stretch;
    min-width: 0; margin-top: 20px;
}
.mh.mh-pricing .mh-plan .mh-plan__price {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline;
    gap: 0; width: 100%; min-width: 0; min-height: 50px;
    margin: 0; color: var(--mh-plan-price);
    font-family: var(--mode-font-display); line-height: 1;
    white-space: nowrap;
}
.mh.mh-pricing .mh-plan .mh-plan__currency {
    flex: 0 0 auto; align-self: flex-start; margin: 6px 1px 0 0;
    color: var(--mh-plan-price); font-family: var(--mode-font-display);
    font-size: 26px; font-weight: 700; line-height: 1;
}
.mh.mh-pricing .mh-plan .mh-plan__amount {
    flex: 0 0 auto; color: var(--mh-plan-price);
    font-family: var(--mode-font-display); font-size: 50px;
    font-weight: 700; line-height: 1; letter-spacing: -.02em;
}
.mh.mh-pricing .mh-plan .mh-plan__cur {
    flex: 0 0 auto; margin-left: 8px; color: var(--mh-plan-muted);
    font-family: var(--mode-font-body); font-size: 14px;
    font-weight: 600; line-height: 20px;
}
.mh.mh-pricing .mh-plan .mh-plan__monthly {
    display: block; width: 100%; margin: 12px 0 0;
    color: var(--mh-plan-text); font-family: var(--mode-font-body);
    font-size: 13px; font-weight: 500; line-height: 20px;
}
.mh.mh-pricing .mh-plan .mh-plan__saving-slot {
    display: block; width: 100%; min-height: 28px; margin-top: 12px;
    line-height: 0;
}
.mh.mh-pricing .mh-plan .mh-plan__saving {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: max-content; max-width: 100%;
    margin: 0; padding: 6px 10px; border: 0; border-radius: 999px;
    background: var(--mh-plan-accent); color: var(--mh-plan-accent-ink);
    font-family: var(--mode-font-body); font-size: 12px;
    font-weight: 800; line-height: 16px; white-space: nowrap;
}
.mh.mh-pricing .mh-plan .mh-plan__rule {
    flex: 0 0 auto; width: 100%; height: 1px; margin: 20px 0 18px;
    padding: 0; border: 0; background: var(--mh-plan-rule); opacity: 1;
}
.mh.mh-pricing .mh-plan .mh-plan__feats {
    display: flex; flex: 1 0 auto; flex-direction: column; gap: 10px;
    width: 100%; margin: 0; padding: 0; list-style: none;
}
.mh.mh-pricing .mh-plan .mh-plan__feats > li {
    display: flex; align-items: flex-start; gap: 10px;
    min-width: 0; margin: 0; padding: 0; list-style: none;
    color: var(--mh-plan-text); font-family: var(--mode-font-body);
    font-size: 14px; font-weight: 500; line-height: 20px;
}
.mh.mh-pricing .mh-plan .mh-plan__feats > li::before { content: none; display: none; }
.mh.mh-pricing .mh-plan .mh-plan__feats > li p { margin: 0; padding: 0; font: inherit; color: inherit; }
.mh.mh-pricing .mh-plan .mh-plan__check {
    display: inline-flex; flex: 0 0 18px; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
    background: var(--mh-plan-check-bg); color: var(--mh-plan-check-ink);
}
.mh.mh-pricing .mh-plan .mh-plan__check svg {
    display: block; width: 12px; height: 12px; margin: 0;
    color: inherit; stroke: currentColor;
}
.mh.mh-pricing .mh-plan .mh-plan__feature-text { flex: 1 1 0; min-width: 0; }
.mh.mh-pricing .mh-plan .mbtn {
    display: flex; flex: 0 0 auto; width: 100%; height: 50px;
    min-height: 50px; margin-top: 24px; padding: 0 16px;
    border: 1px solid transparent; border-radius: 10px;
    background: var(--mh-plan-accent); color: var(--mh-plan-accent-ink);
    font-family: var(--mode-font-body); font-size: 15px;
    font-weight: 700; line-height: 1.2;
}
.mh.mh-pricing .mh-plan .mbtn:is(:hover, :focus-visible) {
    background: var(--mh-plan-hover); border-color: var(--mh-plan-hover);
    color: var(--mh-plan-accent-ink);
}
.mh.mh-pricing .mh-plan--featured .mbtn:focus-visible {
    outline: 3px solid var(--mh-plan-price); outline-offset: 3px;
}
.mh.mh-pricing .mh-guarantee {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px 12px; font-size: 15px; color: var(--mode-muted);
}
.mh.mh-pricing .mh-guarantee svg { color: var(--mode-blue); }
.mh.mh-pricing .mh-guarantee strong { color: var(--mode-text); }
.mh.mh-pricing[data-tier="premium"] .mh-guarantee svg { color: var(--mode-gold-icon); }
.mh.mh-pricing[data-tier="premium"] .mh-guarantee .mlink { color: var(--mode-gold-text); }

/* Switch to two columns before four cards become too narrow for their text. */
@media (max-width: 1279px) {
    .mh.mh-pricing .mh-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
    .mh.mh-pricing .mh-plan.mh-plan--featured { transform: none; }
}
@media (max-width: 640px) {
    .mh.mh-pricing .mh-pricing__inner { gap: 32px; }
    .mh.mh-pricing .mh-plans { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .mh.mh-pricing .mh-tabs { width: 100%; }
    .mh.mh-pricing .mh-tab { flex: 1 1 0; justify-content: center; padding: 0 12px; }
    .mh.mh-pricing .mh-tab__sub { display: none; }
}

/* ---------- Two-column media + text (who we are, live TV) -------------- */
.mh .mh-split { display: flex; gap: 72px; align-items: center; }
.mh .mh-split__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 1024px) {
	.mh .mh-split { flex-direction: column; align-items: stretch; gap: 48px; }
}

/* Highlighted sentence in a split section (live TV here, cost on /pricing/). The theme's
   "Our Content" effect (norflo-main-style.css, .our-content p span): while the pointer is over
   the section, a band sweeps in from the left behind the sentence (0.5s ease). Light brand blue
   on these light bands. Adds only the band: the paragraph keeps its own text style. Desktop only, as in the theme. */
.mh .mh-highlight { position: relative; z-index: 0; }
.mh .mh-highlight::before {
	content: ""; position: absolute; z-index: -1; top: 50%; left: -40px;
	width: 0; height: 140%; transform: translateY(-50%);
	background-color: #D3E6F8;
	transition: all ease .5s;
}
@media (min-width: 1200px) and (hover: hover) {
	.mh .mh-split:hover .mh-highlight::before { width: calc(100% + 64px); }
}
@media (max-width: 1199px) { .mh .mh-highlight::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .mh .mh-highlight::before { transition: none; } }

/* ---------- 4. Who we are --------------------------------------------- */
.mh .mh-who__media { position: relative; flex: 0 0 560px; height: 440px; }
.mh .mh-who__media img { display: block; width: 100%; height: 400px; object-fit: cover; border-radius: 20px; }
.mh .mh-rating-card {
	position: absolute; left: 32px; bottom: 0;
	display: flex; align-items: center; gap: 16px;
	padding: 18px 22px; background: #FFFFFF; border-radius: 16px;
	box-shadow: 0 20px 40px rgba(14,26,44,.14);
}
.mh .mh-rating-card__score { font-family: var(--mode-font-display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--mode-text); }
.mh .mh-rating-card__count { font-size: 13px; line-height: 1.4; color: var(--mode-muted); margin-top: 4px; }
.mh.mh-who .mh-actions { gap: 22px; }
@media (max-width: 1024px) {
	.mh .mh-who__media { flex: none; width: 100%; max-width: 560px; height: auto; padding-bottom: 40px; }
	.mh .mh-who__media img { height: auto; aspect-ratio: 7 / 5; }
}
@media (max-width: 640px) {
	.mh .mh-rating-card { left: 16px; right: 16px; padding: 14px 18px; }
	.mh .mh-rating-card__score { font-size: 34px; }
}

/* ---------- 5. Setup guides (.modeiptv-setup-guides) ------------------- */
/* Header band (eyebrow, H2, intro | button) above a photo + 3x3 guide grid. */
.mh.modeiptv-setup-guides { padding: 64px 0; background: #FFFFFF; }
.modeiptv-setup-guides .msg { display: flex; flex-direction: column; gap: 40px; }
.modeiptv-setup-guides .msg__head {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px;
}
.modeiptv-setup-guides .msg__intro { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.modeiptv-setup-guides .msg__intro .mh-eyebrow { margin-bottom: 14px; }
.modeiptv-setup-guides .msg__title {
	margin: 0; font-family: var(--mode-font-display); font-size: 42px; line-height: 1.08; font-weight: 700;
	letter-spacing: -.01em; color: #0F1B2E;
}
.modeiptv-setup-guides .msg__lead { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: #64748B; max-width: 640px; }
.modeiptv-setup-guides .msg__all { height: 54px; padding: 0 28px; white-space: nowrap; background: #FFFFFF; border: 1.5px solid #0171C9; color: #0171C9; }

/* Bottom band: guides 58% on the left, photo 42% on the right (of the width left after the
   24px gap). The photo comes first in the HTML so it leads when the layout stacks. */
.modeiptv-setup-guides .msg__body {
	display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 24px; align-items: stretch;
}
.modeiptv-setup-guides .msg__photo { min-width: 0; order: 2; }
.modeiptv-setup-guides .msg__photo img {
	display: block; width: 100%; height: 100%; min-height: 100%; max-width: none;
	aspect-ratio: 16 / 9; object-fit: cover; object-position: center;
	border-radius: 16px;
}
.modeiptv-setup-guides .msg__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: 14px; margin: 0; padding: 0; list-style: none;
}
.modeiptv-setup-guides .msg__grid li { display: flex; min-width: 0; margin: 0; }
.modeiptv-setup-guides .msg__card {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
	width: 100%; padding: 16px 18px;
	background: #F4F8FD; border: 1px solid #DCE8F5; border-radius: 14px;
	color: #0F1B2E; text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}
.modeiptv-setup-guides .msg__card:hover { border-color: #0171C9; background: #EAF3FD; color: #0F1B2E; }
.modeiptv-setup-guides .msg__card:focus-visible { outline: 3px solid #0171C9; outline-offset: 2px; border-color: #0171C9; }
.modeiptv-setup-guides .msg__icon {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 48px; height: 48px; border-radius: 12px; background: #E5F1FF; color: #0171C9;
}
/* Brand logos: the same 48x48 area, no tile, so wordmarks can use the full width. Each
   logo's width comes from its width attribute (set per brand in sections.php); the height
   follows the artwork's own proportions. */
.modeiptv-setup-guides .msg__logo { flex-direction: column; gap: 5px; border-radius: 0; background: none; }
.modeiptv-setup-guides .msg__logo img {
	display: block; flex: none; height: auto; max-width: 100%; max-height: 100%;
	object-fit: contain; border-radius: 0; filter: none;
}
.modeiptv-setup-guides .msg__name { min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.modeiptv-setup-guides .msg__arrow { display: flex; flex-shrink: 0; color: #0171C9; }

/* Stack before the guide labels get cramped */
@media (max-width: 1199px) {
	.modeiptv-setup-guides .msg { gap: 24px; }
	.modeiptv-setup-guides .msg__head { grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: start; }
	.modeiptv-setup-guides .msg__title { font-size: 36px; }
	.modeiptv-setup-guides .msg__body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.modeiptv-setup-guides .msg__photo { order: 0; }
	.modeiptv-setup-guides .msg__photo img { height: auto; min-height: 0; }
	.modeiptv-setup-guides .msg__grid { grid-template-rows: none; grid-auto-rows: 1fr; }
}
@media (max-width: 767px) {
	.modeiptv-setup-guides .msg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mh.modeiptv-setup-guides { padding: 48px 0; }
	.modeiptv-setup-guides .msg__title { font-size: 30px; line-height: 1.12; }
	.modeiptv-setup-guides .msg__lead { font-size: 16px; }
	.modeiptv-setup-guides .msg__all { width: 100%; white-space: normal; }
}
@media (max-width: 479px) {
	.modeiptv-setup-guides .msg__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
	.modeiptv-setup-guides .msg__card { padding: 12px 16px 12px 12px; }
	.modeiptv-setup-guides .msg__icon { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.modeiptv-setup-guides .msg__card { transition: none; }
}

/* ---------- Card grids ------------------------------------------------- */
.mh .mh-stack { display: flex; flex-direction: column; gap: 44px; }
.mh .mh-grid { display: grid; gap: 20px; }
.mh .mh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mh .mh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mh .mh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .mh .mh-grid--4,
.mh .mh-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .mh .mh-grid--4,
.mh .mh-grid--3,
.mh .mh-grid--2 { grid-template-columns: 1fr; } }

/* ---------- 6. What's included ----------------------------------------- */
.mh .mh-feature { display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF; border: 1px solid var(--mode-line); border-radius: var(--mode-radius-card); }
.mh .mh-feature img { display: block; width: 100%; height: 176px; object-fit: cover; }
.mh .mh-feature__body { flex-grow: 1; display: flex; flex-direction: column; gap: 18px; padding: 22px 22px 24px; }
.mh .mh-feature h3 { font-size: 21px; line-height: 1.2; color: var(--mode-text); }
.mh .mh-feature__body { gap: 10px; }
.mh .mh-feature__text { flex-grow: 1; margin-bottom: 8px; font-size: 15px; line-height: 1.55; color: var(--mode-text-2); }
.mh .mh-feature .mbtn { white-space: normal; }

/* ---------- 7. Coverage ------------------------------------------------ */
.mh.mh-coverage .mh-split { gap: 64px; }
.mh .mh-coverage__text { flex: 0 0 520px; display: flex; flex-direction: column; gap: 20px; }
.mh .mh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mh .mh-chips li { padding: 8px 14px; border-radius: 999px; background: var(--mode-chip); font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--mode-text-2); }
.mh .mh-chips--links li { padding: 0; }
.mh .mh-chips--links a { display: block; padding: 8px 14px; border-radius: 999px; color: #015CA3; text-decoration: none; transition: none; }
.mh .mh-chips--links a:hover { background: #DCEBFA; color: #0F1B2E; }
.mh .mh-chips--links a:focus-visible { outline: 3px solid #0171C9; outline-offset: 2px; }
.mh .mh-coverage__map { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1024px) {
	.mh .mh-coverage__text { flex: none; }
}

/* ---------- 8. Why choose ---------------------------------------------- */
.mh .mh-benefit { display: flex; flex-direction: column; gap: 14px; padding: 30px; background: #FFFFFF; border: 1px solid var(--mode-line); border-radius: var(--mode-radius-card); }
.mh .mh-benefit__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--mode-tint); color: var(--mode-blue); display: flex; align-items: center; justify-content: center; }
.mh .mh-benefit h3 { font-size: 22px; line-height: 1.2; color: var(--mode-text); }
.mh .mh-benefit p { font-size: 15px; line-height: 1.6; color: var(--mode-muted); }
.mh .mh-benefit p a { font-weight: 700; }
@media (max-width: 640px) { .mh .mh-benefit { padding: 24px; } }

/* ---------- 9. Trial + guarantee (continues the paper band from 8) ------ */
.mh.mh-trial { padding-top: 0; }
.mh .mh-trial__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; }
.mh .mh-trial__card {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column; gap: 20px;
	padding: 52px; border-radius: var(--mode-radius-band);
	background: var(--mode-blue); color: #FFFFFF;
}
.mh .mh-trial__card::before {
	content: ""; position: absolute; z-index: -1; right: -75px; top: -2px; width: 323px; height: 540px;
	background: #0A62AE; transform: skewX(-14deg);
}
.mh .mh-trial__card .mh-eyebrow { color: #FFFFFF; }
.mh .mh-trial__card h2 { font-size: 44px; line-height: 1.06; letter-spacing: -.01em; max-width: 520px; color: #FFFFFF; }
.mh .mh-trial__card p { font-size: 17px; line-height: 1.65; max-width: 540px; color: #FFFFFF; }
.mh .mh-trial__card .mh-actions { padding-top: 6px; }
.mh .mh-trial__card .mbtn { height: 54px; }
.mh .mh-trial__card :is(a, button):focus-visible { outline-color: #FFFFFF; }
.mh .mh-guarantee-card {
	display: flex; flex-direction: column; gap: 18px;
	padding: 44px; border-radius: var(--mode-radius-band);
	background: var(--mode-ink); color: #FFFFFF;
}
.mh .mh-guarantee-card__icon { width: 56px; height: 56px; border-radius: 14px; background: var(--mode-navy-card); color: var(--mode-sky); display: flex; align-items: center; justify-content: center; }
.mh .mh-guarantee-card__title { font-size: 30px; line-height: 1.1; color: #FFFFFF; }
.mh .mh-guarantee-card p { font-size: 15px; line-height: 1.65; color: #B7C4D6; }
.mh .mh-guarantee-card p a { color: var(--mode-sky); font-weight: 700; }
.mh .mh-guarantee-card p a:hover { color: #FFFFFF; }
.mh .mh-guarantee-card .mlink { margin-top: auto; color: var(--mode-sky); }
.mh .mh-guarantee-card .mlink:hover { color: #FFFFFF; }
.mh .mh-guarantee-card :is(a, button):focus-visible { outline-color: var(--mode-sky); }
@media (max-width: 1024px) { .mh .mh-trial__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
	.mh .mh-trial__card { padding: 32px 24px; }
	.mh .mh-trial__card::before { display: none; }
	.mh .mh-trial__card h2 { font-size: 32px; }
	.mh .mh-trial__card p { font-size: 16px; }
	.mh .mh-guarantee-card { padding: 32px 24px; }
	.mh .mh-guarantee-card__title { font-size: 26px; }
}

/* ---------- 10. Reviews ------------------------------------------------ */
.mh.mh-reviews { scroll-margin-top: 24px; }
.mh .mh-reviews__layout { display: flex; gap: 56px; align-items: flex-start; }
.mh .mh-reviews__side { flex: 0 0 340px; display: flex; flex-direction: column; gap: 22px; }
.mh .mh-score-card { padding: 24px; border: 1px solid var(--mode-line); border-radius: var(--mode-radius-card); background: var(--mode-paper); }
.mh .mh-score-card__row { display: flex; align-items: center; gap: 14px; }
.mh .mh-score-card__score { font-family: var(--mode-font-display); font-size: 52px; font-weight: 700; line-height: 1; color: var(--mode-text); }
.mh .mh-score-card__count { font-size: 14px; line-height: 1.4; color: var(--mode-muted); margin-top: 4px; }
.mh .mh-score-card .mbtn { margin-top: 18px; height: 48px; font-size: 15px; }
.mh .mh-reviews__grid { flex: 1 1 auto; min-width: 0; }
.mh .mh-review { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 28px; background: var(--mode-paper); border: 1px solid var(--mode-line); border-radius: var(--mode-radius-card); }
.mh .mh-review blockquote { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.65; color: var(--mode-text-2); font-style: normal; background: none; }
/* NORFLO forces blockquote { padding: 25px !important } below 768px */
.mh .mh-review blockquote { padding: 0 !important; }
.mh .mh-review blockquote::before,
.mh .mh-review blockquote::after { display: none; }
.mh .mh-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.mh .mh-review__avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 20px; background: var(--mode-blue); color: #FFFFFF; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mh .mh-review:nth-child(4n+2) .mh-review__avatar,
.mh .mh-review:nth-child(4n+3) .mh-review__avatar { background: var(--mode-text); }
.mh .mh-review__name { display: block; font-size: 15px; line-height: 1.3; color: var(--mode-text); }
.mh .mh-review__src { display: block; font-size: 13px; line-height: 1.4; color: var(--mode-muted); }
/* Google profile photo (stored locally by the Google Reviews plugin) */
.mh img.mh-review__avatar { display: block; object-fit: cover; background: var(--mode-chip); }
.mh a.mh-review__name { font-weight: 700; text-decoration: none; }
.mh a.mh-review__name:hover { color: var(--mode-blue); text-decoration: underline; }
@media (max-width: 1024px) {
	.mh .mh-reviews__layout { flex-direction: column; align-items: stretch; gap: 40px; }
	.mh .mh-reviews__side { flex: none; }
	.mh .mh-score-card { max-width: 420px; }
}

/* ---------- 11. Compare ------------------------------------------------ */
.mh .mh-compare__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: center; padding: 20px 0; }
.mh .mh-cmp { display: flex; flex-direction: column; padding: 32px 30px 20px; background: #FFFFFF; border: 1px solid var(--mode-line); border-radius: 20px; }
.mh .mh-cmp__head { padding-bottom: 20px; }
.mh .mh-cmp h3 { font-size: 26px; line-height: 1.2; color: var(--mode-text); }
.mh .mh-cmp__sub { font-size: 14px; line-height: 1.4; color: #5E6C84; margin-top: 4px; }
.mh .mh-cmp__rows { display: flex; flex-direction: column; margin: 0; }
.mh .mh-cmp__row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--mode-line); margin: 0; }
.mh .mh-cmp__row dt { font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: #5E6C84; }
.mh .mh-cmp__row dd { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--mode-muted); }
.mh .mh-cmp--best {
	position: relative; margin: -20px 0; padding: 40px 32px 32px;
	background: var(--mode-ink); color: #FFFFFF;
	border: 2px solid var(--mode-blue); border-radius: 22px;
	box-shadow: 0 30px 60px rgba(1,113,201,.22);
}
.mh .mh-cmp__badge {
	position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
	padding: 6px 14px; border-radius: 8px; background: var(--mode-blue); color: #FFFFFF;
	font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.mh .mh-cmp--best .mh-cmp__head { display: flex; flex-direction: column; gap: 10px; }
.mh .mh-cmp--best .mh-cmp__logo { display: block; width: 135px; height: 40px; object-fit: contain; object-position: left center; }
.mh .mh-cmp--best h3 { color: #FFFFFF; }
.mh .mh-cmp--best .mh-cmp__sub { color: #B7C4D6; margin-top: 0; }
.mh .mh-cmp--best .mh-cmp__rows { flex-grow: 1; }
.mh .mh-cmp--best .mh-cmp__row { flex-direction: row; gap: 12px; border-top-color: #1F3050; }
.mh .mh-cmp--best .mh-cmp__row > svg { color: var(--mode-sky); margin-top: 2px; }
.mh .mh-cmp--best .mh-cmp__row > div { display: flex; flex-direction: column; gap: 4px; }
.mh .mh-cmp--best .mh-cmp__row dt { color: #8FA2BD; }
.mh .mh-cmp--best .mh-cmp__row dd { color: #FFFFFF; font-weight: 700; }
.mh .mh-cmp--best .mbtn { margin-top: 20px; }
@media (max-width: 1024px) {
	.mh .mh-compare__grid { grid-template-columns: 1fr; gap: 36px; max-width: 560px; margin-inline: auto; padding: 0; }
	.mh .mh-cmp--best { margin: 0; }
}

/* ---------- 12. Reseller ----------------------------------------------- */
.mh.mh-reseller { padding: 96px 0; }
.mh .mh-reseller__card {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: center; gap: 56px;
	padding: 56px 64px; border-radius: var(--mode-radius-band);
	background: var(--mode-navy); color: #FFFFFF;
}
.mh .mh-reseller__card::before,
.mh .mh-reseller__card::after { content: ""; position: absolute; z-index: -1; top: -40px; height: 400px; transform: skewX(-14deg); }
.mh .mh-reseller__card::before { right: 220px; width: 60px; background: var(--mode-blue); }
.mh .mh-reseller__card::after { right: -40px; width: 240px; background: var(--mode-navy-card); }
.mh .mh-reseller__text { flex: 1 1 auto; max-width: 700px; display: flex; flex-direction: column; gap: 16px; }
.mh.mh-reseller .mh-eyebrow { color: var(--mode-sky); }
.mh.mh-reseller h2 { color: #FFFFFF; }
.mh.mh-reseller p { font-size: 16px; line-height: 1.65; color: #B7C4D6; }
.mh.mh-reseller .mbtn { margin-left: auto; }
@media (max-width: 1024px) {
	.mh.mh-reseller { padding: var(--mode-section-pad) 0; }
	.mh .mh-reseller__card { flex-direction: column; align-items: flex-start; gap: 28px; padding: 48px 40px; }
	.mh.mh-reseller .mbtn { margin-left: 0; }
	.mh .mh-reseller__card::before { right: 120px; }
	.mh .mh-reseller__card::after { right: -140px; }
}
@media (max-width: 640px) {
	.mh .mh-reseller__card { padding: 36px 24px; }
	.mh .mh-reseller__card::before,
.mh .mh-reseller__card::after { display: none; }
	.mh.mh-reseller .mbtn { width: 100%; white-space: normal; }
}

/* ---------- 13. Live TV ------------------------------------------------ */
.mh .mh-livetv__img { flex: 0 0 560px; display: block; width: 560px; height: 380px; object-fit: cover; border-radius: 20px; }
@media (max-width: 1024px) {
	.mh .mh-livetv__img { flex: none; width: 100%; max-width: 560px; height: auto; aspect-ratio: 28 / 19; }
}

/* ---------- 14. Articles ----------------------------------------------- */
.mh .mh-articles__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.mh .mh-articles__head .mh-intro { gap: 18px; }
.mh .mh-post {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--mode-paper); border: 1px solid var(--mode-line); border-radius: var(--mode-radius-card);
	color: var(--mode-text); text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.mh .mh-post:hover { border-color: var(--mode-blue); box-shadow: 0 16px 32px rgba(14,26,44,.08); color: var(--mode-text); }
.mh .mh-post img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* the featured images are 16:9, so a fixed 16:9 frame shows them whole */
.mh .mh-post__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px 24px 24px; } /* content grows, so the footers line up across a row */
.mh .mh-post__cat { align-self: flex-start; padding: 5px 10px; border-radius: 6px; background: var(--mode-tint); color: var(--mode-blue-hover); font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.mh .mh-post h3 { font-size: 22px; line-height: 1.2; color: var(--mode-text); }
/* Card footer: one link spanning the content width, label left and arrow right */
.mh .mh-post { position: relative; }
.mh .mh-post__more {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin: auto 24px 0; padding: 18px 0; min-height: 48px;
	border-top: 1px solid #DCE7F5; color: #0171C9; text-decoration: none;
	font-size: 15px; font-weight: 600; line-height: 1.3;
}
.mh .mh-post__more:hover { color: #0171C9; }
.mh .mh-post__more::after { content: ""; position: absolute; inset: 0; } /* the whole card stays clickable, with no second link */
.mh .mh-post__arrow { flex: none; transition: transform .2s ease; }
.mh .mh-post:hover .mh-post__label, .mh .mh-post__more:focus-visible .mh-post__label { text-decoration: underline; text-underline-offset: 4px; }
.mh .mh-post:hover .mh-post__arrow, .mh .mh-post__more:focus-visible .mh-post__arrow { transform: translateX(3px); }
.mh .mh-post__more:focus-visible { outline: 3px solid #0171C9; outline-offset: -3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .mh .mh-post__arrow { transition: none; } .mh .mh-post:hover .mh-post__arrow, .mh .mh-post__more:focus-visible .mh-post__arrow { transform: none; } }
.mh .mh-post__meta { font-size: 13px; line-height: 1.4; color: var(--mode-muted); }
/* Opening of the article: three lines at most */
.mh .mh-post__excerpt { font-size: 15px; line-height: 1.55; color: var(--mode-text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* ---------- 15. FAQ ---------------------------------------------------- */
.mh.mh-faq { scroll-margin-top: 24px; }
.mh .mh-faq__list { width: 960px; max-width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.mh .mh-faq__item { background: #FFFFFF; border: 1px solid var(--mode-line); border-radius: 14px; }
.mh .mh-faq__item.is-open { border: 1.5px solid var(--mode-blue); }
.mh .mh-faq__item h3 { font-family: var(--mode-font-body); font-size: inherit; }
.mh .mh-faq__q {
	width: 100%; min-height: 44px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 20px 24px; border: 0; border-radius: 14px; background: transparent;
	font-size: 17px; font-weight: 700; line-height: 1.4; text-align: left; color: var(--mode-text);
}
.mh .mh-faq__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; background: var(--mode-chip); color: var(--mode-blue); transition: background-color .2s ease, color .2s ease; }
.mh .mh-faq__q[aria-expanded="true"] .mh-faq__icon { background: var(--mode-blue); color: #FFFFFF; }
.mh .mh-faq__q .i-minus,
.mh .mh-faq__q[aria-expanded="true"] .i-plus { display: none; }
.mh .mh-faq__q[aria-expanded="true"] .i-minus { display: block; }
.mh .mh-faq__a { padding: 0 84px 22px 24px; font-size: 15px; line-height: 1.7; color: var(--mode-muted); }
.mh .mh-faq__a[hidden] { display: none; }
.mh .mh-faq__a a { font-weight: 700; }
@media (max-width: 640px) {
	.mh .mh-faq__q { padding: 16px 18px; font-size: 16px; }
	.mh .mh-faq__a { padding: 0 18px 18px; }
}

/* ---------- Motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mh .mbtn::before,
.mh .mbtn::after,
.mh .mbtn .mb-edge::before,
.mh .mbtn .mb-edge::after { animation: none !important; }
	.mh .mbtn { transition: none; }
}

/* ---------- NORFLO header on this page --------------------------------- */
/* Carried over from the page's previous Custom CSS: the theme forces a
   near-black hover on the header button and hides keyboard focus. */
body.page-id-55228 .navbar .btn:hover { background-color: var(--mode-blue-hover) !important; color: #FFFFFF !important; }
body.page-id-55228 .navbar .btn:not(:hover)::before,
body.page-id-55228 .navbar .btn:not(:hover)::after,
body.page-id-55228 .navbar .btn:not(:hover) span::before,
body.page-id-55228 .navbar .btn:not(:hover) span::after { animation: none; }
body.page-id-55228 .navbar :is(a, button):focus-visible { outline: 3px solid var(--mode-sky) !important; outline-offset: 3px; box-shadow: none !important; }