/* ===== The header, its menu and the footer: the one source for how they look.

   The dark UI the founder approved on 15 October 2026. Every page that carries the header loads this file
   last, after its own styles; the selectors start with html body, so they hold over any copy of the old
   header styles a page still has. The pages keep only when the menu button shows (and, signed in between
   1041 and 1279 px, taking Account, the usage chip and "+ New bot" out of the row).

   The bar: 72 px (64 on a phone), the page's near-black ground, a hairline under it once the page has
   scrolled. The bidi mark with its name in Sora 600 at the inline start; the links centred on the page;
   Account (Sign in for a visitor) and the main button, a white pill, at the inline end. Signed in, the
   usage chip and "+ New bot" join Account, and the links then sit centred in the room that is left.

   The menu (up to 1040 px, and the small signed-in panel between 1041 and 1279 px): the header and the menu
   fuse into one solid sheet that unrolls from the bar; the page behind dims and softens. Each link carries a
   small icon on a raised tile; the page you are on has a white tile. The icons are drawn in CSS from the
   link's address, because assets/i18n.js rewrites each link's text in place. Its keyboard and focus rules
   live in assets/site-nav.js (and pages/index.js on the home and setup pages).

   The footer: one row of links on a hairline the width of the content, the social links at its end, the
   legal links and the copyright on a quieter row under it. ===== */

.topnav-inner {
  --menu-ink: var(--text);
  --menu-muted: var(--text-2);
  --menu-surface: var(--panel);
  --menu-tile: var(--raised);
  --menu-hover: var(--raised);
  --menu-line: var(--line);
  --menu-ring: var(--cobalt-2);
  --menu-ease: var(--spring);
  --menu-out: var(--spring);
  /* Icons (24 px grid, 1.8 stroke), used as masks so the tile decides their colour. */
  --menu-i-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%23000'/%3E%3C/svg%3E");
  --menu-i-packages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3.5 7.5 12 12l8.5-4.5L12 3Z'/%3E%3Cpath d='m3.5 12 8.5 4.5 8.5-4.5'/%3E%3Cpath d='m3.5 16.5 8.5 4.5 8.5-4.5'/%3E%3C/svg%3E");
  --menu-i-how: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M8.5 6H15a3 3 0 0 1 0 6H9a3 3 0 0 0 0 6h6.5'/%3E%3C/svg%3E");
  --menu-i-pricing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.6V4.5a1 1 0 0 1 1-1h8.1l8 8a1.4 1.4 0 0 1 0 2l-7.1 7.1a1.4 1.4 0 0 1-2 0l-8-8Z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E");
  --menu-i-install: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.5 7.5-5 4.5 5 4.5'/%3E%3Cpath d='m15.5 7.5 5 4.5-5 4.5'/%3E%3Cpath d='m13.5 4.5-3 15'/%3E%3C/svg%3E");
  --menu-i-faq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.4 2.4c-.6.3-1 .8-1 1.5v.5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --menu-i-security: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.6c0 4.5 3.1 8.3 7.5 9.4 4.4-1.1 7.5-4.9 7.5-9.4V6L12 3Z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E");
  --menu-i-contact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.4 7.5L3.5 20.5l1.1-4.4A8.5 8.5 0 1 1 20.5 12Z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01'/%3E%3C/svg%3E");
  --menu-i-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
  --menu-i-usage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 17.5a9 9 0 1 1 16.8 0'/%3E%3Cpath d='m12 14 4-4.5'/%3E%3Ccircle cx='12' cy='14.5' r='1.2'/%3E%3C/svg%3E");
  --menu-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 10.5 8.5-7 8.5 7'/%3E%3Cpath d='M5.5 9v11.5h13V9'/%3E%3Cpath d='M10 20.5v-6h4v6'/%3E%3C/svg%3E");
  --menu-i-language: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3Z'/%3E%3C/svg%3E");
}

/* ===== The bar ===== */
html body .topnav {
  position: sticky; top: 0; z-index: 60;
  padding: 0; background: rgba(8, 9, 10, .92);
}
/* The bar stays on top as the page scrolls: whatever the keyboard or a link brings into view stops 16 px under
   it, never behind it (WCAG 2.4.11). One value for every page with the bar (this file loads last). */
html { scroll-padding-top: calc(var(--h-bar) + var(--sp-16)); }
/* The hairline under the bar shows once the page has scrolled under it (scroll-driven where the browser has
   it; html[data-scrolled] from bidi-app.js anywhere else). */
html body .topnav::before {
  position: absolute; z-index: 1; inset: auto 0 0; height: 1px; background: var(--line);
  content: ''; opacity: 0; visibility: hidden; pointer-events: none;
}
html[data-scrolled] body .topnav::before { opacity: 1; visibility: visible; }
@supports (animation-timeline: scroll()) {
  html body .topnav::before { animation: topnav-hairline linear both; animation-timeline: scroll(root block); animation-range: 0 24px; }
}
@keyframes topnav-hairline { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

html body .topnav > .wrap { padding-block: 0; }
html body .topnav .topnav-inner {
  position: relative; display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-16);
  height: var(--h-bar); min-height: var(--h-bar); margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; transition: none;
}
html body .topnav .topnav-inner:hover { background: transparent; }

/* The mark and its name: the official mark cropped to its ink, 20 tall; "bidi" in the h1's face. */
html body .topnav .logo-link {
  display: inline-flex; flex: none; align-items: center; gap: var(--sp-8);
  width: auto; height: var(--h-md); margin-inline-end: auto; padding: 0; border-radius: var(--r-sm);
  color: var(--text); font: var(--type-wordmark); letter-spacing: var(--track-wordmark); text-decoration: none;
}
html body .topnav .logo-link::after { content: none; }
html body .topnav .logo-mark { display: block; width: calc(20px * 112 / 104); height: 20px; flex: none; color: var(--text); }
html body .topnav .logo-word { display: block; }

/* The links, centred on the page whatever the two sides hold. Signed in, the row also carries the usage chip,
   "+ New bot" and Account: the links then take the middle of the room that is left, so nothing overlaps. */
html body .topnav .desktop-nav {
  position: static; display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: var(--sp-16);
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; isolation: auto;
}
html body .topnav .nav-links {
  position: absolute; inset-block: 0; inset-inline: 0; z-index: 1;
  display: flex; align-items: center; gap: var(--sp-4); width: fit-content; margin-inline: auto;
}
html body .topnav .topnav-inner[data-crowded] .desktop-nav { flex: 1 1 auto; min-width: 0; }
html body .topnav .topnav-inner[data-crowded] .nav-links { position: relative; inset: auto; margin-inline: auto; }
html body .topnav .desktop-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--h-sm); height: var(--h-sm);
  padding: 0 var(--sp-12); border: 0; border-radius: var(--r-sm); background: none; box-shadow: none;
  color: var(--text-2); font: var(--type-small); font-weight: 500; letter-spacing: 0; white-space: nowrap; text-decoration: none;
  transition: color var(--dur-fade) var(--ease-fade);
}
html body .topnav .desktop-nav a:hover,
html body .topnav .desktop-nav a[aria-current="page"] { color: var(--text); background: none; box-shadow: none; }
html body .topnav .desktop-nav a:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
/* Account (Sign in for a visitor) sits beside the main button, as in the reference; the usage chip is a quiet
   note on the account; "+ New bot" is the one link that makes something: light cobalt with its plus. */
html body .topnav .desktop-nav > a { padding: 0 var(--sp-4); }
html body .topnav .desktop-nav a[data-bidi-newbot] { color: var(--cobalt-2); font-weight: 600; }
html body .topnav .desktop-nav a[data-bidi-newbot]::before { content: "+"; margin-inline-end: var(--sp-4); font-weight: 600; }
html body .topnav .desktop-nav a[data-bidi-newbot]:hover { color: var(--text); }
/* The home page's pointer highlight (pages/index.js places it; index.html and setup.html size it): a soft
   raised pill under the link you point at. */
html body .topnav .nav-highlight { border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, .06); box-shadow: none; }
html body .topnav .nav-links[data-nav-root].is-active .nav-highlight { opacity: 1; }

/* The main button: the reference's white pill with dark ink. Its hover fill lives on ::before and only its
   opacity fades; the words never change colour. */
html body .topnav .nav-action {
  position: relative; isolation: isolate; display: inline-flex; flex: none; align-items: center; justify-content: center;
  gap: var(--sp-8); min-height: var(--h-md); height: var(--h-md); padding: 0 var(--sp-16);
  border: 0; border-radius: var(--r-pill); background: var(--pill); color: var(--pill-ink); box-shadow: none;
  font: var(--type-small); font-weight: 600; letter-spacing: 0; white-space: nowrap; text-decoration: none;
  transform: none; transition: scale var(--dur-move) var(--spring);
}
html body .topnav .nav-action::before {
  position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: #fff;
  content: ''; opacity: 0; pointer-events: none; transition: opacity var(--dur-fade) var(--ease-fade);
}
html body .topnav .nav-action:hover { background: var(--pill); box-shadow: none; transform: none; }
html body .topnav .nav-action:hover::before { opacity: 1; }
html body .topnav .nav-action:active { scale: .96; transform: none; transition-duration: var(--dur-press); }
html body .topnav .nav-action:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }
html body .topnav .nav-action svg { display: none; }

/* The menu button: a hairline pill, 40 px square, shown up to 1040 px (and signed in, up to 1279 px). Its two
   lines turn into a cross while the menu is open. */
html body .topnav .mobile-nav-toggle, .topnav .mobile-nav-panel { display: none; }
html body .topnav .mobile-nav-toggle .menu-close,
html body .topnav .topnav-inner.mobile-open .mobile-nav-toggle .menu-open { display: none; }
html body .topnav .topnav-inner.mobile-open .mobile-nav-toggle .menu-close { display: block; }
html body .topnav .mobile-nav-toggle {
  width: var(--h-md); height: var(--h-md); flex: none; place-items: center; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--raised); color: var(--text);
  transition: background-color var(--dur-fade) var(--ease-fade);
}
html body .topnav .mobile-nav-toggle:hover { background: var(--lift); }
html body .topnav .mobile-nav-toggle svg { width: 18px; height: 18px; }
html body .topnav .mobile-nav-toggle:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }

@media (max-width: 1040px) {
  /* The bar holds the mark and the menu button: it runs the full width, so the open sheet does too. */
  html body .topnav > .wrap { max-width: none; }
  html body .topnav .desktop-nav, html body .topnav .topnav-inner > .nav-action { display: none; }
  html body .topnav .mobile-nav-toggle { display: grid; margin-inline-start: auto; }
}

/* ===== The menu panel: a solid sheet (the small signed-in panel keeps this shape) ===== */
.topnav .mobile-nav-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); inset-inline: 0;
  padding: var(--sp-8);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--menu-surface);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .8);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px); transform-origin: top;
  transition: opacity var(--dur-fade) var(--ease-fade), transform var(--dur-fade) var(--menu-ease), visibility 0s linear var(--dur-fade);
}
.topnav .topnav-inner.mobile-open .mobile-nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---- A row: icon tile, then the words. 48 tall, a 12 px corner. ---- */
.topnav .mobile-nav-panel a {
  position: relative; display: flex; align-items: center; gap: var(--sp-12);
  min-height: var(--h-lg); padding-block: var(--sp-4); padding-inline: var(--sp-4) var(--sp-16);
  border-radius: var(--r-md); color: var(--menu-ink);
  font: var(--type-body); font-weight: 500; letter-spacing: 0; text-decoration: none;
  transition: background-color var(--dur-fade) var(--ease-fade), color var(--dur-fade) var(--ease-fade), scale var(--dur-press) var(--spring);
}
.topnav .mobile-nav-panel a[hidden] { display: none; }
.topnav .mobile-nav-panel a:not(.mobile-nav-action)::before {
  flex: none; width: var(--h-md); height: var(--h-md); border-radius: var(--r-sm);
  background: var(--menu-tile); box-shadow: inset 0 0 0 1px var(--line);
  content: '';
  transition: background-color var(--dur-fade) var(--ease-fade);
}
.topnav .mobile-nav-panel a:not(.mobile-nav-action)::after {
  position: absolute; top: 50%; inset-inline-start: calc(var(--sp-4) + 11px); width: 18px; height: 18px; margin-top: -9px;
  background: var(--text-2);
  -webkit-mask: var(--menu-icon, var(--menu-i-dot)) center / 18px 18px no-repeat;
  mask: var(--menu-icon, var(--menu-i-dot)) center / 18px 18px no-repeat;
  content: ''; pointer-events: none;
  transition: background-color var(--dur-fade) var(--ease-fade);
}
.topnav .mobile-nav-panel a:hover { background: var(--menu-hover); }
.topnav .mobile-nav-panel a:not(.mobile-nav-action):hover::before { background: var(--lift); }
.topnav .mobile-nav-panel a:not(.mobile-nav-action):hover::after { background: var(--text); }
/* Focus: a ring drawn inside the row, so the panel's scroll box never clips it; the row fills as on hover. */
.topnav .mobile-nav-panel a:not(.mobile-nav-action):focus-visible { outline: 2px solid var(--menu-ring); outline-offset: -2px; background: var(--menu-hover); }
/* A press answers at once: the row gives a little (scale, not transform, so it never waits on the rows'
   settle-in delay). */
.topnav .mobile-nav-panel a:not(.mobile-nav-action):active { background: var(--lift); scale: .985; }
/* The usage chip is a note on the account, not a destination: quieter words. */
.topnav .mobile-nav-panel a[data-bidi-usage] { color: var(--menu-muted); font: var(--type-small); font-weight: 500; }
/* The page you are on: a raised row, the tile the reference's white pill, the icon in its dark ink. */
.topnav .mobile-nav-panel a[aria-current="page"] { background: var(--raised); color: var(--text); font-weight: 600; }
.topnav .mobile-nav-panel a[aria-current="page"]::before { background: var(--pill); box-shadow: none; }
.topnav .mobile-nav-panel a[aria-current="page"]::after { background: var(--pill-ink); }

/* Which icon: read from the address, in both languages and on every page. */
.topnav .mobile-nav-panel a[href$="#path-chooser"] { --menu-icon: var(--menu-i-packages); }
.topnav .mobile-nav-panel a:is([href="how-it-works.html"], [href="#how"]) { --menu-icon: var(--menu-i-how); }
.topnav .mobile-nav-panel a:is([href="pricing.html"], [href="#pricing"]) { --menu-icon: var(--menu-i-pricing); }
.topnav .mobile-nav-panel a[href="install.html"] { --menu-icon: var(--menu-i-install); }
.topnav .mobile-nav-panel a[href="#faq"] { --menu-icon: var(--menu-i-faq); }
.topnav .mobile-nav-panel a[href="security.html"] { --menu-icon: var(--menu-i-security); }
.topnav .mobile-nav-panel a[href="contact.html"] { --menu-icon: var(--menu-i-contact); }
.topnav .mobile-nav-panel a:is([href$="account.html"], [data-bidi-nav]) { --menu-icon: var(--menu-i-account); }
.topnav .mobile-nav-panel a[data-bidi-usage] { --menu-icon: var(--menu-i-usage); }
/* "+ New bot" (signed in, the plan has room): a plus in the tile. */
.topnav .mobile-nav-panel a[data-bidi-newbot] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  color: var(--cobalt-2);
}
.topnav .mobile-nav-panel a[data-bidi-newbot]::after { background: var(--cobalt-2); }
.topnav .mobile-nav-panel a[href="index.html"] { --menu-icon: var(--menu-i-home); }
.topnav .mobile-nav-panel a[href="index.html"][hreflang] { --menu-icon: var(--menu-i-language); }

/* ---- The action: the reference's white pill, the full width of the menu, 48 tall. ---- */
.topnav .mobile-nav-panel .mobile-nav-action {
  justify-content: center; min-height: var(--h-lg); margin-top: var(--sp-8); padding-inline: var(--sp-24);
  border: 0; border-radius: var(--r-pill);
  background: var(--pill); color: var(--pill-ink); font: var(--type-body); font-weight: 600;
  box-shadow: none;
  transition: background-color var(--dur-fade) var(--ease-fade), scale var(--dur-press) var(--spring);
}
.topnav .mobile-nav-panel .mobile-nav-action:hover { background: #fff; box-shadow: none; }
.topnav .mobile-nav-panel .mobile-nav-action:active { scale: .985; }
/* A ring a gap away from the button, in the light cobalt; the sheet's padding leaves room for it inside the
   scroll box. */
.topnav .mobile-nav-panel .mobile-nav-action:focus-visible { outline: 2px solid var(--menu-ring); outline-offset: 3px; }

html[lang="ar"] .topnav .mobile-nav-panel a, html[dir="rtl"] .topnav .mobile-nav-panel a { letter-spacing: 0; }

/* ---- Phone and tablet: the header and the menu fuse into one sheet. ---- */
@media (max-width: 1040px) {
  .topnav .topnav-inner { transition: background-color var(--dur-fade) var(--ease-fade); }
  html body .topnav .topnav-inner.mobile-open,
  html body .topnav .topnav-inner.mobile-open:hover {
    background: var(--menu-surface);
    box-shadow: none;
  }
  /* The bar becomes part of the sheet: it fills edge to edge behind the row while the menu is open. */
  html body .topnav .topnav-inner.mobile-open::before {
    position: absolute; z-index: -1; inset-block: 0; inset-inline: calc(-1 * var(--margin));
    background: var(--menu-surface); content: '';
  }
  .topnav .topnav-inner.mobile-open .mobile-nav-toggle { border-color: transparent; background: var(--lift); }

  .topnav .mobile-nav-panel {
    display: grid; align-content: start; gap: var(--sp-4);
    top: 100%; inset-inline: calc(-1 * var(--margin));
    max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--sp-8) var(--margin) var(--sp-16);
    border: 0; border-block-end: 1px solid var(--line); border-radius: 0;
    box-shadow: 0 32px 64px -24px rgba(0, 0, 0, .8);
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: opacity var(--dur-fade) var(--ease-fade), clip-path var(--dur-move) var(--menu-out), visibility 0s linear var(--dur-move);
  }
  .topnav .topnav-inner.mobile-open .mobile-nav-panel { clip-path: inset(0 0 -96px 0); }
  /* A hairline between the header row and the links. */
  .topnav .mobile-nav-panel::before { grid-column: 1 / -1; height: 1px; margin: 0 0 var(--sp-4); background: var(--menu-line); content: ''; }
  .topnav .mobile-nav-panel .mobile-nav-action { grid-column: 1 / -1; }

  /* The rows settle in one after another as the sheet unrolls. */
  .topnav .mobile-nav-panel > a { opacity: 0; transform: translateY(-6px); transition: opacity 120ms ease, transform 120ms ease, background-color var(--dur-fade) var(--ease-fade), color var(--dur-fade) var(--ease-fade), scale var(--dur-press) var(--spring); }
  .topnav .topnav-inner.mobile-open .mobile-nav-panel > a {
    opacity: 1; transform: none;
    transition: opacity var(--dur-fade) var(--ease-fade) var(--menu-delay, 0ms), transform var(--dur-move) var(--menu-out) var(--menu-delay, 0ms), background-color var(--dur-fade) var(--ease-fade), color var(--dur-fade) var(--ease-fade), scale var(--dur-press) var(--spring);
  }
  .topnav .mobile-nav-panel > a:nth-of-type(2) { --menu-delay: 25ms; }
  .topnav .mobile-nav-panel > a:nth-of-type(3) { --menu-delay: 50ms; }
  .topnav .mobile-nav-panel > a:nth-of-type(4) { --menu-delay: 75ms; }
  .topnav .mobile-nav-panel > a:nth-of-type(5) { --menu-delay: 100ms; }
  .topnav .mobile-nav-panel > a:nth-of-type(6) { --menu-delay: 120ms; }
  .topnav .mobile-nav-panel > a:nth-of-type(n+7) { --menu-delay: 140ms; }

  /* The page behind dims and softens, so the open menu is the only thing to read. A press on it closes the
     menu and never lands on what is under it (site-nav.js, pages/index.js). */
  html body .topnav::after {
    /* From under the bar down: the bar itself is part of the sheet and stays undimmed. */
    position: fixed; inset: var(--h-bar) 0 0; z-index: -1;
    background: rgba(0, 0, 0, .56);
    -webkit-backdrop-filter: blur(6px) saturate(.9); backdrop-filter: blur(6px) saturate(.9);
    opacity: 0; visibility: hidden; content: '';
    transition: opacity var(--dur-fade) var(--ease-fade), visibility 0s linear var(--dur-fade);
  }
  html body .topnav:has(.topnav-inner.mobile-open)::after { opacity: 1; visibility: visible; transition-delay: 0s; }
  /* bidi's own assistant (bidi-app.js mountSiteWidget) floats above every layer of the page: while the menu
     is open its launcher and greeting step out of sight, so nothing bright and pressable sits on the dimmed
     page. */
  body:has(.topnav-inner.mobile-open) [id^="bidi-w-fab-"] { visibility: hidden; }
  /* The scrolled hairline goes while the menu is open, so the sheet reads as one piece. */
  html body .topnav:has(.topnav-inner.mobile-open)::before { display: none; }
}
/* A tablet and a narrow window: two columns of links, the action across both. */
@media (min-width: 600px) and (max-width: 1040px) {
  .topnav .mobile-nav-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); }
}

/* ---- Signed in, 1041 to 1279 px: the small panel under the menu button (KIT-1), solid. The pages take
   Account, the usage chip and "+ New bot" out of the row in this band (site.css, index.html, account.html);
   here the menu button shows and its panel holds only those three. ---- */
@media (min-width: 1041px) and (max-width: 1279px) {
  .topnav .topnav-inner[data-crowded] .mobile-nav-toggle { display: grid; flex: none; }
  .topnav .topnav-inner[data-crowded] .mobile-nav-panel { display: block; }
  .topnav .topnav-inner[data-crowded] .mobile-nav-panel a:not([data-bidi-nav], [data-bidi-usage], [data-bidi-newbot]) { display: none; }
  .topnav .topnav-inner[data-crowded] .mobile-nav-panel { inset-inline: auto 0; width: min(288px, 100%); }
  .topnav .topnav-inner[data-crowded].mobile-open .mobile-nav-toggle { border-color: transparent; background: var(--lift); }
}

/* Reduced motion: the menu is simply there, at once; nothing unrolls, settles, scales or fades. */
@media (prefers-reduced-motion: reduce) {
  .topnav .mobile-nav-panel, .topnav .mobile-nav-panel a, .topnav .mobile-nav-panel a::before,
  .topnav .topnav-inner, .topnav .topnav-inner::before, .topnav::after, html body .topnav .nav-action, html body .topnav .nav-action::before { transition: none !important; }
  .topnav .mobile-nav-panel, .topnav .mobile-nav-panel a { transform: none !important; scale: none !important; }
  .topnav .mobile-nav-panel a::before { transform: none !important; }
  html body .topnav .nav-action:active { scale: none; }
}

/* ---- Forced colours (Windows high contrast): the system drops the fills and the shadows, so borders and
   outlines stand in for them (as ui.css does for the kit). The icons are masks painted with a background,
   so they are painted in the system's text colour on purpose. ---- */
@media (forced-colors: active) {
  .topnav .mobile-nav-panel { border: 1px solid CanvasText; }
  html body .topnav .topnav-inner.mobile-open::before { display: none; }
  .topnav::after { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topnav .mobile-nav-panel a:not(.mobile-nav-action)::before { border: 1px solid CanvasText; }
  .topnav .mobile-nav-panel a:not(.mobile-nav-action)::after,
  .topnav .mobile-nav-panel a[aria-current="page"]::after { forced-color-adjust: none; background: CanvasText; }
  .topnav .mobile-nav-panel a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .topnav .mobile-nav-panel a:not(.mobile-nav-action):focus-visible { outline: 3px solid Highlight; outline-offset: -3px; }
  .topnav .mobile-nav-panel .mobile-nav-action { border: 2px solid ButtonText; }
  .topnav .mobile-nav-panel .mobile-nav-action:focus-visible { outline: 3px solid Highlight; }
  html body .topnav .nav-action { border: 2px solid ButtonText; }
  html body .topnav .desktop-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
}

/* ===== Arabic: the Arabic face, no negative tracking; the mark and its name stay as they are. ===== */
html[dir="rtl"] body .topnav :is(.desktop-nav a, .nav-action, .mobile-nav-panel a) { font-family: var(--font-arabic); letter-spacing: 0; }
html[dir="rtl"] body .topnav .logo-link { font-family: var(--display); }

/* ===== The footer: one row of links on a hairline the width of the content ===== */
html body .site-footer {
  padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
  color: var(--text-2); font: var(--type-caption);
}
html body .site-footer .foot-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-24);
  padding-block: var(--sp-24) var(--sp-16); border-top: 1px solid var(--line);
}
html body .site-footer .foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-24); }
html body .site-footer .foot-row a, html body .site-footer .foot-legal a {
  display: inline-flex; align-items: center; color: var(--text-2); font: inherit; text-decoration: none;
  transition: color var(--dur-fade) var(--ease-fade);
}
html body .site-footer .foot-row a:hover, html body .site-footer .foot-legal a:hover { color: var(--text); }
html body .site-footer a:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; border-radius: var(--r-xs); }
/* The social links: small marks at the row's inline end, each a 32 px target (40 on a phone or a touch screen). */
html body .site-footer .footer-social { display: flex; align-items: center; gap: var(--sp-4); margin: 0; margin-inline-start: auto; }
html body .site-footer .footer-social-link {
  display: grid; width: var(--h-sm); height: var(--h-sm); place-items: center; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text-2); transform: none;
}
html body .site-footer .footer-social-link:hover { background: var(--raised); color: var(--text); transform: none; }
html body .site-footer .footer-social-link svg { display: block; width: 16px; height: 16px; }
/* The legal links and the copyright: a quieter second row under the first. */
html body .site-footer .foot-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-24);
  margin: 0; padding-block: 0 var(--sp-48); color: var(--text-2);
}
/* Phones and touch screens: each link is a 40 tall target; the row gap and the top padding give the room
   back, so the words keep their distance from the hairline. */
@media (max-width: 767.98px), (pointer: coarse) {
  html body .site-footer .foot-row { row-gap: 0; padding-block: var(--sp-12) var(--sp-8); }
  html body .site-footer .foot-links, html body .site-footer .foot-legal { row-gap: 0; }
  html body .site-footer .foot-row a, html body .site-footer .foot-legal a { min-height: var(--h-md); min-width: var(--h-md); }
  html body .site-footer .footer-social-link { width: var(--h-md); height: var(--h-md); }
  html body .site-footer .foot-legal { padding-block-end: var(--sp-32); }
}
@media (max-width: 767.98px) {
  html body .site-footer .footer-social { margin-inline-start: 0; }
}
html[dir="rtl"] body .site-footer { font-family: var(--font-arabic); }
@media (forced-colors: active) {
  html body .site-footer .foot-row { border-top: 1px solid CanvasText; }
}

/* ==== The app's own bar (account.html and setup.html, the dark UI of 15 October 2026) ====
   The mark, then the account's items at the inline end (+ New bot while the plan has room, the usage chip,
   Account; Sign in for a visitor), as bidi-app.js draws them, in one row at every width. No site links, no
   main button and no menu: the person is in the app. These rules keep the one row where the fold above
   would turn it into a menu button, and fit it beside the language switch on a phone. They name
   header.topnav so they outweigh the signed-in row (.topnav-inner[data-crowded]) at any width. */
html body header.topnav .topnav-inner.app-bar .desktop-nav {
  display: flex; flex: 0 1 auto; justify-content: flex-end; gap: var(--split); min-width: 0; margin-inline-start: auto;
}
html body header.topnav .topnav-inner.app-bar .desktop-nav > a[hidden] { display: none; }
@media (max-width: 559.98px) {
  html body header.topnav .topnav-inner.app-bar, html body header.topnav .topnav-inner.app-bar .desktop-nav { gap: var(--row); }
}
/* The usage chip waits in the dashboard (the Overview shows the month): under 400 px, and under 480 px when
   the language switch shares the row. */
@media (max-width: 399.98px) {
  html body header.topnav .topnav-inner.app-bar .desktop-nav > a[data-bidi-usage] { display: none; }
}
@media (max-width: 479.98px) {
  html body header.topnav .topnav-inner.app-bar:has(.lang-switch) .desktop-nav > a[data-bidi-usage] { display: none; }
}
/* Under 375 px, with "+ New bot" and the language switch in the row, the mark stands alone (the link keeps
   its label), still a 40 px target; under 360 px the gaps close to 4. */
@media (max-width: 374.98px) {
  html body header.topnav .topnav-inner.app-bar:has(.lang-switch):has([data-bidi-newbot]:not([hidden])) .logo-word { display: none; }
  html body header.topnav .topnav-inner.app-bar .logo-link { min-width: var(--h-md); justify-content: center; }
}
@media (max-width: 359.98px) {
  html body header.topnav .topnav-inner.app-bar, html body header.topnav .topnav-inner.app-bar .desktop-nav { gap: var(--pair); }
}