/* ============================================================
   BIFROST SITE: shared stylesheet for every page
   Loaded after colors_and_type.css. Page-specific rules belong in the page's own
   <style>, not here. The build copies this file to deploy/site.css.
   ============================================================ */
html { scroll-behavior: smooth;
      /* iOS Safari text autosizing inflates type per-block in narrow columns,
         which made the integrations table render at mismatched sizes. */
      -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { margin: 0; background: #14132C; }
    a { color: #AE82CE; text-decoration: none; }
    a:hover { color: #fff; }
    ::selection { background: #A360A6; color: #fff; }
    :root { --hdr: 92px; }
    section[id] { scroll-margin-top: var(--hdr); }
    /* Responsive: media queries cannot be expressed inline, so the layout
       overrides live here. !important is required to beat the inline styles. */
    /* Integrations table. Two columns while there is room for them; the wrapper
       scrolls only in the band between the min-width and the stack breakpoint. */
    /* The header CTA is flex:none and sized to its text, so it must never wrap:
       at 110% browser zoom or on a fallback font it broke to two lines and pushed
       the header past the --hdr reservation that anchor offsets depend on. */
    .navcta { white-space: nowrap; }
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .tbl-wrap table { min-width: 620px; }
    /* Integration names must never break mid-token across the arrow. */
    .tbl-wrap td .pair { white-space: nowrap; }
    /* Hamburger, phones only. The panel opens via :target, so tapping any section
       link changes the hash and closes it with no script. */
    .burger { display: none; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid #45437A; border-radius: 6px; }
    .burger span { display: block; width: 18px; height: 2px; background: #C9C8DE; }
    .burger-close { position: relative; }
    .burger-close span { position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -9px; }
    .burger-close span:first-child { transform: rotate(45deg); }
    .burger-close span:last-child { transform: rotate(-45deg); }
    /* Features grid: six cards, then an expand. Cards 7-12 are hidden until the
       toggle is checked; the toggle input itself is visually removed. */
    .vis-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    /* All 12 features show by default. Only the single-column mobile layout
       truncates to six, where 12 stacked cards would be an endless scroll. */
    .fmore { display: none; align-items: center; gap: 9px; margin-top: 20px; cursor: pointer;
      font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .09em;
      text-transform: uppercase; color: #C9C8DE; border: 1px solid #45437A; border-radius: 6px; padding: 13px 20px; }
    .fmore:hover { border-color: #A360A6; color: #fff; }
    .fmore .b { display: none; }
    #ftoggle:checked ~ .fmore .a { display: none; }
    #ftoggle:checked ~ .fmore .b { display: inline; }
    #ftoggle:checked ~ .fmore [aria-hidden] { transform: rotate(180deg); }
    /* Nav needs ~1150px to keep logo + 5 links + CTA on one row. Below that the
       links move to their own row, which makes the header two rows tall. */
    @media (max-width: 1150px) {
      :root { --hdr: 110px; }
      .navrow { gap: 16px 24px !important; flex-wrap: wrap !important; }
      .navlinks { order: 3; flex: 0 0 100% !important; gap: 10px 22px !important; }
      .navcta { margin-left: auto; }
    }
    @media (max-width: 1024px) {
      .g3, .g4 { grid-template-columns: repeat(2,1fr) !important; }
      .g2, .gsplit { grid-template-columns: 1fr !important; }
      .gfoot { grid-template-columns: 1fr 1fr !important; }
      .gsplit img { justify-self: start; }
    }
    @media (max-width: 760px) {
      .pad { padding-left: 22px !important; padding-right: 22px !important; }
      .g3, .g4, .gfoot { grid-template-columns: 1fr !important; }
      /* Phones: five wrapped links made the sticky header 190px, a quarter of the
         viewport. The section links live in the footer sitemap instead; the header
         keeps the logo and the CTA on one row. */
      :root { --hdr: 80px; }
      .navrow { flex-wrap: nowrap !important; gap: 10px !important; }
      .navrow img { height: 28px !important; }
      .navcta { margin-left: auto; font-size: 11px !important; padding: 9px 13px !important; }
      /* Links become a full-width panel dropped below the header. */
      .navlinks { display: none !important; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column !important; gap: 4px !important; padding: 14px 22px 20px;
        background: #20204A; border-bottom: 1px solid #35336B; }
      .navlinks a { padding: 11px 0; font-size: 16px !important; border-bottom: 1px solid #35336B; }
      .navlinks a:last-child { border-bottom: 0; }
      .navlinks:target { display: flex !important; }
      .burger-open { display: flex; }
      .navlinks:target ~ .burger-open { display: none; }
      .navlinks:target ~ .burger-close { display: flex; }
      /* Single column: show six, expand for the rest. */
      .fgrid > div:nth-child(n+7) { display: none; }
      #ftoggle:checked ~ .fgrid > div:nth-child(n+7) { display: block; }
      .fmore { display: inline-flex; }
      .cta-row a { flex: 1 1 100%; text-align: center; }
      .hero-pad { padding-top: 64px !important; padding-bottom: 64px !important; }
      .sec-pad { padding-top: 60px !important; padding-bottom: 60px !important; }
      .chev-beat { display: none; }
      /* Integrations: two columns cannot survive a phone column, and side-scrolling
         hid the descriptions. Each row restacks as name-over-description, so the
         integration reads as a heading and what it does as its body copy. */
      .tbl-wrap { overflow-x: visible; }
      .tbl-wrap table { min-width: 0 !important; }
      .tbl-wrap thead { display: none; }
      .tbl-wrap tbody, .tbl-wrap tr, .tbl-wrap td { display: block; width: auto; }
      .tbl-wrap tr { border-bottom: 1px solid #35336B; padding: 18px 16px; }
      .tbl-wrap tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
      .tbl-wrap td { padding: 0 !important; border-bottom: 0 !important; background: none !important; }
      .tbl-wrap td:first-child { margin-bottom: 7px; }
      /* The name is the heading now, so it can wrap rather than force a wide row. */
      .tbl-wrap td .pair { white-space: normal; font-size: 15px !important; }
    }
    @media (max-width: 480px) {
      /* Logo and CTA no longer share a row; the header becomes two fixed rows. */
      :root { --hdr: 120px; }
      .navrow { flex-wrap: wrap !important; }
      .navcta { flex: 1 1 100% !important; margin-left: 0; text-align: center; order: 3; }
      .burger { order: 2; margin-left: auto; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hover states. Sources use DC style-hover attributes; the build turns them into
   these classes. They must out-specify the inline style they override. */
.hv-fill:hover { background: #A360A6 !important; }
.hv-line:hover { border-color: #A360A6 !important; color: #AE82CE !important; }
.pair-link { color: inherit; text-decoration: none; border-bottom: 1px dotted #AE82CE; }
.pair-link:hover { color: #AE82CE; border-bottom-style: solid; }