: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 upstream'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}

/* upstream's Layout-module__7VhOj0v2__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__7VhOj0v2__layout{--margin-top:0}

/* .Nav-module__bTA9hTz8__logo forces a fixed 105x30px box (that was upstream'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__bTA9hTz8__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} — upstream'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__bTA9hTz8__logo,.Nav-module__bTA9hTz8__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 — upstream'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__bTA9hTz8__head,.Nav-module__bTA9hTz8__mainContainer,
.Nav-module__bTA9hTz8__headContainer{
  height:65px!important;display:flex!important;align-items:center!important}

/* upstream'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__bTA9hTz8__wrapper,.Nav-module__bTA9hTz8__nav{background:#fff!important}
.Nav-module__bTA9hTz8__wrapper{box-shadow:0 1px 0 #e6e6ec}

/* Nav bar itself is a fixed 65px (.Nav-module__bTA9hTz8__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__bTA9hTz8__bottomContainer .Button-module__FMUgfJp4__button{align-self:center}

/* brand-color override for upstream's stock CTA button (was yellow) */
.Button-module__FMUgfJp4__primary{background:var(--mb-accent)!important;color:#fff!important}
.Button-module__FMUgfJp4__primary:not(:disabled):hover,
.Button-module__FMUgfJp4__button.Button-module__FMUgfJp4__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 upstream'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}
.PromoPanelWrapper-module__c1fPsu9r__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 .FooterBar-module__jbLlrO4F__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 upstream equivalent exists) */
.mb-page-hero{padding:48px 0 20px;max-width:960px;margin:0 auto}
.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:960px;margin:0 auto}
.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;max-width:960px;margin:0 auto}
.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;max-width:960px;margin:0 auto}
.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
   (.FeatureRail-module__BWXmBrn7__sticky) is already sticky-positioned and
   hidden below a real breakpoint via upstream'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) — the box keeps a fixed 4/3 ratio so the crossfade doesn't jump
   size between slides, and object-fit:contain fits each image whole inside
   it. `cover` was used here at first and cropped every illustration; the
   letterboxing `contain` leaves is invisible because the box is transparent.
   Background MUST stay transparent, not #f4f4f8: these PNGs are 43-64%
   transparent, so any container color shows through as a grey plate behind
   the artwork.
   BUG FIXED: this used `position:relative` here, which — same selector,
   loaded after the base CSS — overrode upstream'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. */
/* Колонка шире, бокс квадратный. При object-fit:contain видимый размер упирается
   в бокс, а он был 475x356 (4/3) — квадратная иллюстрация рисовалась всего
   356x356 от исходных 1254. Ширину забираем у текстовой колонки: при контейнере
   1190px её остаётся ~570px, что для чтения всё ещё комфортно. */
@media (min-width:960px){
  .FeatureRail-module__BWXmBrn7__wrapper{grid-template-columns:auto 460px}
  .FeatureRail-module__BWXmBrn7__sticky{top:calc(50vh - 230px)}   /* половина бокса 460 */
}
@media (min-width:1240px){
  .FeatureRail-module__BWXmBrn7__wrapper{grid-template-columns:auto 560px}
  .FeatureRail-module__BWXmBrn7__sticky{top:calc(50vh - 280px)}   /* половина бокса 560 */
}

/* Прилипание ровно по центру экрана: смещение = половина вьюпорта минус
   половина бокса, поэтому top задан в calc() рядом с шириной колонки — размеры
   обязаны идти парой (460→230, 560→280).

   ГРАБЛИ: сначала тут стояло top:50% + translateY(-50%). Так делать НЕЛЬЗЯ: у
   position:sticky проценты в `top` считаются от КОНТЕЙНЕРА, а не от вьюпорта, а
   контейнер здесь — вся секция высотой в несколько тысяч пикселей. Прилипание
   фактически отключалось, а transform поднимал картинку на 280px, из-за чего она
   наезжала на предыдущую секцию. Именно поэтому здесь vh, а не проценты.

   Совпадает с логикой scroll-features.js: он выбирает активную карточку по
   близости её центра к центру экрана — картинка стоит на той же линии. */
.FeatureRail-module__BWXmBrn7__sticky{position:sticky;aspect-ratio:1/1;height:auto!important;
  border-radius:12px;overflow:hidden;background:transparent}
.mb-sticky-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .5s ease}
.mb-sticky-img.is-active{opacity:1}

/* Зоны присутствия. Сетка PoP росла плоским списком и к восьми точкам стала
   нечитаемой: Москва и Нью-Йорк терялись между европейскими городами. Группы
   заодно честнее описывают сеть — она не «глобальная», а три понятных региона. */
.mb-zone{margin-bottom:32px}
.mb-zone-title{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--mb-muted);margin:0 0 14px}
.mb-zone-count{font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--mb-muted);opacity:.75}


/* MediaByte Custom Landing Components */
.mb-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:40px 0}
.mb-stat-card{background:#fafafd;border:1px solid #e6e6ec;border-radius:10px;padding:24px}
.mb-stat-num{font-size:2.2rem;font-weight:700;color:var(--mb-accent);line-height:1}
.mb-stat-label{font-size:15px;font-weight:600;color:var(--mb-fg);margin:8px 0 4px}
.mb-stat-desc{font-size:13px;color:var(--mb-muted);margin:0}

.mb-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:30px 0 60px}
.mb-feature-card{background:#fff;border:1px solid #e6e6ec;border-radius:10px;padding:28px;box-shadow:0 2px 8px rgba(0,0,0,0.03)}
.mb-feature-card h3{font-size:1.25rem;font-weight:700;color:var(--mb-fg);margin:0 0 10px}
.mb-feature-card p{font-size:15px;line-height:1.6;color:#48484b;margin:0}

.mb-cta-box{background:#1a1a2e;color:#fff;border-radius:12px;padding:48px 36px;text-align:center;margin:60px 0}
.mb-cta-box h2{color:#fff;font-size:2rem;font-weight:700;margin:0 0 12px}
.mb-cta-box p{color:#b0b0cc;font-size:17px;max-width:560px;margin:0 auto 24px}
.mb-btn-primary{display:inline-block;background:var(--mb-accent);color:#fff!important;padding:12px 28px;border-radius:8px;font-weight:600;text-decoration:none}
.mb-btn-primary:hover{background:var(--mb-accent-dark)}
.mb-btn-secondary{display:inline-block;background:#e6e6ec;color:var(--mb-fg)!important;padding:12px 28px;border-radius:8px;font-weight:600;text-decoration:none;margin-left:12px}


.mb-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e6e6ec;border-radius:8px;overflow:hidden;font-size:14px;margin:20px 0 36px}
.mb-table th{background:#f8f8fc;color:#1a1a2e;font-weight:600;text-align:left;padding:12px 18px;border-bottom:1px solid #e6e6ec}
.mb-table td{padding:13px 18px;border-bottom:1px solid #f0f0f4;color:#48484b;vertical-align:middle}
.mb-table tr:last-child td{border-bottom:none}
.mb-table tr:hover td{background:#fafafd}
.mb-table code{font-family:monospace;font-weight:600;font-size:13px;color:#1a1a2e;background:#eff0f6;padding:3px 7px;border-radius:4px;white-space:nowrap}
.mb-badge-ok, .mb-badge-warn, .mb-badge-err{display:inline-block;white-space:nowrap;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;letter-spacing:0.02em;text-transform:uppercase}
.mb-badge-ok{background:#ecfdf5;color:#047857}
.mb-badge-warn{background:#fef3c7;color:#92400e}
.mb-badge-err{background:#fee2e2;color:#991b1b}