/* Site shell: sitewide nav + footer (v5 design, first shipped on /oneapi).
   Loaded on every page from the site-shell:head block (see tools/site-shell/README.md).
   - Class names are prefixed sk- so they can't collide with Bootstrap's .nav/.btn or Webflow.
   - The nav is position: fixed and 75px tall (65px on phones), the same as the V4 nav it
     replaces, so existing page layouts that already reserve that space don't move. */
@font-face { font-family: 'Helvetica Neue Web'; font-weight: 400; font-display: swap; src: url('https://fonts.cdnfonts.com/s/62895/HelveticaNeueRoman.woff') format('woff'); }
@font-face { font-family: 'Helvetica Neue Web'; font-weight: 500; font-display: swap; src: url('https://fonts.cdnfonts.com/s/62895/HelveticaNeueMedium.woff') format('woff'); }
@font-face { font-family: 'Helvetica Neue Web'; font-weight: 700; font-display: swap; src: url('https://fonts.cdnfonts.com/s/62895/HelveticaNeueBold.woff') format('woff'); }

.sk-nav, .sk-footer {
  --sk-black: #0b0e10;
  --sk-purple: #681c9a;
  --sk-purple-light: #c084ff;
  --sk-gray: #63676f;
  --sk-gray-light: #e3e3e7;
  --sk-panel: #23282c;
  --sk-font-heading: 'Sora', sans-serif;
  --sk-font-body: 'Helvetica Neue Web', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-family: var(--sk-font-body);
  line-height: 1.22;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sk-nav, .sk-nav *, .sk-nav *::before, .sk-nav *::after,
.sk-footer, .sk-footer *, .sk-footer *::before, .sk-footer *::after { box-sizing: border-box; }
.sk-nav a, .sk-footer a { color: inherit; text-decoration: none; }
.sk-nav a.sk-nav__link, .sk-nav a.sk-nav__btn { color: #fff; }
.sk-nav p, .sk-footer p { margin: 0; line-height: inherit; font-size: inherit; color: inherit; }
.sk-footer p, .sk-footer span, .sk-footer a { color: var(--sk-gray-light); }
.sk-footer .sk-footer__contact a, .sk-footer .sk-footer__contact span, .sk-footer .sk-footer__heading { color: #fff; }
.sk-nav img, .sk-footer img { display: block; max-width: none; }

/* ---------- Nav ---------- */
.sk-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--sk-black);
  color: #fff;
}
.sk-nav__inner { flex: 1; max-width: 1320px; display: flex; gap: 48px; align-items: center; justify-content: space-between; }
.sk-nav__logo img { width: 138px; height: 27px; }
.sk-nav__menu { display: flex; gap: 28px; align-items: center; margin: 0; padding: 0; }
.sk-nav__item { position: relative; }
.sk-nav__link {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  color: #fff;
  font: 500 16px/1.22 var(--sk-font-body);
  white-space: nowrap;
  cursor: pointer;
}
.sk-nav a.sk-nav__link:hover, .sk-nav button.sk-nav__link:hover { color: #fff; }
.sk-nav__link img { width: 20px; height: 20px; transition: transform .2s; }
.sk-nav__dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 200px;
  padding: 8px 0;
  background: var(--sk-black);
  border: 1px solid var(--sk-panel);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.sk-nav__dropdown a { display: block; padding: 8px 16px; color: var(--sk-gray-light); font-size: 15px; white-space: nowrap; }
.sk-nav .sk-nav__dropdown a:hover { color: var(--sk-purple-light); }
.sk-nav__item:hover .sk-nav__dropdown,
.sk-nav__item:focus-within .sk-nav__dropdown,
.sk-nav__item.is-expanded .sk-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.sk-nav__item:hover .sk-nav__link img,
.sk-nav__item.is-expanded .sk-nav__link img { transform: rotate(180deg); }

/* Insights: one column, sections split by a divider */
.sk-nav__dropdown--groups { padding: 4px 0; }
.sk-nav__group { padding: 8px 0; }
.sk-nav__group + .sk-nav__group { border-top: 1px solid #2e3439; }
/* Featured link (Galaxy) at the top of Insights: same type as the menu, just a title + one line */
.sk-nav .sk-nav__dropdown a.sk-nav__feature { display: flex; flex-direction: column; gap: 3px; max-width: 260px; padding: 8px 16px; white-space: normal; }
.sk-nav .sk-nav__feature-title { color: #fff; font-size: 15px; font-weight: 500; }
.sk-nav .sk-nav__feature-title span { color: var(--sk-purple-light); font-size: 13px; }
.sk-nav .sk-nav__feature-desc { color: var(--sk-gray-light); opacity: .65; font-size: 13px; line-height: 1.35; }
.sk-nav .sk-nav__dropdown a.sk-nav__feature:hover .sk-nav__feature-title { color: var(--sk-purple-light); }
.sk-nav .sk-nav__group-title {
  padding: 4px 16px 4px;
  color: var(--sk-gray-light);
  opacity: .6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sk-nav__actions { display: flex; gap: 8px; align-items: center; }
.sk-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 37px;
  /* Helvetica Neue's line box sits the letters ~2.5px high; 5px top padding centres the capitals */
  padding: 5px 0 0;
  border: 1px solid var(--sk-gray-light);
  border-radius: 9px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.sk-nav a.sk-nav__btn:hover { color: #fff; }
.sk-nav__btn--primary { background: var(--sk-purple); }
/* Log In menu: the primary button opens a small right-aligned list (Marketplace / API Portal) */
.sk-nav__login > .sk-nav__btn { gap: 6px; padding: 5px 0 0; }
.sk-nav__login > .sk-nav__btn img { position: relative; top: -2px; width: 16px; height: 16px; }
.sk-nav__dropdown--right { left: auto; right: 0; min-width: 180px; }
.sk-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  padding: 8px;
  border: 1px solid var(--sk-gray);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.sk-nav__toggle img { width: 24px; height: 24px; }
.sk-nav__menu-actions { display: none; }

/* Full menu needs ~1300px; tighten spacing a little before collapsing to the menu button. */
@media (max-width: 1360px) {
  .sk-nav__inner { gap: 32px; }
  .sk-nav__menu { gap: 20px; }
}
@media (max-width: 1280px) {
  .sk-nav__inner { justify-content: flex-start; gap: 0; }
  .sk-nav__logo { margin-right: auto; }
  .sk-nav__menu { display: none; }
  .sk-nav__toggle { display: inline-flex; }
  .sk-nav.is-open .sk-nav__menu {
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 75px);
    max-height: calc(100dvh - 75px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 24px 24px;
    background: var(--sk-black);
    border-top: 1px solid var(--sk-panel);
  }
  /* Open menu is an accordion: one row per section, tap a row to show its links (one open at a time) */
  .sk-nav.is-open .sk-nav__menu > .sk-nav__item { border-bottom: 1px solid var(--sk-panel); }
  .sk-nav.is-open .sk-nav__menu > .sk-nav__item > .sk-nav__link { width: 100%; min-height: 52px; justify-content: space-between; padding: 14px 0; font-size: 17px; }
  .sk-nav.is-open .sk-nav__dropdown,
  .sk-nav.is-open .sk-nav__dropdown--groups {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 8px 16px;
    border: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sk-nav.is-open .sk-nav__item.is-expanded > .sk-nav__dropdown { display: block; }
  .sk-nav.is-open .sk-nav__dropdown a { padding: 10px 16px; }
  .sk-nav.is-open .sk-nav__group-title { padding-top: 10px; }
  /* Chevron follows the open state only (touch screens keep :hover after a tap) */
  .sk-nav.is-open .sk-nav__item:not(.is-expanded) .sk-nav__link img { transform: none; }
}
@media (max-width: 767px) {
  .sk-nav { height: 65px; }
  .sk-nav.is-open .sk-nav__menu { top: 65px; max-height: calc(100vh - 65px); max-height: calc(100dvh - 65px); }
  .sk-nav__actions { display: none; }
  .sk-nav.is-open .sk-nav__menu-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
  .sk-nav__menu-actions .sk-nav__btn { width: 100%; }
}

/* ---------- Footer (styles live here too so both ship from one place) ---------- */
.sk-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
  padding: 40px;
  background: var(--sk-black);
  color: var(--sk-gray-light);
  font-size: 16px;
}
.sk-footer__top, .sk-footer__bottom { display: flex; justify-content: space-between; gap: 40px; width: 100%; max-width: 1200px; }
/* Even grid: company info column, then three equal link columns with equal gaps */
.sk-footer__top { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.sk-footer__about { display: flex; flex-direction: column; gap: 32px; max-width: 337px; }
.sk-footer__logo { width: 138px; height: 27px; }
.sk-footer .sk-footer__tagline { color: #fff; font-size: 18px; font-weight: 500; }
.sk-footer__contact { display: flex; flex-direction: column; gap: 16px; color: #fff; }
.sk-footer__contact a, .sk-footer__contact div { display: flex; gap: 24px; align-items: center; }
.sk-footer__contact img { width: 24px; height: 24px; }
.sk-footer__social { display: flex; gap: 16px; }
.sk-footer__social img { width: 39px; height: 39px; }
.sk-footer__col { display: flex; flex-direction: column; gap: 32px; }
.sk-footer__group { display: flex; flex-direction: column; gap: 7px; }
.sk-footer .sk-footer__heading {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-family: var(--sk-font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.22;
  color: #fff;
  white-space: nowrap;
}
.sk-footer .sk-footer__heading::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: var(--sk-purple-light); }
.sk-footer__links { display: flex; flex-direction: column; gap: 8px; padding: 0 0 0 26px; font-weight: 500; white-space: nowrap; }
.sk-footer .sk-footer__subhead { margin-top: 8px; color: var(--sk-gray-light); opacity: .6; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sk-footer .sk-footer__subhead:first-child { margin-top: 0; }
.sk-footer a:hover, .sk-footer a.sk-footer__heading:hover, .sk-footer a.sk-footer__heading:focus-visible { color: var(--sk-purple-light); }
.sk-footer__bottom { font-weight: 500; }
@media (max-width: 1100px) {
  .sk-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
  .sk-footer__about { grid-column: 1 / -1; max-width: none; }
  .sk-footer__about p { max-width: 60ch; }
  .sk-footer__links { white-space: normal; }
  .sk-footer .sk-footer__heading { white-space: normal; }
}
@media (max-width: 767px) {
  .sk-footer { padding: 40px 24px; }
  /* Phones: two balanced columns, groups placed explicitly (about 20 lines each side) */
  .sk-footer__top { display: block; }
  .sk-footer__about { max-width: none; gap: 24px; margin-bottom: 32px; }
  .sk-footer .sk-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; align-items: start;
    grid-template-areas: "sdp ins" "api ins" "mkt ins" "sup com" "leg com"; }
  .sk-footer .sk-footer__col { display: contents; }
  .sk-footer__group--sdp { grid-area: sdp; } .sk-footer__group--api { grid-area: api; } .sk-footer__group--mkt { grid-area: mkt; }
  .sk-footer__group--ins { grid-area: ins; } .sk-footer__group--com { grid-area: com; }
  .sk-footer__group--sup { grid-area: sup; } .sk-footer__group--leg { grid-area: leg; }
  .sk-footer__links { white-space: normal; overflow-wrap: anywhere; }
  .sk-footer .sk-footer__heading { font-size: 18px; white-space: normal; }
  .sk-footer .sk-footer__heading::before { width: 12px; height: 12px; }
  .sk-footer__links { padding-left: 22px; white-space: normal; }
  .sk-footer__bottom { flex-direction: column; gap: 10px; }
}

/* ---------- Accessibility ---------- */
/* Text for screen readers only (e.g. "opens in new tab") */
.sk-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Skip link: hidden until focused with the keyboard (WCAG 2.4.1) */
.sk-skip { position: fixed; top: 8px; left: 8px; z-index: 1100; padding: 10px 16px; border-radius: 8px; background: #fff; color: #0b0e10 !important; font: 600 15px/1.2 'Helvetica Neue Web', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none; transform: translateY(-160%); transition: transform .15s; }
.sk-skip:focus { transform: none; outline: 2px solid #c084ff; outline-offset: 2px; }
/* Clearly visible keyboard focus on the dark nav and footer (WCAG 2.4.7) */
.sk-nav a:focus-visible, .sk-nav button:focus-visible,
.sk-footer a:focus-visible { outline: 2px solid var(--sk-purple-light); outline-offset: 3px; border-radius: 4px; }
/* Footer link columns are one navigation landmark; display: contents keeps the column layout */
.sk-footer__nav { display: contents; }
/* Respect the "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  .sk-nav *, .sk-skip { transition: none !important; }
}