/* ===========================================================================
   On-page navigation for long product pages
   ---------------------------------------------------------------------------
   Two pieces, one job: give a reader a way through a page that is 28 to 50
   mobile screen-heights long without shortening it.

     .si-secnav   the sticky section index. Desktop only.
     .si-mbar     the compact action bar. Phones only.

   They are deliberately exclusive. A sticky strip at the top and a fixed bar
   at the bottom of a 390 pixel viewport would spend a fifth of the screen on
   chrome, and the phone already has the acquisition panel near the top doing
   the index's job for the only question the index is really answering.

   Loaded only on product pages, which is what makes the document padding rule
   at the bottom of this file safe: it reserves the action bar's height on the
   pages that render one, and cannot leave a dead strip anywhere else.
   ======================================================================== */

/* --- Anchor targets ------------------------------------------------------
   The site nav is position:fixed at the top of the viewport, so an anchor jump
   lands the target heading underneath it. scroll-margin-top is the whole fix,
   and it is why this file needs no scroll JavaScript at all.
   ------------------------------------------------------------------------ */

#availability,
#readiness,
#how-it-works,
#capabilities,
#architecture,
#evidence,
#pricing,
#faq,
#how-to-start {
  /* Was 84px, which cleared the 78px bar at rest with 6px to spare. The bar
     is 84px at rest now that its links carry a 44px target box, so the same
     6px of room is 90px. The section index adds to this above 901px and is
     handled there, because it does not render below that width and adding its
     height here would leave a 46px gap over every heading on a phone. */
  scroll-margin-top: 90px;
}

/* --- The sticky section index -------------------------------------------- */

.si-secnav {
  display: none;
}

@media (min-width: 901px) {
  /* The index only exists at this width, so the anchor offset only has to
     account for it here: 71px of collapsed nav, 46px of index, 6px of room. */
  #availability,
  #readiness,
  #how-it-works,
  #capabilities,
  #architecture,
  #evidence,
  #pricing,
  #faq,
  #how-to-start {
    scroll-margin-top: 123px;
  }

  .si-secnav {
    display: block;
    position: sticky;
    /* Clears the scrolled site nav. 56px was wrong before this bar was ever
       touched: the collapsed nav measured 64.6px, so the top 8.6px of this
       index, including its top border, has been sitting behind a fixed
       element with a higher z-index on every product page. Raising the nav
       links and wordmark to a 44px target box (style.css) takes the collapsed
       nav to 70.6px, so the number is corrected to 71 rather than nudged. */
    top: 71px;
    z-index: 50;
    background: rgba(255, 255, 255, 0.94);
    /* Prefixed form first, matching si-theme.css. Safari and iOS Safari still
       need it, and without it the blur silently does not apply, which leaves
       page text reading through a 6-percent-transparent bar. The background
       alpha is high enough that the bar is legible either way, so the blur is
       an enhancement rather than the thing carrying the contrast. */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(17, 32, 50, 0.08);
    border-bottom: 1px solid rgba(17, 32, 50, 0.10);
  }

  .si-secnav-list {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
  }

  .si-secnav-item {
    margin: 0;
  }

  .si-secnav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-family: var(--si-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--si-text-body-dark);
    text-decoration: none;
    border-bottom: 2px solid transparent;
  }

  .si-secnav-link:hover,
  .si-secnav-link:focus-visible {
    color: var(--si-text-strong);
    border-bottom-color: var(--si-emerald);
  }
}

/* --- The compact action bar ---------------------------------------------- */

.si-mbar {
  display: none;
}

@media (max-width: 900px) {
  /* The bar's own height, reserved on the document so the bar sits in space
     nothing else is using. Changing one of these two numbers without the other
     is how a fixed bar starts covering a footer. */
  body {
    padding-bottom: 72px;
  }

  .si-mbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    height: 72px;
    padding: 0 16px;
    box-sizing: border-box;
    background: var(--si-white);
    border-top: 1px solid rgba(17, 32, 50, 0.12);
    box-shadow: 0 -6px 20px rgba(17, 32, 50, 0.08);
  }

  .si-mbar-detail {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    flex: 0 0 auto;
    font-family: var(--si-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--si-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
  }

  .si-mbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 10px 16px;
    border-radius: var(--si-radius-pill);
    background: var(--si-emerald);
    /* Navy, matching .si-btn-primary and .si-acquire-btn-primary. White on this
       green is 2.56:1, which fails AA, and this is the one action a phone gets.
       Changed 2026-08-26. */
    color: var(--si-navy);
    border: 1px solid var(--si-emerald);
    font-family: var(--si-font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
  }
}

/* At 320px the label and the link together are tight, so the label loses its
   horizontal padding before it loses its height. The 44px target survives. */
@media (max-width: 360px) {
  .si-mbar {
    gap: 8px;
    padding: 0 12px;
  }

  .si-mbar-btn {
    font-size: 0.875rem;
    padding: 10px 10px;
  }
}