/* ════════════════════════════════════════════════════════════════
   MECHVERSE ENTERPRISES — GLOBAL SYSTEM
   Liquid-glass header · Cinematic footer · Archivo + Source Sans 3
   Loaded on every page AFTER page-level styles.
════════════════════════════════════════════════════════════════ */

:root{
  --blue-rgb:0,82,255;
  --blue:#0052FF;
  --blue2:#003DD4;
  --teal:#00C9A7;
  --red:#FF3C5A;
  --gold:#0052FF;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'Source Sans 3',system-ui,sans-serif;
  --mvf-h:560px;
}

[data-theme="dark"]{
  --bg:#080810; --bg2:#0C0C18; --bg3:#101022;
  --fg:#F0EFE9; --fg2:rgba(240,239,233,.5); --fg3:rgba(240,239,233,.22);
  --border:rgba(255,255,255,.06); --border2:rgba(255,255,255,.12);
  --card:#0C0C18; --card2:#101022;
  --nav-bg:rgba(8,8,16,.8);
  --input-bg:rgba(255,255,255,.04); --input-border:rgba(255,255,255,.1);
  --pill-bg:rgba(255,255,255,.05);
}
[data-theme="light"]{
  /* darker warm neutrals so white cards clearly separate from the page */
  --bg:#EDEAE2; --bg2:#E2DED3; --bg3:#D7D2C4;
  --fg:#09090F; --fg2:rgba(9,9,15,.55); --fg3:rgba(9,9,15,.3);
  --border:rgba(0,0,0,.1); --border2:rgba(0,0,0,.18);
  --card:#FFFFFF; --card2:#F7F5EF;
  --nav-bg:rgba(237,234,226,.88);
  --input-bg:rgba(0,0,0,.045); --input-border:rgba(0,0,0,.16);
  --pill-bg:rgba(0,0,0,.055);
}
[data-theme="light"] .mv-card, [data-theme="light"] .mv-step,
[data-theme="light"] .who-card, [data-theme="light"] .pillar{box-shadow:0 6px 22px rgba(9,9,15,.06)}

/* ─────────────────────────────────────────
   GLOBAL FONT SYSTEM (overrides legacy pages)
   Headings + buttons → Archivo · Everything else → Source Sans 3
───────────────────────────────────────── */
html body, html body *{font-family:var(--f-body)!important}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body h1 *, html body h2 *, html body h3 *,
html body .btn, html body .btn *,
html body .nav-cta, html body .mvh-cta,
html body [class*="cta"] , html body button[type="submit"],
html body .mvf-big{font-family:var(--f-display)!important}
html body h1, html body h2{letter-spacing:-.03em}
html body h2{text-transform:capitalize}
html body h1 em, html body h2 em, html body h3 em,
html body .it{font-style:italic;color:var(--gold)}
/* stat numbers: identical type for counter spans and plain text */
html body .mv-stat b, html body .mv-stat b *{font-family:var(--f-display)!important;font-size:inherit}
html body .mv-stat b{font-size:clamp(34px,4.5vw,52px)}
/* premium svg icons inherit color from their container */
.ico svg, .mv-ico svg, .ic svg, .dot svg, .e svg, .ci-icon svg{display:inline-block;vertical-align:middle;color:var(--blue)}
.mvh-dd .ico svg{color:#7FA8FF}
img, video{max-width:100%}

/* ═════════════════════════════════════════
   HEADER — full width at top → liquid-glass pill on scroll.
   Glass keeps a DARK tint in both themes so the white logo
   never clashes with the light theme.
═════════════════════════════════════════ */
.mvh{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  height:76px; padding:0 4.5%;
  background:linear-gradient(180deg,rgba(6,6,14,.62),rgba(6,6,14,.38));
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  transition:top .45s var(--ease-out-expo), left .45s var(--ease-out-expo),
             right .45s var(--ease-out-expo), height .45s var(--ease-out-expo),
             border-radius .45s var(--ease-out-expo), padding .45s var(--ease-out-expo),
             background .35s, box-shadow .35s, border-color .35s;
}
/* liquid-glass shine layer */
.mvh::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(90% 120% at 88% 110%, rgba(var(--blue-rgb),.14), transparent 46%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.05) 45%, transparent 60%);
  opacity:.9;
}
.mvh.shrunk{
  top:14px; left:max(14px,2.5%); right:max(14px,2.5%);
  height:60px; border-radius:99px; padding:0 12px 0 22px;
  background:rgba(8,8,18,.55);
  -webkit-backdrop-filter:blur(26px) saturate(200%);
  backdrop-filter:blur(26px) saturate(200%);
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 -1px 0 rgba(255,255,255,.04);
}
[data-theme="light"] .mvh{background:linear-gradient(180deg,rgba(14,14,26,.72),rgba(14,14,26,.5))}
[data-theme="light"] .mvh.shrunk{background:rgba(12,12,24,.62); box-shadow:0 18px 50px rgba(9,9,15,.28), inset 0 1px 0 rgba(255,255,255,.14)}

.mvh-logo{display:flex; align-items:center; gap:10px; text-decoration:none; position:relative; z-index:2}
.mvh-logo img{height:38px; display:block; transition:height .4s var(--ease-out-expo)}
.mvh.shrunk .mvh-logo img{height:30px}

.mvh-links{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; position:relative; z-index:2}
.mvh-links>li{position:relative}
.mvh-links a, .mvh-links button{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:99px; font-size:13.5px; font-weight:600;
  color:rgba(240,239,233,.78); background:none; border:0; cursor:pointer;
  text-decoration:none; letter-spacing:.01em; transition:color .2s, background .2s;
}
.mvh-links a:hover, .mvh-links button:hover, .mvh-links li.open>button,
.mvh-links a.on{color:#fff; background:rgba(255,255,255,.09)}
.mvh-chev{font-size:9px; transition:transform .25s}
.mvh-links li.open .mvh-chev{transform:rotate(180deg)}

/* dropdown */
.mvh-dd{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  width:560px; padding:10px; border-radius:20px;
  background:rgba(10,10,20,.88);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s;
}
.mvh-links li.open .mvh-dd{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.mvh-dd a{
  display:flex; align-items:flex-start; gap:11px; padding:11px 12px; border-radius:13px;
  color:rgba(240,239,233,.85); font-weight:600;
}
.mvh-dd a:hover{background:rgba(255,255,255,.07); color:#fff}
.mvh-dd .ico{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:rgba(var(--blue-rgb),.16); border:1px solid rgba(var(--blue-rgb),.3); font-size:15px;
}
.mvh-dd strong{display:block; font-size:13px; font-weight:700; color:#fff; line-height:1.25}
.mvh-dd span.d{display:block; font-size:11.5px; font-weight:400; color:rgba(240,239,233,.5); margin-top:2px; line-height:1.35}

.mvh-r{display:flex; align-items:center; gap:9px; position:relative; z-index:2}
.mvh-theme{
  width:38px; height:38px; border-radius:99px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:15px; cursor:pointer; transition:background .2s;
}
.mvh-theme:hover{background:rgba(255,255,255,.16)}
.mvh-cta{
  display:inline-flex; align-items:center; gap:7px; padding:11px 21px; border-radius:99px;
  background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff!important;
  font-size:13px; font-weight:700; letter-spacing:.02em; text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 26px rgba(var(--blue-rgb),.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s, box-shadow .2s;
}
.mvh-cta:hover{transform:translateY(-1px); box-shadow:0 12px 34px rgba(var(--blue-rgb),.5), inset 0 1px 0 rgba(255,255,255,.25)}
.mvh-burger{
  display:none; flex-direction:column; gap:5px; width:40px; height:40px;
  align-items:center; justify-content:center; border-radius:99px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); cursor:pointer;
}
.mvh-burger span{display:block; width:18px; height:2px; background:#fff; border-radius:2px}

/* mobile menu */
.mvh-mob{
  position:fixed; inset:0; z-index:990; padding:90px 8% 40px;
  background:rgba(6,6,14,.9);
  -webkit-backdrop-filter:blur(30px) saturate(160%); backdrop-filter:blur(30px) saturate(160%);
  display:flex; flex-direction:column; gap:4px; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.mvh-mob.open{opacity:1; visibility:visible}
.mvh-mob a{color:#fff; text-decoration:none; font-size:20px; font-weight:700; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.mvh-mob .sub{font-size:15px; font-weight:600; color:rgba(240,239,233,.72); padding:9px 0 9px 16px}
.mvh-mob .grp{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(240,239,233,.4); margin:18px 0 4px}
.mvh-mob-close{
  position:absolute; top:22px; right:6%; width:42px; height:42px; border-radius:99px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff;
  font-size:16px; cursor:pointer;
}

@media(max-width:1060px){
  .mvh-links,.mvh-cta{display:none}
  .mvh-burger{display:flex}
}

/* ═════════════════════════════════════════
   CINEMATIC FOOTER — fixed underneath; the page slides up
   over it and "reveals" it. .page-wrap gets its bottom margin
   from JS (footer height).
═════════════════════════════════════════ */
.page-wrap{
  position:relative; z-index:10; background:var(--bg);
  border-radius:0 0 34px 34px;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  border-bottom:1px solid var(--border2);
}
.mvf{
  --mfg:#F0EFE9; --mfg2:rgba(240,239,233,.6); --mfg3:rgba(240,239,233,.42);
  --mline:rgba(255,255,255,.09); --mbig1:rgba(240,239,233,.16); --mbig2:rgba(240,239,233,.015);
  position:fixed; bottom:0; left:0; width:100%; z-index:1;
  background:#050509; color:var(--mfg); overflow:hidden;
}
[data-theme="light"] .mvf{
  --mfg:#0B0B12; --mfg2:rgba(9,9,15,.62); --mfg3:rgba(9,9,15,.46);
  --mline:rgba(0,0,0,.14); --mbig1:rgba(9,9,15,.15); --mbig2:rgba(9,9,15,.015);
  background:#DCD7CA;
}
[data-theme="light"] .mvf::before{background:radial-gradient(closest-side, rgba(var(--blue-rgb),.13), transparent)}
.mvf-in{max-width:1280px; margin:0 auto; padding:52px 5% 0; position:relative; z-index:2}
.mvf::before{ /* glow */
  content:""; position:absolute; left:50%; top:-160px; transform:translateX(-50%);
  width:900px; height:340px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--blue-rgb),.22), transparent);
  pointer-events:none;
}
.mvf-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:36px}
.mvf-brand img{height:52px; margin-bottom:18px}
.mvf-brand p{font-size:14px; line-height:1.7; color:var(--mfg2); max-width:340px}
.mvf-tag{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.mvf-tag::before{content:""; width:22px; height:1px; background:var(--gold)}
.mvf h5{font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mfg3); margin:0 0 18px; font-weight:700}
.mvf ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.mvf ul a{color:var(--mfg2); text-decoration:none; font-size:14px; transition:color .2s, padding-left .2s}
.mvf ul a:hover{color:var(--mfg); padding-left:5px}
.mvf-contact a{color:var(--mfg2); text-decoration:none; transition:color .2s}
.mvf-contact a:hover{color:var(--blue)}
.mvf-contact li{display:flex; gap:10px; align-items:baseline; color:var(--mfg2); font-size:14px}
.mvf-contact b{color:var(--mfg); font-weight:600}
.mvf-cta-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:18px 0; border-top:1px solid var(--mline); border-bottom:1px solid var(--mline);
}
.mvf-cta-row p{font-size:17px; font-weight:600; color:var(--mfg); margin:0}
.mvf-cta-row p em{font-style:italic; color:var(--gold)}
.mvf-btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:99px;
  background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; text-decoration:none;
  font-size:13.5px; font-weight:700; box-shadow:0 10px 30px rgba(var(--blue-rgb),.35);
  transition:transform .2s;
}
.mvf-btn:hover{transform:translateY(-2px)}
.mvf-big{
  font-size:clamp(44px,8.6vw,128px); font-weight:800; letter-spacing:-.04em; line-height:.86;
  text-align:center; margin:22px 0 0; user-select:none; white-space:nowrap;
  background:linear-gradient(180deg, var(--mbig1), var(--mbig2) 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mvf-bot{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:16px 0 20px; font-size:12.5px; color:var(--mfg3);
}
/* shorter screens: tighten further so the reveal always fits */
@media(max-height:840px){
  .mvf-in{padding-top:38px}
  .mvf-top{gap:26px; padding-bottom:26px}
  .mvf ul{gap:7px}
  .mvf h5{margin-bottom:12px}
  .mvf-big{font-size:clamp(38px,7vw,96px); margin-top:16px}
}
.mvf-soc{display:flex; gap:8px}
.mvf-soc a{
  width:36px; height:36px; display:grid; place-items:center; border-radius:99px;
  border:1px solid var(--mline); color:var(--mfg2); text-decoration:none;
  font-size:11px; font-weight:700; letter-spacing:.04em; transition:all .2s;
}
/* per-platform hover colours live in the mv-social block */
@media(max-width:940px){
  .mvf-top{grid-template-columns:1fr 1fr; gap:34px}
  .mvf-big{white-space:normal}
  .page-wrap{border-radius:0 0 22px 22px}
}
@media(max-width:560px){
  .mvf-top{grid-template-columns:1fr}
  .mvf-cta-row{flex-direction:column; justify-content:center; text-align:center}
  .mvf-bot{flex-direction:column; justify-content:center; text-align:center; gap:12px}
  .mvf-soc{justify-content:center}
}

/* ═════════════════════════════════════════
   SHARED COMPONENTS (new pages)
═════════════════════════════════════════ */
.mv-sec{padding:110px 6%; position:relative}
.mv-wrap{max-width:1240px; margin:0 auto}
.mv-label{
  display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--fg2); margin-bottom:20px;
}
.mv-label::before{content:""; width:26px; height:1px; background:var(--blue)}
.mv-h2{font-size:clamp(30px,4.4vw,52px); font-weight:800; line-height:1.06; color:var(--fg); margin:0 0 18px}
.mv-h2 em{font-style:italic; color:var(--gold); font-weight:600}
.mv-sub{font-size:16.5px; line-height:1.75; color:var(--fg2); max-width:640px}
.mv-center{text-align:center}
.mv-center .mv-sub{margin:0 auto}
.mv-center .mv-label{justify-content:center}

.btn{
  display:inline-flex; align-items:center; gap:9px; padding:15px 30px; border-radius:99px;
  font-size:14px; font-weight:700; letter-spacing:.02em; text-decoration:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s; border:0;
}
.btn-p{background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; box-shadow:0 10px 32px rgba(var(--blue-rgb),.32)}
.btn-p:hover{transform:translateY(-2px); box-shadow:0 16px 44px rgba(var(--blue-rgb),.45)}
.btn-g{background:var(--pill-bg); color:var(--fg); border:1px solid var(--border2)}
.btn-g:hover{transform:translateY(-2px); border-color:var(--fg3)}

/* generic card */
.mv-card{
  background:var(--card); border:1px solid var(--border); border-radius:20px; padding:30px;
  transition:transform .3s var(--ease-out-expo), border-color .3s, box-shadow .3s;
}
.mv-card:hover{transform:translateY(-5px); border-color:var(--border2); box-shadow:0 22px 50px rgba(0,0,0,.22)}
.mv-card h3{font-size:18px; font-weight:700; color:var(--fg); margin:0 0 9px}
.mv-card p{font-size:14px; line-height:1.65; color:var(--fg2); margin:0}
.mv-ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:20px;
  background:rgba(var(--blue-rgb),.12); border:1px solid rgba(var(--blue-rgb),.25); margin-bottom:18px;
}

/* stats strip */
.mv-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:22px; overflow:hidden}
.mv-stat{background:var(--card); padding:38px 20px; text-align:center}
.mv-stat b{display:block; font-size:clamp(34px,4.5vw,52px); font-weight:800; color:var(--fg); letter-spacing:-.03em; font-family:var(--f-display)!important}
.mv-stat b i{font-style:normal; color:var(--blue)}
.mv-stat span{display:block; margin-top:6px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg2)}
@media(max-width:760px){.mv-stats{grid-template-columns:1fr 1fr}}

/* process steps */
.mv-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.mv-step{position:relative; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:30px 24px; overflow:hidden; transition:border-color .3s, transform .3s}
.mv-step:hover{border-color:rgba(var(--blue-rgb),.4); transform:translateY(-4px)}
.mv-step .n{font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--blue); display:block; margin-bottom:40px}
.mv-step h3{font-size:17px; font-weight:700; color:var(--fg); margin:0 0 8px}
.mv-step p{font-size:13.5px; line-height:1.6; color:var(--fg2); margin:0}
.mv-step::after{content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,var(--blue),transparent); opacity:0; transition:opacity .3s}
.mv-step:hover::after{opacity:1}
@media(max-width:900px){.mv-steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mv-steps{grid-template-columns:1fr}}

/* FAQ accordion */
.mv-faq{max-width:820px; margin:0 auto}
.mv-q{border-bottom:1px solid var(--border)}
.mv-q button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:none; border:0; padding:24px 4px; cursor:pointer; text-align:left;
  font-size:16.5px; font-weight:700; color:var(--fg);
}
.mv-q .pm{
  flex:none; width:30px; height:30px; border-radius:99px; display:grid; place-items:center;
  border:1px solid var(--border2); color:var(--fg2); font-size:15px; transition:all .3s;
}
.mv-q.open .pm{background:var(--blue); border-color:var(--blue); color:#fff; transform:rotate(45deg)}
.mv-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out-expo)}
.mv-a p{padding:0 44px 24px 4px; margin:0; font-size:15px; line-height:1.75; color:var(--fg2)}

/* final CTA banner */
.mv-cta-banner{
  position:relative; border-radius:28px; overflow:hidden; text-align:center;
  padding:90px 8%; background:var(--card); border:1px solid var(--border);
}
.mv-cta-banner::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 120% at 50% 0%, rgba(var(--blue-rgb),.22), transparent 62%);
  pointer-events:none;
}
.mv-cta-banner h2{position:relative; font-size:clamp(30px,4.6vw,56px); font-weight:800; line-height:1.05; color:var(--fg); margin:0 0 16px}
.mv-cta-banner h2 em{font-style:italic; color:var(--gold); font-weight:600}
.mv-cta-banner p{position:relative; font-size:16px; color:var(--fg2); max-width:560px; margin:0 auto 34px; line-height:1.7}
.mv-cta-banner .row{position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* checklist pill */
.mv-check{display:flex; align-items:flex-start; gap:13px; padding:17px 20px; background:var(--card); border:1px solid var(--border); border-radius:15px; transition:border-color .25s, transform .25s}
.mv-check:hover{border-color:rgba(var(--blue-rgb),.4); transform:translateX(4px)}
.mv-check .tick{flex:none; width:24px; height:24px; border-radius:99px; background:rgba(0,201,167,.14); border:1px solid rgba(0,201,167,.4); color:var(--teal); display:grid; place-items:center; font-size:11px; margin-top:1px}
.mv-check p{margin:0; font-size:14.5px; color:var(--fg); line-height:1.5}
.mv-check p b{font-weight:700}

/* reveal on scroll */
.rv{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* marquee */
.mv-marq{overflow:hidden; white-space:nowrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:13px 0; background:var(--bg2)}
.mv-marq-in{display:inline-block; animation:mvmarq 32s linear infinite}
.mv-marq span{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fg2); margin:0 22px}
.mv-marq span.gold{color:var(--gold)}
@keyframes mvmarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* forms */
.mv-input, .mv-select, .mv-ta{
  width:100%; padding:15px 18px; border-radius:13px; background:var(--input-bg);
  border:1px solid var(--input-border); color:var(--fg); font-size:14.5px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.mv-input:focus, .mv-select:focus, .mv-ta:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(var(--blue-rgb),.15)}
.mv-ta{min-height:140px; resize:vertical}
.mv-field label{display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fg2); margin-bottom:8px}

html{scroll-behavior:smooth}
.mvh-spacer{height:76px}
::selection{background:rgba(var(--blue-rgb),.35); color:#fff}


/* ═════════ ANIMATED CTAs ═════════ */
.btn{position:relative; overflow:hidden}
.btn-p::after, .mvf-btn::after{
  content:""; position:absolute; top:0; left:-80%; width:45%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg); animation:btnShine 3.6s ease-in-out infinite; pointer-events:none;
}
@keyframes btnShine{0%{left:-80%}55%{left:140%}100%{left:140%}}
.mvf-btn{position:relative; overflow:hidden}
.mv-cta-banner{isolation:isolate}
.mv-cta-banner::after{
  content:""; position:absolute; inset:-45%; z-index:-1; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(var(--blue-rgb),0) 0%, rgba(var(--blue-rgb),.17) 18%, rgba(0,201,167,.1) 32%, rgba(var(--blue-rgb),0) 55%);
  animation:ctaSpin 16s linear infinite;
}
@keyframes ctaSpin{to{transform:rotate(360deg)}}
.mv-cta-banner h2 em{display:inline-block; animation:ctaEm 3.2s ease-in-out infinite}
@keyframes ctaEm{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.mv-cta-banner .btn-p{animation:ctaPulse 2.8s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 10px 32px rgba(var(--blue-rgb),.32)}50%{box-shadow:0 16px 48px rgba(var(--blue-rgb),.58)}}
.mv-cta-banner .btn:hover{transform:translateY(-3px) scale(1.03)}

/* remove the top gradient line that looked like a stuck border */
.mv-step::after{display:none!important}

/* touch devices: hover states must not stick after tap */
@media(hover:none){
  .mv-card:hover,.mv-step:hover,.mv-check:hover,.who-card:hover,.pillar:hover,
  .chan:hover,.fmt:hover,.plat:hover{transform:none; border-color:var(--border)}
}

/* ═════════ RESPONSIVE SYSTEM ═════════ */
@media(max-width:900px){.mv-sec{padding:84px 5%}}
@media(max-width:600px){
  .mv-sec{padding:62px 5%}
  .mv-h2{font-size:clamp(26px,7.6vw,34px)}
  .mv-sub{font-size:15px}
  .btn{padding:13px 22px; font-size:13px}
  .mv-cta-banner{padding:54px 6%; border-radius:20px}
  .mv-stat{padding:24px 10px}
  .mv-stat b{font-size:clamp(28px,8vw,38px)}
  .mv-q button{font-size:15px; padding:19px 2px}
  .mv-steps{gap:12px}
  .mvh{padding:0 4%}
  .mvh-mob a{font-size:18px}
}
/* rescued GSAP elements */
.will-anim.mv-rescued{opacity:1!important; transform:none!important}


/* ═════════ STAT COUNTERS — one consistent design everywhere ═════════
   Bug: ".mv-stat span" (the small uppercase label rule) also matched the
   number <span data-count> inside <b>, making it display:block with
   letter-spacing — so the "+" dropped to its own line and digits spread. */
html body b > span[data-count],
html body .mv-stat b > span,
html body .ad-met b > span{
  display:inline!important; font-size:inherit!important; font-weight:inherit!important;
  letter-spacing:inherit!important; text-transform:none!important;
  margin:0!important; padding:0!important; line-height:inherit!important; color:inherit!important;
}
html body .mv-stat b{
  display:flex!important; align-items:baseline; justify-content:center; gap:.09em;
  white-space:nowrap; line-height:1.05; letter-spacing:-.03em; font-weight:800;
  font-size:clamp(30px,3.9vw,46px)!important; color:var(--fg);
}
html body .mv-stat b i{
  font-style:normal!important; color:var(--blue)!important; font-weight:700;
  font-size:.5em!important; letter-spacing:0; line-height:1;
}
html body .mv-stat > span{
  display:block; margin-top:9px; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg2); line-height:1.4;
}
@media(max-width:600px){
  html body .mv-stat b{font-size:clamp(24px,7.2vw,34px)!important}
  html body .mv-stat > span{font-size:10px; letter-spacing:.12em}
}


/* ═════════ HORIZONTAL SCROLL GUARD ═════════
   body{overflow-x:hidden} alone does NOT stop the page scrollbar, and it
   never clips position:fixed elements (header, footer, mobile menu).
   The clip has to be on <html>.

   IMPORTANT: overflow-x:hidden turns the element into a scroll container,
   which silently kills position:sticky for everything inside it — that is
   why the article and legal sidebars would not stick. overflow-x:clip
   clips without creating a scroll container, so sticky keeps working. */
html{overflow-x:clip; max-width:100%}
html body{overflow-x:clip; max-width:100%; position:relative}
@supports not (overflow:clip){
  html{overflow-x:hidden}
  html body{overflow-x:hidden}
}

/* fixed layers must never exceed the viewport */
/* NOTE: overflow-x:hidden computes overflow-y to auto → a scrollbar appears
   inside the bar. The header must also stay unclipped so the dropdown can
   escape it, so we only cap widths here. */
.mvh{max-width:100%; overflow:visible}
.mvf{max-width:100%; overflow:hidden}
.mvh-mob{max-width:100%; overflow-x:hidden; overflow-y:auto}
.mvh-dd{max-width:calc(100vw - 24px)}

/* flex/grid children default to min-width:auto, which lets long or
   nowrap content push a track wider than its container */
.mv-stats, .mv-steps, .mv-wrap, .inc-grid, .who-grid, .fmt-grid,
.pillars, .vs, .tips, .tst-grid, .h-in, .growth{min-width:0}
.mv-stat, .mv-step, .mv-card, .who-card, .pillar, .vs-card,
.mv-check, .fmt, .tst-card{min-width:0}
.mv-stat b{max-width:100%}
.mv-stat > span{overflow-wrap:anywhere}

/* long words / URLs shouldn't create overflow either */
.mv-sub, .mv-card p, .mv-q button, .mv-a p, .mvf-contact li,
.mvf-brand p, .chan span{overflow-wrap:break-word}

/* decorative layers stay inside their section */
section, .mv-sec, .mv-cta-banner, .mv-marq{overflow-x:clip}
@supports not (overflow:clip){ section, .mv-sec{overflow-x:hidden} }


/* the giant footer wordmark was the mobile overflow source (nowrap text) */
@media(max-width:820px){
  .mvf-big{white-space:normal!important; overflow-wrap:anywhere; font-size:clamp(36px,12vw,72px)}
}


/* ═════════ MOBILE SCROLL / MARQUEE PERFORMANCE ═════════
   The marquee stuttered because the animated strip was repainting on the
   main thread, while a full-width backdrop-filter header re-blurred the
   page on every scroll frame. Promote the strip to its own GPU layer and
   drop the most expensive live effects on small screens. */
.mv-marq{contain:paint; -webkit-transform:translateZ(0); transform:translateZ(0)}
.mv-marq-in, .rail-in{
  will-change:transform;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  -webkit-transform:translate3d(0,0,0);
  animation-timing-function:linear;
}
.mv-marq span, .rail-in .reel{-webkit-transform:translateZ(0); transform:translateZ(0)}

@media(max-width:900px){
  /* backdrop blur is the single biggest scroll cost on phones —
     use a near-opaque bar instead, same look, no per-frame blur */
  .mvh{
    -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
    background:rgba(7,7,15,.94)!important;
  }
  .mvh.shrunk{background:rgba(9,9,20,.95)!important}
  [data-theme="light"] .mvh, [data-theme="light"] .mvh.shrunk{background:rgba(12,12,24,.95)!important}
  .mvh::before{display:none}
  .mvh-mob{-webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:rgba(6,6,14,.98)}
  .mvh-dd{-webkit-backdrop-filter:none!important; backdrop-filter:none!important; background:rgba(10,10,20,.98)}

  /* animated blurs + rotating gradients are costly; keep layout, drop motion */
  .ah-orb{filter:blur(38px); animation:none}
  .mv-cta-banner::after{animation:none; opacity:.55}
  .mv-cta-banner .btn-p, .mv-cta-banner h2 em{animation:none}
  .btn-p::after, .mvf-btn::after{display:none}
  .ah-chip, .fc, .saved, .track, .ad-card, .phone{animation:none!important}

  /* slower sweep reads better on a narrow screen */
  .rail-in{animation-duration:44s}
  .page-wrap{box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  .mv-marq-in, .rail-in, .ah-orb, .mv-cta-banner::after,
  .btn-p::after, .mvf-btn::after{animation:none!important}
}


/* ═════════ LARGE-SCREEN SCALING ═════════
   Content was capped at 1240px, leaving big empty margins on wide monitors.
   Containers, header and footer now grow in steps.
   .si = homepage/legacy container · .fi = legacy footer · .mv-wrap = new pages */
@media(min-width:1500px){
  .mv-wrap, .si, .fi, .mvf-in, .tst-grid{max-width:1400px}
  .mv-sec{padding:124px 5%}
  .mvh{padding:0 max(4.5%, calc((100% - 1400px) / 2))}
  .mvh.shrunk{left:max(14px, calc((100% - 1460px) / 2)); right:max(14px, calc((100% - 1460px) / 2))}
}
@media(min-width:1750px){
  .mv-wrap, .si, .fi, .mvf-in, .tst-grid{max-width:1560px}
  .mv-sec{padding:134px 5%}
  .mvh{padding:0 max(4.5%, calc((100% - 1560px) / 2))}
  .mvh.shrunk{left:max(14px, calc((100% - 1620px) / 2)); right:max(14px, calc((100% - 1620px) / 2))}
  .mv-h2{font-size:clamp(38px,3.1vw,58px)}
  .mv-sub{font-size:17.5px; max-width:720px}
}
@media(min-width:2100px){
  .mv-wrap, .si, .fi, .mvf-in, .tst-grid{max-width:1760px}
  .mvh{padding:0 max(4.5%, calc((100% - 1760px) / 2))}
  .mvh.shrunk{left:max(14px, calc((100% - 1820px) / 2)); right:max(14px, calc((100% - 1820px) / 2))}
  .mvf-big{font-size:clamp(120px,8.6vw,190px)}
}

/* ════════════════════════════════════════════════════════════════
   SHARED PAGE HERO  —  used by FAQ, Contact, Video & Reels, Blog
   Same rhythm as the service pages, one place to maintain.
════════════════════════════════════════════════════════════════ */
.mvhero{position:relative;padding:148px 6% 74px;overflow:hidden}
.mvhero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 58% at 14% 8%,rgba(var(--blue-rgb),.16),transparent 64%),
             radial-gradient(34% 46% at 92% 88%,rgba(var(--blue-rgb),.07),transparent 62%)}
.mvhero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(70% 62% at 50% 34%,#000,transparent 78%);
          mask-image:radial-gradient(70% 62% at 50% 34%,#000,transparent 78%)}
.mvhero-in{position:relative;z-index:2;max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center}
.mvhero.is-center .mvhero-in{grid-template-columns:1fr;max-width:900px;text-align:center;justify-items:center}

.mvhero-kick{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:99px;
  background:var(--pill-bg);border:1px solid var(--border2);font-size:11.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);margin-bottom:22px}
.mvhero-kick i{width:7px;height:7px;border-radius:99px;background:var(--teal);font-style:normal;
  box-shadow:0 0 0 0 rgba(0,201,167,.5);animation:mvhpulse 2.4s infinite}
@keyframes mvhpulse{50%{box-shadow:0 0 0 8px rgba(0,201,167,0)}}
.mvhero h1{font-family:var(--f-display)!important;font-size:clamp(35px,4.9vw,62px);font-weight:800;
  line-height:1.05;letter-spacing:-.035em;margin-bottom:18px}
.mvhero h1 em{font-style:italic;color:var(--blue);font-weight:600}
.mvhero-sub{font-size:16.5px;line-height:1.75;color:var(--fg2);max-width:565px;margin-bottom:30px}
.mvhero.is-center .mvhero-sub{margin-left:auto;margin-right:auto}
.mvhero-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.mvhero.is-center .mvhero-row{justify-content:center}
.mvhero-stats{display:flex;gap:32px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border)}
.mvhero.is-center .mvhero-stats{justify-content:center;border-top:0;padding-top:6px}
.mvhero-stat b{display:block;font-family:var(--f-display)!important;font-size:clamp(21px,2.4vw,27px);
  font-weight:800;letter-spacing:-.02em;line-height:1}
.mvhero-stat span{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg3)}

/* right-hand visual shell */
.mvhero-vis{position:relative;min-height:320px;display:flex;align-items:center;justify-content:center}
.mvhero-panel{position:relative;width:100%;background:var(--card);border:1px solid var(--border2);
  border-radius:22px;padding:24px;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.mvhero-panel-top{display:flex;align-items:center;gap:8px;padding-bottom:15px;margin-bottom:16px;
  border-bottom:1px solid var(--border)}
.mvhero-panel-top i{width:9px;height:9px;border-radius:99px;background:var(--fg3);font-style:normal}
.mvhero-panel-top i:first-child{background:var(--blue)}
.mvhero-panel-top span{margin-left:auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}

/* gentle float on the right-hand visual, same feel as the app page */
.mvhero-vis.is-float{animation:mvheroFloat 6.5s ease-in-out infinite}
.mvhero-vis.is-float .mvhero-panel{animation:mvheroTilt 9s ease-in-out infinite}
@keyframes mvheroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes mvheroTilt{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-.5deg)}}
@media(prefers-reduced-motion:reduce){
  .mvhero-vis.is-float,.mvhero-vis.is-float .mvhero-panel{animation:none}
}
@media(max-width:1040px){
  .mvhero-vis.is-float,.mvhero-vis.is-float .mvhero-panel{animation:none}
}

/* entrance — plain CSS so it can never get stuck part-way */
.mvhero .mvin{opacity:0;transform:translateY(16px);animation:mvheroIn .72s cubic-bezier(.16,1,.3,1) forwards}
.mvhero .mvin-1{animation-delay:.06s}.mvhero .mvin-2{animation-delay:.14s}
.mvhero .mvin-3{animation-delay:.22s}.mvhero .mvin-4{animation-delay:.30s}
.mvhero .mvin-5{animation-delay:.38s}.mvhero .mvin-6{animation-delay:.46s}
@keyframes mvheroIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mvhero .mvin{animation:none;opacity:1;transform:none}}

@media(max-width:1040px){
  .mvhero-in{grid-template-columns:1fr;gap:40px}
  .mvhero-vis{order:2;min-height:0}
  .mvhero-sub{max-width:100%}
}
@media(max-width:760px){
  .mvhero{padding:116px 5% 52px}
  .mvhero::after{background-size:54px 54px}
  .mvhero-row{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
  .mvhero-row .btn{width:100%;justify-content:center}
  .mvhero-stats{gap:20px}
  .mvhero-stat{flex:1 1 40%}
  .mvhero-panel{padding:18px}
}

/* ════════════════════════════════════════════════════════════════
   LEGAL PAGES  —  privacy policy, terms and conditions
════════════════════════════════════════════════════════════════ */
.lgl-wrap{max-width:1240px;margin:0 auto;padding:44px 6% 110px;
  display:grid;grid-template-columns:262px minmax(0,1fr);gap:52px;align-items:start}
.lgl-side{position:sticky;top:104px;align-self:start}
.lgl-box{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px}
.lgl-box h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg3);margin-bottom:13px}
.lgl-toc{display:flex;flex-direction:column;gap:1px;
  max-height:calc(100vh - 230px); overflow-y:auto; padding-right:6px;
  scrollbar-width:thin; scrollbar-color:rgba(var(--blue-rgb),.45) transparent;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px), transparent);
          mask-image:linear-gradient(#000 calc(100% - 26px), transparent)}
.lgl-toc::-webkit-scrollbar{width:5px}
.lgl-toc::-webkit-scrollbar-track{background:transparent}
.lgl-toc::-webkit-scrollbar-thumb{
  background:rgba(var(--blue-rgb),.38); border-radius:99px}
.lgl-toc::-webkit-scrollbar-thumb:hover{background:rgba(var(--blue-rgb),.62)}
.lgl-toc a{display:block;padding:8px 12px;border-left:2px solid var(--border);font-size:12.5px;
  line-height:1.45;color:var(--fg2);text-decoration:none;transition:.2s}
.lgl-toc a:hover{color:var(--fg);border-left-color:rgba(var(--blue-rgb),.5)}
.lgl-toc a.on{color:var(--blue);border-left-color:var(--blue);background:rgba(var(--blue-rgb),.07)}

.lgl-body{font-size:16px;line-height:1.8;color:var(--fg2)}
.lgl-body section,.lgl-body .lgl-sec{padding-bottom:8px;scroll-margin-top:110px}
.lgl-body h2{font-family:var(--f-display)!important;font-size:clamp(21px,2.3vw,27px);font-weight:800;
  color:var(--fg);letter-spacing:-.025em;line-height:1.28;margin:44px 0 14px;text-transform:none;
  display:flex;align-items:baseline;gap:12px}
.lgl-body h2:first-of-type{margin-top:0}
.lgl-body h2 .num{flex:none;font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.06em;
  padding-top:3px;font-family:var(--f-body)}
.lgl-body h3{font-family:var(--f-display)!important;font-size:17px;font-weight:700;color:var(--fg);
  margin:26px 0 10px;letter-spacing:-.012em;text-transform:none}
.lgl-body p{margin-bottom:17px}
.lgl-body ul{margin:0 0 18px 20px}
.lgl-body li{margin-bottom:9px}
.lgl-body li::marker{color:var(--blue)}
.lgl-body strong{color:var(--fg);font-weight:700}
/* Inline links get the blue underline treatment — buttons must not.
   `.lgl-body a` (0,2,0) outranks `.btn-p` (0,1,0), which was painting the
   button text blue on a blue gradient and underlining it. */
.lgl-body a:not(.btn){color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.lgl-body a.btn{text-decoration:none!important}
.lgl-body a.btn-p{color:#fff!important}
.lgl-body a.btn-g{color:var(--fg)!important}
.lgl-note{margin:0 0 30px;padding:18px 20px;border-radius:15px;
  background:rgba(var(--blue-rgb),.07);border:1px solid rgba(var(--blue-rgb),.26);
  font-size:14px;line-height:1.7;color:var(--fg2)}
.lgl-note b{color:var(--fg)}
.lgl-updated{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:99px;
  background:var(--pill-bg);border:1px solid var(--border2);font-size:12px;color:var(--fg2);margin-bottom:8px}
.lgl-updated i{width:7px;height:7px;border-radius:99px;background:var(--teal);font-style:normal}
.lgl-contact{margin-top:44px;padding:28px;border-radius:20px;border:1px solid var(--border);
  background:var(--card)}
.lgl-contact h3{font-family:var(--f-display)!important;font-size:19px;font-weight:800;
  color:var(--fg);margin-bottom:8px;text-transform:none}
.lgl-contact p{font-size:14.5px;line-height:1.7;color:var(--fg2);margin-bottom:20px}
.lgl-contact .lgl-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.lgl-contact .lgl-btns .btn{flex:0 0 auto;width:auto;min-width:0;white-space:nowrap;
  justify-content:center;padding:13px 24px}
@media(max-width:540px){
  .lgl-contact .lgl-btns{display:grid;grid-template-columns:1fr;gap:10px}
  .lgl-contact .lgl-btns .btn{width:100%}
}
.lgl-defs{display:grid;gap:10px;margin:0 0 18px}
.lgl-def{display:flex;gap:14px;padding:14px 16px;border-radius:13px;background:var(--card);
  border:1px solid var(--border)}
.lgl-def b{flex:none;width:150px;font-size:13.5px;color:var(--fg)}
.lgl-def span{font-size:13.5px;line-height:1.65;color:var(--fg2)}

@media(max-width:1000px){
  .lgl-wrap{grid-template-columns:1fr;gap:26px;padding:32px 5% 70px}
  .lgl-side{position:static}
  .lgl-toc{max-height:none;flex-direction:row;flex-wrap:wrap;gap:7px}
  .lgl-toc a{border-left:0;border:1px solid var(--border2);border-radius:99px;padding:7px 14px;font-size:12px}
  .lgl-toc a.on{background:var(--blue);color:#fff;border-color:transparent}
  .lgl-def{flex-direction:column;gap:5px}
  .lgl-def b{width:auto}
}

/* footer legal row */
.mvf-legal{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}
.mvf-legal a{font-size:12px;color:var(--mfg2,rgba(240,239,233,.6));text-decoration:none;transition:color .2s}
.mvf-legal a:hover{color:var(--blue)}
.mvf-legal span{opacity:.35;font-size:11px}
@media(max-width:820px){.mvf-legal{justify-content:center}}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET
   Loaded last in the shared sheet; !important so page-level CSS
   (which loads after this file) cannot re-break these.
════════════════════════════════════════════════════════════════ */

/* id-based hero rules must never outrank the shared hero system */
#hero.mvhero, #bhero.mvhero, #phead.mvhero{
  padding:148px 6% 74px!important; min-height:0!important;
  display:block!important; text-align:left!important}
#hero.mvhero.is-center, #bhero.mvhero.is-center{text-align:center!important}
#hero.mvhero h1, #bhero.mvhero h1{
  font-size:clamp(35px,4.9vw,62px)!important; max-width:none!important; margin:0 0 18px!important}

@media(max-width:760px){
  #hero.mvhero, #bhero.mvhero{padding:116px 5% 52px!important}
}

/* grids that had no small-screen rule of their own */
@media(max-width:640px){
  .wbz-cards{grid-template-columns:1fr!important}
  .gdk-sw-row{grid-template-columns:repeat(5,1fr)!important;gap:4px!important}
  .ap-foot{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:460px){
  .uxs-row2, .uxs-wf-row{grid-template-columns:1fr!important}
}

/* last-resort overflow guard: nothing may push the page sideways */
@media(max-width:900px){
  img, video, canvas, svg, iframe, table{max-width:100%}
  pre, code{white-space:pre-wrap; word-break:break-word}
  .mvhero-in, .lgl-wrap, .playout, .cwrap, .bwrap, .prel{max-width:100%}
  [class*="grid"], [class*="-row"], [class*="cols"]{min-width:0}
  [class*="grid"] > *, [class*="cols"] > *{min-width:0}
}

/* legal pages: keep the contents rail readable on tablets */
@media(max-width:1180px) and (min-width:1001px){
  .lgl-wrap{grid-template-columns:230px minmax(0,1fr);gap:38px}
}