:root{
  --mb-fg:#1a1a2e; --mb-accent:#0066ff; --mb-accent-dark:#0052cc;
  --mb-muted:#888; --mb-code-bg:#f4f4f8;
  --mb-status-bg:#e6f7e6; --mb-status-fg:#1a7a1a;
}
/* Same system-font stack already live on every edge node's own decoy page
   (deploy-node.sh CSS_CONTENT) — not a downloaded webfont, so this stays
   true to the fleet's existing choice rather than inventing a new one.
   !important because CDN77's Text-module utility classes each set their
   own font-family (mostly "font, font Fallback", now stripped from the
   base CSS) and would otherwise win on specificity per element. */
body, body *{font-family:-apple-system,"Segoe UI",Roboto,sans-serif!important}

/* CDN77's Layout-module__cbqlla__content read --margin-top (-65px) from an
   ancestor whose only job was compensating for the promo banner above nav.
   We deleted that banner and replaced it with a one-line status strip, so
   the old pull now yanks hero content up under the sticky nav instead.
   Zero it — content sits in normal flow below nav+strip, no more overlap. */
.Layout-module__cbqlla__layout{--margin-top:0}

/* .Nav-module__bLoQaq__logo forces a fixed 105x30px box (that was CDN77's
   own wordmark image's exact size). Our replacement content (28px icon +
   "MediaByte" at 20px bold) doesn't fit that box, so the parent's
   align-items:center was centering a box too small for what's actually
   inside it — most visible on mobile where the mismatch is proportionally
   bigger. Let the link size to its real content and center that itself. */
.Nav-module__bLoQaq__logo{width:auto!important;height:auto!important;
  display:flex!important;align-items:center;text-decoration:none!important}

/* Global base rule is a{color:#0d5182;text-decoration:underline} — CDN77's
   own logo link never showed it because its only content was an <img>
   (text-decoration has no effect on replaced elements). Ours has real
   text ("MediaByte") in it now, so the underline that was always THERE,
   just invisible, became visible. */
.Nav-module__bLoQaq__logo,.Nav-module__bLoQaq__logo *{text-decoration:none!important;color:inherit}

/* The width:auto/display:flex fix above should have been enough on its
   own, but mobile is still reportedly off — CDN77's nav has real
   responsive differences (position:fixed dropdown panel etc.) between
   breakpoints that are hard to fully audit without a live viewport to
   test against. Forcing the three ancestor containers to the same fixed
   65px + flex-center at EVERY width sidesteps whichever specific
   mobile-only rule is still fighting this, rather than chasing it
   further blind. */
.Nav-module__bLoQaq__head,.Nav-module__bLoQaq__mainContainer,
.Nav-module__bLoQaq__headContainer{
  height:65px!important;display:flex!important;align-items:center!important}

/* CDN77's nav is #fff0 (transparent white) — a JS scroll-listener normally
   swaps it to opaque after the page scrolls past the hero. No JS here, so
   it stayed permanently see-through and hero text showed straight through
   the sticky bar. Force it solid, always. */
.Nav-module__bLoQaq__wrapper,.Nav-module__bLoQaq__nav{background:#fff!important}
.Nav-module__bLoQaq__wrapper{box-shadow:0 1px 0 #e6e6ec}

/* Nav bar itself is a fixed 65px (.Nav-module__bLoQaq__head). Links defaulted
   to their own small pill height, sitting short/off-center in the 65px bar —
   stretch those to match. The "Get in touch" button has a solid fill, so the
   same trick made IT look like a flat slab rather than a button; that one
   keeps its natural pill height and just centers on the cross axis instead. */
.mb-navlink{color:var(--mb-fg);text-decoration:none;font-weight:500;font-size:15px;
  height:65px;padding:0 14px;display:inline-flex;align-items:center;transition:color .15s,background .15s}
.mb-navlink:hover{color:var(--mb-accent);background:#f4f7ff}
.Nav-module__bLoQaq__bottomContainer .Button-module__e7WGRa__button{align-self:center}

/* brand-color override for CDN77's stock CTA button (was yellow) */
.Button-module__e7WGRa__primary{background:var(--mb-accent)!important;color:#fff!important}
.Button-module__e7WGRa__primary:not(:disabled):hover,
.Button-module__e7WGRa__button.Button-module__e7WGRa__primary:not(:disabled):focus{
  background-color:var(--mb-accent-dark)!important;color:#fff!important}

.mb-status-strip{background:var(--mb-status-bg);text-align:center;padding:8px 16px}
.mb-status-strip-link{color:var(--mb-status-fg);font-weight:600;font-size:14px;text-decoration:none}
.mb-status-strip-link:hover{text-decoration:underline}

.mb-pop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.mb-pop-card{border:1px solid #e6e6ec;border-radius:8px;padding:18px;background:#fafafd}
.mb-pop-card-title{font-weight:700;font-size:17px;color:var(--mb-fg);margin-bottom:6px}
.mb-pop-card-meta{font-size:13px;color:var(--mb-muted);margin-top:6px;font-family:monospace}
.mb-badge-ok{display:inline-block;background:var(--mb-status-bg);color:var(--mb-status-fg);
  font-size:12px;font-weight:600;padding:3px 10px;border-radius:10px}

/* The link colors below (#9a9ab0 / #fff) were written assuming a dark
   footer background CDN77's own .footer rule never actually sets — this
   is what made the column links look washed-out gray-on-white. Give the
   whole footer the dark background they were designed for (our locked
   brand --mb-fg, matching the CTA panel above it for a seamless dark
   bottom section instead of two mismatched near-blacks touching). */
/* NB: ".footer" not "footer.footer" — the redundant type selector would
   outrank the single-class rules below it (.mb-footer-brand etc.) on
   specificity regardless of source order; same specificity here means
   source order decides, and these come first. */
.footer{background:var(--mb-fg)}
.footer,.footer *{color:#c8c8d4}
.CtaPanelWrapper-module__UStaSW__section{background:var(--mb-fg)!important}

.mb-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:60px 0 40px}
.mb-footer-brand{font-weight:700;font-size:20px;color:#fff;margin-bottom:10px}
.mb-footer-desc{color:#9a9ab0;font-size:14px;margin:0 0 12px;max-width:280px}
.mb-footer-col a{color:#9a9ab0}
.mb-footer-col a:hover{color:#fff}
.mb-footer-col-title{color:#fff;font-weight:600;font-size:14px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.04em}
.mb-footer-links{list-style:none;margin:0;padding:0}
.mb-footer-links li{margin-bottom:10px;font-size:14px}

/* Bottom copyright bar — was borrowing SECTION_PADDING (120px top+bottom,
   see the bottom_bar comment in this script) which produced a huge dead
   gap under the copyright line. Small and explicit instead. */
.mb-footer-bottombar{padding:20px 0;border-top:1px solid #ffffff1a}
.mb-footer-bottombar .SimpleFooter-module__hw8uPa__copy{color:#8f8fa3;font-size:13px;margin:0}
@media (max-width: 768px){.mb-footer-grid{grid-template-columns:1fr 1fr}}

/* generic page-prose used on about/contact/api/status (no CDN77 equivalent exists) */
.mb-page-hero{padding:70px 0 20px}
.mb-page-hero h1{font-size:2.5rem;font-weight:700;color:var(--mb-fg);margin:0 0 14px;line-height:1.2}
.mb-page-hero p{font-size:18px;color:#48484b;max-width:640px;margin:0}
.mb-prose{padding:20px 0 80px;max-width:720px}
.mb-prose h2{font-size:1.5rem;font-weight:700;color:var(--mb-fg);margin:36px 0 12px}
.mb-prose p{font-size:16px;line-height:1.7;color:#48484b;margin:0 0 16px}
.mb-prose ul{padding-left:20px;color:#48484b;font-size:16px;line-height:1.8}
.mb-prose a{color:var(--mb-accent)}
.mb-status-board{padding:20px 0 80px}
.mb-status-row{display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border:1px solid #e6e6ec;border-radius:8px;margin-bottom:10px}
.mb-status-row-name{font-weight:600;color:var(--mb-fg)}
.mb-status-row-meta{font-size:13px;color:var(--mb-muted);font-family:monospace;margin-top:2px}
.mb-code{background:var(--mb-code-bg);border-radius:8px;padding:18px;font-family:monospace;
  font-size:13px;line-height:1.6;overflow-x:auto;color:#1a1a2e;margin:16px 0}
.mb-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px 0 80px}
.mb-contact-card{border:1px solid #e6e6ec;border-radius:8px;padding:24px}
.mb-contact-card h3{margin:0 0 8px;font-size:18px;color:var(--mb-fg)}
.mb-contact-card a{color:var(--mb-accent);font-weight:600;text-decoration:none}
@media (max-width: 700px){.mb-contact-grid{grid-template-columns:1fr}}

/* Scroll-swapped feature illustrations. The column itself
   (.CoreFeatures-module__CFWMOW__sticky) is already sticky-positioned and
   hidden below a real breakpoint via CDN77's own CSS — this only stacks
   our 3 images inside it and crossfades whichever one scroll-features.js
   has marked .is-active. Source images vary in aspect ratio (one square,
   two 3:2) — object-fit:cover on a fixed-ratio box crops them consistently
   instead of the crossfade jumping size between slides.
   BUG FIXED: this used `position:relative` here, which — same selector,
   loaded after the base CSS — overrode CDN77's own `position:sticky` on
   this exact class and killed the whole "stays put while you scroll past
   the text" effect the images exist for. `position:sticky` still works
   fine as a containing block for the absolutely-positioned images inside
   it; relative was never needed. */
.CoreFeatures-module__CFWMOW__sticky{position:sticky;aspect-ratio:4/3;height:auto!important;
  border-radius:12px;overflow:hidden;background:#f4f4f8}
.mb-sticky-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease}
.mb-sticky-img.is-active{opacity:1}