/* nav.css — the header every public page shares (2026-10-05).
 *
 * The 33 public pages used to carry six different copies of their header, in
 * three skins (paper, v2, /intel's console bar), each with its own link list:
 * /pricing had no "Pricing", /intel had three links, and on a phone the 22 v2
 * pages had no navigation at all. The markup is now written into every page by
 * scripts/site-header.mjs and styled here, so one edit reaches all of them.
 *
 * Everything is scoped under .cbn and sets its own colours and type, because
 * the pages around it load different stylesheets (landing2.css, or system.css +
 * app-v2.css) and the header must look the same on both.
 */
/* The page does not bounce past its ends (2026-10-05). Every public page ends
 * on a dark footer over a light page background, so the elastic scroll of
 * Safari (iPhone, and a Mac trackpad) showed a band of light background under
 * the footer, which Amine saw as the page flashing at the bottom. Loaded on
 * every public page through the shared header, so one rule covers all. */
html { overscroll-behavior-y:none; }

.cbn {
  --cbn-ink:#111418; --cbn-deep:#646464; --cbn-mut:#6B6C72; --cbn-line:#E3E3E3;
  --cbn-bg:#F4F4F4; --cbn-paper:#FFFFFF; --cbn-accent:#D92B2A; --cbn-tint:rgba(243,55,54,0.08);
  position:sticky; top:0; z-index:40; height:64px; display:flex; align-items:center; gap:28px; padding:0 28px;
  background:rgba(244,244,244,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cbn-line); color:var(--cbn-ink);
  font-family:"Inter Tight",system-ui,-apple-system,sans-serif; font-size:14px; line-height:1.3; letter-spacing:0; text-transform:none;
  -webkit-font-smoothing:antialiased;
}
.cbn *, .cbn *::before, .cbn *::after { box-sizing:border-box; }
.cbn a { color:inherit; text-decoration:none; }
.cbn button { font:inherit; color:inherit; margin:0; background:none; border:0; cursor:pointer; }

.cbn-logo { display:flex; align-items:center; gap:10px; flex:0 0 auto; font-weight:700; font-size:17px; letter-spacing:-.3px; color:var(--cbn-ink); }
.cbn-logo svg { display:block; }

/* ── Top-level entries ─────────────────────────── */
.cbn-nav { display:flex; align-items:center; gap:4px; }
.cbn-nav > a, .cbn-trig {
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:999px;
  color:var(--cbn-deep); white-space:nowrap; font-size:14px; font-weight:400;
}
.cbn-nav > a:hover, .cbn-trig:hover, .cbn-dd.is-open > .cbn-trig { color:var(--cbn-ink); background:rgba(17,20,24,.05); }
.cbn-nav > a[aria-current="page"] { color:var(--cbn-ink); font-weight:600; }
.cbn-trig svg { transition:transform .15s; }
.cbn-dd.is-open > .cbn-trig svg { transform:rotate(180deg); }
.cbn-nav a:focus-visible, .cbn-trig:focus-visible, .cbn-burger:focus-visible, .cbn-item:focus-visible, .cbn-cta:focus-visible { outline:2px solid var(--cbn-accent); outline-offset:2px; }

/* ── Panels ────────────────────────────────────── */
.cbn-dd { position:relative; }
.cbn-panel {
  position:absolute; top:calc(100% + 12px); left:0; display:none; z-index:60;
  background:var(--cbn-paper); border:1px solid var(--cbn-line); border-radius:16px;
  box-shadow:0 24px 48px -20px rgba(17,20,24,.28); padding:20px;
}
/* The 12px between the trigger and the panel is a hole the pointer falls
   through on its way down, which closes the panel. This bridges it. */
.cbn-panel::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.cbn-dd.is-open > .cbn-panel { display:grid; }
/* Without the script (blocked, failed, not yet run) the panels still open on
   hover and on keyboard focus, so their links are never out of reach. */
html:not(.cbn-js) .cbn-dd:hover > .cbn-panel, html:not(.cbn-js) .cbn-dd:focus-within > .cbn-panel { display:grid; }
.cbn-panel-product { grid-template-columns:250px 230px 250px; gap:12px 20px; }
.cbn-panel-tools { grid-template-columns:320px; gap:4px 16px; }
/* Resources is the last entry since 2026-10-05. Opened from its left edge it
   runs off a 920px screen, opened from its right edge it runs off the left of a
   1280px one (the bar is not right-aligned). Centred on its trigger, it fits
   from 920px up. */
.cbn-nav > .cbn-dd:last-child > .cbn-panel { left:50%; transform:translateX(-50%); }

.cbn-kick { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--cbn-mut); padding:4px 10px 8px; }
.cbn-col { display:flex; flex-direction:column; gap:2px; }
.cbn-item { display:flex; gap:12px; align-items:flex-start; padding:10px; border-radius:10px; }
.cbn-item:hover { background:var(--cbn-bg); }
.cbn-ico { width:38px; height:38px; flex:0 0 38px; border-radius:9px; background:var(--cbn-bg); border:1px solid var(--cbn-line); display:grid; place-items:center; color:var(--cbn-ink); }
.cbn-item:hover .cbn-ico { background:var(--cbn-paper); }
.cbn-txt { display:flex; flex-direction:column; min-width:0; }
.cbn-t { font-size:14.5px; font-weight:600; color:var(--cbn-ink); line-height:1.3; }
.cbn-d { font-size:12.8px; color:var(--cbn-deep); line-height:1.4; margin-top:2px; }
.cbn-new { display:inline-block; margin-left:8px; vertical-align:2px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--cbn-accent); background:var(--cbn-tint); padding:2px 6px; border-radius:4px; }

.cbn-feature { background:var(--cbn-ink); color:#fff; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.cbn-feature .cbn-fk { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.08em; color:#9EA0A8; text-transform:uppercase; }
.cbn-feature .cbn-ft { font-size:18px; font-weight:700; letter-spacing:-.2px; }
.cbn-feature .cbn-fd { font-size:13px; color:#C9CAD0; line-height:1.45; }
.cbn-cta { margin-top:auto; display:inline-flex; align-self:flex-start; height:34px; align-items:center; padding:0 14px; border-radius:999px; background:var(--cbn-accent); color:#fff !important; font-size:13px; font-weight:600; }
.cbn-cta:hover { background:#D92B2A; }

.cbn-foot { grid-column:1 / -1; border-top:1px solid var(--cbn-line); margin-top:8px; padding:12px 10px 0; display:flex; justify-content:space-between; gap:16px; font-size:13px; color:var(--cbn-deep); }
.cbn-foot a { color:var(--cbn-ink); font-weight:600; }

/* ── Right-hand cluster ────────────────────────── */
.cbn-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
/* Back to the black pill on 2026-10-06: Amine did not like "Partner login" as a quiet text link. */
.cbn-signin { display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:999px; background:var(--cbn-ink); color:#fff !important; font-size:13px; font-weight:600; white-space:nowrap; }
.cbn-signin:hover { background:#000; }
.cbn-burger { display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--cbn-line) !important; background:var(--cbn-paper) !important; place-items:center; color:var(--cbn-ink); }

/* ── Phone menu ────────────────────────────────── */
.cbn-sheet {
  display:none; position:absolute; top:100%; left:0; right:0; z-index:60;
  background:var(--cbn-paper); border-bottom:1px solid var(--cbn-line); box-shadow:0 14px 30px -16px rgba(17,20,24,.35);
  padding:4px 16px 16px; max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px); overflow-y:auto; overscroll-behavior:contain;
}
.cbn-sheet .cbn-kick { padding:16px 4px 4px; }
.cbn-sheet a.cbn-row { display:flex; flex-direction:column; justify-content:center; min-height:48px; padding:6px 4px; border-radius:8px; }
.cbn-sheet a.cbn-row:active { background:var(--cbn-bg); }
.cbn-sheet .cbn-t { font-size:15.5px; }
.cbn-langs { display:flex; align-items:center; gap:14px; margin-top:12px; padding:8px 4px 0; border-top:1px solid var(--cbn-line); color:var(--cbn-mut); }
.cbn-langs a { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; color:var(--cbn-ink); font-size:15px; font-weight:500; }
html[lang="en"] .cbn-langs a[hreflang="en"], html[lang="fr"] .cbn-langs a[hreflang="fr"] { font-weight:700; }

/* ── Widths ────────────────────────────────────────
   Measured in Chrome, French being the longer of the two languages: the
   product panel with its offer card needs 1100px, the four entries plus the
   right-hand cluster fit down to 920px. Below that, the menu button. */
@media (max-width:1099px) {
  .cbn { gap:18px; padding:0 20px; }
  .cbn-panel-product { grid-template-columns:240px 220px; }
  .cbn-panel-product .cbn-feature { display:none; }
  .cbn-panel-tools { grid-template-columns:280px; }
}
@media (max-width:919px) {
  .cbn { gap:10px; padding:0 16px; }
  .cbn-nav, .cbn .cb-lang { display:none; }
  .cbn-burger { display:grid; }
  .cbn.is-sheet .cbn-sheet { display:block; }
}
@media (max-width:360px) {
  .cbn-logo { font-size:16px; gap:8px; }
  .cbn-signin { padding:0 12px; }
}