/* ─────────────────────────────────────────────────────────────────────────────
   site-chrome.css — navigation, cookie consent and skip link.

   Loaded by every public page, including the docs, which have their own page
   styles. Colours are written out rather than read from marketing.css tokens so
   this sheet works on a page that never loads marketing.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Skip link (keyboard users jump past the nav) ─────────────────────────── */
.skip-link {
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:#00e56b; color:#03060f; font-weight:700; font-size:.875rem;
  padding:10px 16px; border-radius:10px; text-decoration:none;
  transition:top .15s;
}
.skip-link:focus { top:12px; }

/* ── Bar ──────────────────────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:64px; padding:0 24px;
  display:flex; align-items:center; gap:12px;
  background:rgba(3,6,15,.72);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.nav *:focus-visible { outline:2px solid #00e56b; outline-offset:2px; }

.nav-logo {
  font-family:'Sora', 'DM Sans', system-ui, sans-serif;
  font-size:1.25rem; font-weight:800; letter-spacing:-.02em;
  color:#f0f4ff; text-decoration:none;
  display:flex; align-items:center; gap:10px;
  min-width:0; flex-shrink:1; white-space:nowrap;
}
.nav-logo img { max-height:28px; width:auto; }
.nav-logo-dot {
  width:8px; height:8px; flex-shrink:0; border-radius:50%;
  background:#00e56b; box-shadow:0 0 12px #00e56b;
  animation:w2c-pulse-dot 2s ease infinite;
}
@keyframes w2c-pulse-dot {
  0%,100% { box-shadow:0 0 8px #00e56b; }
  50%     { box-shadow:0 0 20px #00e56b, 0 0 40px rgba(0,229,107,.2); }
}

/* ── Links: inline on laptops and up ──────────────────────────────────────── */
.nav-links {
  display:flex; align-items:center; gap:2px;
  margin:0 auto; padding:0; list-style:none;
}
.nav-links a {
  display:block;
  font-size:.875rem; font-weight:500; color:#8a95b0; text-decoration:none;
  padding:7px 13px; border-radius:8px;
  transition:color .2s, background .2s;
}
.nav-links a:hover { color:#f0f4ff; background:rgba(255,255,255,.05); }
.nav-links a[aria-current="page"] { color:#f0f4ff; }
.nav-menu-only { display:none; }

/* ── Actions ──────────────────────────────────────────────────────────────── */
.nav-actions { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.btn-nav-login {
  font-size:.875rem; font-weight:500; color:#8a95b0; text-decoration:none;
  padding:7px 16px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  transition:all .2s; white-space:nowrap;
}
.btn-nav-login:hover { color:#f0f4ff; border-color:rgba(255,255,255,.2); }
.btn-nav-cta {
  font-size:.875rem; font-weight:600; color:#03060f; text-decoration:none;
  background:#00e56b; padding:7px 18px; border-radius:8px;
  transition:all .2s; white-space:nowrap;
}
.btn-nav-cta:hover { background:#1aff80; transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,229,107,.2); }

.nav-signin { position:relative; }
.nav-signin-btn { display:inline-flex; align-items:center; gap:6px; background:transparent; cursor:pointer; font-family:inherit; }
.nav-signin-caret { transition:transform .2s; opacity:.7; }
.nav-signin.open .nav-signin-caret { transform:rotate(180deg); }
.nav-signin-menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:120;
  min-width:230px; padding:6px;
  background:#0b1322; border:1px solid rgba(255,255,255,.12); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-signin.open .nav-signin-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-signin-menu a {
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  color:#f0f4ff; font-size:.875rem; font-weight:600; text-decoration:none;
  transition:background .15s;
}
.nav-signin-menu a:hover { background:rgba(255,255,255,.05); }
.nav-signin-menu .nsi-ic {
  width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,229,107,.08); border:1px solid rgba(0,229,107,.2); border-radius:9px; font-size:1rem;
}
.nav-signin-menu .nsi-txt { display:flex; flex-direction:column; line-height:1.3; }
.nav-signin-menu .nsi-txt small { color:#4e5a72; font-weight:400; font-size:.72rem; margin-top:1px; }

.nav-toggle {
  display:none; align-items:center; gap:8px;
  font:600 .85rem/1 'DM Sans', system-ui, sans-serif; color:#f0f4ff;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  padding:8px 12px; border-radius:9px; cursor:pointer;
}
.nav-toggle-icon line { transition:transform .2s, opacity .2s; transform-origin:12px 12px; }
.nav.menu-open .nt-a { transform:translateY(5px) rotate(45deg); }
.nav.menu-open .nt-b { opacity:0; }
.nav.menu-open .nt-c { transform:translateY(-5px) rotate(-45deg); }

/* ── Below laptop width: links become a dropdown ──────────────────────────── */
@media (max-width:1023.98px) {
  .nav-toggle { display:inline-flex; }

  .nav-links {
    position:absolute; top:64px; left:12px; right:12px;
    flex-direction:column; align-items:stretch; gap:2px;
    margin:0; padding:8px;
    background:#0b1322; border:1px solid rgba(255,255,255,.12); border-radius:16px;
    box-shadow:0 28px 70px rgba(0,0,0,.6);
    max-height:calc(100vh - 88px); max-height:calc(100dvh - 88px); overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  /* Visibility flips immediately when opening (and only lags when closing).
     Otherwise the panel is still "hidden" at the instant script moves focus into
     it, the focus call silently fails, and keyboard users stay on the button. */
  .nav.menu-open .nav-links {
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .nav-links a { padding:12px 14px; font-size:.95rem; color:#c9d3e8; }
  .nav-links a[aria-current="page"] { color:#00e56b; background:rgba(0,229,107,.06); }
}

/* Phones: the bar holds the logo, the CTA and Menu. Both sign-in roles move
   into the dropdown rather than being squeezed beside them. */
@media (max-width:639.98px) {
  .nav { padding:0 14px; gap:8px; }
  .nav-signin { display:none; }
  .nav-menu-only { display:block; }
  .nav-menu-divider { height:1px; margin:6px 8px; background:rgba(255,255,255,.08); }
  .nav-links .nav-menu-cta {
    margin-top:4px; text-align:center; font-weight:700;
    background:#00e56b; color:#03060f;
  }
  .nav-links .nav-menu-cta:hover { background:#1aff80; color:#03060f; }
  .nav-logo { font-size:1.05rem; }
  .nav-logo img { max-height:24px; }
  .btn-nav-cta { font-size:.8rem; padding:7px 12px; }
  .nav-toggle { padding:7px 10px; }
}
/* 375px is one of the most common phone widths, so the sign-up button must
   survive it. The full label does not fit beside the logo and Menu there, so it
   shortens instead of disappearing. */
.cta-short { display:none; }
@media (max-width:419.98px) {
  .cta-long  { display:none; }
  .cta-short { display:inline; }
}
@media (max-width:339.98px) {
  .btn-nav-cta { display:none; }   /* only the very narrowest screens; it stays in the menu */
}

/* ── Cookie consent ───────────────────────────────────────────────────────── */
.cc-banner {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:900;
  max-width:760px; margin:0 auto;
  background:#0b1322; color:#c9d3e8;
  border:1px solid rgba(255,255,255,.12); border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  padding:20px 22px;
  font:400 .9rem/1.6 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.cc-banner h2 { margin:0 0 6px; font:700 1rem/1.3 'Sora', 'DM Sans', system-ui, sans-serif; color:#f0f4ff; letter-spacing:-.01em; }
.cc-banner p  { margin:0; color:#8a95b0; }
.cc-banner a, .cc-dialog a { color:#00e56b; }
.cc-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; align-items:center; }

/* Reject and Accept are deliberately identical in size, weight and colour.
   European regulators treat a refusal that is harder to see or reach than
   acceptance as consent that was not freely given. */
.cc-btn {
  font:600 .875rem/1 'DM Sans', system-ui, sans-serif;
  padding:11px 18px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:#16213a; color:#f0f4ff;
  min-width:128px;
}
.cc-btn:hover { background:#1c2a48; border-color:rgba(255,255,255,.28); }
.cc-btn:focus-visible { outline:2px solid #00e56b; outline-offset:2px; }
.cc-btn-link {
  background:none; border:none; min-width:0; padding:11px 6px;
  color:#8a95b0; text-decoration:underline; text-underline-offset:3px;
}
.cc-btn-link:hover { background:none; color:#f0f4ff; }
.cc-banner .cc-btn-link { margin-left:auto; }

.cc-dialog {
  /* Pages reset every element's margin to 0, which removes the auto margins a
     modal <dialog> relies on to centre itself — it ended up pinned top-left. */
  margin:auto; inset:0;
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto;
  padding:0; border:1px solid rgba(255,255,255,.12); border-radius:18px;
  background:#0b1322; color:#c9d3e8;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  font:400 .9rem/1.6 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.cc-dialog::backdrop { background:rgba(1,3,8,.72); }
.cc-dialog-in { padding:24px; }
.cc-dialog h2 { margin:0 0 6px; font:700 1.15rem/1.3 'Sora', 'DM Sans', system-ui, sans-serif; color:#f0f4ff; }
.cc-dialog > .cc-dialog-in > p { margin:0 0 18px; color:#8a95b0; }
.cc-cat { border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.cc-cat-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.cc-cat-head h3 { margin:0; font:600 .95rem/1.3 'DM Sans', system-ui, sans-serif; color:#f0f4ff; }
.cc-cat p { margin:6px 0 0; font-size:.84rem; color:#8a95b0; }
.cc-always { font-size:.78rem; font-weight:600; color:#00e56b; white-space:nowrap; }

.cc-switch { position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; }
.cc-switch input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.cc-switch span {
  position:absolute; inset:0; border-radius:99px; pointer-events:none;
  background:#2a3550; transition:background .2s;
}
.cc-switch span::after {
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#f0f4ff; transition:transform .2s;
}
.cc-switch input:checked + span { background:#00e56b; }
.cc-switch input:checked + span::after { transform:translateX(20px); }
.cc-switch input:focus-visible + span { outline:2px solid #00e56b; outline-offset:2px; }
.cc-dialog .cc-actions { justify-content:flex-end; margin-top:18px; }

/* Shown in place of the support chat when functional storage is declined.
   Clicking it IS the visitor asking for the chat, so it loads then. */
.cc-chat-launch {
  position:fixed; right:20px; bottom:20px; z-index:800;
  display:inline-flex; align-items:center; gap:8px;
  font:600 .9rem/1 'DM Sans', system-ui, sans-serif; color:#03060f;
  background:#00e56b; border:none; border-radius:99px; padding:13px 18px; cursor:pointer;
  box-shadow:0 10px 30px rgba(0,229,107,.25);
}
.cc-chat-launch:hover { background:#1aff80; }
.cc-chat-launch:focus-visible { outline:2px solid #f0f4ff; outline-offset:3px; }

@media (max-width:639.98px) {
  .cc-banner { left:10px; right:10px; bottom:10px; padding:18px; }
  .cc-actions .cc-btn { flex:1 1 calc(50% - 5px); min-width:0; }
  .cc-banner .cc-btn-link { flex-basis:100%; margin-left:0; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo-dot { animation:none; }
  .nav-links, .nav-signin-menu, .skip-link, .nav-toggle-icon line { transition:none; }
}