/* ================================================================
   Site navigation — one bar, every page.

   Rules for future edits: this file must not depend on Tailwind.
   t/*.html and the legal pages load no Tailwind at all, and the
   bar has to look identical on all of them.
================================================================ */

html { scroll-padding-top: 78px; }

/* Tailwind's .hidden lives on a CDN. On t/*.html and the legal pages
   there is no Tailwind at all, and if the CDN is slow or blocked the
   display utility never arrives — so panels JS has just hidden spring
   back open. One local rule makes hiding work unconditionally; no page
   pairs `hidden` with a responsive display class, so this is safe. */
.hidden { display: none !important; }

/* Same reasoning for the `hidden` attribute: a class-based display rule
   (inline-flex, flex…) outranks the UA stylesheet, so `el.hidden = true`
   would silently do nothing. */
[hidden] { display: none !important; }

.sn {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid rgba(15, 30, 106, 0.09);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.sn.is-scrolled {
  box-shadow: 0 10px 34px -22px rgba(11, 18, 32, 0.55);
  border-bottom-color: rgba(15, 30, 106, 0.05);
}

.sn-in {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- brand ---------- */
.sn-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  text-decoration: none;
  color: #0b1220;
  -webkit-tap-highlight-color: transparent;
}
.sn-mark {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(142deg, #1a2f8e 0%, #1e5f9e 62%, #0e7490 100%);
  box-shadow: 0 3px 10px -4px rgba(26, 47, 142, 0.55);
}
.sn-mark svg { display: block; width: 18px; height: 18px; }
.sn-name {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1;
  white-space: nowrap;
}
.sn-name span { color: #2546d0; font-weight: 500; }

/* ---------- desktop links ---------- */
.sn-links {
  display: none;
  align-items: center;
  gap: 21px;
  margin-left: auto;
}
@media (min-width: 1024px) { .sn-links { display: flex; } }

.sn-link {
  position: relative;
  padding: 7px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #4a5268;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease;
}
.sn-link:hover, .sn-link:focus-visible { color: #0b1220; }
.sn-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #22d3ee;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sn-link:hover::after { transform: scaleX(1); }
.sn-link.is-active { color: #0b1220; font-weight: 600; }
.sn-link.is-active::after { transform: scaleX(1); background: #0b1220; }

/* ---------- right cluster ---------- */
.sn-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.sn-lang {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid rgba(15, 30, 106, 0.13);
  border-radius: 999px;
  background: #f3f5fb;
}
.sn-lang-opt {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #5a6274;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 6px 9px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.sn-lang-opt:hover { color: #0b1220; }
.sn-lang-opt.is-on { background: #0b1220; color: #fff; cursor: default; }

.sn-cta {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #0f1e6a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 18px -12px rgba(15, 30, 106, 0.9);
  transition: background 0.18s ease, transform 0.18s ease;
}
.sn-cta:hover { background: #1a2f8e; transform: translateY(-1px); }
.sn-cta:active { transform: none; }
.sn-cta svg { width: 13px; height: 13px; flex: none; }
@media (min-width: 640px) { .sn-cta { display: inline-flex; } }

.sn-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(15, 30, 106, 0.13);
  border-radius: 10px;
  background: #fff;
  color: #1a1f2e;
  cursor: pointer;
}
.sn-burger:hover { background: #f3f5fb; }
.sn-burger svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .sn-burger { display: none; } }

/* ---------- mobile sheet ---------- */
.sn-menu {
  display: none;
  border-top: 1px solid rgba(15, 30, 106, 0.08);
  background: #fff;
  padding: 6px 24px 18px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.sn-menu.is-open { display: block; }
@media (min-width: 1024px) { .sn-menu { display: none !important; } }

.sn-mlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #eef1f7;
  font-size: 14.5px;
  font-weight: 500;
  color: #1a1f2e;
  text-decoration: none;
}
.sn-mlink:last-of-type { border-bottom: 0; }
.sn-mlink span[aria-hidden] { color: #b9c1d3; font-size: 13px; }
.sn-mlink.is-active { color: #0f1e6a; font-weight: 700; }
.sn-mlink.is-active span[aria-hidden] { color: #0d9488; }
.sn-mcta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #0f1e6a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.sn-mcta svg { width: 14px; height: 14px; }

/* ---------- bilingual labels (works with or without i18n.js) ---------- */
html[data-lang="zh"] .sn .l-en { display: none !important; }
html:not([data-lang="zh"]) .sn .l-zh { display: none !important; }

/* ---------- language menu ---------- */
.sn-lang { position: relative; flex: none; }

.sn-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 30, 106, 0.13);
  background: #f3f5fb;
  color: #16203a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.sn-lang-btn:hover { background: #e8edf9; border-color: rgba(15, 30, 106, 0.22); }
.sn-lang-globe { width: 15px; height: 15px; opacity: 0.7; }
.sn-lang-caret { width: 11px; height: 11px; opacity: 0.55; transition: transform 0.18s ease; }
.sn-lang[data-open="true"] .sn-lang-caret { transform: rotate(180deg); }
.sn-lang[data-open="true"] .sn-lang-btn { background: #e8edf9; border-color: rgba(15, 30, 106, 0.24); }

.sn-lang-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 95;
  min-width: 190px;
  padding: 6px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid rgba(15, 30, 106, 0.1);
  box-shadow: 0 22px 46px -20px rgba(10, 20, 60, 0.5), 0 2px 6px -2px rgba(10, 20, 60, 0.12);
  display: grid;
  gap: 2px;
}
.sn-lang-pop[hidden] { display: none; }

.sn-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #16203a;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s ease;
}
.sn-lang-item:hover { background: #f2f5fd; }
.sn-lang-item.is-on { background: #0b1220; color: #fff; }
.sn-lang-code {
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: #7b859c;
  border: 1px solid rgba(15, 30, 106, 0.14);
  border-radius: 6px;
  padding: 2px 5px;
}
.sn-lang-item.is-on .sn-lang-code { color: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.3); }

/* language chips inside the mobile sheet */
.sn-mlangs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 30, 106, 0.08);
}
.sn-mlang {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(15, 30, 106, 0.14);
  background: #f4f6fc;
  color: #16203a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.sn-mlang.is-on { background: #0b1220; color: #fff; border-color: #0b1220; }

/* ---------- right-to-left (Arabic) ---------- */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .sn-in { flex-direction: row-reverse; }
html[dir="rtl"] .sn-links { flex-direction: row-reverse; }
html[dir="rtl"] .sn-right { flex-direction: row-reverse; }
html[dir="rtl"] .sn-lang-pop { right: auto; left: 0; }
html[dir="rtl"] .sn-lang-item { text-align: right; }
html[dir="rtl"] .sn-menu { text-align: right; }
html[dir="rtl"] .sn-mlink span[aria-hidden] { transform: scaleX(-1); }

/* the homepage is Tailwind-driven; these are the handful of utilities
   that assume a left-to-right flow */
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }
html[dir="rtl"] [class*="ml-auto"] { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] [class*="mr-auto"] { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .faq-icon { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .mz-shade { background: linear-gradient(270deg, rgba(4,10,26,0) 0%, rgba(4,10,26,.55) 55%, rgba(4,10,26,.86) 100%); }
html[dir="rtl"] .mz-copy { text-align: right; }
html[dir="rtl"] .mz-prev { left: auto; right: 22px; }
html[dir="rtl"] .mz-next { right: auto; left: 22px; }
html[dir="rtl"] .mz-prev svg, html[dir="rtl"] .mz-next svg { transform: scaleX(-1); }
html[dir="rtl"] .ai-steps li { padding-left: 0; padding-right: 26px; }
html[dir="rtl"] .ai-steps li::before { left: auto; right: 0; }

/* ---------- focus ---------- */
.sn a:focus-visible,
.sn button:focus-visible {
  outline: 2px solid #0f1e6a;
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .sn, .sn-link::after, .sn-cta, .sn-lang-opt, .sn-lang-caret, .sn-mine { transition: none !important; }
}

/* ---------- "My submissions" shortcut ----------
   Icon-only by default so the 1024px nav never overflows; the label
   appears only on wide screens. The page itself is browser-local and
   noindex — it is a convenience shortcut, not an account.            */
.sn-mine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 30, 106, 0.10);
  border-radius: 999px;
  background: #fff;
  color: #5a6274;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.sn-mine:hover { color: #0b1220; background: #f3f5fb; }
.sn-mine svg { width: 15px; height: 15px; flex: none; }
.sn-mine-label { display: none; }
@media (min-width: 1400px) { .sn-mine-label { display: inline; } }
html[dir="rtl"] .sn-mine { flex-direction: row-reverse; }