/* Breviity — static site behaviour layer.
   Replaces the responsive logic that used to be computed in JavaScript
   (matchMedia -> inline display values) with real CSS media queries. */

/* --- Header nav: desktop vs mobile -------------------------------------- */
@media (max-width: 860px) {
  nav[aria-label="Primary"] { display: none !important; }
  .bv-signin                { display: none !important; }
  .bv-burger                { display: block !important; }
}
@media (min-width: 861px) {
  .bv-burger     { display: none !important; }
  .bv-mobile-nav { display: none !important; }
}

/* --- Mobile nav panel ---------------------------------------------------- */
.bv-mobile-nav {
  border-top: 1px solid #E4E0EA;
  background: #FFFFFF;
  flex-direction: column;
  padding: 8px 24px 16px;
  display: flex;
}
.bv-mobile-nav[hidden] { display: none !important; }
.bv-mobile-nav a {
  padding: 14px 0;
  border-bottom: 1px solid #EDEAF1;
  color: #1A1A2E;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.bv-mobile-nav a:last-child { border-bottom: none; color: #4850B0; }

/* --- FAQ accordion ------------------------------------------------------- */
.bv-faq-answer[hidden] { display: none !important; }

/* --- Blog category filter ------------------------------------------------ */
.bv-post[hidden] { display: none !important; }

/* --- Form validation ----------------------------------------------------- */
.bv-field-error { border-color: #C2402A !important; }
.bv-form-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.5;
}
.bv-form-note[hidden] { display: none !important; }
.bv-form-note.is-error   { background: #FBEDEA; color: #8F2F1E; border: 1px solid #E7C3BA; }
.bv-form-note.is-success { background: #E8F5F4; color: #1D6C67; border: 1px solid #B9DEDB; }

/* Honour reduced motion for anything added here too. */
@media (prefers-reduced-motion: reduce) {
  .bv-mobile-nav, .bv-faq-answer { transition: none !important; }
}

/* --- Honeypot -----------------------------------------------------------
   Off-screen rather than display:none — a fair number of bots skip hidden
   inputs but happily fill anything still in the layout. Removed from the tab
   order and from the accessibility tree so no real visitor can reach it. */
.bv-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Turnstile ----------------------------------------------------------- */
.bv-turnstile:empty { display: none; }

/* --- Cookie consent -------------------------------------------------------
   Rendered by consent.js. Tokens match the rest of the site: indigo #191E79,
   ink #1A1A2E, muted #6B6B7A, hairline #E4E0EA, 10px button radius, the
   0.22/1/0.36/1 curve. Nothing here uses a colour the design system does not
   already use. */

.bv-ck-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Below the sticky header (z-index 50) and the mobile nav panel it contains:
     they never overlap in normal layout, but at 100 the banner painted on top
     of an open mobile menu. */
  z-index: 40;
  background: #FFFFFF;
  border-top: 1px solid #E4E0EA;
  box-shadow: 0 -18px 40px -30px rgba(25, 30, 121, 0.45);
  /* At 400% zoom the banner is taller than the viewport. Bottom-anchored fixed
     boxes grow upward and do not scroll with the document, so without this the
     title and the Cookie Policy link end up above the top edge, unreachable. */
  max-height: 100dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.bv-ck-banner.is-in { transform: translateY(0); }

.bv-ck-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  justify-content: space-between;
}
.bv-ck-copy { flex: 1 1 420px; min-width: 260px; }
.bv-ck-title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: #1A1A2E;
}
.bv-ck-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6B6B7A;
  max-width: 68ch;
}
.bv-ck-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bv-ck-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 11px 20px;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bv-ck-primary { background: #191E79; color: #FFFFFF; border-color: #191E79; }
.bv-ck-primary:hover { background: #12165C; border-color: #12165C; }
.bv-ck-secondary { background: #FFFFFF; color: #1A1A2E; border-color: #D8D4DD; }
.bv-ck-secondary:hover { border-color: #191E79; color: #191E79; }
.bv-ck-link {
  background: none;
  border-color: transparent;
  color: #4850B0;
  padding: 11px 10px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bv-ck-link:hover { color: #191E79; }

.bv-ck-btn:focus-visible,
.bv-ck-reopen:focus-visible,
.bv-ck-switch input:focus-visible + .bv-ck-track {
  outline: 2px solid #4850B0;
  outline-offset: 2px;
}

/* --- Preference dialog --------------------------------------------------- */
.bv-ck-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(15, 18, 38, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}
.bv-ck-overlay.is-in { opacity: 1; }

.bv-ck-dialog {
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid #E4E0EA;
  box-shadow: 0 30px 60px -30px rgba(25, 30, 121, 0.5);
  width: 100%;
  max-width: 620px;
  /* dvh, not vh: with a mobile URL bar showing, 100vh exceeds the visible
     area and the top of the dialog becomes unreachable. margin:auto rather
     than relying on align-items:center, which clips overflow at the start. */
  max-height: calc(100dvh - 48px);
  margin: auto;
  overflow-y: auto;
  padding: 28px;
  transform: translateY(10px) scale(0.99);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.bv-ck-overlay.is-in .bv-ck-dialog { transform: none; }

.bv-ck-h {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1A1A2E;
}

.bv-ck-group {
  border: 1px solid #E4E0EA;
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 18px;
}
.bv-ck-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.bv-ck-group-name { font-size: 15px; font-weight: 700; color: #1A1A2E; }
.bv-ck-always {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1D6C67;
  background: #E8F5F4;
  border: 1px solid #B9DEDB;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.bv-ck-group-text {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6B6B7A;
}

/* --- Switch --------------------------------------------------------------- */
.bv-ck-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  position: relative;
}
/* The real checkbox sits invisibly over the track and takes the clicks, rather
   than being pushed off-screen with the painted track on top of it. Clicking
   the switch, the label text, or tabbing to it all drive the same control. */
.bv-ck-switch input {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 23px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.bv-ck-track {
  width: 40px; height: 23px;
  border-radius: 999px;
  background: #D8D4DD;
  /* The off state alone is 1.46:1 on white, which fails SC 1.4.11 for a
     control boundary; the border supplies the 3:1 the fill cannot. */
  border: 1px solid #8A8797;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
  pointer-events: none;   /* never swallow a click meant for the input */
}
.bv-ck-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #8A8797;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
}
.bv-ck-switch input:checked + .bv-ck-track { background: #1D6C67; border-color: #1D6C67; }
.bv-ck-switch input:checked + .bv-ck-track::after { border-color: #1D6C67; }
.bv-ck-switch input:checked + .bv-ck-track::after { transform: translateX(17px); }
.bv-ck-switch-text { font-size: 13.5px; font-weight: 500; color: #1A1A2E; white-space: nowrap; }

/* --- Cookie inventory ----------------------------------------------------- */
.bv-ck-scroll { overflow-x: auto; border: 1px solid #EDEAF1; border-radius: 9px; }
.bv-ck-scroll:focus-visible { outline: 2px solid #4850B0; outline-offset: 2px; }
.bv-ck-table { border-collapse: collapse; width: 100%; font-size: 12.5px; min-width: 440px; }
.bv-ck-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B6B7A;
  background: #F4F5FA;
  border-bottom: 1px solid #EDEAF1;
  white-space: nowrap;
}
.bv-ck-table td {
  padding: 8px 12px;
  color: #6B6B7A;
  border-bottom: 1px solid #F1EFF4;
  vertical-align: top;
  line-height: 1.5;
}
.bv-ck-table tbody tr:last-child td { border-bottom: none; }
.bv-ck-name {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #1A1A2E;
  white-space: nowrap;
}

.bv-ck-dialog-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

/* --- Footer re-entry point ------------------------------------------------ */
.bv-ck-reopen {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  color: rgb(201, 205, 232);
  cursor: pointer;
  text-decoration: none;
}
.bv-ck-reopen:hover { text-decoration: underline; }
/* The shared #4850B0 ring is only ~2.7:1 against the near-black footer. */
.bv-ck-reopen:focus-visible { outline-color: #C9CDE8; }

/* Pages with no footer (hero-flow.html) still need a way back to the choice. */
.bv-ck-reopen-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 39;
  background: #FFFFFF;
  border: 1px solid #D8D4DD;
  border-radius: 999px;
  padding: 8px 14px;
  color: #4850B0;
  box-shadow: 0 10px 24px -18px rgba(25, 30, 121, 0.5);
}
.bv-ck-reopen-float:focus-visible { outline-color: #4850B0; }

/* Announcements for assistive tech; visually hidden but not display:none,
   which would stop them being announced at all. */
.bv-ck-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  .bv-ck-banner-inner { padding: 16px 18px; gap: 14px; }
  .bv-ck-actions { width: 100%; }
  /* Accepting and refusing must be equally easy to reach and equally
     prominent, so the two decisions share one row at equal width and the
     settings link drops to its own line rather than squeezing them. */
  .bv-ck-actions .bv-ck-primary,
  .bv-ck-actions .bv-ck-secondary { flex: 1 1 0; text-align: center; }
  .bv-ck-actions .bv-ck-link { flex: 1 1 100%; order: 3; text-align: center; }
  .bv-ck-dialog { padding: 22px 18px; }
}

/* Forced-colours modes drop background-color, which would leave the switch
   invisible: it conveys its state entirely through fill and knob position. */
@media (forced-colors: active) {
  .bv-ck-track { border: 1px solid CanvasText; background: Canvas; }
  .bv-ck-track::after { background: CanvasText; border-color: CanvasText; }
  .bv-ck-switch input:checked + .bv-ck-track { background: Highlight; }
  .bv-ck-switch input:checked + .bv-ck-track::after { background: Canvas; }
  .bv-ck-banner { border-top: 1px solid CanvasText; }
  .bv-ck-dialog { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .bv-ck-banner, .bv-ck-overlay, .bv-ck-dialog,
  .bv-ck-track, .bv-ck-track::after { transition: none !important; }
}

/* ============================================================
   BREVIITY — SHARED ANIMATION & VISUAL EFFECTS
   Based on the design_files animation system
   ============================================================ */


/* ============================================================
   HERO
   ============================================================ */

#top {
    position: relative;
    overflow: hidden;
}

/* Particle canvas used by site.js */
#bv-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Hero content stays above the particle background */
.bv-hero-content {
    position: relative;
    z-index: 2;
}


/* ============================================================
   HERO ENTRANCE ANIMATION
   ============================================================ */

/*
   Important:
   Without .bv-ready everything remains visible.
   This prevents the ASP.NET page from becoming blank
   if JavaScript fails to load.
*/

.bv-ready .bv-hero-fade {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.bv-ready .bv-hero-fade.is-on {
    opacity: 1;
    transform: translateY(0);
}


/* Hero stagger */

.bv-ready .bv-hero-fade:nth-child(1) {
    transition-delay: 0.06s;
}

.bv-ready .bv-hero-fade:nth-child(2) {
    transition-delay: 0.14s;
}

.bv-ready .bv-hero-fade:nth-child(3) {
    transition-delay: 0.26s;
}

.bv-ready .bv-hero-fade:nth-child(4) {
    transition-delay: 0.38s;
}
/* =========================================================
   NAVIGATION DROPDOWNS
   ========================================================= */

.bv-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.bv-nav-dropdown-link {
    display: block;
    padding: 22px 0;
    color: rgb(26, 26, 46);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
}

    .bv-nav-dropdown-link:hover {
        color: rgb(25, 30, 121);
        text-decoration: none;
    }

.bv-nav-current {
    color: rgb(25, 30, 121);
    font-weight: 700;
}


/* Dropdown box */

.bv-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 180px;
    padding: 8px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(228, 224, 234);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(25, 30, 121, 0.12);
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}


/* Show when hovering */

.bv-nav-dropdown:hover .bv-dropdown-menu,
.bv-nav-dropdown:focus-within .bv-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* Dropdown links */

.bv-dropdown-menu a {
    display: block;
    padding: 11px 14px;
    color: rgb(26, 26, 46);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 7px;
}

    .bv-dropdown-menu a:hover {
        background: rgb(244, 245, 250);
        color: rgb(25, 30, 121);
        text-decoration: none;
    }

/* ============================================================
   HERO IMAGE ENTRANCE
   ============================================================ */

.bv-ready .bv-hero-img {
    opacity: 0;
    transform: translateY(24px) scale(0.97);

    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.bv-ready .bv-hero-img.is-on {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* ============================================================
   CTA SHIMMER
   ============================================================ */

.bv-cta-shimmer {
    position: relative;
    overflow: hidden;
}

.bv-cta-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;

    width: 50%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.13),
        transparent
    );

    animation: bvShimmer 4s ease-in-out 1.5s infinite;
}

@keyframes bvShimmer {

    0%,
    70%,
    100% {
        left: -100%;
    }

    85% {
        left: 150%;
    }
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

/*
   Safe fallback:
   If JavaScript doesn't load, content stays visible.
*/

.bv-ready .bv-reveal {
    opacity: 0;
    transform: translateY(26px);

    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.bv-ready .bv-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   STAGGERED SCROLL REVEAL
   ============================================================ */

.bv-ready .bv-stagger > .bv-reveal:nth-child(1) {
    transition-delay: 0s;
}

.bv-ready .bv-stagger > .bv-reveal:nth-child(2) {
    transition-delay: 0.09s;
}

.bv-ready .bv-stagger > .bv-reveal:nth-child(3) {
    transition-delay: 0.18s;
}

.bv-ready .bv-stagger > .bv-reveal:nth-child(4) {
    transition-delay: 0.27s;
}

.bv-ready .bv-stagger > .bv-reveal:nth-child(5) {
    transition-delay: 0.34s;
}

.bv-ready .bv-stagger > .bv-reveal:nth-child(6) {
    transition-delay: 0.40s;
}


/* ============================================================
   CARD HOVER
   ============================================================ */

.bv-card-hover {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease !important;
}

/* Higher specificity so it overrides bv-reveal's transform */
.bv-ready .bv-reveal.bv-card-hover:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 36px -8px rgba(25, 30, 121, 0.14) !important;
    border-color: #4850B0 !important;
}

/* ============================================================
   PRODUCT / IMAGE HOVER
   ============================================================ */

.bv-img-hover {
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1) !important;
}

.bv-img-hover:hover {
     transform: scale(1.015) !important;
     box-shadow: 0 24px 48px -16px rgba(25,30,121,0.22) !important;
}



/* ============================================================
   GENERIC IMAGE HOVER
   ============================================================ */

.bv-image-hover {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}

.bv-image-hover:hover {
    transform: translateY(-4px) scale(1.01);

    box-shadow:
        0 24px 42px -28px rgba(25, 30, 121, 0.5);
}


/* ============================================================
   INTEGRATION CARDS
   ============================================================ */

.scp6 {
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.bv-ready .bv-reveal.scp6:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.35) !important;
    transform: translateY(-2px) !important;
}


/* ============================================================
   FLOW CARDS
   ============================================================ */

.bv-flow-card {
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.bv-flow-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 16px 30px -22px rgba(25, 30, 121, 0.5);
}


/* ============================================================
   FLOW ARROWS
   ============================================================ */

.bv-flow-arrow {
    display: inline-block;

    animation:
        bvArrowPulse 1.8s ease-in-out infinite;
}

@keyframes bvArrowPulse {

    0%,
    100% {
        transform: translateX(0);
        opacity: 0.65;
    }

    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}


/* ============================================================
   QUOTE PULSE
   ============================================================ */

.bv-quote-mark {
    display: inline-block;

    animation:
        bvQPulse 3s ease-in-out infinite;
}

@keyframes bvQPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}


/* ============================================================
   GENERAL BUTTON / PILL HOVER
   ============================================================ */

.bv-pill-hover {
    transition:
        transform 0.22s ease,
        background 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.bv-pill-hover:hover {
    transform: translateY(-2px);

    border-color: #4850B0 !important;

    box-shadow:
        0 8px 20px -16px rgba(25, 30, 121, 0.45);
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .bv-ready .bv-reveal,
    .bv-ready .bv-hero-fade,
    .bv-ready .bv-hero-img {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .bv-card-hover,
    .bv-img-hover,
    .bv-image-hover,
    .bv-flow-card,
    .bv-pill-hover,
    .scp6 {
        transform: none !important;
        transition: none !important;
    }

    .bv-cta-shimmer::after,
    .bv-flow-arrow,
    .bv-quote-mark {
        animation: none !important;
    }

    #bv-hero-canvas {
        display: none !important;
    }
}
/* ============================================================
   NAVIGATION DROPDOWNS
   ============================================================ */

.bv-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
}


/* Main navigation item */

.bv-main-nav-link {
    display: flex;
    align-items: center;
    color: rgb(26, 26, 46);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

    .bv-main-nav-link:hover {
        color: rgb(25, 30, 121);
    }

    .bv-main-nav-link.bv-nav-current {
        color: rgb(25, 30, 121);
        font-weight: 700;
    }


/* ============================================================
   DROPDOWN BOX
   ============================================================ */

.bv-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 300px;
    padding: 10px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(228, 224, 234);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(25, 30, 121, 0.12), 0 4px 12px rgba(26, 26, 46, 0.06);
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 100;
}


/* ============================================================
   SHOW DROPDOWN ON HOVER
   ============================================================ */

.bv-nav-dropdown:hover .bv-dropdown-menu,
.bv-nav-dropdown:focus-within .bv-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}


/* ============================================================
   DROPDOWN ITEMS
   ============================================================ */

.bv-dropdown-menu a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 14px;
    border-radius: 10px;
    color: rgb(26, 26, 46);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}


    /* Dropdown item hover */

    .bv-dropdown-menu a:hover {
        background: rgb(244, 245, 250);
        text-decoration: none;
    }


/* ============================================================
   DROPDOWN TITLE
   ============================================================ */

.bv-dropdown-title {
    display: block;
    color: rgb(26, 26, 46);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}


/* ============================================================
   DROPDOWN DESCRIPTION
   ============================================================ */

.bv-dropdown-description {
    display: block;
    color: rgb(107, 107, 122);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.4;
}


/* Title becomes blue on hover */

.bv-dropdown-menu a:hover .bv-dropdown-title {
    color: rgb(25, 30, 121);
}


/* ============================================================
   COMPANY DROPDOWN SPACING
   ============================================================ */

.bv-nav-dropdown .bv-dropdown-menu a + a {
    margin-top: 2px;
}
/* ================================================================
   BREVIITY SHIFT
   ================================================================ */

.bv-shift-comparison {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.bv-shift-labels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 12px;
}

.bv-traditional-label,
.bv-breviity-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bv-traditional-label {
    background: rgb(229, 231, 235);
    color: rgb(75, 85, 99);
}

.bv-breviity-label {
    background: rgb(250, 124, 20);
    color: rgb(255, 255, 255);
}

.bv-shift-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(228, 224, 234);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

    .bv-shift-row:last-child {
        margin-bottom: 0;
    }

.bv-shift-side {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bv-shift-text {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    color: rgb(26, 26, 46);
}

.bv-breviity-text {
    color: rgb(54, 42, 137);
    font-weight: 700;
}

.bv-shift-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.bv-traditional-icon {
    background: rgb(241, 245, 249);
    color: rgb(100, 116, 139);
}

.bv-breviity-icon {
    background: rgb(243, 244, 250);
    color: rgb(92, 77, 204);
}

.bv-shift-arrow {
    width: 34px;
    height: 34px;
    border: 1px solid rgb(228, 224, 234);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255, 255, 255);
    color: rgb(107, 107, 122);
    font-size: 16px;
    flex-shrink: 0;
    justify-self: center;
    box-sizing: border-box;
}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 768px) {

    .bv-shift-labels {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
        gap: 8px;
        padding: 0 4px;
    }

    .bv-shift-row {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
        gap: 8px;
        padding: 14px;
    }

    .bv-shift-text {
        font-size: 14px;
    }

    .bv-shift-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        flex-basis: 36px;
    }

    .bv-traditional-label,
    .bv-breviity-label {
        font-size: 10px;
        padding: 6px 10px;
    }
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 600px) {

    #breviity-shift {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

        #breviity-shift > div {
            border-radius: 18px !important;
            padding: 28px 16px !important;
        }

    .bv-shift-labels {
        grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
        gap: 6px;
        margin-bottom: 12px;
        padding: 0;
    }

        .bv-shift-labels > div:first-child {
            text-align: left;
        }

        .bv-shift-labels > div:last-child {
            text-align: right;
        }

    .bv-traditional-label,
    .bv-breviity-label {
        max-width: 100%;
        font-size: 9px;
        line-height: 1.25;
        padding: 7px 9px;
        white-space: normal;
    }

    .bv-shift-row {
        grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
        gap: 5px;
        padding: 14px 10px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .bv-shift-side {
        gap: 8px;
    }

    .bv-shift-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        flex-basis: 34px;
        font-size: 16px;
    }

    .bv-shift-text {
        font-size: 13px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .bv-shift-arrow {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .bv-breviity-side {
        justify-content: flex-start;
    }
}


/* ================================================================
   SMALL MOBILE
   ================================================================ */

@media (max-width: 400px) {

    .bv-shift-labels {
        grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    }

    .bv-shift-row {
        grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
        padding: 12px 8px;
    }

    .bv-shift-side {
        gap: 6px;
    }

    .bv-shift-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        flex-basis: 30px;
        font-size: 14px;
    }

    .bv-shift-text {
        font-size: 12px;
    }

    .bv-shift-arrow {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .bv-traditional-label,
    .bv-breviity-label {
        font-size: 8px;
        padding: 6px 7px;
    }
}