/* top ribbon · baa.business
   wide (>= 900px), two centred tiers:
     [🪐 loop me in]          baa.business / number          [🚀 boost us]
              stellar times  cosmic college  (saucer)  dazzling data  send a signal
   narrow (< 900px), a floating rounded capsule:
     tablet:  [menu]      [🪐 loop me in]  baa.business / number  [🚀 boost us]      [saucer]
     phone:   [menu]  baa.business  [saucer]  over  [🪐 loop me in]  number  [🚀 boost us]
   the saucer always sits inside the ribbon, never over the page. one layout per width, never wraps.
   pages without a menu button get one from js/ribbon.js. */

/* ---- shared ribbon base (identical in every option) ---- */
.site-nav.site-nav { height: var(--nav-h); padding: 0; min-height: 0; align-items: center; }
.site-nav.site-nav .container.container {
  display: grid; align-items: center; justify-content: stretch;
  column-gap: var(--rb-gap); row-gap: 0;
  width: min(1380px, calc(100% - 48px)); height: var(--nav-h); padding: 0; margin-inline: auto;
  flex-wrap: nowrap;
}
.site-nav { --pill-w: 112px; --pill-h: 32px; --lw: 116px; --cw: 150px; --rb-gap: 14px; }
.site-nav.site-nav .container.container > .nav-center { display: contents; }
.site-nav.site-nav .container.container > * { margin: 0; order: 0; }
.site-nav.site-nav .container.container > .nav-center > .nav-pill {
  width: var(--pill-w); height: var(--pill-h); padding: 0 12px; gap: 6px; justify-self: center;
  grid-row: 1 / span 2;
}
.site-nav.site-nav .container.container > .nav-center > .nav-pill .nav-pill-t { display: inline; }
.site-nav.site-nav .container.container > .nav-center > .nav-pill .nav-pill-i { font-size: 1.05em; }
.site-nav.site-nav .container.container > .wordmark {
  justify-self: center; align-self: end; text-align: center; white-space: nowrap;
  font-size: 0.95rem; line-height: 1.1; letter-spacing: 0.03em; padding-bottom: 1px;
}
.site-nav.site-nav .container.container > .nav-center > .nav-phone {
  justify-self: center; align-self: start; padding: 3px 4px 0; font-size: 0.66rem; letter-spacing: 0.14em;
}
.site-nav.site-nav .container.container > .nav-center > .nav-phone::before { width: 190px; height: 50px; }
.site-nav.site-nav .container.container > .star-ufo { justify-self: center; align-self: center; grid-row: 1 / span 2; }
/* menu button (also drawn on pages whose markup had none, see js/ribbon.js) */
.site-nav.site-nav .container.container > .nav-toggle {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px; justify-self: center; grid-row: 1 / span 2;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.site-nav.site-nav .container.container > .nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--text, #f2f2f5); transition: transform 0.35s ease, opacity 0.35s ease; }
.site-nav.site-nav .container.container > .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.site-nav.site-nav .container.container > .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav.site-nav .container.container > .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* links: centred text, underline grows out from the middle */
.site-nav .nav-links a { white-space: nowrap; text-align: center; }
.site-nav .nav-links a::after { left: 50%; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .site-nav.site-nav .container.container > .nav-links, .site-nav.site-nav .container.container > .nav-toggle span { transition: none; }
}

/* ---------- wide: two centred tiers ---------- */
@media (min-width: 900px) {
  :root:root:root { --nav-h: 96px; }
  .site-nav.site-nav .container.container { grid-template-columns: var(--pill-w) minmax(0, 1fr) var(--lw) var(--lw) 48px var(--lw) var(--lw) minmax(0, 1fr) var(--pill-w); grid-template-rows: 34px 22px 40px; }
  .site-nav.site-nav .container.container > .nav-center > .nav-loop { grid-column: 1; grid-row: 1 / span 2; }
  .site-nav.site-nav .container.container > .nav-center > .nav-boost { grid-column: 9; grid-row: 1 / span 2; }
  .site-nav.site-nav .container.container > .wordmark { grid-column: 3 / 8; grid-row: 1; }
  .site-nav.site-nav .container.container > .nav-center > .nav-phone { grid-column: 3 / 8; grid-row: 2; }

/* inline links (the containing box disappears so each link sits on the grid) */
.site-nav.site-nav .container.container > .nav-links { display: contents; }
.site-nav.site-nav .container.container > .nav-links > a { justify-self: center; grid-row: 1 / span 2; font-size: 0.8rem; letter-spacing: 0.06em; }
  .site-nav.site-nav .container.container > .nav-links > a { grid-row: 3; }
  .site-nav.site-nav .container.container > .star-ufo { grid-column: 5; grid-row: 3; }
.site-nav.site-nav .container.container > .nav-links > a:nth-child(1) { grid-column: 3; }
.site-nav.site-nav .container.container > .nav-links > a:nth-child(2) { grid-column: 4; }
.site-nav.site-nav .container.container > .nav-links > a:nth-child(3) { grid-column: 6; }
.site-nav.site-nav .container.container > .nav-links > a:nth-child(4) { grid-column: 7; }
  /* hairline between the tiers, brightest in the middle */
  .site-nav.site-nav .container.container > .nav-center::after { content: none; }
  .site-nav.site-nav::before { content: ""; position: absolute; left: 50%; top: 58px; width: min(760px, 70%); height: 1px; transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(192,132,252,0), rgba(192,132,252,0.28) 50%, rgba(192,132,252,0)); pointer-events: none; }
}
@media (min-width: 900px) and (max-width: 1023px) { .site-nav { --lw: 104px; --rb-gap: 8px; } }

/* ---------- narrow: the floating capsule ---------- */
@media (max-width: 899px) {
/* folded links: a calm centred panel under the ribbon */
.site-nav.site-nav .container.container > .nav-links {
  display: flex; position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: center;
  gap: 0; padding: 8px 24px 22px; background: rgba(5, 5, 8, 0.97);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.site-nav.site-nav .container.container > .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.site-nav.site-nav .container.container > .nav-links > a {
  width: min(320px, 100%); padding: 14px 0; font-size: 0.92rem; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.site-nav.site-nav .container.container > .nav-links > a:last-child { border-bottom: 0; }
.site-nav.site-nav .container.container > .nav-links > a::after { bottom: 8px; }

  /* the capsule floats on a soft dark veil, so page text fades out behind it instead of showing round its edges */
  .site-nav.site-nav, .site-nav.site-nav.scrolled { background: linear-gradient(180deg, rgba(5, 5, 8, 0.94) 0%, rgba(5, 5, 8, 0.8) 72%, rgba(5, 5, 8, 0) 100%); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-nav.site-nav::after { left: 50%; right: auto; width: min(720px, 60%); transform: translateX(-50%); bottom: 8px; }
  .site-nav.site-nav .container.container {
    height: calc(var(--nav-h) - 16px); margin-top: 0;
    background: rgba(8, 7, 16, 0.82); border: 1px solid rgba(192, 132, 252, 0.2); border-radius: 999px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 0 18px rgba(192, 132, 252, 0.05);
    width: min(1180px, calc(100% - 32px));
    grid-template-columns: 44px minmax(0, 1fr) var(--pill-w) var(--cw) var(--pill-w) minmax(0, 1fr) 44px; grid-template-rows: 1fr 1fr; padding: 0 12px;
    transition: border-color 0.6s ease, box-shadow 0.6s ease;
  }
  .site-nav.scrolled .container.container { border-color: rgba(192, 132, 252, 0.3); }
  .site-nav.site-nav .container.container::before, .site-nav.site-nav .container.container::after { border-radius: inherit; }
  .site-nav.site-nav .container.container > .nav-toggle { display: flex; grid-column: 1; }
  .site-nav.site-nav .container.container > .nav-center > .nav-loop { grid-column: 3; }
  .site-nav.site-nav .container.container > .wordmark { grid-column: 4; grid-row: 1; }
  .site-nav.site-nav .container.container > .nav-center > .nav-phone { grid-column: 4; grid-row: 2; }
  .site-nav.site-nav .container.container > .nav-center > .nav-boost { grid-column: 5; }
  .site-nav.site-nav .container.container > .star-ufo { grid-column: 7; }
  .site-nav.site-nav .container.container > .nav-links { top: calc(var(--nav-h) - 4px); background: rgba(8, 7, 16, 0.96); width: min(420px, calc(100% - 32px)); left: 50%; right: auto; transform: translate(-50%, -6px); border: 1px solid rgba(192, 132, 252, 0.2); border-radius: 28px; }
  .site-nav.site-nav .container.container > .nav-links.open { transform: translate(-50%, 0); }
}
@media (max-width: 619px) {
  :root:root:root { --nav-h: 112px; }
  .site-nav { --pill-w: 112px; --pill-h: 38px; --rb-gap: 8px; }
  .site-nav.site-nav .container.container { width: calc(100% - 20px); border-radius: 30px; padding: 0 10px 4px; grid-template-columns: var(--pill-w) minmax(0, 1fr) auto minmax(0, 1fr) var(--pill-w); grid-template-rows: 46px 46px; }
  .site-nav.site-nav .container.container > .nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; margin-left: -4px; }
  .site-nav.site-nav .container.container > .wordmark { grid-column: 3; grid-row: 1; align-self: center; }
  .site-nav.site-nav .container.container > .star-ufo { grid-column: 5; grid-row: 1; justify-self: end; }
  .site-nav.site-nav .container.container > .nav-center > .nav-loop { grid-column: 1; grid-row: 2; }
  .site-nav.site-nav .container.container > .nav-center > .nav-phone { grid-column: 3; grid-row: 2; align-self: center; padding: 8px 2px; font-size: 0.7rem; letter-spacing: 0.08em; }
  .site-nav.site-nav .container.container > .nav-center > .nav-boost { grid-column: 5; grid-row: 2; }
  .site-nav.site-nav .container.container > .nav-center > .nav-pill { font-size: 0.78rem; }
}
@media (max-width: 379px) { .site-nav { --pill-w: 100px; } .site-nav.site-nav .container.container > .nav-center > .nav-pill { padding: 0 8px; } }

@media (max-width: 349px) {
  .site-nav { --pill-w: 92px; --rb-gap: 4px; }
  .site-nav.site-nav .container.container > .nav-center > .nav-pill { padding: 0 6px; gap: 4px; font-size: 0.72rem; }
  .site-nav.site-nav .container.container > .nav-center > .nav-phone { font-size: 0.62rem; letter-spacing: 0.03em; }
  .site-nav.site-nav .container.container > .nav-center > .nav-phone::before { width: 120px; }
  .site-nav.site-nav .container.container > .star-ufo { margin-right: 2px; }
}