/* Auris, the one stylesheet for auris.chat.
   Owns the Ink design system (true black + one blue) and every component the site draws from:
   the landing page, the technical page, the white paper, the privacy policy, and the whole
   documentation system (sidebar, contents rail, pagers, search, diagrams). One file so pages
   cannot drift apart. Colours are the brand SVG's own blues; nothing here loads a webfont, a
   script, or any other external origin: the site's privacy claim has to hold for the site
   itself, not just the app. Generated pages come from tools/site-assets/build-site.py. */

/* ── palette ─────────────────────────────────────────────────────────────── */

:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --surface-3: #EFF2F7;
  --line: #D7DDE7;
  --line-soft: #E6EAF1;

  --text: #080B11;
  --text-2: #4F5866;
  --text-3: #626B7A;

  --blue: #2A5CF0;          /* links + accents on this ground   */
  --blue-fill: #3166F6;     /* brand blue, filled surfaces      */
  --blue-2: #68A6F8;        /* brand secondary                  */
  --on-blue: #FFFFFF;
  --blue-soft: rgba(49, 102, 246, .08);
  --blue-line: rgba(49, 102, 246, .22);

  --good: #17794A;
  --good-soft: rgba(23, 121, 74, .09);
  --warn: #8A6410;
  --warn-soft: rgba(138, 100, 16, .10);
  --bad: #9E3B45;
  --bad-soft: rgba(158, 59, 69, .09);

  --shadow: 0 1px 2px rgba(10, 12, 15, .04), 0 12px 34px rgba(10, 12, 15, .07);
  --shadow-sm: 0 1px 2px rgba(10, 12, 15, .05);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Atmosphere is themed like any other surface. On white, a black-background render at low
     opacity is not "subtle", it is a grey smudge sitting on top of the body copy, so light mode
     paints its own wash instead of borrowing the dark art. */
  --atmos-hero: radial-gradient(78% 62% at 82% 6%, rgba(49, 102, 246, .17), rgba(49, 102, 246, .05) 46%, transparent 72%);
  --atmos-mesh: radial-gradient(60% 100% at 50% 0%, rgba(49, 102, 246, .10), transparent 68%);
  --atmos-size: 100% 100%;
  --atmos-pos: center;
  --atmos-opacity: 1;
  --atmos-mask: none;

  --wrap: 1080px;
  --wrap-wide: 1280px;
  --gap: clamp(16px, 2.2vw, 24px);
  --section: clamp(64px, 9vw, 108px);
  --radius: 18px;
  --radius-sm: 12px;
  --nav-h: 84px;
}

/* Three states, not two. An explicit choice stamps data-theme on the root; the default "system"
   setting stamps nothing, so only prefers-color-scheme separates light from dark there. The media
   query is guarded so an explicit light choice beats a dark OS, and the stamped dark block repeats
   the tokens so the toggle wins in the other direction too. Components only ever read the tokens,
   never a colour declared inside one of these blocks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #0A0C0F;
    --surface-2: #06080A;
    --surface-3: #10131A;
    --line: #1B1F26;
    --line-soft: #111419;

    --text: #F3F6FA;
    --text-2: #98A2B0;
    --text-3: #818B99;

    --blue: #6AA1FF;
    --blue-fill: #3166F6;
    --blue-2: #68A6F8;
    --on-blue: #FFFFFF;
    --blue-soft: rgba(106, 161, 255, .10);
    --blue-line: rgba(106, 161, 255, .24);

    --good: #4CC585;
    --good-soft: rgba(76, 197, 133, .11);
    --warn: #E0A83C;
    --warn-soft: rgba(224, 168, 60, .11);
    --bad: #E58089;
    --bad-soft: rgba(229, 128, 137, .11);

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 48px rgba(0, 0, 0, .55);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --atmos-hero: url("media/art/atmos-hero.jpg");
    --atmos-mesh: url("media/art/atmos-mesh.jpg");
    --atmos-size: 1500px auto;
    --atmos-pos: right -120px top -160px;
    --atmos-opacity: .85;
    --atmos-mask: radial-gradient(120% 90% at 78% 18%, #000 30%, transparent 72%);
  }
}
:root[data-theme="dark"] {
    --bg: #000000;
    --surface: #0A0C0F;
    --surface-2: #06080A;
    --surface-3: #10131A;
    --line: #1B1F26;
    --line-soft: #111419;

    --text: #F3F6FA;
    --text-2: #98A2B0;
    --text-3: #818B99;

    --blue: #6AA1FF;
    --blue-fill: #3166F6;
    --blue-2: #68A6F8;
    --on-blue: #FFFFFF;
    --blue-soft: rgba(106, 161, 255, .10);
    --blue-line: rgba(106, 161, 255, .24);

    --good: #4CC585;
    --good-soft: rgba(76, 197, 133, .11);
    --warn: #E0A83C;
    --warn-soft: rgba(224, 168, 60, .11);
    --bad: #E58089;
    --bad-soft: rgba(229, 128, 137, .11);

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 48px rgba(0, 0, 0, .55);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --atmos-hero: url("media/art/atmos-hero.jpg");
    --atmos-mesh: url("media/art/atmos-mesh.jpg");
    --atmos-size: 1500px auto;
    --atmos-pos: right -120px top -160px;
    --atmos-opacity: .85;
    --atmos-mask: radial-gradient(120% 90% at 78% 18%, #000 30%, transparent 72%);
}

/* ── base ────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

img, svg { max-width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

::selection { background: var(--blue-soft); }
mark { background: var(--blue-soft); color: inherit; border-radius: 3px; padding: 0 .1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }
.wrap.wide { max-width: var(--wrap-wide); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue-fill); color: var(--on-blue);
  padding: 12px 20px; border-radius: 0 0 12px 0; font-weight: 650; text-decoration: none;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ── type ────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; letter-spacing: -.025em; text-wrap: balance; }

h1 {
  font-size: clamp(40px, 6.6vw, 70px);
  line-height: 1.03;
  letter-spacing: -.042em;
  font-weight: 700;
}

h2 {
  font-size: clamp(27px, 3.7vw, 40px);
  line-height: 1.12;
  letter-spacing: -.033em;
  font-weight: 700;
  margin-bottom: 14px;
}

h3 {
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -.015em;
  font-weight: 650;
  margin-bottom: 8px;
}

h4 { font-size: 16px; font-weight: 650; margin-bottom: 6px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

b, strong { font-weight: 650; color: var(--text); }
em { font-style: italic; }

small { font-size: .85em; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--blue);
  flex: none;
}
.eyebrow.center { justify-content: center; }

.lede {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 58ch;
}
.lede b { color: var(--text); }

.sec-lede { font-size: 17.5px; color: var(--text-2); max-width: 68ch; margin-bottom: 34px; }
.sec-lede.center { margin-left: auto; margin-right: auto; text-align: center; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.center { text-align: center; }

code {
  font-family: var(--mono);
  font-size: .875em;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: .12em .4em;
}
/* Named primitives and pinned constants read differently from ordinary code: a primitive is
   a claim, a constant is a fact. */
code.prim {
  background: var(--blue-soft);
  border-color: var(--blue-line);
  color: var(--blue);
  white-space: nowrap;
}
code.k { color: var(--text-2); }

pre {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  overflow-x: auto;
  margin: 22px 0;
  color: var(--text);
  tab-size: 4;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--line);
  color: var(--text-2);
  font-size: 16.5px;
}
blockquote p:last-child { margin-bottom: 0; }

/* ── layout ──────────────────────────────────────────────────────────────── */

section { padding: var(--section) 0; }
section.tight { padding: clamp(44px, 6vw, 72px) 0; }
section.alt {
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.grid { display: grid; gap: var(--gap); }
.grid.top { align-items: start; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── nav ─────────────────────────────────────────────────────────────────── */

nav.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  text-decoration: none;
  flex: none;
}
.brand svg, .brand img { width: 52px; height: auto; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14.5px;
}
.nav-links a {
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 550; }
.nav-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-2) !important;
}
.nav-search:hover { color: var(--text) !important; border-color: var(--text-3); }

/* Adding the theme button pushed the bar past 390px and clipped the last link. Rather than hide
   navigation on the pages that need it most, the bar becomes two rows: identity and the controls
   on top, the links centred underneath. */
@media (max-width: 760px) {
  .nav-in {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 0 10px;
    row-gap: 10px;
  }
  .brand { font-size: 21px; }
  .brand svg, .brand img { width: 40px; }
  .nav-links {
    order: 3;
    width: 100%;
    min-width: 0;
    /* The links must be allowed to wrap among themselves. Without this the row cannot shrink
       below its content, the flex container grows past the wrap, and anything justified to the
       end is carried off the right edge of a 390px screen. */
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    font-size: 14px;
    padding-top: 4px;
    border-top: 1px solid var(--line-soft);
  }
  .nav-search, .theme-btn { order: 2; }
  .nav-search { margin-left: auto; }
  html { scroll-padding-top: 140px; }
}
@media (max-width: 420px) {
  .nav-links { gap: 12px 14px; font-size: 13.5px; }
}

/* ── theme toggle ────────────────────────────────────────────────────────── */

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, border-color .15s ease;
}
.theme-btn:hover { color: var(--text); border-color: var(--text-3); }
.theme-btn svg { width: 17px; height: 17px; display: block; }
/* The icon shows the state you are IN, so the control reports rather than instructs. */
.theme-btn .i { display: none; }
:root:not([data-theme]) .theme-btn .i-auto { display: block; }
:root[data-theme="light"] .theme-btn .i-light { display: block; }
:root[data-theme="dark"]  .theme-btn .i-dark  { display: block; }

/* ── buttons + chips + tags ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), border-color .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--text-3); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: var(--blue-fill);
  border-color: transparent;
  color: var(--on-blue);
}
.btn.primary:hover { filter: brightness(1.08); border-color: transparent; }
.btn svg { flex: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); flex: none;
}
.chip.soft { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }

/* Status vocabulary. Four states the whole site shares: shipped (on phones), built (in the
   tree, next build), roadmap, research. A fifth, bad, is for "not claimed". The colours mean
   the same thing on every page, which is the point of having a vocabulary. */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  color: var(--blue);
  vertical-align: middle;
  white-space: nowrap;
}
.tag.good { background: var(--good-soft); border-color: transparent; color: var(--good); }
.tag.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.tag.bad  { background: var(--bad-soft);  border-color: transparent; color: var(--bad); }
.tag.flat { background: var(--surface-3); border-color: var(--line); color: var(--text-2); }
.tag.built { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }
.tag.research { background: var(--surface-3); border-color: var(--line); color: var(--text-2); }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta-row.center { justify-content: center; }

/* ── cards ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.card > p:last-child { margin-bottom: 0; }
.card p { color: var(--text-2); font-size: 15.5px; text-wrap: pretty; }
/* Four cards across a 1080px measure leaves ~250px each, which turns any real sentence into a
   ragged stack. The grid gives them more room and the copy was cut to match. */
.grid-4 .card { padding: 28px 26px 30px; }
.grid-4 .card h3 { font-size: 18px; margin-bottom: 10px; }
.grid-4 .card p { font-size: 15px; line-height: 1.55; }
section.alt .card { background: var(--bg); }

.card.lift { box-shadow: var(--shadow-sm); }
.card.accent { border-color: var(--blue-line); background: var(--blue-soft); }
a.card { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .16s cubic-bezier(.2,.7,.3,1); }
a.card:hover { border-color: var(--text-3); transform: translateY(-2px); }
a.card h3 { color: var(--text); }
a.card .go { display: inline-block; margin-top: 12px; color: var(--blue); font-size: 14.5px; font-weight: 600; }

/* Duotone marks: a soft mass at low opacity carries the shape, a crisp stroke carries the
   detail. Drawn on one 24px grid with matching stroke weights so they read as a family. */
.icon {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--blue) 22%, transparent),
                            color-mix(in srgb, var(--blue) 6%, transparent));
  border: 1px solid var(--blue-line);
  color: var(--blue);
  margin-bottom: 20px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--blue) 26%, transparent);
}
.icon svg { width: 27px; height: 27px; display: block; }
.icon .mass { fill: currentColor; opacity: .22; }
.icon .line { fill: none; stroke: currentColor; stroke-width: 1.7;
              stroke-linecap: round; stroke-linejoin: round; }

/* Verdict cards. The state lives in a header band with a dot, and the cards size to their own
   content instead of stretching to match, because a card padded out with empty space reads as
   a bug. */
.card.no, .card.yes { padding: 0; overflow: hidden; }
.card.no > *, .card.yes > * { padding: 0 26px; }
.card.no h3, .card.yes h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 26px;
  font-size: 15px;
  font-weight: 650;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.card.no ul, .card.yes ul { padding-top: 20px; padding-bottom: 24px; }
.card .k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.card .k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.card.no .k { color: var(--good); background: var(--good-soft); }
.card.yes .k { color: var(--warn); background: var(--warn-soft); }

/* protect / limit card duo (white paper, docs) */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin: 26px 0;
}
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }
.duo .card { padding: 22px 24px; }
.duo .card ul { margin: 0; padding-left: 20px; font-size: 15px; }
.duo .card li { margin-bottom: 9px; }
.card.protect { border-color: color-mix(in srgb, var(--good) 34%, var(--line)); }
.card.limit { border-color: color-mix(in srgb, var(--warn) 34%, var(--line)); }
.hd {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--text);
  margin-bottom: 14px;
}
.glyph {
  width: 22px; height: 22px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.card.protect .glyph { background: var(--good-soft); color: var(--good); }
.card.limit .glyph { background: var(--warn-soft); color: var(--warn); }

/* ── lists ───────────────────────────────────────────────────────────────── */

ul, ol { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 8px; }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--text-3); }
ul.tight li { margin-bottom: 12px; }

ul.ticks { list-style: none; padding-left: 0; }
ul.ticks li {
  position: relative;
  padding-left: 28px;
  color: var(--text-2);
  font-size: 15.5px;
}
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 4px; top: .62em;
  width: 9px; height: 5px;
  border-left: 1.8px solid var(--blue);
  border-bottom: 1.8px solid var(--blue);
  transform: rotate(-45deg);
}
ul.ticks.good li::before { border-color: var(--good); }

ul.crosses { list-style: none; padding-left: 0; }
ul.crosses li {
  position: relative;
  padding-left: 28px;
  color: var(--text-2);
  font-size: 15.5px;
}
ul.crosses li::before {
  content: "×";
  position: absolute;
  left: 6px; top: -.05em;
  color: var(--bad);
  font-size: 19px;
  line-height: 1.5;
}

/* Numbered steps for the guide: the number is the anchor, the text stays a paragraph. */
ol.steps { list-style: none; padding: 0; margin: 26px 0; counter-reset: step; }
ol.steps > li {
  position: relative;
  padding: 0 0 22px 52px;
  margin: 0;
  counter-increment: step;
  border-left: 1px solid var(--line-soft);
  margin-left: 17px;
}
ol.steps > li:last-child { padding-bottom: 0; border-left-color: transparent; }
ol.steps > li::before {
  content: counter(step);
  position: absolute; left: -18px; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--blue-line); color: var(--blue);
}
ol.steps > li h3, ol.steps > li h4 { margin-bottom: 6px; }
ol.steps > li p { color: var(--text-2); font-size: 15.5px; }

/* ── tables ──────────────────────────────────────────────────────────────── */

.table-scroll, .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; position: relative; }
/* A wide table inside a scroller needs to say so, or it looks truncated. */
.table-scroll::after, .tbl-scroll::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  background: linear-gradient(90deg, transparent, var(--bg));
  pointer-events: none;
}
section.alt .table-scroll::after { background: linear-gradient(90deg, transparent, var(--surface-2)); }
@media (min-width: 900px) { .table-scroll::after, .tbl-scroll::after { display: none; } }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 520px;
  font-variant-numeric: tabular-nums;
}
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--surface-3); }
td .tag { min-width: 132px; justify-content: center; }
th, td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { color: var(--text-2); }
td:first-child { color: var(--text); font-weight: 550; }
tr:last-child td { border-bottom: 0; }
table.spec td:first-child { font-family: var(--mono); font-size: 13px; font-weight: 400; }
table.ledger td:first-child { font-family: var(--mono); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
table.ledger td .tag { min-width: 0; }
table.compact { font-size: 14px; }
table.compact th, table.compact td { padding: 10px 12px; }

/* ── details / FAQ ───────────────────────────────────────────────────────── */

details {
  border-bottom: 1px solid var(--line-soft);
  padding: 4px 0;
}
details:first-of-type { border-top: 1px solid var(--line-soft); }
summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  position: relative;
  transition: color .15s ease;
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--blue); }
summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 26px;
  width: 8px; height: 8px;
  border-right: 1.8px solid var(--text-3);
  border-bottom: 1.8px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
details[open] summary::after { transform: rotate(-135deg); top: 30px; }
details > *:not(summary) { color: var(--text-2); font-size: 16px; margin-bottom: 18px; }

/* The full posture matrix stays available under the figure rather than being deleted. */
.more { margin-top: 26px; border-top: 1px solid var(--line-soft); }
.more > summary {
  padding: 16px 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.more > summary::after { top: 22px; }
.more[open] > summary::after { top: 26px; }
.more > summary:hover { color: var(--blue); }

/* ── callouts ────────────────────────────────────────────────────────────── */

.note, .aside {
  border-left: 3px solid var(--blue);
  background: var(--blue-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 15.5px;
  color: var(--text-2);
}
.note.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note.good { border-left-color: var(--good); background: var(--good-soft); }
.note.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.note strong, .note b, .aside strong, .aside b { color: var(--text); }
.aside .lbl, .note .lbl {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.note.warn .lbl { color: var(--warn); }
.note.good .lbl { color: var(--good); }
.note.bad .lbl { color: var(--bad); }
.aside p:last-child, .aside ul:last-child, .note ul:last-child { margin-bottom: 0; }

/* ── document pages (privacy policy, short pages) ────────────────────────── */

.doc { padding: clamp(40px, 6vw, 68px) 0 var(--section); }
.doc h2 {
  font-size: clamp(23px, 2.8vw, 30px);
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.doc h2:first-of-type { margin-top: 34px; }
.doc h3 { font-size: 17.5px; margin-top: 30px; }
.doc p, .doc li { color: var(--text-2); }

.doc-head, .page-head { border-bottom: 1px solid var(--line); padding-bottom: 30px; margin-bottom: 8px; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
  margin-top: 18px;
}
.num {
  font-family: var(--mono);
  font-size: .56em;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--blue);
  margin-right: 14px;
  vertical-align: middle;
}
.doc .num { color: var(--text-3); font-size: .58em; margin-right: 12px; }

a.ref {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid var(--blue-line);
}
a.ref:hover { border-bottom-color: var(--blue); }

/* Short pages (404), keep the footer on the bottom edge instead of floating mid-viewport. */
body.short { min-height: 100svh; display: flex; flex-direction: column; }
body.short > main { flex: 1 0 auto; display: flex; align-items: center; }
body.short > main > section { width: 100%; }

/* ── white paper head + abstract ─────────────────────────────────────────── */

.wp-hero { border-bottom: 1px solid var(--line); padding-bottom: 34px; margin-bottom: 10px; }
.wp-hero .kicker {
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 16px 0 14px;
  max-width: 40ch;
}
.wp-hero .thesis { color: var(--text-2); max-width: 62ch; font-size: 16.5px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.pill.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.pill.warn .dot { background: var(--warn); }
.pill b { color: var(--text); }

/* A reader deciding whether to spend twenty minutes on a document needs the shape of the
   answer first: what is protected, by what means, and what is explicitly not claimed. The
   third column is the one that earns the document its credibility, so it sits at the same
   weight as the other two. */
.abstract {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 34px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 780px) { .abstract { grid-template-columns: minmax(0, 1fr); } }
.abstract > div { padding: 20px 22px 22px; border-right: 1px solid var(--line); }
.abstract > div:last-child { border-right: 0; }
@media (max-width: 780px) {
  .abstract > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .abstract > div:last-child { border-bottom: 0; }
}
.abstract dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 9px;
}
.abstract dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.abstract > div:last-child dt { color: var(--warn); }

.wp-foot {
  margin-top: 68px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--text-3);
}
.wp-foot p { margin-bottom: 12px; }
.fmark { font-weight: 700; letter-spacing: -.03em; color: var(--text); }

/* ── footer ──────────────────────────────────────────────────────────────── */

footer.site {
  border-top: 1px solid var(--line);
  padding: 52px 0 60px;
  background: var(--surface-2);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 19px; letter-spacing: -.03em; color: var(--text); text-decoration: none; }
.foot-brand svg, .foot-brand img { width: 34px; height: auto; }
.foot-grid h5 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 14px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 10px; font-size: 15px; }
.foot-grid li a { color: var(--text-2); text-decoration: none; }
.foot-grid li a:hover { color: var(--text); }
.foot-blurb { max-width: 34ch; margin-top: 14px; font-size: 15px; }
.foot-bar {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── landing: hero ───────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(52px, 8vw, 92px) 0 clamp(48px, 7vw, 84px);
}
/* The hero art column is taller than the copy, so centring left a dead band under the text. */
.hero > div:first-child { padding-bottom: clamp(0px, 2vw, 24px); }
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
}
.hero h1 { margin: 18px 0 20px; }
.hero h1 .g { color: var(--blue); }
.hero .lede { margin-bottom: 30px; }
.hero-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 22px;
}
.hero-art { display: flex; justify-content: center; }
/* Real iOS Simulator captures composited into device frames. The PNG is transparent, so it
   carries its own separation from the page on both themes. */
.hero-art img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}
@media (max-width: 880px) {
  .hero-art img { max-width: 420px; margin: 0 auto; }
}

/* status strip under the CTAs, honest about where the app actually is */
.status {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--text-2);
  max-width: 52ch;
}
.status .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); flex: none; margin-top: 7px;
  box-shadow: 0 0 0 4px var(--blue-soft);
}
.status b { color: var(--text); }

/* ── landing: pricing, closing block ─────────────────────────────────────── */

.price {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: clamp(26px, 4vw, 40px);
}
@media (max-width: 720px) { .price { grid-template-columns: 1fr; } }
.price .big {
  font-size: clamp(56px, 9vw, 88px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--blue);
}
.price .big small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  color: var(--text-3);
  margin-top: 12px;
}

.final {
  text-align: center;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.final h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }

/* trailing note under a card grid */
.after-grid { margin-top: 30px; margin-bottom: 0; }

/* ── landing: alternating product sections ───────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.split .shot img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.split.flip .copy { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split.flip .copy { order: 0; }
  .split .shot img { max-width: 300px; }
}
.split h2 { margin-bottom: 16px; }
.split p { color: var(--text-2); }
.split ul.ticks { margin-top: 24px; }
/* The device shots run off the bottom of their section rather than sitting in a box. The mask
   dissolves the crop instead of cutting a hard line across the phone. The fade is deliberately
   short: a long one turns the black phone body into a grey rectangle of fog on the white theme. */
.split .shot img {
  max-height: 540px;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
@media (max-width: 860px) {
  .split .shot img { max-height: 420px; }
}

/* ── atmosphere ──────────────────────────────────────────────────────────── */

/* Generated art sits BEHIND content as a background layer, never as an <img>, so it can never
   push layout around and never needs alt text. All pieces are mostly black by design; they fade
   out before they reach the text. */
.atmos { position: relative; isolation: isolate; }
.atmos > * { position: relative; z-index: 1; }
.atmos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  pointer-events: none;
}
.atmos-hero::before {
  background-image: var(--atmos-hero);
  background-position: var(--atmos-pos);
  background-size: var(--atmos-size);
  opacity: var(--atmos-opacity);
  -webkit-mask-image: var(--atmos-mask);
  mask-image: var(--atmos-mask);
}
.atmos-mesh::before {
  background-image: var(--atmos-mesh);
  background-position: center top;
  background-size: var(--atmos-size);
  opacity: var(--atmos-opacity);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

/* A full-bleed band of art used as a divider between sections. It stays full black in light
   mode too: fading it just turned it grey, which reads as a rendering mistake. */
.band {
  height: clamp(120px, 16vw, 210px);
  background: #000 url("media/art/atmos-voice.jpg") center/cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ── the containment diagram ("two locks") ───────────────────────────────── */

/* Drawn in CSS, not rendered as an image. Nesting has to be the first thing the eye resolves,
   so the layers are bare frames with their name on the top edge, the way a schematic labels an
   enclosure; the prose lives in the key underneath. */
.stack { margin: 0; }
.ring {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 18px 18px;
}
.ring-lab {
  position: absolute;
  top: -9px;
  left: 20px;
  padding: 0 9px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.docs-main .ring-lab { background: var(--bg); }
.ring-2 {
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
}
.ring-2 > .ring-lab { color: color-mix(in srgb, var(--blue) 75%, var(--text-2)); }
.ring-1 {
  border-radius: 15px;
  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
  box-shadow: 0 0 30px -14px color-mix(in srgb, var(--blue) 80%, transparent);
}
.ring-1 > .ring-lab { color: var(--blue); }
.stack .core {
  border-radius: 11px;
  padding: 24px 18px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% 50%,
      color-mix(in srgb, var(--blue) 30%, transparent) 0%,
      color-mix(in srgb, var(--blue) 8%, transparent) 52%,
      transparent 80%);
}
.stack .core .wave { display: block; width: 108px; height: 20px; margin: 0 auto 10px; color: var(--blue); }
.stack .core b { display: block; font-size: 16px; letter-spacing: -.02em; color: var(--text); margin-bottom: 3px; }
.stack .core span { font-size: 13px; color: var(--text-2); }

.key { margin: 26px 0 0; }
.key > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}
.key dt {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px;
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; color: var(--text);
}
.key dd { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.locks-pair { align-items: center; }
.locks-pair .key { margin-top: 0; }
@media (max-width: 860px) { .locks-pair { gap: 30px; } }

/* A three-across band of points under a two-column block. */
.ticks.band-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 34px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}
.ticks.band-3 li { padding-left: 26px; margin: 0; }
@media (max-width: 860px) { .ticks.band-3 { grid-template-columns: 1fr; gap: 14px; } }

/* ── the protocol stack, as a stack ──────────────────────────────────────── */

/* Drawn as an actual stack, the reader sees the shape before reading a word, and the
   numbering means something: each layer assumes everything below it is hostile. Brightness
   increases toward the top, the way it does in the call-media diagram. */
.stack-list { display: grid; gap: 10px; margin: 34px 0 0; }
.layer-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 24px;
  position: relative;
}
section.alt .layer-card { background: var(--bg); }
.layer-card .lv {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.35;
  color: var(--blue);
  padding-top: 3px;
}
.layer-card .lv .faint { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.layer-card h3 { margin-bottom: 7px; font-size: 17.5px; }
.layer-card p { color: var(--text-2); font-size: 15px; margin: 0; text-wrap: pretty; }
.layer-card:nth-child(1) { border-color: color-mix(in srgb, var(--blue) 62%, transparent); }
.layer-card:nth-child(2) { border-color: color-mix(in srgb, var(--blue) 46%, transparent); }
.layer-card:nth-child(3) { border-color: color-mix(in srgb, var(--blue) 32%, transparent); }
.layer-card:nth-child(4) { border-color: color-mix(in srgb, var(--blue) 20%, transparent); }
@media (max-width: 620px) {
  .layer-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ── routing diagram: what each hop actually learns ──────────────────────── */

/* The sealed-sender story is the hardest thing on the site to explain in prose, because the
   point is an absence. Three hops with what each one knows written underneath makes the
   absence visible. */
.hops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 0;
}
@media (max-width: 760px) { .hops { grid-template-columns: minmax(0, 1fr); } }
.hop {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 22px 24px;
  position: relative;
}
section.alt .hop { background: var(--bg); }
.hop.mid { border-color: color-mix(in srgb, var(--warn) 34%, var(--line)); }
.hop .who {
  display: flex; align-items: center; gap: 9px;
  font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; margin-bottom: 4px;
}
.hop .what { font-size: 14px; color: var(--text-2); margin: 0 0 16px; }
.hop h4 {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 8px;
}
.hop ul { list-style: none; padding: 0; margin: 0; }
.hop li {
  position: relative; padding-left: 18px; margin-bottom: 7px;
  font-size: 14px; line-height: 1.45; color: var(--text-2);
}
.hop li::before {
  content: ""; position: absolute; left: 2px; top: .58em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--text-3);
}
.hop li.no::before { border-color: color-mix(in srgb, var(--bad) 70%, transparent); }
.hop li.yes::before { background: var(--good); border-color: var(--good); }
/* The arrow between hops, drawn only where there is a next card to point at, in text weight
   because the border colour is nearly invisible on black and the arrow is the only thing
   carrying direction. */
.hop:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -11px; top: 50%;
  width: 10px; height: 10px;
  border-top: 1.8px solid var(--text-3);
  border-right: 1.8px solid var(--text-3);
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 760px) {
  .hop:not(:last-child)::after {
    right: 50%; top: auto; bottom: -11px;
    transform: translateX(50%) rotate(135deg);
  }
}

/* ── tiers, roadmap timeline, figures ────────────────────────────────────── */

.tier {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 24px;
}
.tier .name {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 10px;
}
.tier h3 { margin-bottom: 10px; }
.tier p { font-size: 15px; color: var(--text-2); }

.ver {
  border-left: 2px solid var(--line);
  padding: 0 0 32px 24px;
  position: relative;
}
.ver:last-child { padding-bottom: 0; }
.ver::before {
  content: "";
  position: absolute; left: -6px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--blue);
}
.ver.done::before { background: var(--blue); }
.ver .v {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 6px;
}
.ver h3 { margin-bottom: 8px; }
.ver p, .ver li { color: var(--text-2); font-size: 15.5px; }

/* Rendered figures: one render per theme, swapped by <picture>. The caption stays live HTML. */
.figure { margin: 34px 0 0; }
.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.figure figcaption, .diagram figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-3);
  max-width: 72ch;
}
.figure figcaption b, .diagram figcaption b { color: var(--text-2); font-weight: 600; }

/* ── inline SVG diagrams ─────────────────────────────────────────────────── */

/* Diagrams are inline SVG styled by the same tokens as the page, so they are crisp at any zoom,
   selectable, and correct in both themes without a second render. Class vocabulary: .n a node
   box, .t a title, .s a subtitle, .m a mono label, .e an edge, .lock a sealed region. */
.diagram { margin: 30px 0; }
.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--sans);
  overflow: visible;
}
.diagram .n { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.diagram .n.hi { stroke: var(--blue); }
.diagram .n.soft { fill: var(--surface-2); }
.diagram .n.warn { stroke: color-mix(in srgb, var(--warn) 60%, var(--line)); }
.diagram .n.bad { stroke: color-mix(in srgb, var(--bad) 60%, var(--line)); }
.diagram .n.good { stroke: color-mix(in srgb, var(--good) 60%, var(--line)); }
.diagram .lock { fill: var(--blue-soft); stroke: var(--blue-line); stroke-width: 1.2; }
.diagram .lock.deep { fill: color-mix(in srgb, var(--blue) 16%, transparent); stroke: color-mix(in srgb, var(--blue) 45%, transparent); }
.diagram .t { fill: var(--text); font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.diagram .s { fill: var(--text-2); font-size: 11.5px; }
.diagram .m { fill: var(--text-3); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.diagram .m.hi { fill: var(--blue); }
.diagram .m.warn { fill: var(--warn); }
.diagram .m.good { fill: var(--good); }
.diagram .m.bad { fill: var(--bad); }
.diagram .e { stroke: var(--text-3); stroke-width: 1.4; fill: none; }
.diagram .e.hi { stroke: var(--blue); }
.diagram .e.dash { stroke-dasharray: 4 4; }
.diagram .e.soft { stroke: var(--line); }
.diagram .arrow { fill: var(--text-3); }
.diagram .arrow.hi { fill: var(--blue); }
.diagram .fill { fill: var(--blue); }
.diagram .fill.soft { fill: var(--blue-soft); }
.diagram .warnfill { fill: var(--warn-soft); }
.diagram .goodfill { fill: var(--good-soft); }
.diagram .badfill { fill: var(--bad-soft); }
.diagram .lane { stroke: var(--line-soft); stroke-width: 1; }
.diagram .wave { stroke: var(--blue); stroke-width: 2; fill: none; stroke-linecap: round; }

/* ── plain-language term tooltips ────────────────────────────────────────── */

/* Jargon is optional reading: the sentence works without it, and hovering (or focusing, which
   is how this behaves on a phone and for keyboard users) explains it in one line. Pure CSS.
   display:none, not visibility:hidden: a hidden-but-laid-out bubble is still part of the
   scrollable overflow and pushed a 390px layout to 399px wide. */
.term {
  border-bottom: 1px dashed var(--blue-line);
  color: var(--text);
  cursor: help;
  position: relative;
  white-space: nowrap;
}
.term::after,
.term::before { display: none; }
.term::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 11px);
  transform: translateX(-50%);
  width: max-content; max-width: min(268px, 74vw);
  white-space: normal;
  text-align: left;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--sans);
  box-shadow: var(--shadow);
  z-index: 30;
}
.term::before {
  content: "";
  position: absolute;
  left: 50%; bottom: calc(100% + 5px);
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--surface-3);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  z-index: 31;
}
.term:hover::after, .term:hover::before,
.term:focus::after,  .term:focus::before,
.term:focus-visible::after, .term:focus-visible::before {
  display: block;
}
/* Near the right edge the bubble would run off screen, so those anchor from the right instead. */
.term.tip-right::after { left: auto; right: 0; transform: none; }
.term.tip-right::before { left: auto; right: 18px; transform: rotate(45deg); }

/* In a key or legend the term sits after the plain sentence, as a small mono tag: skip it and
   the sentence still works. */
.key .term, .legend .term {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--text-3); border: 1px dashed var(--line);
  border-radius: 999px; padding: 3px 9px; font-weight: 400;
}
.key .term:hover, .key .term:focus-visible,
.legend .term:hover, .legend .term:focus-visible {
  color: var(--blue); border-color: var(--blue-line); border-style: solid;
}

/* ── documentation layout ────────────────────────────────────────────────── */

/* Wide screens show the section tree, article and contents. Narrow screens use a
   collapsed contents control; phones also get a collapsed browse menu above the article.
   Layout and native disclosures do not require JavaScript. */
.docs {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 176px;
  grid-template-areas: "side main rail";
  gap: clamp(26px, 3vw, 44px);
  align-items: start;
  max-width: 1480px;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: var(--section);
}
.docs-side { grid-area: side; }
.docs-main { grid-area: main; min-width: 0; }
.docs-rail { grid-area: rail; }
.docs.no-rail { grid-template-columns: 224px minmax(0, 1fr); grid-template-areas: "side main"; max-width: 1280px; }
.docs.no-rail .docs-main { max-width: 960px; }
.mobile-docs, .page-contents { display: none; }

@media (max-width: 1140px) {
  .docs, .docs.no-rail { grid-template-columns: 208px minmax(0, 1fr); grid-template-areas: "side main"; }
  .docs-rail { display: none; }
  .page-contents { display: block; }
}
@media (max-width: 860px) {
  .docs, .docs.no-rail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mobile" "main"; gap: 28px; padding-top: 20px; }
  .docs-side { display: none; }
  .mobile-docs { display: block; grid-area: mobile; }
}

/* the section tree */
.docs-side {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  max-height: calc(100vh - var(--nav-h) - 32px);
  overflow-y: auto;
  font-size: 14.5px;
  padding-right: 4px;
  scrollbar-width: thin;
}
@media (max-width: 860px) {
  .docs-side {
    position: static; max-height: none; overflow: visible;
    margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
  }
}
.docs-side .side-title {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 14px;
}
.side-home {
  display: block; margin: 0 0 18px; font-weight: 600; font-size: 14.5px;
  color: var(--text); text-decoration: none;
}
.side-home:hover { color: var(--blue); }
.side-group { margin-bottom: 22px; }
.side-h {
  display: block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); text-decoration: none;
  padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft);
}
.side-h:hover, .side-h[aria-current="page"] { color: var(--blue); }
.side-group ul { list-style: none; padding: 0; margin: 0; }
.side-group li { margin: 0; }
.side-group li a {
  display: block;
  padding: 6px 10px 6px 12px;
  margin-left: -12px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--text-2);
  text-decoration: none;
  line-height: 1.4;
  transition: color .12s ease, background .12s ease;
}
.side-group li a:hover { color: var(--text); background: var(--surface-2); }
.side-group li a[aria-current="page"] {
  color: var(--blue); font-weight: 600; border-left-color: var(--blue);
  background: var(--blue-soft);
}

/* the search box (sidebar + the search page) */
.search-form {
  position: relative;
  display: flex; align-items: center;
  margin: 0 0 18px;
}
.search-form svg {
  position: absolute; left: 13px; width: 16px; height: 16px;
  color: var(--text-3); pointer-events: none;
}
.search-form input {
  width: 100%;
  font: inherit; font-size: 14.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px 10px 38px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, background .15s ease;
}
.search-form input:focus { outline: none; border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 3px var(--blue-soft); }
.search-form input::placeholder { color: var(--text-3); }
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-form.big { margin: 30px 0 14px; }
.search-form.big svg { left: 18px; width: 20px; height: 20px; }
.search-form.big input { font-size: 18px; padding: 16px 18px 16px 50px; border-radius: 14px; }

.results { margin-top: 30px; }
.hit { padding: 20px 0; border-top: 1px solid var(--line-soft); }
.hit:last-child { border-bottom: 1px solid var(--line-soft); }
.hit-sec {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px;
}
.hit h3 { font-size: 18px; margin-bottom: 6px; }
.hit h3 a { text-decoration: none; }
.hit h3 a:hover { text-decoration: underline; }
.hit p { color: var(--text-2); font-size: 15px; margin: 0; }

/* the document column */
.docs-main { max-width: 800px; }
.crumbs {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 26px; display: flex; gap: 10px; align-items: center;
}
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }

.page-head { padding-bottom: 26px; margin-bottom: 0; }
.page-head h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -.035em; line-height: 1.06; }
.page-head .lede { margin-top: 16px; max-width: 62ch; }
.page-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 16px 0 6px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 10px;
}
.page-meta .mono { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.docs-main > section { padding: 0; margin-top: 48px; }
.docs-main > section:first-of-type { margin-top: 34px; }
.docs-main h2 {
  font-size: clamp(24px, 2.9vw, 32px);
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  margin: 52px 0 16px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.docs-main > section > h2:first-child, .docs-main > h2:first-of-type { }
.docs-main h3 { font-size: 18px; margin: 32px 0 10px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.docs-main h4 { margin-top: 24px; }
.docs-main p, .docs-main li, .docs-main dd { color: var(--text-2); }
.docs-main p b, .docs-main li b { color: var(--text); }
.docs-main .lede { color: var(--text); font-size: 18px; line-height: 1.55; max-width: 62ch; margin-bottom: 22px; }
.docs-main .page-head .lede { color: var(--text-2); }
.docs-main .body { color: var(--text-2); font-size: 16px; }
.docs-main .body > p:first-child { margin-top: 0; }
.docs-main ul.ticks li, .docs-main ul.crosses li { font-size: 16px; }
.docs-main .grid { margin: 26px 0; }
.docs-main .hops, .docs-main .stack-list { margin-top: 26px; }
.docs-main .layer-card, .docs-main .hop, .docs-main .card { background: var(--surface); }
.docs-main .card p { font-size: 15.5px; }
.docs-main .note, .docs-main .aside { font-size: 15.5px; }
.docs-main dl.defs { margin: 20px 0; }
.docs-main dl.defs dt { font-weight: 650; color: var(--text); margin-top: 14px; }
.docs-main dl.defs dd { margin: 4px 0 0; }

/* the contents rail */
.docs-rail { position: sticky; top: calc(var(--nav-h) + 20px); font-size: 13.5px; }
.docs-rail h2 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; padding: 0; border: 0;
}
.docs-rail ol { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.docs-rail li { margin-bottom: 9px; line-height: 1.35; break-inside: avoid; }
.docs-rail a { display: flex; gap: 9px; color: var(--text-2); text-decoration: none; transition: color .15s ease; }
.docs-rail a::before {
  counter-increment: r; content: counter(r, decimal-leading-zero);
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3); flex: none; padding-top: 2px;
}
.docs-rail a:hover, .docs-rail a:hover::before { color: var(--blue); }
@media (max-width: 1140px) {
  .docs-rail {
    position: static;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 20px 22px;
    margin-bottom: 34px;
  }
  .docs-rail ol { columns: 2; column-gap: 24px; }
}
@media (max-width: 420px) { .docs-rail ol { columns: 1; } }

/* previous / next */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line);
}
.pager a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); font-weight: 600; font-size: 15px;
  transition: border-color .15s ease;
}
.pager a:hover { border-color: var(--blue); }
.pager a span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.pager .next { text-align: right; align-items: flex-end; }
@media (max-width: 520px) { .pager { grid-template-columns: 1fr; } .pager .next { text-align: left; align-items: flex-start; } }

/* hub pages: a section index as cards */
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 30px 0; }
@media (max-width: 620px) { .hub { grid-template-columns: 1fr; } }
.hub .card h3 { font-size: 17px; margin-bottom: 8px; }
.hub .card p { font-size: 14.5px; margin: 0; }
.hub .card .tag { margin-bottom: 12px; }
.hub-sec { margin-top: 44px; }
.hub-sec h2 { margin-bottom: 8px; }
.hub-sec .sec-lede { margin-bottom: 8px; }

/* evidence ladder and claim rows */
.ladder { list-style: none; padding: 0; margin: 22px 0; counter-reset: lv; }
.ladder li {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line-soft); margin: 0;
}
.ladder li:last-child { border-bottom: 1px solid var(--line-soft); }
.ladder li b.lv { font-family: var(--mono); font-size: 12px; color: var(--blue); }

/* ── print ───────────────────────────────────────────────────────────────── */

@media print {
  nav.site, footer.site, .docs-side, .docs-rail, .pager, .theme-btn, .skip { display: none !important; }
  .docs { display: block; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* Library components use the existing Ink palette and system typography. */
.mobile-docs, .page-contents { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.mobile-docs summary, .page-contents summary { cursor: pointer; padding: 15px 18px; color: var(--text); font-weight: 600; font-size: 15px; }
.mobile-docs summary span { display: block; font-size: 12px; color: var(--text-3); font-weight: 400; margin: 4px 0 0 17px; }
.mobile-docs nav { padding: 12px 24px 0; max-height: 65vh; overflow-y: auto; }
.mobile-docs .side-group li a { padding-top: 10px; padding-bottom: 10px; }
.page-contents { margin: 24px 0; }
.page-contents ol { margin: 0; padding: 0 24px 18px 42px; }
.page-contents li { padding: 4px 0; }
.docs-side .side-title, .side-h, .docs-rail h2, .hit-sec { font-size: 12px; letter-spacing: .1em; }
.page-meta { font-size: 13px; padding-bottom: 14px; }
.page-meta .mono, .crumbs, .pager a span { font-size: 12px; letter-spacing: .06em; }
.docs-main { font-size: 16px; line-height: 1.7; }
.docs-main > section > p { max-width: 78ch; }
.search-form input { font-size: 16px; }
.docs-main .steps > li h3 { margin-top: 0; }
.docs-main .hub .card h3 { margin-top: 10px; font-size: 19px; }
.docs-main .hub .card p { font-size: 15px; line-height: 1.6; }
.hub .card { display: flex; flex-direction: column; }
.hub .card .tag { align-self: flex-start; }
.hub .card .go { margin-top: auto; padding-top: 20px; color: var(--blue); }
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 28px 0; }
.doc-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.doc-card { display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
.doc-card:hover { border-color: var(--blue); background: var(--blue-soft); }
.docs-main .doc-card h3 { margin: 20px 0 10px; font-size: 23px; letter-spacing: -.025em; }
.doc-card p { margin: 0 0 24px; font-size: 15px; line-height: 1.65; }
.doc-card .go { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--blue); }
.docs-welcome { padding-top: 10px; }
.docs-welcome h1 { font-size: clamp(38px, 5vw, 64px); max-width: 14ch; line-height: 1.04; }
.search-entry { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; max-width: 540px; margin-top: 30px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text-3); background: var(--surface-2); }
.search-entry:hover { border-color: var(--blue); color: var(--text); }
.reading-rows { border-bottom: 1px solid var(--line); }
.reading-rows > a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); }
.docs-main .reading-rows h3 { margin: 0 0 4px; font-size: 19px; }
.reading-rows p { margin: 0; font-size: 15px; }
.reading-rows > a > span { color: var(--blue); font-size: 24px; }
.reading-rows > a:hover h3 { color: var(--blue); }
.docs-main .review-banner { border-left: 3px solid var(--blue); padding: 6px 0 6px 24px; }
.docs-main .review-banner h2 { border: 0; padding: 0; margin: 0 0 16px; font-size: 26px; }
.flow-figure { margin: 30px 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.flow-row { display: flex; align-items: stretch; gap: 12px; }
.flow-row > div:not(.flow-join) { flex: 1; min-width: 0; padding: 18px 14px; background: var(--surface); border: 1px solid var(--blue-line); border-radius: 10px; }
.flow-row b { display: block; color: var(--text); font-size: 15px; line-height: 1.4; }
.flow-row span { display: block; color: var(--text-2); font-size: 13px; line-height: 1.5; margin-top: 8px; }
.flow-row .flow-join { display: flex; align-items: center; color: var(--blue); font-size: 22px; }
.flow-result { border-top: 1px solid var(--blue-line); color: var(--blue); margin-top: 18px; padding-top: 16px; text-align: center; font-size: 14px; line-height: 1.5; }
.flow-figure figcaption { margin-top: 20px; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.math-block { display: block; max-width: 100%; overflow-x: auto; white-space: pre; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; padding: 20px; background: var(--surface-2); color: var(--text); font: 13px/1.8 var(--mono); margin: 24px 0; tab-size: 2; }
code { overflow-wrap: anywhere; }
.tag.ok { background: var(--good-soft); color: var(--good); }
.tag.no { background: var(--bad-soft); color: var(--bad); }
.comparison { min-width: 780px; }
.table-scroll { border-radius: 8px; }
.table-scroll:focus-visible, .math-block:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 1140px) { .doc-grid.three { grid-template-columns: 1fr; } .doc-grid.three .doc-card { padding: 24px; } }
@media (max-width: 620px) {
  .doc-grid { grid-template-columns: 1fr; }
  .flow-figure { padding: 18px; }
  .flow-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .flow-row .flow-join { align-self: center; transform: rotate(90deg); line-height: 1; }
  .flow-row > div:not(.flow-join) { padding: 15px; }
  .flow-row span { margin-top: 4px; }
  .docs-main h2 { margin-top: 34px; font-size: 25px; }
  .math-block { padding: 15px; font-size: 12px; }
  .docs-main .grid.grid-3 { grid-template-columns: 1fr; }
}
@media print {
  .mobile-docs, .page-contents { display: none !important; }
  .docs, .docs.no-rail { display: block; }
  .docs-main, .docs.no-rail .docs-main { max-width: none; }
  .flow-figure, .math-block { break-inside: avoid; }
  .table-scroll { overflow: visible; }
  table { min-width: 0; font-size: 10pt; }
}

/* Collection navigation and technical figures with reflowing text. */
.has-docs { --docs-bar: 52px; }
.has-docs .nav-in { max-width: 1480px; }
.docs-collections { position: sticky; top: var(--nav-h); z-index: 19; background: var(--bg); border-bottom: 1px solid var(--line); }
.docs-collections .wrap { display: flex; align-items: stretch; gap: 28px; max-width: 1480px; min-height: var(--docs-bar); overflow-x: auto; scrollbar-width: thin; }
.docs-collections a { display: flex; align-items: center; flex-shrink: 0; padding: 12px 0; font-size: 14px; line-height: 1.5; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; }
.docs-collections a:hover { color: var(--text); }
.docs-collections a[aria-current="page"] { color: var(--text); border-bottom-color: var(--blue); font-weight: 600; }
.docs { padding-top: 32px; }
.docs.no-rail { max-width: 1480px; }
.docs-side, .docs-rail { top: calc(var(--nav-h) + var(--docs-bar) + 24px); }
.docs-side { max-height: calc(100dvh - var(--nav-h) - var(--docs-bar) - 48px); padding-right: 8px; }
.docs-rail { max-height: calc(100dvh - var(--nav-h) - var(--docs-bar) - 48px); overflow-y: auto; font-size: 14px; }
.side-h { font: 600 14px/1.5 var(--sans); color: var(--text); letter-spacing: 0; text-transform: none; border: 0; padding: 0; margin: 0 0 6px; }
.docs-side .side-h { font-size: 14px; letter-spacing: 0; }
.side-group { margin-bottom: 24px; }
.side-group li a { border: 0; margin-left: 0; padding: 7px 10px; border-radius: 7px; font-size: 14px; }
.side-home { font-size: 14px; margin-bottom: 24px; }
.side-description { font-size: 14px; color: var(--text-2); margin: -18px 0 0; line-height: 1.6; }
.crumbs { font: 400 13px/1.5 var(--sans); text-transform: none; letter-spacing: 0; margin-bottom: 20px; }
.docs-main .page-head { border-bottom: 0; padding: 0; }
.docs-main .page-head .eyebrow { display: none; }
.docs-main .page-head h1 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; max-width: 26ch; letter-spacing: -.03em; }
.docs-main .page-head .lede { margin: 14px 0 22px; font-size: 17px; line-height: 1.65; }
.docs-main .page-meta { padding: 0 0 20px; margin: 0 0 28px; gap: 8px 16px; font-size: 13px; }
.docs-main .page-meta .mono { font: 400 13px/1.5 var(--sans); text-transform: none; letter-spacing: 0; }
.docs-main .page-meta .tag { font-size: 12px; }
.docs-main > section { margin-top: 38px; }
.docs-main h2 { margin: 40px 0 16px; padding-top: 0; border-top: 0; font-size: 27px; scroll-margin-top: calc(var(--nav-h) + var(--docs-bar) + 28px); }
.docs-main h3 { scroll-margin-top: calc(var(--nav-h) + var(--docs-bar) + 28px); }
.docs-main .collection-group h2 { font-size: 22px; }
.docs-main .reading-rows h3 { font-size: 17px; }
.reading-rows a { padding: 18px 0; }
.reading-rows p { max-width: 76ch; }
.docs-main .doc-card h3 { font-size: 21px; }
.docs-welcome h1 { max-width: none; }
.technical-figure { margin: 24px 0 30px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; }
.figure-label { color: var(--text-2); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.docs-main .technical-figure h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.4; }
.technical-figure p { margin: 0; }
.technical-figure p + p { margin-top: 10px; }
.technical-figure figcaption { color: var(--text-2); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.protocol-lane + .protocol-lane { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.lane-heading { display: flex; align-items: start; gap: 12px; margin-bottom: 16px; }
.lane-id { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border: 1px solid var(--blue-line); border-radius: 7px; color: var(--blue); font-size: 14px; font-weight: 600; }
.signaling .lane-id { color: var(--warn); border-color: var(--warn); }
.diagram-route { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1.2fr) 24px minmax(0, 1fr); gap: 8px; align-items: center; }
.route-node { display: block; padding: 12px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align: center; color: var(--text); font-size: 14px; line-height: 1.5; }
.encrypted .route-node { border-color: var(--blue-line); }
.route-node small { display: block; color: var(--text-2); font-size: 14px; margin-top: 4px; }
.route-arrow { display: block; width: 24px; justify-self: center; text-align: center; font-size: 20px; color: var(--blue); }
.media-boundary { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; }
.diagram-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.diagram-columns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.diagram-panel { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.diagram-panel.encrypted { border-color: var(--blue-line); }
.technical-figure .actor { display: block; color: var(--blue); font-size: 13px; line-height: 1.5; margin-bottom: 7px; }
.technical-figure code { font-size: 13px; overflow-wrap: anywhere; }
.sequence-diagram { list-style: none; counter-reset: sequence; padding: 0; margin: 0; }
.sequence-diagram li { counter-increment: sequence; position: relative; padding: 0 0 24px 48px; margin: 0; }
.sequence-diagram li:last-child { padding-bottom: 0; }
.sequence-diagram li::before { content: counter(sequence); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; color: var(--blue); border: 1px solid var(--blue-line); border-radius: 50%; font-size: 14px; background: var(--surface); }
.sequence-diagram li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 38px; bottom: 8px; width: 1px; background: var(--line); }
.sequence-diagram b { display: block; margin-bottom: 6px; }
.key-link { text-align: center; color: var(--blue); padding: 9px 0; font-size: 22px; }
.technical-figure .diagram-note { margin-top: 14px; font-size: 14px; }
.capability-notes { margin-top: 22px; }
.diagram-origin { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.transport-layer { padding: 18px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; }
.transport-layer .transport-layer { margin-top: 18px; border-color: var(--blue-line); background: var(--surface-2); }
.transport-layer .transport-layer .transport-layer { background: var(--surface); }
.flow-row b { font-size: 16px; }
.flow-row span, .flow-figure figcaption { font-size: 14px; }
@media (max-width: 1140px) { .wire-fields { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .docs { padding-top: 18px; gap: 22px; }
  .docs-collections { position: static; }
  .docs-side { max-height: none; }
  .docs-collections .wrap { gap: 24px; }
  .docs-main h2, .docs-main h3 { scroll-margin-top: calc(var(--nav-h) + 24px); }
}
@media (max-width: 760px) {
  .nav-in { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 620px) {
  .technical-figure { padding: 18px; }
  .diagram-columns, .diagram-columns.two { grid-template-columns: 1fr; }
  .diagram-route { grid-template-columns: 1fr; gap: 5px; }
  .route-arrow { transform: rotate(90deg); line-height: 1.2; }
  .route-node { padding: 10px 12px; }
  .docs-main h2 { font-size: 25px; }
  .sequence-diagram li { padding-left: 42px; }
  .transport-layer { padding: 14px; }
  .transport-layer .transport-layer { margin-left: 0; margin-top: 14px; }
}
@media print {
  .docs-collections { display: none !important; }
  .technical-figure, .protocol-lane { break-inside: avoid; }
}

/* Reading orientation: section tabs, a persistent title, and a focused phone menu. */
.docs-collections .wrap { overflow: visible; gap: 30px; justify-content: space-between; }
.collection-tabs { display: flex; gap: 28px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.docs-collections .reader-title { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 0; max-width: 300px; padding: 6px 0; border: 0; flex-shrink: 1; }
.reader-title b, .reader-title span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-title b { font-size: 13px; font-weight: 600; color: var(--text); }
.reader-title span { font-size: 12px; color: var(--text-2); }
.crumbs { flex-wrap: wrap; gap: 6px 8px; font-size: 12px; }
.crumbs [aria-current="page"] { color: var(--text-2); }
.docs-rail a { padding: 4px 0 4px 10px; border-left: 2px solid transparent; }
.docs-rail a::before { display: none; }
.docs-rail a[aria-current="location"] { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }
.mobile-reader { display: none; }
.docs-main .page-head .eyebrow { display: block; color: var(--blue); font-size: 12px; letter-spacing: .08em; margin-bottom: 12px; }
.collection-guide .page-head .eyebrow { font-family: var(--sans); font-weight: 600; text-transform: none; font-size: 14px; letter-spacing: 0; }
.collection-research .page-head h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: -.025em; }
.collection-research .page-head { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 20px; }
.docs-main .page-meta { padding: 0; border: 0; margin: 0 0 22px; }
.review-foot, .docs-main .review-foot { margin: 42px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); line-height: 1.6; }
.review-foot a { color: var(--text-2); text-underline-offset: 3px; }
.pager { margin-top: 24px; }
.pager a span { font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
.collection-group { scroll-margin-top: calc(var(--nav-h) + var(--docs-bar) + 26px); }
.collection-guide .collection-group .reading-rows a { padding: 16px 0; }
.collection-guide .steps { margin-top: 24px; }
.inline-start { display: inline-flex; align-items: center; gap: 28px; font-weight: 600; padding: 12px 18px; border: 1px solid var(--blue-line); background: var(--blue-soft); border-radius: 8px; text-decoration: none; }
.hub-shortcuts { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; }
.research-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 28px; padding: 24px; border: 1px solid var(--blue-line); background: var(--blue-soft); }
.docs-main .research-entry h2 { margin: 4px 0 10px; font-size: 26px; font-family: Georgia, 'Times New Roman', serif; }
.research-entry p { font-size: 15px; }
.research-entry .eyebrow { font-size: 12px; }
.paper-download { display: flex; flex-direction: column; justify-content: space-between; min-height: 140px; min-width: 96px; padding: 16px; border: 1px solid var(--blue-line); background: var(--bg); font-size: 14px; text-decoration: none; }
.paper-download span { align-self: flex-end; font-size: 26px; }
.benefit-list > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.benefit-number { color: var(--blue); font: 400 14px/1.5 var(--mono); padding-top: 3px; }
.docs-main .benefit-list h3 { margin: 0 0 10px; font-size: 22px; }
.benefit-list p { margin: 0 0 10px; }
.benefit-list a { font-size: 14px; }
.evidence-types, .setting-choices { margin: 22px 0; }
.evidence-types > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 22px; padding: 20px 0; border-top: 1px solid var(--line); }
.evidence-types dt, .setting-choices dt { font-weight: 600; color: var(--text); }
.evidence-types dd, .setting-choices dd { margin: 0; }
.setting-choices > div { padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; margin-bottom: 12px; background: var(--surface-2); }
.setting-choices dt { margin-bottom: 6px; }
.section-link { margin-top: 30px; }

/* The library entrance offers journeys instead of another article index. */
.docs.library-home { display: block; max-width: 1200px; padding-top: 54px; }
.docs.library-home .docs-main { max-width: none; }
.library-home .docs-welcome { max-width: 760px; padding: 0 0 18px; }
.library-home .docs-welcome h1 { font-size: clamp(40px, 5vw, 62px); letter-spacing: -.04em; max-width: none; }
.library-home .docs-welcome .lede { font-size: 19px; max-width: 56ch; }
.library-home .search-entry { max-width: 540px; margin: 26px 0 0; }
.library-home .learning-paths h2 { font-size: 24px; }
.journeys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.journey { padding: 26px; min-width: 0; display: flex; flex-direction: column; }
.journey + .journey { border-left: 1px solid var(--line); }
.journey:nth-child(2) { background: var(--surface-2); }
.journey .eyebrow { font-size: 11px; color: var(--blue); }
.docs-main .journey h3 { font-size: 22px; letter-spacing: -.02em; margin: 16px 0 10px; }
.journey p { font-size: 15px; line-height: 1.6; margin-bottom: 22px; min-height: 48px; }
.journey ol { list-style: none; padding: 0; margin: 0 0 26px; counter-reset: journey; }
.journey li { counter-increment: journey; display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.journey li::before { content: counter(journey); color: var(--text-3); font: 12px var(--mono); }
.journey li a { text-decoration: none; color: var(--text); }
.journey li a:hover { color: var(--blue); }
.journey-more { font-size: 14px; margin-top: auto; text-decoration: none; }
.library-discover { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; }
.research-feature { padding: 30px; background: var(--blue-soft); border: 1px solid var(--blue-line); border-radius: 12px; }
.docs-main .research-feature h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; line-height: 1.15; margin: 20px 0 16px; max-width: 20ch; }
.research-feature .eyebrow { font-size: 12px; color: var(--blue); }
.research-feature p { font-size: 16px; }
.research-feature .feature-scope { font-size: 13px; color: var(--text-2); }
.quick-answers { padding-top: 4px; }
.docs-main .quick-answers h2 { font-size: 23px; margin: 0 0 14px; }
.quick-answers a { display: flex; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); font-size: 15px; }
.quick-answers a:hover { color: var(--blue); }
.quick-answers a span { color: var(--blue); }

/* The product tour has a different rhythm from a reference article. */
.doc .tour-head { padding: 22px 0 42px; border: 0; }
.doc .tour-head h1 { font-size: clamp(38px, 5vw, 62px); max-width: 22ch; }
.doc .tour-head .lede { font-size: 20px; }
.doc .tour-step { position: relative; padding: 36px 0 30px; border-top: 1px solid var(--line); }
.tour-number { display: block; color: var(--blue); font: 14px var(--mono); margin: 0 0 16px; }
.doc .tour-step h2 { padding-top: 0; border-top: 0; margin: 0 0 20px; font-size: 32px; line-height: 1.15; }
.tour-step .flow-figure { margin: 26px 0; }
.tour-step .flow-figure .flow-row { grid-template-columns: 1fr auto 1fr auto 1fr; }
.tour-next { border-top: 1px solid var(--line); }
#main { scroll-margin-top: calc(var(--nav-h) + 76px); }

@media (max-width: 1140px) {
  .docs-collections .reader-title { max-width: 230px; }
  .collection-tabs { gap: 22px; }
  .journey { padding: 22px; }
  .library-discover { gap: 28px; }
}
@media (max-width: 860px) {
  .has-docs { --reader-h: 64px; }
  .docs-collections .reader-title { display: none; }
  .docs-collections .wrap { display: block; }
  .collection-tabs { gap: 24px; }
  .docs, .docs.no-rail { grid-template-areas: "main"; }
  .page-contents { display: none; }
  .mobile-reader { display: block; position: sticky; top: var(--nav-h); z-index: 18; background: var(--bg); border-bottom: 1px solid var(--line); }
  .mobile-reader .wrap { position: relative; }
  .mobile-reader .mobile-docs { display: block; border: 0; background: transparent; border-radius: 0; }
  .mobile-docs summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; height: var(--reader-h); list-style: none; }
  .mobile-docs summary::-webkit-details-marker { display: none; }
  .mobile-docs summary .reader-heading { margin: 0; min-width: 0; font-weight: 400; }
  .reader-heading b, .reader-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reader-heading b { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text); }
  .reader-heading small { font-size: 12px; line-height: 1.5; color: var(--text-2); }
  .mobile-docs summary .browse-label { margin: 0; font-size: 13px; color: var(--blue); flex-shrink: 0; }
  .browse-label::after { content: " ↓"; }
  .mobile-docs[open] .browse-label::after { content: " ↑"; }
  .reader-dropdown { position: absolute; left: 24px; right: 24px; top: 100%; padding: 22px; border: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--bg); box-shadow: var(--shadow); max-height: calc(100dvh - var(--nav-h) - var(--reader-h) - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-docs nav { padding: 0; max-height: none; overflow: visible; }
  .reader-contents { margin-bottom: 26px; padding-bottom: 18px !important; border-bottom: 1px solid var(--line); }
  .reader-contents ol { padding: 0; margin: 0; list-style: none; }
  .reader-contents a { display: block; padding: 8px 0; font-size: 14px; color: var(--text-2); text-decoration: none; }
  .reader-contents a[aria-current="location"] { color: var(--blue); font-weight: 600; }
  .docs-main h2, .docs-main h3, .collection-group { scroll-margin-top: calc(var(--nav-h) + var(--reader-h) + 22px); }
  .docs.library-home { padding-top: 32px; }
  .journeys { grid-template-columns: 1fr; }
  .journey + .journey { border-left: 0; border-top: 1px solid var(--line); }
  .journey p { min-height: 0; }
  .journey ol { margin-bottom: 16px; }
  .library-discover { grid-template-columns: 1fr; }
  .evidence-types > div { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 520px) {
  .research-entry { grid-template-columns: 1fr; padding: 20px; }
  .paper-download { flex-direction: row-reverse; align-items: center; min-height: 0; min-width: 0; }
  .benefit-list > div { gap: 10px; grid-template-columns: 30px minmax(0, 1fr); }
  .research-feature { padding: 24px; }
  .doc .tour-step h2 { font-size: 28px; }
  .tour-step .flow-figure .flow-row { grid-template-columns: 1fr; }
}
@media print {
  .mobile-reader, .reader-title { display: none !important; }
  .docs.library-home { max-width: none; }
  .journeys, .library-discover { display: block; }
  .journey + .journey { border-left: 0; border-top: 1px solid var(--line); }
}

/* One offset per anchor, and an exact header height at every phone width. */
html { scroll-padding-top: 0; }
.nav-in { height: calc(var(--nav-h) - 1px); }
.nav-links { margin-left: auto; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
main [id] { scroll-margin-top: calc(var(--nav-h) + 28px); }
.has-docs main [id] { scroll-margin-top: calc(var(--nav-h) + var(--docs-bar) + 28px); }
@media (max-width: 860px) {
  .mobile-reader .mobile-docs { padding: 0; margin: 0; border: 0; }
  .mobile-docs summary::after { display: none; }
  .has-docs main [id] { scroll-margin-top: calc(var(--nav-h) + var(--reader-h) + 22px); }
}
@media (max-width: 760px) {
  :root { --nav-h: 98px; }
  .nav-in { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 38px 27px; grid-template-areas: "brand actions" "links links"; padding: 12px 24px 8px; gap: 12px 20px; }
  .nav-in .brand { grid-area: brand; }
  .nav-actions { grid-area: actions; gap: 12px; }
  .nav-links { grid-area: links; margin: 0; justify-content: flex-start; flex-wrap: nowrap; gap: 24px; height: 27px; font-size: 14px; }
}