:root { --primary-color: #160177; --secondary-color: #76d6ff; /* Bootstrap ships --bs-code-color: #d63384, which is 4.27:1 on the .bg-light sections (#f8f9fa) and 4.50:1 on white — i.e. failing in one place and passing by 0.005 in the other, at ~12px. Inline
 is small text and
       needs 4.5:1, so this darkens the same pink to 4.98:1 / 5.25:1. */
    --bs-code-color: #c62a77;
}

body {

    font-family: 'Exo', sans-serif;
    background-color: #ecf4fb;
    color: #333;
}

/* Skip link (WCAG 2.4.1). Emitted first in  by website_layouts/header.
   Positioned off-canvas rather than display:none — a hidden element is not
   focusable, so it has to stay in the tab order to work at all. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: #160177;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
    outline: 3px solid #76d6ff;
    outline-offset: 2px;
}

/* The navbar is sticky, so an un-offset jump lands the heading underneath it. */
#main-content {
    scroll-margin-top: 90px;
}

.otr-card {
    background: white;
    border-radius: 15px;
    border: 1px solid #0057b335;
    padding: 20px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.text_fix_300px {
    margin-right: 10px;
    font-weight: 500;
    color: #01072e;
}

/* ── Marketing navbar: floating dark capsule ───────────────────────────────
   Sits on the dark hero gradient (see website_layouts/product_hero.blade.php)
   and keeps its own background once the sticky bar scrolls onto the light page
   body. Only the marketing pages load this file — the customer, reseller and
   admin panels use css/styles.css — so none of this reaches them. */
.navbar {
    background-color: transparent;
    box-shadow: none;
    /* Side padding keeps the capsule off the screen edges below 576px, where
       Bootstrap's .container is full-width and the rounded ends would other-
       wise be clipped flat. Above that the container's own max-width centres
       it and this padding is never reached. */
    padding: 14px 12px 0;
}

.navbar>.container {
    background: rgba(11, 17, 48, .82);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 44px;
    /* Less padding on the right than the left: the CTA is a filled pill and
       carries its own visual weight, so equal padding reads lopsided. */
    padding: 9px 12px 9px 22px;
    box-shadow: 0 10px 30px rgba(3, 6, 20, .45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* The bar floats ON the hero rather than sitting in a band above it: the hero
   gradient is not flat (a teal orb bleeds in from the left), so no solid strip
   behind the capsule can match it. Pulling the hero up under the transparent
   bar is the only seamless option.

   Scoped to the three dark hero partials on purpose — /faq, /policy, /status,
   /wiki and the blog posts open with light content, and sliding that under the
   bar would hide it. Those pages keep the bar in normal flow. */
/* How far the hero is pulled up. Deliberately a little MORE than the bar's real
   height: overshooting just hides a few extra pixels of gradient behind the
   capsule, while undershooting leaves a pale line of page background above it —
   which is exactly what happened on phones, where the stacked bar is taller. */
:root {
    --nav-overlap: 88px;
}

@media (max-width: 991.98px) {
    :root {
        --nav-overlap: 104px;
    }
}

#main-content .hx,
#main-content .ph-hero,
#main-content .px-hero {
    margin-top: calc(-1 * var(--nav-overlap));
}

/* …and give the hero's own content back the room the bar now covers. Selectors
   carry #main-content because each partial ships its own