/* Start custom CSS for html, class: .elementor-element-538ade3 */.mpo-patch-cord-page {
--primary: #1C629E;
--hover: #005177;
--accent: #f9c963;
--bg-gray: #F2F2F2;
--bg-white: #ffffff;
--text: #1A202C;
--muted: #555555;
--border: #E2E8F0;
--shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
--shadow-md: 0 12px 32px rgba(0,0,0,0.10);
--shadow-lg: 0 24px 56px rgba(0,0,0,0.14);
--radius: 12px;
--col-width: 560px; /* image column fixed width */
--gap: 80px; /* two-col gap */
--pad-x: 6%; /* section horizontal padding */
--pad-y: 110px; /* section vertical padding */
--max-w: 1440px;
}
/* ============================================================
RESET & BASE
============================================================ */
.mpo-patch-cord-page, .mpo-patch-cord-page *,.mpo-patch-cord-page *::before,.mpo-patch-cord-page *::after { margin:0; padding:0; box-sizing:border-box; }
.mpo-patch-cord-page { scroll-behavior:smooth; }
.mpo-patch-cord-page { font-family:'Inter',sans-serif; color:var(--text); background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased; }
.mpo-patch-cord-page { overflow-x:hidden; }
.mpo-patch-cord-page img { display:block; max-width:100%; }
.mpo-patch-cord-page a { text-decoration:none; transition:all .2s; }
/* ============================================================
NAV
============================================================ */
.mpo-patch-cord-page .mpo-patch-cord-nav {
position:fixed; top:0; width:100%; z-index:1000;
height:68px; padding:0 var(--pad-x);
display:flex; align-items:center; justify-content:space-between;
background:rgba(255,255,255,0.88); backdrop-filter:blur(14px);
border-bottom:1px solid var(--border);
}
.mpo-patch-cord-logo { font-size:1.2rem; font-weight:900; color:var(--primary); letter-spacing:-.5px; }
.mpo-patch-cord-nav-links { display:flex; align-items:center; gap:0; }
.mpo-patch-cord-nav-links a { color:var(--muted); font-weight:600; font-size:.88rem; padding:0 18px; transition:color .2s; }
.mpo-patch-cord-nav-links a:hover { color:var(--primary); }
.mpo-patch-cord-nav-cta { background:var(--primary); color:#fff !important; padding:9px 22px !important; border-radius:4px; margin-left:12px; }
.mpo-patch-cord-nav-cta:hover { background:var(--hover) !important; }
/* hamburger hidden by default */
.mpo-patch-cord-nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.mpo-patch-cord-nav-toggle span { display:block; width:24px; height:2px; background:var(--primary); border-radius:2px; transition:.3s; }
/* ============================================================
SECTION BASE
============================================================ */
.mpo-patch-cord-page .mpo-patch-cord-section { padding:var(--pad-y) var(--pad-x); border-bottom:1px solid var(--border); overflow:hidden; }
.mpo-patch-cord-gray-section { background:var(--bg-gray); }
.mpo-patch-cord-center-section { text-align:center; }
/* ============================================================
TWO-COL ROW (image col + text col)
============================================================ */
.mpo-patch-cord-row {
max-width:var(--max-w); margin:0 auto;
display:flex; align-items:center; gap:var(--gap);
}
.mpo-patch-cord-row.mpo-patch-cord-row-reverse { flex-direction:row-reverse; }
/* Text column: grows to fill remaining space */
.mpo-patch-cord-text-col { flex:1; min-width:0; }
/* Image column: fixed width, stacks mpo-patch-cord-image-frame + mpo-patch-cord-image-below */
.mpo-patch-cord-image-col {
flex:0 0 var(--col-width); width:var(--col-width);
display:flex; flex-direction:column; gap:20px;
flex-shrink:0;
}
/* Fixed-ratio image frame -padding-top trick for universal browser support */
.mpo-patch-cord-image-frame {
width:100%;
padding-top:75%; /* 4:3 ratio = 75% */
position:relative;
border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow-lg); flex-shrink:0;
}
.mpo-patch-cord-image-frame img {
position:absolute; top:0; left:0; right:0; bottom:0;
width:100%; height:100%; object-fit:cover; display:block;
}
.mpo-patch-cord-image-below { width:100%; }
/* Hero image: portrait 3:4 ratio */
.mpo-patch-cord-hero-section .mpo-patch-cord-image-col { flex-basis:480px; width:480px; }
.mpo-patch-cord-hero-section .mpo-patch-cord-image-frame { padding-top:133.33%; } /* 3:4 ratio */
/* ============================================================
FLOATING BADGES on image
============================================================ */
.mpo-patch-cord-float-card {
position:absolute; bottom:20px; right:20px; z-index:10;
background:rgba(255,255,255,0.96); backdrop-filter:blur(6px);
border-radius:10px; padding:14px 20px;
box-shadow:0 8px 24px rgba(0,0,0,0.15);
text-align:center; min-width:130px;
border-top:4px solid var(--accent);
}
.mpo-patch-cord-float-card .mpo-patch-cord-float-number { font-size:1.7rem; font-weight:900; color:var(--primary); line-height:1; }
.mpo-patch-cord-float-card .mpo-patch-cord-float-label { font-size:.72rem; color:var(--muted); margin-top:4px; font-weight:600; }
.mpo-patch-cord-float-card-top {
position:absolute; top:20px; left:20px; z-index:10;
background:rgba(28,98,158,0.92); backdrop-filter:blur(6px);
color:#fff; border-radius:8px; padding:12px 16px;
box-shadow:0 8px 20px rgba(28,98,158,0.35);
text-align:center; min-width:110px;
}
.mpo-patch-cord-float-card-top .mpo-patch-cord-float-number { font-size:1.5rem; font-weight:900; color:#fff; }
.mpo-patch-cord-float-card-top .mpo-patch-cord-float-label { font-size:.68rem; color:rgba(255,255,255,.82); }
/* ============================================================
TYPOGRAPHY
============================================================ */
.mpo-patch-cord-badge {
display:inline-block; padding:5px 14px;
background:rgba(28,98,158,0.1); color:var(--primary);
font-size:.75rem; font-weight:700; border-radius:3px;
text-transform:uppercase; letter-spacing:1.5px; margin-bottom:18px;
}
.mpo-patch-cord-page h1,.mpo-patch-cord-page h2 { font-weight:800; line-height:1.12; }
.mpo-patch-cord-page h2 { font-size:2.6rem; color:var(--primary); margin-bottom:18px; }
.mpo-patch-cord-page h2 em,.mpo-patch-cord-page h1 em { color:var(--accent); font-style:normal; }
.mpo-patch-cord-sub-text { font-size:1.05rem; color:var(--muted); line-height:1.8; margin-bottom:12px; }
.mpo-patch-cord-section-header { text-align:center; max-width:720px; margin:0 auto 50px; }
.mpo-patch-cord-section-header h2 { margin-bottom:14px; }
/* ============================================================
DATA CARDS
============================================================ */
.mpo-patch-cord-data-row { display:flex; gap:16px; margin:28px 0; }
.mpo-patch-cord-data-card {
flex:1; padding:20px;
background:#fff; border-left:4px solid var(--accent);
border-radius:6px; box-shadow:var(--shadow-sm);
}
.mpo-patch-cord-data-card.mpo-patch-cord-muted-card { border-left-color:#ccc; }
.mpo-patch-cord-data-card .mpo-patch-cord-data-value { font-size:2.2rem; font-weight:900; color:var(--primary); line-height:1; }
.mpo-patch-cord-data-card.mpo-patch-cord-muted-card .mpo-patch-cord-data-value { color:#aaa; }
.mpo-patch-cord-data-card .mpo-patch-cord-data-label { font-size:.8rem; color:var(--muted); margin-top:6px; font-weight:600; }
/* ============================================================
SPEC LIST
============================================================ */
.mpo-patch-cord-spec-list { list-style:none; border-top:1px solid var(--border); }
.mpo-patch-cord-spec-list.mpo-patch-cord-no-top { border-top:none; }
.mpo-patch-cord-spec-list li {
display:flex; justify-content:space-between; align-items:center;
padding:13px 0; border-bottom:1px solid var(--border);
font-size:.95rem; font-weight:600;
}
.mpo-patch-cord-spec-list li span:last-child { color:var(--primary); }
.mpo-patch-cord-tag-pill { background:rgba(249,201,99,.2); color:#a0740a; padding:2px 10px; border-radius:20px; font-size:.8rem; }
/* ============================================================
STEP FLOW
============================================================ */
.mpo-patch-cord-steps { display:flex; flex-direction:column; gap:16px; }
.mpo-patch-cord-step { display:flex; gap:16px; align-items:flex-start; }
.mpo-patch-cord-step-number {
flex-shrink:0; width:38px; height:38px; border-radius:50%;
background:var(--primary); color:#fff;
display:flex; align-items:center; justify-content:center;
font-weight:900; font-size:.95rem;
}
.mpo-patch-cord-step-body h4 { font-size:.95rem; font-weight:700; margin-bottom:3px; }
.mpo-patch-cord-step-body p { font-size:.86rem; color:var(--muted); line-height:1.6; }
/* ============================================================
APP MINI GRID
============================================================ */
.mpo-patch-cord-app-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mpo-patch-cord-app-card {
background:#fff; padding:16px; border-radius:8px;
border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.mpo-patch-cord-app-card .mpo-patch-cord-app-icon { font-size:1.4rem; margin-bottom:6px; }
.mpo-patch-cord-app-card h4 { font-size:.88rem; font-weight:700; color:var(--primary); margin-bottom:3px; }
.mpo-patch-cord-app-card p { font-size:.8rem; color:var(--muted); line-height:1.5; }
.mpo-patch-cord-grid {
display:grid;
min-width:0;
}
.mpo-patch-cord-grid > * {
min-width:0;
}
.mpo-patch-cord-grid-3 {
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:24px !important;
}
.mpo-patch-cord-grid-4 {
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:20px !important;
}
/* ============================================================
POLARITY CARDS
============================================================ */
.mpo-patch-cord-polarity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mpo-patch-cord-polarity-card { background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--border); transition:box-shadow .25s,transform .25s; }
.mpo-patch-cord-polarity-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.mpo-patch-cord-polarity-card img { width:100%; height:200px; object-fit:cover; }
.mpo-patch-cord-polarity-card-body { padding:24px; }
.mpo-patch-cord-polarity-card-body h3 { font-size:1.05rem; font-weight:800; color:var(--primary); margin-bottom:10px; }
.mpo-patch-cord-polarity-card-body p { font-size:.86rem; color:var(--muted); line-height:1.7; }
.mpo-patch-cord-polarity-tag { display:inline-block; background:var(--accent); color:#7a5900; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; margin-bottom:10px; }
/* ============================================================
BUTTONS
============================================================ */
.mpo-patch-cord-btn {
display:inline-block; padding:15px 38px; border-radius:4px;
font-weight:700; font-size:.95rem; cursor:pointer; border:none;
background:var(--primary); color:#fff; transition:all .2s;
}
.mpo-patch-cord-btn:hover { background:var(--hover); transform:translateY(-2px); box-shadow:0 10px 20px rgba(28,98,158,.2); }
.mpo-patch-cord-btn-outline { background:transparent; border:2px solid var(--primary); color:var(--primary); }
.mpo-patch-cord-btn-outline:hover { background:var(--primary); color:#fff; }
.mpo-patch-cord-btn-gold { background:var(--accent); color:#1a1a1a; }
.mpo-patch-cord-btn-gold:hover { background:#e8b84b; box-shadow:0 10px 20px rgba(249,201,99,.3); }
/* ============================================================
HERO
============================================================ */
.mpo-patch-cord-hero-section {
min-height:100vh; display:flex; align-items:center;
background:linear-gradient(135deg,#fafafa 0%,var(--bg-gray) 100%);
border:none; padding-top:68px;
}
.mpo-patch-cord-hero-section h1 { font-size:3.8rem; color:var(--primary); margin-bottom:20px; }
.mpo-patch-cord-hero-buttons { margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
/* ============================================================
SECTION 9 -STATS BANNER (new)
============================================================ */
.mpo-patch-cord-stats-banner {
background:var(--primary); border:none; padding:70px var(--pad-x);
}
.mpo-patch-cord-stats-inner {
max-width:var(--max-w); margin:0 auto;
display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center;
}
.mpo-patch-cord-stat-item {}
.mpo-patch-cord-stat-item .mpo-patch-cord-stat-number { font-size:3.2rem; font-weight:900; color:var(--accent); line-height:1; }
.mpo-patch-cord-stat-item .mpo-patch-cord-stat-unit { font-size:1.5rem; font-weight:900; color:var(--accent); }
.mpo-patch-cord-stat-item .mpo-patch-cord-stat-label { font-size:.9rem; color:rgba(255,255,255,.75); margin-top:8px; font-weight:600; }
.mpo-patch-cord-stat-divider { width:1px; background:rgba(255,255,255,.15); }
/* ============================================================
SECTION 10 -COMPARISON TABLE (new)
============================================================ */
.mpo-patch-cord-comparison-wrap { max-width:var(--max-w); margin:0 auto; overflow-x:auto; }
.mpo-patch-cord-comparison-table {
width:100%; border-collapse:collapse;
background:#fff; border-radius:var(--radius); overflow:hidden;
box-shadow:var(--shadow-md);
}
.mpo-patch-cord-comparison-table thead tr { background:var(--primary); }
.mpo-patch-cord-comparison-table thead th { padding:18px 24px; color:#fff; font-size:.9rem; font-weight:700; text-align:left; }
.mpo-patch-cord-comparison-table thead th:first-child { border-radius:var(--radius) 0 0 0; }
.mpo-patch-cord-comparison-table thead th.mpo-patch-cord-highlight { background:var(--hover); }
.mpo-patch-cord-comparison-table tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
.mpo-patch-cord-comparison-table tbody tr:hover { background:#f9fbff; }
.mpo-patch-cord-comparison-table tbody td { padding:16px 24px; font-size:.92rem; font-weight:600; }
.mpo-patch-cord-comparison-table tbody td:first-child { color:var(--muted); font-weight:500; }
.mpo-patch-cord-comparison-table .mpo-patch-cord-check { color:#27ae60; font-size:1.1rem; }
.mpo-patch-cord-comparison-table .mpo-patch-cord-cross { color:#bbb; }
.mpo-patch-cord-comparison-table .mpo-patch-cord-highlight-col { color:var(--primary); font-weight:800; }
.mpo-patch-cord-comparison-table .mpo-patch-cord-best-badge {
display:inline-block; background:rgba(249,201,99,.25);
color:#a0740a; font-size:.72rem; padding:2px 8px; border-radius:20px; margin-left:6px;
}
/* ============================================================
FAQ + IMAGE SECTION
============================================================ */
.mpo-patch-cord-faq-row {
max-width:var(--max-w); margin:0 auto;
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:56px; align-items:start;
}
.mpo-patch-cord-faq-list { display:flex; flex-direction:column; gap:0; }
.mpo-patch-cord-faq-item { border-bottom:1px solid var(--border); }
.mpo-patch-cord-faq-question {
width:100%; display:flex; justify-content:space-between; align-items:center;
padding:20px 0; background:none; border:none; cursor:pointer;
font-size:1rem; font-weight:700; color:var(--text); text-align:left;
gap:16px;
}
.mpo-patch-cord-faq-question:hover { color:var(--primary); }
.mpo-patch-cord-faq-arrow {
flex-shrink:0; width:28px; height:28px; border-radius:50%;
background:var(--bg-gray); display:flex; align-items:center; justify-content:center;
transition:transform .3s,background .2s; font-size:1rem; color:var(--primary);
}
.mpo-patch-cord-faq-item.mpo-patch-cord-open .mpo-patch-cord-faq-arrow { transform:rotate(45deg); background:var(--primary); color:#fff; }
.mpo-patch-cord-faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.mpo-patch-cord-faq-answer p { padding:0 0 20px; font-size:.95rem; color:var(--muted); line-height:1.8; }
.mpo-patch-cord-faq-item.mpo-patch-cord-open .mpo-patch-cord-faq-answer { max-height:300px; }
.mpo-patch-cord-faq-image-card {
position:relative;
border-radius:var(--radius);
overflow:hidden;
background:#0f172a;
box-shadow:var(--shadow-lg);
}
.mpo-patch-cord-faq-image-card img {
display:block;
width:100%;
height:420px;
min-height:0;
object-fit:cover;
object-position:center center;
}
.mpo-patch-cord-faq-image-caption {
position:relative;
margin:0;
padding:18px 22px;
border-left:4px solid var(--accent);
border-radius:0;
background:#0f172a;
color:#fff;
}
.mpo-patch-cord-faq-image-caption h3 {
font-size:1.05rem;
font-weight:800;
margin-bottom:6px;
}
.mpo-patch-cord-faq-image-caption p {
font-size:.82rem;
line-height:1.6;
color:rgba(255,255,255,.82);
}
/* Contact form card */
.mpo-patch-cord-form-card { background:#fff; border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-lg); position:sticky; top:90px; }
.mpo-patch-cord-form-card h3 { font-size:1.25rem; color:var(--primary); font-weight:800; margin-bottom:24px; }
.mpo-patch-cord-form-group { margin-bottom:14px; }
.mpo-patch-cord-form-group label { display:block; font-size:.78rem; font-weight:700; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.mpo-patch-cord-form-group input, .mpo-patch-cord-form-group select, .mpo-patch-cord-form-group textarea {
width:100%; padding:11px 13px; border:1.5px solid #ddd;
border-radius:5px; font-family:inherit; font-size:.93rem;
color:var(--text); background:#fafafa; transition:border .2s;
}
.mpo-patch-cord-form-group input:focus,.mpo-patch-cord-form-group textarea:focus,.mpo-patch-cord-form-group select:focus { outline:none; border-color:var(--primary); background:#fff; }
.mpo-patch-cord-form-group textarea { resize:vertical; min-height:85px; }
.mpo-patch-cord-submit-btn {
width:100%; padding:14px; background:var(--primary); color:#fff;
border:none; border-radius:4px; font-weight:700; font-size:1rem;
cursor:pointer; transition:background .2s;
}
.mpo-patch-cord-submit-btn:hover { background:var(--hover); }
/* ============================================================
CTA SECTION
============================================================ */
.mpo-patch-cord-cta-section { background:var(--primary); color:#fff; border:none; }
.mpo-patch-cord-cta-section h2 { color:#fff; font-size:3rem; }
.mpo-patch-cord-cta-section h2 em { color:var(--accent); }
.mpo-patch-cord-cta-section .mpo-patch-cord-sub-text { color:rgba(255,255,255,.8); }
.mpo-patch-cord-contact-info { background:rgba(255,255,255,.1); padding:24px; border-radius:8px; margin:24px 0; }
.mpo-patch-cord-contact-info p { font-size:.95rem; color:rgba(255,255,255,.9); margin-bottom:8px; }
.mpo-patch-cord-contact-info strong { color:var(--accent); }
/* CTA mpo-patch-cord-image-col override: no image, just the form */
.mpo-patch-cord-cta-form-col {
flex:0 0 500px; width:500px; flex-shrink:0;
}
/* ============================================================
FOOTER
============================================================ */
.mpo-patch-cord-page .mpo-patch-cord-footer {
background:#111; color:#666; padding:50px var(--pad-x);
display:flex; flex-direction:column; align-items:center; gap:16px;
}
.mpo-patch-cord-footer-links { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
.mpo-patch-cord-footer-links a { color:#888; font-size:.85rem; transition:color .2s; }
.mpo-patch-cord-footer-links a:hover { color:#fff; }
.mpo-patch-cord-footer-copy { font-size:.82rem; text-align:center; }
/* ============================================================
RESPONSIVE BREAKPOINTS
-Elementor device presets:
Laptop: <=1366px
Tablet Land: <=1024px
Tablet Port: <=768px
Mobile Land: <=680px
Mobile Port: <=480px
============================================================ */
/* -- Laptop (<=366px) -- */
@media (max-width:1366px) {
.mpo-patch-cord-page { --col-width:480px; --gap:56px; --pad-x:5%; --pad-y:96px; }
.mpo-patch-cord-page h2 { font-size:2.3rem; }
.mpo-patch-cord-hero-section h1 { font-size:3.3rem; }
.mpo-patch-cord-hero-section .mpo-patch-cord-image-col { flex-basis:420px; width:420px; }
.mpo-patch-cord-stats-inner { gap:24px; }
.mpo-patch-cord-stat-item .mpo-patch-cord-stat-number { font-size:2.8rem; }
.mpo-patch-cord-faq-row { grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); gap:42px; }
.mpo-patch-cord-cta-form-col { flex-basis:440px; width:440px; }
}
/* -- Tablet Landscape (<=024px) -- */
@media (max-width:1024px) {
.mpo-patch-cord-page { --col-width:400px; --gap:42px; --pad-x:5%; --pad-y:82px; }
.mpo-patch-cord-page h2 { font-size:2.1rem; }
.mpo-patch-cord-hero-section h1 { font-size:2.9rem; }
.mpo-patch-cord-hero-section .mpo-patch-cord-image-col { flex-basis:340px; width:340px; }
.mpo-patch-cord-polarity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.mpo-patch-cord-stats-inner { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.mpo-patch-cord-grid-3,
.mpo-patch-cord-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:20px !important; }
.mpo-patch-cord-faq-row { grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); gap:36px; }
.mpo-patch-cord-comparison-table thead th,.mpo-patch-cord-comparison-table tbody td { padding:14px 18px; }
.mpo-patch-cord-cta-form-col { flex-basis:380px; width:380px; }
.mpo-patch-cord-performance-visual-section > div > div:first-child,
.mpo-patch-cord-latam-network-section > div > div:first-child,
.mpo-patch-cord-quality-section > div > div:first-child {
min-height:520px !important;
}
}
/* Responsive split-section behavior */
@media (max-width:768px) {
/* Full-width image/text block stacks vertically */
.mpo-patch-cord-page .mpo-patch-cord-section[style*="padding:0"] > div[style*="display:flex"] {
flex-direction:column !important;
}
.mpo-patch-cord-page .mpo-patch-cord-section[style*="padding:0"] > div > div:first-child {
min-height:280px !important; flex:none !important;
width:100% !important;
}
.mpo-patch-cord-page .mpo-patch-cord-section[style*="padding:0"] > div > div:last-child {
flex:none !important; width:100% !important;
padding:50px 5% !important;
}
}
/* -- Tablet Portrait (<=68px) -- */
@media (max-width:768px) {
.mpo-patch-cord-page { --pad-x:5%; --pad-y:80px; }
/* Nav */
.mpo-patch-cord-nav-links { display:none; flex-direction:column; position:absolute; top:68px; left:0; width:100%; background:#fff; padding:20px var(--pad-x); border-bottom:1px solid var(--border); gap:4px; }
.mpo-patch-cord-nav-links.mpo-patch-cord-open { display:flex; }
.mpo-patch-cord-nav-links a { padding:12px 0; font-size:1rem; }
.mpo-patch-cord-nav-toggle { display:flex; }
/* Two-col ->stack */
.mpo-patch-cord-row, .mpo-patch-cord-row.mpo-patch-cord-row-reverse { flex-direction:column !important; align-items:stretch; gap:40px; }
.mpo-patch-cord-text-col,.mpo-patch-cord-image-col { flex:none; width:100%; max-width:100%; }
.mpo-patch-cord-image-frame { aspect-ratio:16/9; }
.mpo-patch-cord-hero-section .mpo-patch-cord-image-frame { aspect-ratio:16/9; }
.mpo-patch-cord-hero-section h1 { font-size:2.4rem; }
.mpo-patch-cord-page h2 { font-size:2rem; }
.mpo-patch-cord-section-header { margin-bottom:36px; }
/* Polarity 3->2 */
.mpo-patch-cord-polarity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
/* Stats 4->2 */
.mpo-patch-cord-stats-inner { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.mpo-patch-cord-grid-3,
.mpo-patch-cord-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important; }
.mpo-patch-cord-stat-divider { display:none; }
/* Comparison table scroll */
.mpo-patch-cord-comparison-wrap { -webkit-overflow-scrolling:touch; }
/* FAQ mpo-patch-cord-row stack */
.mpo-patch-cord-faq-row { grid-template-columns:1fr; gap:50px; }
.mpo-patch-cord-faq-image-card img { height:340px; }
.mpo-patch-cord-form-card { position:static; }
/* CTA */
.mpo-patch-cord-cta-form-col { flex:none; width:100%; }
.mpo-patch-cord-float-card,.mpo-patch-cord-float-card-top { display:none; }
.mpo-patch-cord-data-row { flex-direction:column; }
}
/* -- Mobile Landscape (<=80px) -- */
@media (max-width:680px) {
.mpo-patch-cord-page { --pad-x:4%; --pad-y:64px; }
.mpo-patch-cord-hero-section h1 { font-size:2rem; }
.mpo-patch-cord-page h2 { font-size:1.8rem; }
.mpo-patch-cord-hero-buttons { flex-direction:column; }
.mpo-patch-cord-hero-buttons .mpo-patch-cord-btn { text-align:center; }
.mpo-patch-cord-stats-inner { grid-template-columns:1fr 1fr; gap:20px; }
.mpo-patch-cord-stat-item .mpo-patch-cord-stat-number { font-size:2.2rem; }
.mpo-patch-cord-polarity-grid,
.mpo-patch-cord-grid-3,
.mpo-patch-cord-grid-4 { grid-template-columns:1fr !important; gap:16px !important; }
.mpo-patch-cord-page #polarity {
padding-left:10px;
padding-right:10px;
}
.mpo-patch-cord-page #polarity > div {
width:100%;
max-width:none !important;
}
.mpo-patch-cord-page #polarity .mpo-patch-cord-polarity-grid {
width:calc(100vw - 20px);
max-width:calc(100vw - 20px);
margin-left:auto;
margin-right:auto;
justify-items:center;
}
.mpo-patch-cord-page #polarity .mpo-patch-cord-polarity-card {
width:calc(100vw - 20px);
max-width:calc(100vw - 20px);
border-radius:12px;
justify-self:center;
}
.mpo-patch-cord-page #polarity .mpo-patch-cord-polarity-card img {
width:100% !important;
height:auto !important;
max-height:none;
object-fit:contain;
object-position:center center;
margin:0 auto;
}
.mpo-patch-cord-faq-image-card img { height:280px; }
}
/* -- Mobile Portrait (<=80px) -- */
@media (max-width:480px) {
.mpo-patch-cord-page { --pad-x:4%; --pad-y:56px; }
.mpo-patch-cord-page .mpo-patch-cord-nav { padding:0 4%; }
.mpo-patch-cord-page #polarity { padding-left:10px; padding-right:10px; }
.mpo-patch-cord-page #polarity .mpo-patch-cord-section-header { padding-left:6px; padding-right:6px; }
.mpo-patch-cord-page #polarity .mpo-patch-cord-polarity-grid,
.mpo-patch-cord-page #polarity .mpo-patch-cord-polarity-card {
width:calc(100vw - 20px) !important;
max-width:calc(100vw - 20px) !important;
}
.mpo-patch-cord-hero-section h1 { font-size:1.8rem; }
.mpo-patch-cord-page h2 { font-size:1.6rem; }
.mpo-patch-cord-sub-text { font-size:.97rem; }
.mpo-patch-cord-stats-inner { grid-template-columns:1fr 1fr; gap:16px; }
.mpo-patch-cord-stat-item .mpo-patch-cord-stat-number { font-size:1.9rem; }
.mpo-patch-cord-app-grid { grid-template-columns:1fr; }
.mpo-patch-cord-grid > * { padding:22px 20px !important; }
.mpo-patch-cord-faq-image-caption { padding:16px 18px; }
.mpo-patch-cord-faq-image-caption h3 { font-size:.98rem; }
.mpo-patch-cord-faq-image-caption p { font-size:.78rem; }
.mpo-patch-cord-cta-section h2 { font-size:2rem; }
.mpo-patch-cord-form-card { padding:28px 20px; }
.mpo-patch-cord-data-row { flex-direction:column; }
.mpo-patch-cord-btn { padding:14px 28px; }
.mpo-patch-cord-page .mpo-patch-cord-footer { padding:40px 4%; }
}
.mpo-patch-cord-page .mpo-patch-cord-latam-deploy-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-latam-network-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-performance-visual-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-quality-section > div > div:first-child {
min-height: 620px !important;
}
.mpo-patch-cord-page .mpo-patch-cord-latam-deploy-section > div > div:first-child img,
.mpo-patch-cord-page .mpo-patch-cord-latam-network-section > div > div:first-child img,
.mpo-patch-cord-page .mpo-patch-cord-performance-visual-section > div > div:first-child img,
.mpo-patch-cord-page .mpo-patch-cord-quality-section > div > div:first-child img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
background: #0f172a;
}
@media (min-width: 769px) and (max-width: 1024px) {
.mpo-patch-cord-page .mpo-patch-cord-latam-deploy-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-latam-network-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-performance-visual-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-quality-section > div > div:first-child {
min-height: 500px !important;
}
}
/* Prevent oversized images on mobile */
@media (max-width: 768px) {
.mpo-patch-cord-page .mpo-patch-cord-latam-deploy-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-latam-network-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-performance-visual-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-quality-section > div > div:first-child {
min-height: 420px !important;
}
}
@media (max-width: 680px) {
.mpo-patch-cord-page .mpo-patch-cord-latam-deploy-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-latam-network-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-performance-visual-section > div > div:first-child,
.mpo-patch-cord-page .mpo-patch-cord-quality-section > div > div:first-child {
min-height: 320px !important;
}
}/* End custom CSS */