/* ==========================================================================
   Imortek — design system
   Dark-first. Tokens, layout primitives, components.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Ground */
  --bg:        #06080b;
  --bg-elev:   #0a0e13;
  --panel:     #0f151c;
  --panel-2:   #131b24;
  --panel-3:   #18222d;

  /* Lines */
  --line:      #1c2530;
  --line-2:    #283645;
  --line-3:    #35485b;

  /* Ink */
  --ink:       #e8eef4;
  --ink-dim:   #a3b1c0;
  --ink-mute:  #6b7b8d;

  /* Accents */
  --teal:      #5eead4;
  --teal-2:    #2dd4bf;
  --teal-deep: #0d9488;
  --violet:    #a78bfa;
  --violet-2:  #8b5cf6;
  --amber:     #fbbf24;
  --amber-2:   #f59e0b;
  --red:       #f87171;
  --blue:      #60a5fa;

  /* Glows */
  --glow-teal:   0 0 0 1px rgba(94,234,212,.25), 0 8px 40px -12px rgba(94,234,212,.35);
  --glow-amber:  0 0 0 1px rgba(251,191,36,.30), 0 8px 40px -12px rgba(251,191,36,.40);
  --glow-violet: 0 0 0 1px rgba(167,139,250,.25), 0 8px 40px -12px rgba(167,139,250,.35);

  /* Type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Metrics */
  /* Container and type both scale with the viewport, so a 2560px display gets
     a proportionally larger page rather than a 1200px column adrift in it. */
  --wrap: clamp(1200px, 80vw, 1560px);
  --wrap-narrow: clamp(820px, 56vw, 1000px);
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-3: 0 24px 64px -24px rgba(0,0,0,.85);

  --ease: cubic-bezier(.16,.84,.44,1);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
html {
  /* Base size up to ~1440px, easing to 1.1875x on very large displays, so the
     whole page scales rather than just the container.
     Expressed in rem rather than px so a reader who has raised their browser's
     default font size keeps that preference — a px root would silently discard it. */
  font-size: clamp(1rem, 0.625vw + 0.4375rem, 1.1875rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, canvas, video { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 650; }
h1 { font-size: clamp(2.05rem, 4vw, 3.4rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
code, kbd, pre, samp { font-family: var(--mono); font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
::selection { background: rgba(94,234,212,.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: linear-gradient(180deg, transparent, var(--bg-elev) 12%, var(--bg-elev) 88%, transparent); }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.center { text-align: center; }
.skip-link {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 999;
  background: var(--teal); color: #04231f; padding: 10px 18px;
  border-radius: 0 0 var(--r) 0; font-weight: 600;
  /* Hidden without pushing the scroll box sideways. */
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7;
}
.eyebrow--violet { color: var(--violet); }
.eyebrow--amber { color: var(--amber); }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink-dim); line-height: 1.6; max-width: 68ch; }
.muted { color: var(--ink-mute); }
.dim { color: var(--ink-dim); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.section-head { max-width: 74ch; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; }

.gradient-text {
  background: linear-gradient(100deg, var(--ink) 20%, var(--teal) 55%, var(--violet) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 12px 22px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
  font-weight: 560; font-size: .95rem; cursor: pointer; text-decoration: none;
  transition: transform .18s var(--ease), border-color .18s, background .18s, box-shadow .18s, color .18s;
  white-space: nowrap;
  max-width: 100%;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--line-3); background: var(--panel-3); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 100%);
  color: #032420; border-color: transparent; font-weight: 640;
}
.btn--primary:hover { box-shadow: var(--glow-teal); background: linear-gradient(135deg, #7df3e0 0%, var(--teal) 100%); }
.btn--fund {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%);
  color: #2a1a00; border-color: transparent; font-weight: 640;
}
.btn--fund:hover { box-shadow: var(--glow-amber); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--panel); }
.btn--sm { padding: 8px 15px; font-size: .85rem; }
.btn--lg { padding: 15px 30px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .45em;
  padding: 4px 11px; border-radius: 100px;
  font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .06em;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-dim);
  text-transform: uppercase; white-space: nowrap;
}
.badge--teal   { color: var(--teal);   border-color: rgba(94,234,212,.35);  background: rgba(94,234,212,.07); }
.badge--violet { color: var(--violet); border-color: rgba(167,139,250,.35); background: rgba(167,139,250,.07); }
.badge--amber  { color: var(--amber);  border-color: rgba(251,191,36,.35);  background: rgba(251,191,36,.07); }
.badge--red    { color: var(--red);    border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.07); }
.badge--blue   { color: var(--blue);   border-color: rgba(96,165,250,.35);  background: rgba(96,165,250,.07); }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot--pulse { animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: .55; box-shadow: 0 0 0 4px transparent; }
}

/* ---------- Cards ---------- */
.card {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-elev) 100%);
  padding: 26px; overflow: hidden;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.card--hover:hover { border-color: var(--line-3); transform: translateY(-4px); box-shadow: var(--shadow-3); }
.card--pad-lg { padding: 34px; }
.card__glow {
  position: absolute; inset: -1px -1px auto -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: 0; transition: opacity .3s;
}
.card--hover:hover .card__glow { opacity: .8; }

/* Panel = flatter card, used for demos */
.panel {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-elev); overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.panel__title { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin: 0; }
.panel__body { padding: 20px; }
.panel__foot { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel); font-size: .82rem; color: var(--ink-mute); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,8,11,.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(6,8,11,.9); }
.nav { display: flex; align-items: center; gap: 24px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 660; letter-spacing: -.02em; font-size: 1.06rem; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__sub { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; color: var(--ink-mute); text-transform: uppercase; padding-inline-start: 10px; margin-inline-start: 4px; border-inline-start: 1px solid var(--line-2); }
.nav__links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav__link {
  padding: 7px 12px; border-radius: var(--r-sm); color: var(--ink-dim);
  font-size: .9rem; font-weight: 500; transition: color .18s, background .18s;
}
.nav__link:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--teal); }
.nav__cta { margin-inline-start: 10px; }
.nav__toggle {
  display: none; margin-inline-start: auto; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); width: 40px; height: 38px; cursor: pointer; align-items: center; justify-content: center;
}
.nav__toggle span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s; }
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; inset-inline-start: 0; width: 17px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease);
}
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after  { top: 5.5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* Dropdown */
.nav__group { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 290px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-3); padding: 8px; display: none; z-index: 10;
  /* Ten products is taller than a laptop screen. The menu hangs from a fixed
     header, so without this the last entries are simply below the bottom of
     the window and cannot be reached at all — scrolling the page moves the
     menu with it. Capping it to what is left of the viewport is the whole
     fix, and it was already wrong at nine. */
  max-block-size: calc(100vh - 96px);
  max-block-size: calc(100dvh - 96px);
  overflow-y: auto; overscroll-behavior: contain;
}
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { display: block; }
.nav__menu a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink-dim); font-size: .88rem;
}
.nav__menu a:hover { background: var(--panel-3); color: var(--ink); text-decoration: none; }
.nav__menu a strong { display: block; color: var(--ink); font-weight: 560; font-size: .9rem; }
.nav__menu a span { font-size: .78rem; color: var(--ink-mute); }

@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-elev); border-bottom: 1px solid var(--line);
    padding: 16px 24px 26px; margin: 0; max-height: calc(100vh - 66px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease);
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__link { padding: 12px; font-size: 1rem; }
  .nav__menu {
    position: static; display: block; box-shadow: none; border: 0; background: transparent;
    padding: 0 0 0 12px; min-width: 0;
    max-block-size: none; overflow-y: visible;   /* the drawer scrolls, not this */
  }
  .nav__cta { margin: 12px 0 0; }
  .brand__sub { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(72px, 11vw, 150px) clamp(56px, 8vw, 104px); overflow: hidden; }
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .85;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 { margin-bottom: .35em; }
.hero .lede { margin-bottom: 2rem; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }

/* Backdrop grid lines */
.gridlines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(100% 70% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(100% 70% at 50% 0%, #000, transparent 75%);
}

/* ---------- Stats ---------- */
.stat { border-inline-start: 2px solid var(--line-2); padding-inline-start: 16px; }
.stat__num { font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.stat__num em { font-style: normal; color: var(--teal); }
.stat__label { font-size: .8rem; color: var(--ink-mute); margin-top: 4px; }

/* ---------- Product cards ---------- */
.product {
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-elev) 100%);
  padding: 24px; text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.product::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(94,234,212,.07), transparent 42%);
}
.product:hover { border-color: var(--line-3); transform: translateY(-4px); box-shadow: var(--shadow-3); text-decoration: none; }
.product:hover::after { opacity: 1; }
.product__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.product__icon { width: 38px; height: 38px; flex: none; }
.product__name { font-size: 1.18rem; font-weight: 640; margin: 0; letter-spacing: -.02em; }
.product__tag { font-family: var(--mono); font-size: .72rem; color: var(--teal); letter-spacing: .06em; }
.product__desc { color: var(--ink-dim); font-size: .92rem; margin: 0; flex: 1; }
.product__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.product__more { font-size: .85rem; color: var(--teal); font-weight: 550; display: inline-flex; align-items: center; gap: 6px; }
.product__more svg { transition: transform .2s var(--ease); }
.product:hover .product__more svg { transform: translateX(3px); }

/* ---------- Feature list ---------- */
.flist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
/* The marker is absolutely positioned rather than a grid track. These items mix
   <strong>, <code> and bare text, and every one of those is a separate grid
   item — under a 20px first track the prose ended up one word per line. */
.flist li {
  position: relative; padding-inline-start: 32px;
  color: var(--ink-dim); font-size: .94rem;
}
.flist li::before {
  content: ""; position: absolute; inset-inline-start: 6px; top: .58em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--teal); box-shadow: 0 0 10px rgba(94,234,212,.6); transform: rotate(45deg);
}
.flist strong { color: var(--ink); font-weight: 600; }
.flist--violet li::before { background: var(--violet); box-shadow: 0 0 10px rgba(167,139,250,.6); }
.flist--amber li::before { background: var(--amber); box-shadow: 0 0 10px rgba(251,191,36,.6); }

/* Check list */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: .92rem; color: var(--ink-dim); }
.checks li svg { margin-top: .28em; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); }
table.data { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 560px; }
table.data th, table.data td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500; background: var(--panel); position: sticky; top: 0;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: rgba(255,255,255,.018); }
table.data td.num { font-family: var(--mono); text-align: end; }

/* ---------- Code ---------- */
.code {
  background: #05070a; border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; overflow-x: auto; font-size: .82rem; line-height: 1.7; margin: 0;
  color: var(--ink-dim);
}
.code .c-key { color: var(--violet); }
.code .c-str { color: var(--teal); }
.code .c-num { color: var(--amber); }
.code .c-com { color: var(--ink-mute); font-style: italic; }
.code .c-fn  { color: var(--blue); }
.code .c-cmd { color: var(--ink); }
.code .c-pr  { color: var(--teal); user-select: none; }

/* ---------- Terminal ---------- */
.term {
  background: #04060a; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  font-family: var(--mono); font-size: .8rem; line-height: 1.75; overflow: hidden;
  box-shadow: var(--shadow-3);
}
.term__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.term__dot { width: 10px; height: 10px; border-radius: 50%; }
.term__title { margin-inline-start: 8px; font-size: .72rem; color: var(--ink-mute); letter-spacing: .06em; }
.term__body { padding: 16px 18px; min-height: 260px; white-space: pre-wrap; word-break: break-word; color: var(--ink-dim); }
.term__body .ok { color: var(--teal); }
.term__body .warn { color: var(--amber); }
.term__body .err { color: var(--red); }
.term__body .pr { color: var(--violet); }
.term__body .hl { color: var(--ink); }
.caret { display: inline-block; width: 8px; height: 1.05em; background: var(--teal); vertical-align: text-bottom; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ---------- Demo controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ctrl { display: flex; flex-direction: column; gap: 5px; min-width: 150px; flex: 1 1 150px; }
.ctrl label { font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); display: flex; justify-content: space-between; gap: 8px; }
.ctrl label b { color: var(--teal); font-weight: 500; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px;
  background: var(--line-2); cursor: pointer; margin: 8px 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--teal); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--teal); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--teal);
  border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--teal); cursor: pointer;
}
select, input[type="text"], input[type="email"], input[type="number"] {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 9px 12px; font-size: .9rem; width: 100%;
}
select:focus, input:focus { border-color: var(--teal); outline: none; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg button {
  border: 0; background: transparent; color: var(--ink-mute); padding: 7px 13px;
  border-radius: var(--r-sm); cursor: pointer; font-size: .82rem; font-weight: 550; transition: background .18s, color .18s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--panel-3); color: var(--teal); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .88rem; color: var(--ink-dim); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 40px; height: 22px; border-radius: 100px; background: var(--line-2); position: relative; transition: background .22s; flex: none; }
.switch__track::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-mute); transition: transform .22s var(--ease), background .22s;
}
.switch input:checked + .switch__track { background: rgba(94,234,212,.28); }
.switch input:checked + .switch__track::after { transform: translateX(18px); background: var(--teal); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--teal); outline-offset: 2px; }

.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: 14px; }
.readout__item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.readout__k { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.readout__v { font-family: var(--mono); font-size: 1.22rem; font-weight: 600; color: var(--teal); line-height: 1.3; }
.readout__v.amber { color: var(--amber); }
.readout__v.violet { color: var(--violet); }
.readout__v.red { color: var(--red); }
.readout__v.plain { color: var(--ink); }
/* Teal is already the default, but the demos toggle this class against
   .amber at runtime, so it has to exist to switch back to. */
.readout__v.teal { color: var(--teal); }

.demo-canvas { width: 100%; display: block; background: #04060a; border-radius: var(--r); cursor: crosshair; touch-action: none; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-inline-start: 30px; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 7px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--teal), var(--violet), transparent); }
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; inset-inline-start: -30px; top: 7px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--teal); box-shadow: 0 0 12px rgba(94,234,212,.5);
}
.tl-item--future::before { border-color: var(--line-3); box-shadow: none; }
.tl-item--future .tl-item__title { color: var(--ink-dim); }
.tl-item__when { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.tl-item__title { font-size: 1.05rem; font-weight: 620; margin: 3px 0 6px; }

/* ---------- Accordion ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-elev); overflow: hidden; }
.acc + .acc { margin-top: 10px; }
.acc summary {
  cursor: pointer; padding: 16px 20px; font-weight: 570; font-size: .98rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: background .18s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--panel); }
.acc summary::after {
  content: "+"; font-family: var(--mono); font-size: 1.3rem; color: var(--teal); flex: none;
  transition: transform .25s var(--ease); line-height: 1;
}
.acc[open] summary::after { transform: rotate(45deg); }
.acc__body { padding: 0 20px 20px; color: var(--ink-dim); font-size: .93rem; border-top: 1px solid var(--line); padding-top: 16px; }

/* ---------- Notes / callouts ---------- */
.note {
  border-inline-start: 3px solid var(--teal); background: rgba(94,234,212,.05);
  padding: 16px 20px; border-radius: 0 var(--r) var(--r) 0; font-size: .92rem; color: var(--ink-dim);
}
.note--amber { border-inline-start-color: var(--amber); background: rgba(251,191,36,.05); }
.note--violet { border-inline-start-color: var(--violet); background: rgba(167,139,250,.05); }
.note--red { border-inline-start-color: var(--red); background: rgba(248,113,113,.05); }
.note strong { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-elev); padding-block: 56px 32px; margin-top: 40px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__col h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; font-weight: 500; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer__col a { color: var(--ink-dim); font-size: .88rem; }
.footer__col a:hover { color: var(--teal); }
.footer__bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--ink-mute);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Scroll progress ---------- */
.progress-bar {
  position: fixed; top: 0; inset-inline-start: 0; height: 2px; z-index: 200;
  background: linear-gradient(90deg, var(--teal), var(--violet)); width: 0%;
  transition: width .1s linear; pointer-events: none;
}

/* ---------- Misc ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg-elev); padding: 14px 0; }
.marquee__track { display: flex; gap: 48px; width: max-content; animation: scroll-x 44s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item { font-family: var(--mono); font-size: .78rem; letter-spacing: .09em; color: var(--ink-mute); text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; gap: 12px; }
.marquee__item::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); flex: none; }

.kbd {
  display: inline-block; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line-2);
  border-bottom-width: 2px; background: var(--panel-2); font-family: var(--mono); font-size: .78rem; color: var(--ink-dim);
}
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Page compositions
   ========================================================================== */

/* Two-column split used across product + home sections */
/* Column ratios come through --split, not through grid-template-columns.
   An inline style beats a stylesheet rule, so a page that set the columns
   directly kept them at every width — the About page sat in two columns on a
   390px phone, giving the prose about four words a line. Setting a custom
   property instead leaves the breakpoint below free to do its job. */
.split { display: grid; grid-template-columns: var(--split, 1fr 1fr); gap: 56px; align-items: start; }
.split--wide-left { grid-template-columns: 1.25fr .75fr; }
.split--wide-right { grid-template-columns: .8fr 1.2fr; }
.split--center { align-items: center; }
@media (max-width: 940px) {
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; gap: 40px; }
}

.flagship { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 940px) { .flagship { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Activity feed ---------- */
.feed { display: block; }
.feed__row {
  display: grid; grid-template-columns: 190px 1fr auto; gap: 20px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--ink-dim);
  text-decoration: none; transition: background .18s;
}
.feed__row:last-child { border-bottom: 0; }
.feed__row:hover { background: rgba(255,255,255,.022); text-decoration: none; }
.feed__name { color: var(--teal); font-size: .86rem; font-weight: 500; }
.feed__desc { font-size: .86rem; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__when { font-size: .76rem; color: var(--ink-mute); white-space: nowrap; }
@media (max-width: 700px) {
  .feed__row { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .feed__desc { grid-column: 1 / -1; white-space: normal; }
}
.feed__skeleton { height: 52px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.feed__skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.feed:not(.is-loading) .feed__skeleton { display: none; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  border: 1px solid var(--line-2); padding: clamp(40px, 6vw, 72px) 32px;
  background:
    radial-gradient(900px 320px at 50% -10%, rgba(251,191,36,.10), transparent 70%),
    linear-gradient(180deg, var(--panel) 0%, var(--bg-elev) 100%);
  text-align: center;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }

/* ---------- Product page hero ---------- */
.phero { position: relative; padding-block: clamp(56px, 8vw, 108px) clamp(40px, 5vw, 64px); overflow: hidden; }
.phero__inner { position: relative; z-index: 1; }
.phero h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.phero__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.phero__meta-item { font-size: .82rem; color: var(--ink-mute); }
.phero__meta-item b { display: block; font-family: var(--mono); color: var(--ink); font-weight: 500; font-size: .95rem; }
.phero__meta-item b.is-live { color: var(--teal); }

/* ---------- Spec table ---------- */
.spec { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.spec__row { display: grid; grid-template-columns: minmax(88px, 150px) 1fr; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.spec__row:last-child { border-bottom: 0; }
.spec__row:nth-child(odd) { background: rgba(255,255,255,.012); }
.spec__k { font-family: var(--mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); }
.spec__v { color: var(--ink-dim); }
@media (max-width: 640px) { .spec__row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Demo shell ---------- */
.demo { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg-elev); overflow: hidden; box-shadow: var(--shadow-3); }
.demo__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 15px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.demo__label { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; color: var(--teal); margin: 0; }
.demo__stage { padding: 20px; }
.demo__side { padding: 20px; border-top: 1px solid var(--line); background: var(--panel); display: grid; gap: 18px; }
@media (min-width: 900px) {
  .demo__split { display: grid; grid-template-columns: 1fr 300px; }
  .demo__side { border-top: 0; border-inline-start: 1px solid var(--line); align-content: start; }
}
.demo__hint { font-size: .82rem; color: var(--ink-mute); display: flex; align-items: center; gap: 8px; }

/* ---------- Log output ---------- */
.log {
  font-family: var(--mono); font-size: .75rem; line-height: 1.85; background: #04060a;
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
  height: 170px; overflow-y: auto; color: var(--ink-mute); white-space: pre-wrap; word-break: break-word;
}
.log .ok { color: var(--teal); }
.log .warn { color: var(--amber); }
.log .err { color: var(--red); }
.log .hl { color: var(--ink); }
.log .vi { color: var(--violet); }

/* ---------- Legend ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .78rem; color: var(--ink-mute); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---------- Pipeline / stepper ---------- */
.steps { display: flex; flex-wrap: wrap; gap: 8px; }
.step {
  flex: 1 1 110px; padding: 11px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--panel); font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute); text-align: center;
  transition: border-color .25s, color .25s, background .25s, box-shadow .25s; cursor: pointer;
}
.step:hover { color: var(--ink-dim); border-color: var(--line-2); }
.step[aria-current="step"] { border-color: var(--teal); color: var(--teal); background: rgba(94,234,212,.08); box-shadow: var(--glow-teal); }
.step.is-done { color: var(--ink-dim); border-color: var(--line-2); }

/* ---------- Filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 14px; border-radius: 100px; border: 1px solid var(--line-2); background: var(--panel);
  color: var(--ink-dim); font-size: .82rem; cursor: pointer; transition: all .18s; white-space: nowrap;
}
.chip:hover { border-color: var(--line-3); color: var(--ink); }
.chip[aria-pressed="true"] { background: rgba(94,234,212,.1); border-color: var(--teal); color: var(--teal); }
.chip__n { font-family: var(--mono); font-size: .72rem; opacity: .65; margin-inline-start: 5px; }

/* ---------- Research cards ---------- */
.rcard {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-elev);
  padding: 18px 20px; transition: border-color .22s, transform .22s var(--ease);
}
.rcard:hover { border-color: var(--line-3); transform: translateY(-2px); }
.rcard__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px 14px; margin-bottom: 8px; flex-wrap: wrap;
}
.rcard__head > * { min-width: 0; }
.rcard h3 { font-size: 1.02rem; margin: 0; }
.rcard p { font-size: .88rem; color: var(--ink-dim); margin: 0 0 10px; }
.rcard__field { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------- Tier / pledge cards ---------- */
.tier {
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); padding: 26px;
  position: relative; transition: border-color .25s, transform .25s var(--ease);
}
.tier:hover { border-color: var(--line-3); transform: translateY(-3px); }
.tier--featured { border-color: rgba(251,191,36,.45); background: linear-gradient(180deg, rgba(251,191,36,.05), var(--bg-elev) 60%); }
.tier--featured::before {
  content: attr(data-flag); position: absolute; top: -11px; inset-inline-start: 24px;
  background: var(--amber); color: #2a1a00; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 11px; border-radius: 100px; font-weight: 600;
}
.tier__price { font-family: var(--mono); font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.tier__price small { font-size: .8rem; color: var(--ink-mute); font-weight: 400; }
.tier__name { font-size: 1.08rem; font-weight: 620; margin: 0; }
.tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; flex: 1; }
.tier ul li {
  position: relative; padding-inline-start: 25px;
  font-size: .87rem; color: var(--ink-dim);
}
.tier ul li::before {
  content: "\2713"; position: absolute; inset-inline-start: 0; top: 0;
  color: var(--teal); font-size: .85rem; line-height: 1.5;
}

/* ---------- Budget bars ---------- */
.bar { display: grid; gap: 6px; }
.bar__head { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; }
.bar__head b { font-weight: 550; color: var(--ink); }
.bar__head span { font-family: var(--mono); color: var(--teal); font-size: .84rem; }
.bar__track { height: 8px; border-radius: 100px; background: var(--panel-3); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--teal), var(--violet)); transition: width .6s var(--ease); }
.bar__fill--amber { background: linear-gradient(90deg, var(--amber), var(--amber-2)); }
.bar__note { font-size: .78rem; color: var(--ink-mute); }

/* ---------- Notify form ---------- */
.notify { display: flex; gap: 10px; flex-wrap: wrap; }
.notify input { flex: 1 1 240px; }
.notify .btn { flex: 0 0 auto; }
.form-msg { font-size: .85rem; margin-top: 12px; min-height: 1.2em; }
.form-msg.ok { color: var(--teal); }
.form-msg.err { color: var(--red); }

/* ---------- 404 ---------- */
.err-page {
  min-height: 62vh; display: grid; place-items: center; text-align: center;
  padding-block: 80px;
}
.err-page > .wrap { min-width: 0; max-width: min(var(--wrap-narrow), 100%); }
.err-code { font-family: var(--mono); font-size: clamp(4rem, 16vw, 9rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; }

/* ---------- Verdict block (capability demo) ---------- */
.verdict {
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 16px;
  background: var(--bg-elev); transition: border-color .25s, background .25s;
}
.verdict__label { font-family: var(--mono); font-size: .74rem; letter-spacing: .13em; color: var(--ink-mute); margin-bottom: 6px; }
.verdict__op { font-size: .74rem; color: var(--ink); margin-bottom: 8px; word-break: break-all; }
.verdict__why { font-size: .82rem; color: var(--ink-dim); line-height: 1.55; }
.verdict.is-allow { border-color: rgba(94,234,212,.5); background: rgba(94,234,212,.05); }
.verdict.is-allow .verdict__label { color: var(--teal); }
.verdict.is-deny { border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.05); }
.verdict.is-deny .verdict__label { color: var(--red); }

/* Spec tables sitting inside a card get a tighter key column still */
.card .spec__row { grid-template-columns: 92px 1fr; gap: 14px; padding-block: 11px; }
@media (max-width: 700px) { .card .spec__row { grid-template-columns: 1fr; gap: 3px; } }

/* The hero stat panel is narrow — keep it two-up rather than collapsing */
.panel .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 460px) { .panel .grid-2 { grid-template-columns: 1fr; } }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: 86px; }

/* ---------- Evidence tier meter ---------- */
.tier-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tier-meter::before { content: none; }
.tier-meter i {
  height: 7px; border-radius: 100px; background: var(--panel-3); display: block;
  position: relative;
}
.tier-meter i::after {
  content: attr(data-l); position: absolute; top: 13px; inset-inline-start: 0;
  font-family: var(--mono); font-size: .63rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-mute); white-space: nowrap;
}
.tier-meter { padding-bottom: 20px; }
.tier-meter i.on { background: var(--teal); box-shadow: 0 0 12px rgba(94,234,212,.45); }
.tier-meter i.on::after { color: var(--teal); }
.tier-meter[data-tier="speculative"] i.on { background: var(--red); box-shadow: 0 0 12px rgba(248,113,113,.45); }
.tier-meter[data-tier="speculative"] i.on::after { color: var(--red); }
.tier-meter[data-tier="design"] i.on { background: var(--amber); box-shadow: 0 0 12px rgba(251,191,36,.45); }
.tier-meter[data-tier="design"] i.on::after { color: var(--amber); }
.tier-meter[data-tier="reference"] i.on { background: var(--blue); box-shadow: 0 0 12px rgba(96,165,250,.45); }
.tier-meter[data-tier="reference"] i.on::after { color: var(--blue); }

/* ---------- Research index ---------- */
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.rcard--linked { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; }
.rcard--linked:hover { text-decoration: none; }
.rcard__more { margin-top: auto; padding-top: 12px; font-size: .82rem; color: var(--teal); font-weight: 550; }
.rcard--plain { opacity: .82; }
.rcard--plain:hover { opacity: 1; }
.rcard.is-hidden { display: none; }
.rcount { font-family: var(--mono); font-size: .8rem; color: var(--ink-mute); }

/* ---------- Optional background video slots ---------- */
.slot-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 0;
  transition: opacity 1s var(--ease);
  pointer-events: none;
}
.slot-video.is-in { opacity: .5; }
.hero .slot-video.is-in { opacity: .46; }

/* A scrim between the video and the copy. Without it the bright passes in a
   clip drop body-text contrast below readable — the gradient keeps the text
   side dark while the far side still shows the footage. */
.has-video::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,8,11,.94) 0%, rgba(6,8,11,.80) 38%,
                            rgba(6,8,11,.44) 72%, rgba(6,8,11,.30) 100%),
    linear-gradient(180deg, rgba(6,8,11,.60) 0%, rgba(6,8,11,0) 26%,
                            rgba(6,8,11,0) 62%, rgba(6,8,11,.72) 100%);
}
/* The copy sits above the scrim. */
.hero__inner, .phero__inner { position: relative; z-index: 1; }
.hero__canvas.is-superseded, canvas.is-superseded { opacity: 0; transition: opacity .8s var(--ease); }
.has-video { position: relative; }

/* ==========================================================================
   Chess board
   ========================================================================== */
.chess-wrap { position: relative; display: flex; gap: 12px; align-items: stretch; }

.chess-evalbar {
  width: 14px; flex: none; border-radius: 100px; overflow: hidden;
  background: #12181f; border: 1px solid var(--line);
  display: flex; flex-direction: column-reverse;
}
.chess-evalbar__fill {
  width: 100%; height: 50%;
  background: linear-gradient(180deg, #e8eef4, #cfd8e3);
  transition: height .5s var(--ease);
}

.chess-board {
  flex: 1; display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-3);
  max-width: 560px; margin-inline: auto; width: 100%;
}
.sq {
  position: relative; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.sq--light { background: #2b3b4d; }
.sq--dark  { background: #1a2634; }
.sq:hover  { filter: brightness(1.18); }

.pc {
  font-size: clamp(1.5rem, 5.2vw, 2.5rem); line-height: 1; user-select: none;
  pointer-events: none; display: block;
}
.pc--w { color: #f4f8fb; text-shadow: 0 1px 0 #0a0e13, 0 0 3px rgba(0,0,0,.8), 0 2px 5px rgba(0,0,0,.55); }
.pc--b {
  color: #0b1118;
  /* A real rim, so a black piece stays legible on a dark square. */
  text-shadow: 0 0 2px rgba(216,230,244,.95), 0 0 4px rgba(216,230,244,.6),
               0 2px 4px rgba(0,0,0,.6);
}

.sq.is-selected { background: rgba(94,234,212,.32) !important; }
.sq.is-last::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(251,191,36,.16); pointer-events: none;
}
.sq.is-target::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 26%; height: 26%; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(94,234,212,.5); pointer-events: none;
}
.sq.is-capture::before {
  content: ""; position: absolute; inset: 8%;
  border: 3px solid rgba(248,113,113,.65); border-radius: 50%; pointer-events: none;
}
.sq.is-check { background: rgba(248,113,113,.34) !important; }

.promo {
  position: absolute; inset: 0; margin: auto; height: fit-content; width: fit-content;
  display: flex; gap: 6px; padding: 10px;
  background: var(--panel); border: 1px solid var(--teal);
  border-radius: var(--r); box-shadow: var(--shadow-3); z-index: 5;
}
.promo__opt {
  width: 54px; height: 54px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: #2b3b4d; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.promo__opt:hover { border-color: var(--teal); background: #35475c; }
.promo__opt .pc { font-size: 2rem; }

/* Candidate move list */
.cand {
  display: grid; grid-template-columns: 54px 1fr 52px; gap: 10px; align-items: center;
  font-size: .8rem; padding: 5px 8px; border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.cand.is-pick { border-color: rgba(94,234,212,.4); background: rgba(94,234,212,.07); }
.cand__san { color: var(--ink); }
.cand.is-pick .cand__san { color: var(--teal); }
.cand__bar { height: 5px; border-radius: 100px; background: var(--panel-3); overflow: hidden; }
.cand__bar i { display: block; height: 100%; background: var(--ink-mute); border-radius: 100px; }
.cand.is-pick .cand__bar i { background: var(--teal); }
.cand__score { color: var(--ink-mute); text-align: end; font-size: .74rem; }

@media (max-width: 600px) {
  .chess-evalbar { width: 10px; }
  .cand { grid-template-columns: 46px 1fr 46px; gap: 8px; }
}

/* ---------- Portrait ---------- */
.portrait { position: relative; max-width: 420px; }
.portrait img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-3);
  filter: saturate(.92) contrast(1.03);
}
.portrait::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none;
  background: linear-gradient(180deg, rgba(94,234,212,.06) 0%, transparent 30%,
              rgba(6,8,11,.55) 100%);
}
.portrait__tag {
  position: absolute; inset-inline-start: 16px; bottom: 14px; z-index: 1;
  display: grid; gap: 1px;
}
.portrait__tag .mono { color: var(--ink); font-size: .92rem; font-weight: 500; }
/* Once the split has stacked, the portrait sits above the text — so on a
   phone it is the whole first screen, and the reader scrolls past a face to
   reach the sentence saying whose it is. Scaling with the viewport keeps it
   at 300px on a tablet and brings it to about 220px on a handset, which is a
   portrait rather than a wall. */
@media (max-width: 940px) {
  .portrait { max-width: min(300px, 58vw); margin-inline: auto; }
}

/* ---------- Figure with caption ---------- */
.figure { margin: 0; }
.figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.figure figcaption {
  margin-top: 12px; font-size: .82rem; color: var(--ink-mute); line-height: 1.55;
}


/* ==========================================================================
   Overflow containment
   Grid and flex items default to min-width:auto, which lets an
   overflow-x:auto descendant — a code block, a wide table — push the whole
   track wider than the viewport. Opting out is what keeps the page from
   scrolling sideways on a phone.
   ========================================================================== */
.grid > *,
.err-page > *,
.split > *,
.flagship > *,
.demo__split > *,
.footer__grid > *,
.hero__grid > *,
.rgrid > *,
.controls > *,
.readout > * { min-width: 0; }

.table-scroll, .code, .term, .log, .demo__stage, .demo__side { min-width: 0; max-width: 100%; }
.code { overflow-x: auto; }
.spec__v, .verdict__op, .feed__desc { min-width: 0; overflow-wrap: anywhere; }

/* The marquee is deliberately wider than the viewport; its clip is the point. */
.marquee { overflow: hidden; }

/* ==========================================================================
   Adaptive layer
   Three regimes the base scale does not cover on its own: very narrow phones,
   short viewports (a phone held sideways), and very large displays.
   ========================================================================== */

/* ---------- Very narrow phones (320–420px) ---------- */
@media (max-width: 480px) {
  /* Long evidence-tier labels wrap instead of forcing the card wide. */
  .badge { white-space: normal; }
}

@media (max-width: 420px) {
  .wrap { padding-inline: 16px; }

  /* Long button labels must be allowed to break rather than push the page wide. */
  .btn { white-space: normal; text-align: center; line-height: 1.35; }
  .btn--lg { padding: 13px 20px; font-size: .97rem; }
  .btn-row { gap: 10px; }
  .btn-row > .btn { flex: 1 1 100%; }

  .card, .card--pad-lg { padding: 20px; }
  .demo__stage, .demo__side, .panel__body { padding: 16px; }
  .demo__head { padding: 13px 16px; }
  .panel__foot { padding: 12px 16px; }

  .cta-band { padding-inline: 20px; border-radius: var(--r-lg); }
  .timeline { padding-inline-start: 26px; }

  /* Segmented controls stack instead of squeezing. */
  .seg { width: 100%; }
  .seg button { flex: 1 1 auto; }

  .chips { gap: 6px; }
  .chip { padding: 8px 12px; font-size: .8rem; }

  .tier__price { font-size: 1.7rem; }
  .err-code { font-size: 4.5rem; }
}

/* Give the chess board every pixel it can get on a small phone. */
@media (max-width: 480px) {
  .chess-wrap { gap: 8px; }
  .chess-evalbar { width: 8px; }
  .demo__stage { padding-inline: 12px; }
  .chess-board { border-radius: var(--r-sm); }
}

/* ---------- Short viewports: phone held sideways, small laptops ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero, .phero { padding-block: 40px 32px; }
  .section { padding-block: 44px; }
  .section--tight { padding-block: 32px; }
  .site-header { position: static; }   /* a sticky bar costs too much of a 390px-tall screen */
}

/* ---------- Large displays ---------- */
@media (min-width: 1600px) {
  .section { padding-block: clamp(96px, 7vw, 150px); }
  .hero { padding-block: clamp(110px, 9vw, 190px) clamp(72px, 6vw, 120px); }
  .grid { gap: 24px; }
  .split { gap: 72px; }
  .lede { max-width: 62ch; }
}

@media (min-width: 2000px) {
  /* Past this width extra columns read better than wider cards. */
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
  .rgrid  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
  .gridlines { background-size: 88px 88px; }
}

/* ---------- Coarse pointers: give touch targets room ---------- */
@media (pointer: coarse) {
  .nav__link { padding: 11px 14px; }
  .chip { padding: 10px 15px; }
  .seg button { padding: 10px 15px; }
  .btn--sm { padding: 10px 16px; }
  .acc summary { padding: 18px 20px; }
  .switch__track { width: 46px; height: 26px; }
  .switch__track::after { width: 20px; height: 20px; }
  .switch input:checked + .switch__track::after { transform: translateX(20px); }
  input[type="range"] { height: 6px; }
  input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; }
  input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .progress-bar, .marquee, .cta-band, .demo, .hero__canvas,
  .gridlines, .slot-video, .skip-link { display: none !important; }
  body { background: #fff; color: #111; }
  a { color: #111; text-decoration: underline; }
  .card, .panel, .table-scroll { border-color: #ccc; }
}

/* ---------- Diagrams ---------- */
.diagram {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-elev) 100%);
  padding: 18px;
  overflow: hidden;
}
.diagram img { width: 100%; height: auto; display: block; }
.diagram figcaption {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-mute); line-height: 1.55;
}
.diagram figcaption b { color: var(--ink-dim); font-weight: 550; }
.diagram--bare { padding: 0; border: 0; background: none; }
.diagram--bare img { border: 1px solid var(--line); border-radius: var(--r-lg); }

/* The hint is declared before the media query that reveals it — the other way
   round and this base rule would win on order and keep it hidden. */
.diagram__hint {
  display: none; font-size: .74rem; color: var(--ink-mute);
  font-family: var(--mono); margin-top: 10px;
}

/* On a phone a wide diagram becomes unreadable when squeezed; let it scroll
   at a legible size instead of shrinking to nothing. */
@media (max-width: 720px) {
  .diagram { padding: 12px; }
  .diagram__scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    /* a hairline edge so it reads as scrollable, not clipped */
    mask-image: linear-gradient(90deg, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .diagram__scroll img { width: 680px; max-width: none; }
  .diagram__hint { display: block; }
}

/* ============================================================
   Plain-English layer — glossed terms, and Cypha's control.
   The markup is injected by assets/js/glossary.js; with JS off
   none of this applies and the prose is untouched.
   ============================================================ */
.gloss {
  font: inherit; color: inherit; background: none; padding: 0;
  border: 0; border-bottom: 1px dotted var(--line-3);
  cursor: help; transition: border-color .15s ease, color .15s ease;
}
.gloss:hover, .gloss:focus-visible { color: var(--teal); border-bottom-color: var(--teal); }
body.gloss-on .gloss { border-bottom-color: var(--teal-deep); }
body.gloss-on .gloss--picked { color: var(--teal); border-bottom-style: solid; }

.gloss__pop {
  display: block; margin: 10px 0; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-inline-start: 2px solid var(--teal);
  border-radius: 8px; font-size: .86rem; line-height: 1.55; color: var(--ink-dim);
}
.gloss__pop b { display: block; color: var(--ink); font-size: .8rem; margin-bottom: 4px; }
.gloss__auto { color: var(--ink-mute); font-size: .92em; }

/* Lives inside the shared bar now; no positioning of its own. */
.gloss-ctl { display: flex; align-items: center; gap: 10px; flex: none; }
.gloss-ctl__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--panel-3); color: var(--ink-dim);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
}
.gloss-ctl.is-on .gloss-ctl__btn { background: var(--teal-deep); color: #06080b; }
.gloss-ctl__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-3); }
.gloss-ctl.is-on .gloss-ctl__dot { background: #06080b; }
.gloss-ctl__stat { font-size: .68rem; color: var(--ink-mute); }
.gloss-ctl__stat:empty { display: none; }
.gloss-ctl__reset {
  background: none; border: 0; cursor: pointer; padding: 4px 8px;
  font-family: var(--mono); font-size: .66rem; color: var(--ink-mute);
}
.gloss-ctl__reset:hover { color: var(--ink-dim); }
.gloss-ctl:not(.is-on) .gloss-ctl__reset { display: none; }

/* The toolbar is a horizontally scrolling strip with its scrollbar hidden, and
   on a phone it held 689px of controls inside a 299px window. "Explain the
   jargon" sat at x=406 on a 375px screen -- thirty-one pixels past the right
   edge, with nothing on screen to suggest anything was there. A marketer
   reviewing the site read the whole thing on his phone and reported that we
   never explain our jargon; we do, and we had hidden the switch.

   The responsive audit passed throughout, correctly: the strip is meant to
   scroll, so there is no page overflow to find. Off-screen is not overflow.

   So below the phone breakpoint the jargon control comes first, its
   term count gives up its space to the label that matters, and the strip
   gets a fade at the edge so it is visibly a strip that continues. */
@media (max-width: 720px) {
  .gloss-ctl { order: -1; }
  .gloss-ctl__stat { display: none; }
  .toolbar__items {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  [dir="rtl"] .toolbar__items {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  }
}

@media print { .gloss { border-bottom: 0; } }
.gloss__pop.is-dict { border-inline-start-color: var(--violet); }
.gloss__pop.is-float {
  position: fixed; z-index: 70; margin: 0;
  max-width: min(22rem, calc(100vw - 24px));
  max-height: min(40vh, calc(100vh - 24px));
  overflow: auto;
  box-shadow: var(--shadow-3);
}
.gloss__pos { font-weight: 400; color: var(--ink-mute); font-size: .92em; }
.gloss__src {
  display: block; margin-top: 6px; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
}
/* Did you mean — the near words offered when a lookup misses. */
.gloss__near { display: block; margin-top: 6px; color: var(--ink-mute); }
.gloss__near-btn {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--violet); border-bottom: 1px dotted currentColor;
}
.gloss__near-btn:hover, .gloss__near-btn:focus-visible { color: var(--ink); }

/* ============================================================
   Voice — read aloud, and speak to navigate.
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.voice-ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.voice-ctl__btn, .voice-ctl__icon {
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--panel-3); color: var(--ink-dim);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
}
.voice-ctl__btn { padding: 6px 12px; }
.voice-ctl__icon { padding: 6px 9px; font-size: .62rem; }
.voice-ctl.is-reading [data-act="read"] { background: var(--teal-deep); color: #06080b; }
.voice-ctl.is-listening [data-act="listen"] { background: var(--violet-2); color: #06080b; }
.voice-ctl__stat { font-size: .66rem; color: var(--ink-mute); }
.voice-ctl__btn:focus-visible, .voice-ctl__icon:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* The block currently being read. */
.voice-at {
  background: rgba(94, 234, 212, .07);
  box-shadow: -3px 0 0 var(--teal);
  border-radius: 3px;
}

@media print { .voice-at { background: none; box-shadow: none; } }

/* ============================================================
   Related pages and site search.
   ============================================================ */
.related__item { display: block; text-decoration: none; }
.related__item:hover { text-decoration: none; }
.related__item h3 { color: var(--ink); }
.related__item:hover h3 { color: var(--teal); }

.sitesearch {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3, 5, 8, .72); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(40px, 12vh, 140px) 16px 16px;
}
.sitesearch__panel {
  width: min(100%, 640px);
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 14px; box-shadow: var(--shadow-3);
}
.sitesearch input {
  width: 100%; padding: 12px 14px; font-size: 1rem;
  background: var(--bg-elev); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 9px;
}
.sitesearch input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.sitesearch__out { margin-top: 10px; max-height: min(52vh, 420px); overflow: auto; }
.sitesearch__out a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 8px; color: var(--ink-dim); text-decoration: none;
}
.sitesearch__out a:hover, .sitesearch__out a:focus-visible {
  background: var(--panel-2); color: var(--ink); text-decoration: none;
}
.sitesearch__out b { color: var(--ink-mute); font-size: .72rem; font-weight: 500; }
@media print { .sitesearch, .related { display: none; } }


/* ============================================================
   The shared bottom toolbar.

   One bar, not two. Two independently positioned fixed elements
   overlapped each other on a narrow screen — and the page's own
   buttons with them. This is a single row that scrolls sideways
   instead of growing taller, so it can never take more than one
   row of a small viewport, and it collapses to a tab.
   ============================================================ */
.toolbar {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: stretch; gap: 6px;
  max-width: min(100vw - 24px, 1100px);
  padding: 6px; padding-inline-start: 4px;
  background: rgba(10, 14, 19, .94); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); border-radius: 999px;
  box-shadow: var(--shadow-3);
  transition: max-width .22s ease, padding .22s ease;
}
.toolbar__items {
  display: flex; align-items: center; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px 6px 2px 2px;
}
.toolbar__items::-webkit-scrollbar { display: none; }

.toolbar__grip {
  flex: none; width: 34px; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--panel-2);
  display: grid; place-items: center;
}
.toolbar__grip:hover { background: var(--panel-3); }
.toolbar__grip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.toolbar__grip-icon {
  width: 12px; height: 12px; border-inline-end: 2px solid var(--ink-dim);
  border-bottom: 2px solid var(--ink-dim); border-radius: 2px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.toolbar.is-collapsed .toolbar__grip-icon { transform: rotate(-135deg) translate(-2px, -2px); }

/* Collapsed: just the tab. The items keep their layout so nothing
   reflows when it reopens — they are clipped, not rebuilt. */
.toolbar.is-collapsed { max-width: 46px; padding-inline-end: 6px; }
.toolbar.is-collapsed .toolbar__items {
  width: 0; padding: 0; overflow: hidden; pointer-events: none;
}

/* Separator between the two groups, only when both are present. */
.toolbar__items > * + * {
  border-inline-start: 1px solid var(--line-2); padding-inline-start: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .toolbar, .toolbar__grip-icon { transition: none; }
}
@media print { .toolbar { display: none; } }

/* Reserve the bar's height so it never permanently hides the footer. */
body.has-toolbar { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
@media print { body.has-toolbar { padding-bottom: 0; } }

/* ---------- Language selector ----------
   Top right of the header, always visible — it sits outside .nav__links so a
   phone does not have to open the hamburger to find it. The list is plain
   links rendered by the builder; the only thing script adds is the toggle. */
.langsel { position: relative; margin-inline-start: 10px; flex: none; }
.langsel__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line-2);
  color: var(--ink-dim); font: inherit; font-size: .82rem; line-height: 1;
  cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.langsel__btn:hover { color: var(--ink); border-color: var(--line); background: var(--panel-3); }
.langsel__globe { width: 15px; height: 15px; flex: none; opacity: .85; }
.langsel__cur { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langsel__caret {
  width: 6px; height: 6px; flex: none; margin-inline-start: 1px;
  border-inline-end: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s var(--ease);
}
.langsel.is-open .langsel__caret { transform: rotate(-135deg) translate(-1px, -1px); }

/* The browser's own preferred language, if we have it and you are not
   reading it. A dot — never a redirect. */
.langsel.has-hint .langsel__btn::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 6px rgba(94,234,212,.7); flex: none;
}

.langsel__menu {
  display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 120;
  min-width: 232px; max-width: min(280px, calc(100vw - 28px));
  max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 6px;
}
.langsel.is-open .langsel__menu { display: block; }
.langsel__menu a {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  padding: 9px 11px; border-radius: 8px; color: var(--ink-dim);
}
.langsel__menu a:hover { background: var(--panel-3); color: var(--ink); text-decoration: none; }
.langsel__endo { font-size: .95rem; color: var(--ink); }
.langsel__name {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute); flex: none;
}
.langsel__menu a.is-current { background: rgba(94,234,212,.07); }
.langsel__menu a.is-current .langsel__endo { color: var(--teal); }
.langsel__menu a.is-suggested .langsel__name { color: var(--teal); }
.langsel__menu a.is-suggested .langsel__name::after {
  content: " \00b7"; color: var(--teal);
}

@media (max-width: 900px) {
  /* Hamburger keeps the corner; the globe sits just inside it. */
  .langsel { order: 2; margin-inline-start: auto; }
  .nav__toggle { order: 3; margin-inline-start: 10px; }
}
@media (max-width: 420px) {
  .langsel__cur { display: none; }
  .langsel__btn { padding: 7px 9px; }
}

/* ---------- Translation notice ----------
   Said once, at the top of the page, in the reader's own language. */
.i18n-note {
  margin: 20px 0 0; padding: 11px 15px;
  border-inline-start: 3px solid var(--violet);
  background: rgba(167,139,250,.06); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-dim); font-size: .86rem; line-height: 1.55;
}
[dir="rtl"] .i18n-note { border-radius: var(--r-sm) 0 0 var(--r-sm); }

/* ---------- Right-to-left ----------
   Almost everything is handled by the logical properties above. What is left
   is genuine geometry: things drawn as arrows, and the two elements that are
   centred with a physical translate. */
[dir="rtl"] .toolbar__grip-icon { transform: scaleX(-1); }
[dir="rtl"] .langsel__caret { transform: rotate(45deg) translate(-1px, -1px); }
[dir="rtl"] .skip-link { border-radius: 0 0 0 var(--r); }
/* Code, identifiers and URLs read left to right inside RTL prose. Without
   this, "github.com/odin-loki" comes out as "com/odin-loki.github": the
   browser is right to lay out the runs right-to-left, because the paragraph
   is right-to-left — the string just is not Arabic, and has to say so. */
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] samp, [dir="rtl"] kbd,
[dir="rtl"] .mono, [dir="rtl"] .panel__title, [dir="rtl"] .spec__k,
[dir="rtl"] .stat__k, [dir="rtl"] .term__title, [dir="rtl"] .badge--mono,
[dir="rtl"] .chip__n, [dir="rtl"] .kv__k {
  direction: ltr; unicode-bidi: isolate; text-align: start;
}

/* A measured value is a different case from a code span. "1.62 m" came out as
   "m 1.62" — the unit is a Latin letter, so an RTL paragraph puts it first —
   but some of these boxes hold a translated word instead of a number, and
   forcing them all left-to-right would mis-set those. `plaintext` resolves
   each box on its own first strong character: a number reads LTR, an Arabic
   word reads RTL, and the box itself stays where the locale put it. */
[dir="rtl"] .readout__v, [dir="rtl"] .phero__meta-item b,
[dir="rtl"] .product__meta .badge, [dir="rtl"] .fieldnav__count {
  unicode-bidi: plaintext;
}

/* ---------- Header at intermediate widths ----------
   The header used to be one row of seven links plus a button, which fitted
   English on a wide laptop and nothing else. Translating the site made that
   obvious: Russian needs about 500px more than English for exactly the same
   navigation, and Spanish, French and Portuguese are not far behind.

   Rather than pick a breakpoint per language — there is no honest way to guess
   one — the row gives up ornament as space runs out, in the order it can most
   afford to: the tagline, then the endonym next to the globe, then the two
   links that are reachable elsewhere (Beta lives in the Products menu, and the
   Back PBSD button already goes to the campaign), then padding. Every locale
   ends up clearing 900px, which is where the hamburger takes over anyway.

   Measured with tools/qa/responsive-audit.js across all ten languages. */
@media (min-width: 901px) and (max-width: 1560px) {
  .brand__sub { display: none; }
}
@media (min-width: 901px) and (max-width: 1320px) {
  .nav { gap: 14px; }
  .nav__link { padding: 7px 9px; font-size: .84rem; }
  .nav__cta { margin-inline-start: 6px; }
  .langsel { margin-inline-start: 6px; }
  .langsel__cur { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .nav__link--extra { display: none; }
  .nav { gap: 10px; }
  .nav__link { padding: 7px 7px; font-size: .82rem; }
}

/* The one row in the selector that leaves the site. It is set apart because
   it should be: everything above it is this site's own writing, and this is
   a machine's. */
.langsel__machine {
  /* Eleventh of eleven rows, in a menu that scrolls once the viewport is
     short — so it sticks to the bottom rather than hiding below the fold.
     It is the row a reader who speaks none of the ten most needs. */
  position: sticky; bottom: -6px; z-index: 1;
  margin-top: 4px; padding-top: 11px;
  border-top: 1px solid var(--line-2);
  border-radius: 0 0 8px 8px;
  background: var(--bg-elev);
}
.langsel__machine .langsel__endo { font-size: .86rem; color: var(--ink-dim); }
.langsel__machine .langsel__name { color: var(--ink-mute); }
.langsel__machine::after {
  content: "\2197"; margin-inline-start: 2px; color: var(--ink-mute); font-size: .8rem;
}
.langsel__machine:hover .langsel__endo { color: var(--ink); }

/* ---------- Where an article sits in its field ----------
   Forty-six research articles, and until now the only way out of one was
   back to the shelf. Anyone working through a subject had to return to the
   index between every piece. This is the row that lets them just keep
   reading — and the middle of it is the shelf, already filtered. */
.eyebrow--link { display: inline-block; border-bottom: 1px solid transparent; }
.eyebrow--link:hover { color: var(--teal); border-bottom-color: currentColor; text-decoration: none; }

/* When a ledger was written and when it last moved. Google will not take a date
   in the structured data on trust unless the reader can see the same date, and
   a reader deciding whether to trust a figure wants to know its age anyway. */
.dateline { margin: -8px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.dateline time { color: var(--ink-mute); }

.fieldnav { padding-block: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.fieldnav__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
}
.fieldnav__side {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 12px 14px; border-radius: var(--r); border: 1px solid transparent;
}
a.fieldnav__side:hover { border-color: var(--line-2); background: var(--panel); text-decoration: none; }
.fieldnav__side--next { text-align: end; }
.fieldnav__dir {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.fieldnav__side--prev .fieldnav__dir::before { content: "\2190\00a0"; }
.fieldnav__side--next .fieldnav__dir::after  { content: "\00a0\2192"; }
.fieldnav__name {
  color: var(--ink-dim); font-size: .95rem; font-weight: 560;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.fieldnav__side:hover .fieldnav__name { color: var(--ink); }

.fieldnav__mid {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-2);
  flex: none;
}
.fieldnav__mid:hover { border-color: var(--teal); text-decoration: none; }
.fieldnav__count { font-size: .72rem; color: var(--ink-mute); }
.fieldnav__field { font-size: .82rem; color: var(--ink-dim); white-space: nowrap; }
.fieldnav__mid:hover .fieldnav__field { color: var(--teal); }

@media (max-width: 720px) {
  /* The field pill moves under the two arrows rather than squeezing between
     them, which is what stops a long field name from crushing both names. */
  .fieldnav__inner { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fieldnav__mid { grid-column: 1 / -1; grid-row: 1; flex-direction: row; gap: 10px;
                   justify-self: center; }
  .fieldnav__side { padding: 10px 12px; }
  .fieldnav__name { font-size: .88rem; }
}