/*
 * Shared chrome for the landing pages (uno.place): top navigation (with a burger under 880px)
 * and the short footer. Namespaced (.sn-*, .sf-*) so it sits on top of each
 * page's own styles (index, use-cases, developers, pricing) without collisions.
 * Tokens are the incumbent ones from index.html.
 */
.sn, .sf {
  --sn-violet: #5b5be8;
  --sn-violet-deep: #4343c9;
  --sn-violet-ink: #3a3ab8;
  --sn-ink: #18181b;
  --sn-ink-2: #55555e;
  --sn-ink-3: #6b6b74;
  --sn-line: #e7e7ec;
  --sn-line-2: #d8d8e0;
  --sn-gutter: 32px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
:where(.sn, .sf) * { box-sizing: border-box; }
:where(.sn, .sf) a { text-decoration: none; color: inherit; }
.sn :focus-visible, .sf :focus-visible { outline: 2px solid var(--sn-violet); outline-offset: 3px; border-radius: 6px; }

/* ── Nav ───────────────────────────── */
.sn {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.sn.is-scrolled, .sn.is-open { border-bottom-color: var(--sn-line); }
.sn-in { max-width: 1184px; margin: 0 auto; padding: 0 var(--sn-gutter); height: 64px; display: flex; align-items: center; gap: 28px; }
.sn-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.sn-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--sn-violet); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; box-shadow: 0 1px 2px rgba(24,24,27,.2), inset 0 1px rgba(255,255,255,.35); }
.sn-name { font-weight: 650; font-size: 15px; letter-spacing: -.01em; color: var(--sn-ink); }
.sn-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.sn-link { font-size: 14px; font-weight: 500; color: var(--sn-ink-2); transition: color .15s; white-space: nowrap; }
.sn-link:hover, .sn-link[aria-current="page"] { color: var(--sn-ink); }
.sn-link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sn-line-2); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.sn-act { display: flex; align-items: center; gap: 20px; }
.sn-cta { font-size: 13.5px; font-weight: 600; color: #fff; background: var(--sn-ink); padding: 8px 15px; border-radius: 8px; transition: background .15s; white-space: nowrap; }
.sn-cta:hover { background: var(--sn-violet-deep); }
.sn-burger { display: none; appearance: none; border: 0; background: transparent; width: 40px; height: 40px; margin-right: -8px; border-radius: 9px; cursor: pointer; color: var(--sn-ink); place-items: center; }
.sn-burger:hover { background: #f2f2f6; }
.sn-burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sn-burger .b-x { display: none; }
.sn.is-open .sn-burger .b-x { display: block; }
.sn.is-open .sn-burger .b-3 { display: none; }

@media (max-width: 880px) {
  .sn { --sn-gutter: 20px; }
  .sn-in { gap: 12px; }
  .sn-burger { display: grid; }
  .sn-links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--sn-gutter) 20px; background: #fff;
    border-bottom: 1px solid var(--sn-line);
    box-shadow: 0 24px 40px -28px rgba(24, 24, 27, .35);
    visibility: hidden; opacity: 0; translate: 0 -6px;
    transition: opacity .18s, translate .25s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s;
  }
  .sn.is-open .sn-links { visibility: visible; opacity: 1; translate: 0 0; transition: opacity .18s, translate .25s cubic-bezier(.16, 1, .3, 1); }
  .sn-links li { border-bottom: 1px solid #f0f0f4; }
  .sn-links li:last-child { border-bottom: 0; }
  .sn-link { display: block; padding: 14px 2px; font-size: 16px; color: var(--sn-ink); }
  .sn-link[aria-current="page"] { color: var(--sn-violet-ink); text-decoration: none; }
  .sn-act .sn-signin { display: none; }
  .sn-links .sn-only-m { display: block; }
}
@media (min-width: 881px) { .sn-links .sn-only-m { display: none; } }
@media (prefers-reduced-motion: reduce) { .sn-links { transition: none !important; } }

/* ── Footer ────────────────────────── */
.sf { border-top: 1px solid var(--sn-line); background: #fff; color: var(--sn-ink-3); font-size: 13.5px; }
.sf-in { max-width: 1184px; margin: 0 auto; padding: 22px var(--sn-gutter) 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.sf-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.sf-nav a { color: var(--sn-ink-2); transition: color .15s; }
.sf-nav a:hover { color: var(--sn-violet-ink); }
.sf-legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sf-legal a:hover { color: var(--sn-ink); }
@media (max-width: 880px) {
  .sf { --sn-gutter: 20px; }
  .sf-legal { margin-left: 0; }
}