/* ==========================================================================
   help.tryruni.com

   Same voice as website6 next door — Geist, near-black on white, one accent
   blue, gold only for the moment something lands — with two things the
   marketing site does not need:

   1. A dark theme. Help pages are read at 1am by somebody whose terminal is
      already dark, and a white flash is a small cruelty. Every colour is a
      variable and the theme swaps the variables, so there is one set of rules
      rather than two.
   2. A documentation grammar: sidebar, contents rail, steps, callouts, code
      blocks, symptom cards. Each of those is a component here rather than a
      pattern re-invented per page.

   The rule the marketing site set and this one keeps: no box unless it earns
   one, and nothing uppercase.
   ========================================================================== */

:root {
  color-scheme: light;

  --ink: #060707;
  --ink-2: rgba(6, 7, 7, 0.72);
  --grey: rgba(6, 7, 7, 0.58);
  --grey-2: rgba(6, 7, 7, 0.42);
  --page: #ffffff;
  --surface: #ffffff;
  --inset: #f6f6f5;
  --muted: #f4f4f4;
  --hairline: rgba(6, 7, 7, 0.09);
  --hairline-2: rgba(6, 7, 7, 0.055);

  --accent: #2563eb;
  --accent-lit: #3b82f6;
  --accent-soft: rgba(37, 99, 235, 0.09);
  --gold: #f0d840;
  --gold-ink: #8a6a00;
  --gold-soft: rgba(240, 216, 64, 0.16);
  --green: #15803d;
  --green-soft: rgba(21, 128, 61, 0.09);
  --amber: #b45309;
  --amber-soft: rgba(180, 83, 9, 0.09);
  --red: #b91c1c;
  --red-soft: rgba(185, 28, 28, 0.08);

  --ring: rgba(6, 7, 7, 0.15) 0 0 0 0.5px;
  --shadow-card: rgba(6, 7, 7, 0.13) 0 0 0 0.5px, rgba(0, 0, 0, 0.05) 0 4px 6px -1px, rgba(0, 0, 0, 0.05) 0 2px 4px -2px;
  --shadow-pop: rgba(6, 7, 7, 0.14) 0 0 0 0.5px, rgba(0, 0, 0, 0.13) 0 24px 48px -12px, rgba(0, 0, 0, 0.08) 0 8px 16px -8px;

  --term-bg: #0e1012;
  --term-ink: rgba(255, 255, 255, 0.82);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);

  --top-h: 56px;
  --rail: 262px;
  --toc: 224px;
}

/* The dark theme is a different paper, not an inverted page: surfaces lift
   with lightness rather than with shadow, because a shadow on black is
   invisible and every card would otherwise dissolve into the background. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --ink: #f2f3f3;
  --ink-2: rgba(242, 243, 243, 0.74);
  --grey: rgba(242, 243, 243, 0.58);
  --grey-2: rgba(242, 243, 243, 0.42);
  --page: #0b0c0d;
  --surface: #131516;
  --inset: #17191b;
  --muted: #17191b;
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-2: rgba(255, 255, 255, 0.06);

  --accent: #7aa5f8;
  --accent-lit: #5b8def;
  --accent-soft: rgba(91, 141, 239, 0.14);
  --gold: #f0d840;
  --gold-ink: #f0d840;
  --gold-soft: rgba(240, 216, 64, 0.13);
  --green: #5ec98a;
  --green-soft: rgba(94, 201, 138, 0.12);
  --amber: #e8a54a;
  --amber-soft: rgba(232, 165, 74, 0.12);
  --red: #f08a8a;
  --red-soft: rgba(240, 138, 138, 0.11);

  --ring: rgba(255, 255, 255, 0.1) 0 0 0 0.5px;
  --shadow-card: rgba(255, 255, 255, 0.08) 0 0 0 0.5px;
  --shadow-pop: rgba(255, 255, 255, 0.1) 0 0 0 0.5px, rgba(0, 0, 0, 0.6) 0 24px 48px -12px;

  --term-bg: #08090a;
  --term-ink: rgba(255, 255, 255, 0.8);
}

@media (prefers-color-scheme: dark) {
  /* Only when the reader has not chosen for themselves. `data-theme` is set by
     the inline boot script from localStorage and wins over this block. */
  :root:not([data-theme]) {
    color-scheme: dark;
    --ink: #f2f3f3;
    --ink-2: rgba(242, 243, 243, 0.74);
    --grey: rgba(242, 243, 243, 0.58);
    --grey-2: rgba(242, 243, 243, 0.42);
    --page: #0b0c0d;
    --surface: #131516;
    --inset: #17191b;
    --muted: #17191b;
    --hairline: rgba(255, 255, 255, 0.1);
    --hairline-2: rgba(255, 255, 255, 0.06);
    --accent: #7aa5f8;
    --accent-lit: #5b8def;
    --accent-soft: rgba(91, 141, 239, 0.14);
    --gold-ink: #f0d840;
    --gold-soft: rgba(240, 216, 64, 0.13);
    --green: #5ec98a;
    --green-soft: rgba(94, 201, 138, 0.12);
    --amber: #e8a54a;
    --amber-soft: rgba(232, 165, 74, 0.12);
    --red: #f08a8a;
    --red-soft: rgba(240, 138, 138, 0.11);
    --ring: rgba(255, 255, 255, 0.1) 0 0 0 0.5px;
    --shadow-card: rgba(255, 255, 255, 0.08) 0 0 0 0.5px;
    --shadow-pop: rgba(255, 255, 255, 0.1) 0 0 0 0.5px, rgba(0, 0, 0, 0.6) 0 24px 48px -12px;
    --term-bg: #08090a;
    --term-ink: rgba(255, 255, 255, 0.8);
  }
}

/* ---- moving between pages -----------------------------------------------------
   This site is thirty static documents, so following a link is a real
   navigation and used to look like one: a white flash, the chrome redrawn, the
   sidebar snapping back to the top.

   A cross-document view transition fixes it without a router, a bundler or a
   single line of client-side navigation code. The browser holds the old page
   on screen, paints the new one, and animates between them. The three parts
   that are identical on both pages — header, sidebar, contents rail — are
   named, so they are treated as the same element moving rather than as one
   thing disappearing and another appearing; only the article crossfades.

   Where it is unsupported the navigation is exactly what it was before, which
   is why there is no feature test anywhere near it. */

@view-transition { navigation: auto; }

.top { view-transition-name: chrome; }
.side { view-transition-name: rail; }
.toc { view-transition-name: contents; }
.foot { view-transition-name: base; }
.doc { view-transition-name: page; }

/* The chrome is the same markup on both sides, so leaving it alone is the
   whole effect: it stays put while the page under it changes. */
::view-transition-old(chrome),
::view-transition-new(chrome),
::view-transition-old(rail),
::view-transition-new(rail),
::view-transition-old(contents),
::view-transition-new(contents),
::view-transition-old(base),
::view-transition-new(base) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(page) { animation: vt-out 0.14s ease both; }
::view-transition-new(page) { animation: vt-in 0.3s cubic-bezier(0.22, 0.61, 0.21, 1) both; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page),
  ::view-transition-new(page) { animation: none; }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchors land under the sticky header otherwise, which puts the heading you
     followed a link to just above the fold. */
  scroll-padding-top: calc(var(--top-h) + 20px);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); }

a { color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--page);
  border-radius: 0 0 var(--r-sm) 0;
  font-size: 14px;
  text-decoration: none;
}
.skip:focus { left: 0; }

.mark { display: block; flex: none; }

/* ---- buttons -------------------------------------------------------------- */

.btn-solid,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font: 500 13.5px/1 var(--sans);
  letter-spacing: -0.006em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.3s var(--ease), box-shadow 0.2s ease;
}
.btn-solid { background: var(--ink); color: var(--page); }
.btn-solid:hover { transform: translateY(-1px); opacity: 0.9; }
.btn-solid:active { transform: none; }
.btn-ghost { background: var(--surface); box-shadow: var(--ring); color: var(--ink); }
.btn-ghost:hover { background: var(--inset); }
.btn-lg { height: 44px; padding: 0 22px; font-size: 15px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--grey);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.icon-btn:hover { background: var(--inset); color: var(--ink); }
.icon-btn .i-moon { display: none; }
:root[data-theme='dark'] .icon-btn .i-sun { display: none; }
:root[data-theme='dark'] .icon-btn .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .icon-btn .i-sun { display: none; }
  :root:not([data-theme]) .icon-btn .i-moon { display: block; }
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 19px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--surface);
  box-shadow: var(--ring), 0 1px 0 var(--hairline);
  font: 500 11px/1 var(--mono);
  color: var(--grey);
  letter-spacing: 0;
}

/* ---- header --------------------------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--top-h);
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 0.5px solid var(--hairline);
}
.top-inner {
  max-width: 1440px;
  height: 100%;
  margin-inline: auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  text-decoration: none;
  color: var(--ink);
  font: 550 15.5px/1 var(--sans);
}
.brand-sub {
  padding-left: 7px;
  margin-left: 1px;
  border-left: 1px solid var(--hairline);
  color: var(--grey);
  font-weight: 400;
}

/* The search trigger is a field-shaped button, not a field: the real input
   lives in the overlay, and two focusable search boxes on one page is how you
   get a reader typing into the one that does nothing. */
.find {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(320px, 34vw);
  height: 32px;
  padding: 0 8px 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--inset);
  box-shadow: var(--ring);
  color: var(--grey);
  font: 400 13px/1 var(--sans);
  cursor: pointer;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.find:hover { background: var(--surface); box-shadow: var(--ring), rgba(0, 0, 0, 0.05) 0 2px 8px -2px; }
.find span { flex: 1; text-align: left; }
.find-key { margin-left: auto; }

.top-links { display: flex; gap: 2px; margin-left: auto; }
.top-links a {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--grey);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease;
}
.top-links a:hover { color: var(--ink); background: var(--inset); }
.top-links a.is-on { color: var(--ink); background: var(--inset); }

.top-cta { display: flex; align-items: center; gap: 8px; flex: none; }

/* ---- scroll progress ---------------------------------------------------------
   Two pixels on the header's bottom edge. It uses the foreground colour rather
   than the accent, so it stays legible in both themes without a second value
   to keep in step, and it scales from the left so the fill grows in reading
   direction. scaleX rather than width: a transform does not make the browser
   lay the header out again sixty times a second. */

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--ink);
  opacity: 0.5;
  transform: scaleX(var(--read, 0));
  transform-origin: left center;
  will-change: transform;
}
/* Armed a moment after load, so the first value lands without sweeping. */
.progress i.live { transition: transform 0.16s linear; }
:root[data-theme='dark'] .progress i { opacity: 0.62; }

.burger {
  display: none;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.32s var(--ease);
}
.burger[aria-expanded='true'] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: var(--top-h) 0 0;
  z-index: 45;
  background: var(--page);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[hidden] { display: none; }
.drawer-inner { padding: 12px 20px 40px; }
.drawer-group { padding: 12px 0; border-bottom: 0.5px solid var(--hairline); }
.drawer-head { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--grey-2); }
.drawer-group a {
  display: block;
  padding: 9px 0;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.drawer-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.drawer-cta .btn-solid, .drawer-cta .btn-ghost { height: 44px; }
body.locked { overflow: hidden; }

/* ---- documentation shell --------------------------------------------------- */

.shell {
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--toc);
  gap: 40px;
  align-items: start;
}

.side {
  position: sticky;
  top: var(--top-h);
  max-height: calc(100dvh - var(--top-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 0 60px;
  scrollbar-width: thin;
}
.side::-webkit-scrollbar { width: 7px; }
.side::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 99px; }
.side-inner { padding-right: 10px; }
.side-group + .side-group { margin-top: 24px; }

/* The label is a heading for the list, not a member of it, so it sits outside
   the rail entirely — flush left, where the spine is not. */
.side-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--grey-2);
}
.side-head svg { color: var(--grey-2); transition: color 0.25s var(--ease); }
.side-group.is-open .side-head { color: var(--ink); }
.side-group.is-open .side-head svg { color: var(--accent); }

/* ---- the hook rail ----------------------------------------------------------
   Three layers on one spine:

     .rail-base   a faint line the whole height of the group, so the rows read
                  as attached to something;
     .rail-hook   the accent, running from the top of the group down to the
                  current page and turning into it — one box with a left and a
                  bottom border and a rounded corner, so the turn is a real
                  corner rather than two lines that happen to meet;
     .rail-ghost  the same shape, dimmer, drawn from where the accent ends on
                  to whatever you are hovering or have tabbed to. Above the
                  current page it hooks the other way up.

   Script sets the geometry as custom properties and animates height, which is
   why nothing here is transitioning `top` and `bottom` at the same time. */

.side-rail { position: relative; padding-left: 0; }

.rail-base {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--hairline);
}

.rail-hook,
.rail-ghost {
  position: absolute;
  left: 0;
  width: 12px;
  border-left: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  border-bottom-left-radius: 9px;
  pointer-events: none;
}
.rail-hook {
  top: 0;
  height: var(--hook, 0px);
  border-left-color: var(--accent-lit);
  border-bottom-color: var(--accent-lit);
  transition: height 0.44s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.rail-ghost {
  top: var(--ghost-top, 0px);
  height: var(--ghost-h, 0px);
  border-left-color: var(--grey-2);
  border-bottom-color: var(--grey-2);
  opacity: 0;
  transition: opacity 0.18s ease, height 0.28s var(--ease), top 0.28s var(--ease);
}
.rail-ghost.on { opacity: 0.55; }
/* Hovering a row above the current one: the same corner, turned the other way. */
.rail-ghost.up {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-top: 1.5px solid var(--grey-2);
  border-top-left-radius: 9px;
}

.side ul { list-style: none; margin: 0; padding: 0; }
.side li a {
  display: block;
  padding: 6px 8px 6px 21px;
  border-radius: 0 7px 7px 0;
  color: var(--grey);
  font-size: 13.5px;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.side li a:hover { color: var(--ink); background: var(--hairline-2); }
/* No pill on the current row. The rail already says which one it is, and a
   tinted box beside a coloured rail is the same fact stated twice. */
.side li a.is-on { color: var(--ink); font-weight: 500; background: none; }
.side li a:focus-visible { outline-offset: -2px; }

.side-ask {
  margin-top: 28px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--inset);
}
.side-ask p { margin: 0 0 4px; font-size: 13px; font-weight: 500; }
.side-ask a { font-size: 12.5px; color: var(--accent); text-decoration: none; word-break: break-word; }
.side-ask a:hover { text-decoration: underline; }

.doc { min-width: 0; padding: 30px 0 96px; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--grey-2);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.doc h1 {
  margin: 0 0 12px;
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.019em;
  text-wrap: balance;
}
.lede {
  margin: 0;
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--grey);
}
.applies {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--inset);
  box-shadow: var(--ring);
  font-size: 12.5px;
  color: var(--grey);
}

/* ---- contents rail --------------------------------------------------------- */

.toc {
  position: sticky;
  top: var(--top-h);
  max-height: calc(100dvh - var(--top-h));
  overflow-y: auto;
  padding: 34px 0 60px;
  font-size: 13px;
}
.toc-head { margin: 0 0 10px; font-size: 12px; font-weight: 500; color: var(--grey-2); }

/* Same idea as the sidebar, one dimension smaller: a spine, and an accent
   segment that slides to the heading you are reading. Sliding one element
   beats recolouring twenty borders — the eye follows the movement and knows
   the rail did not jump somewhere unrelated. */
.toc-rail { position: relative; }
.toc-rail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}
.toc-mark {
  position: absolute;
  left: 0;
  top: var(--mark-top, 0px);
  width: 1.5px;
  height: var(--mark-h, 0px);
  border-radius: 2px;
  background: var(--accent-lit);
  opacity: 0;
  transition: top 0.3s var(--ease), height 0.3s var(--ease), opacity 0.2s ease;
}
.toc-mark.on { opacity: 1; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li a {
  display: block;
  padding: 5px 0 5px 13px;
  color: var(--grey);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease;
}
.toc li.lvl-3 a { padding-left: 25px; font-size: 12.5px; }
.toc li a:hover { color: var(--ink); }
.toc li a.is-on { color: var(--ink); font-weight: 500; }
.toc-top {
  display: inline-block;
  margin-top: 16px;
  color: var(--grey-2);
  font-size: 12.5px;
  text-decoration: none;
}
.toc-top:hover { color: var(--ink); }

/* ---- prose ----------------------------------------------------------------- */

.prose { max-width: 74ch; margin-top: 36px; }

.prose h2 {
  position: relative;
  margin: 52px 0 14px;
  padding-top: 26px;
  border-top: 0.5px solid var(--hairline);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.016em;
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  margin: 34px 0 10px;
  font-weight: 550;
  font-size: 17.5px;
  letter-spacing: -0.012em;
}
.prose h4 {
  margin: 26px 0 8px;
  font-weight: 550;
  font-size: 15px;
  letter-spacing: -0.008em;
}

.anchor {
  margin-left: 8px;
  color: var(--grey-2);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

.prose p { margin: 0 0 16px; color: var(--ink-2); }
.prose > p:first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 550; }
.prose a:not(.btn-solid):not(.btn-ghost) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.prose a:not(.btn-solid):not(.btn-ghost):hover { text-decoration-color: var(--accent); }

.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; color: var(--ink-2); }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--grey-2); }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin: 7px 0 0; }

.prose hr { margin: 40px 0; border: 0; border-top: 0.5px solid var(--hairline); }

.prose code {
  font-family: var(--mono);
  font-size: 0.855em;
  background: var(--inset);
  box-shadow: var(--ring);
  padding: 1.5px 5px;
  border-radius: 5px;
  letter-spacing: 0;
  word-break: break-word;
}
.prose a code { color: inherit; }

/* Blockquote as an aside, not as a pull quote: used for the sentence that
   reframes the section rather than for decoration. */
.prose blockquote {
  margin: 22px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--gold);
  color: var(--grey);
  font-size: 16px;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* ---- code blocks ----------------------------------------------------------- */

.code {
  position: relative;
  margin: 20px 0 22px;
  border-radius: var(--r-md);
  background: var(--term-bg);
  box-shadow: var(--ring);
  overflow: hidden;
}
.code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font: 500 11.5px/1 var(--mono);
  color: rgba(255, 255, 255, 0.44);
  letter-spacing: 0.02em;
}
.code-head b { font-weight: 500; }
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
  font: 500 11.5px/1 var(--sans);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.code-copy:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.code-copy .tick { display: none; }
.code-copy.done { color: #7ee2a8; }
.code-copy.done .tick { display: block; }
.code-copy.done .clip { display: none; }
.code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font: 400 13px/1.65 var(--mono);
  color: var(--term-ink);
  letter-spacing: 0;
  tab-size: 2;
}
.code pre code { background: none; box-shadow: none; padding: 0; font-size: inherit; }
/* A leading $ is a prompt, not something to type. Dimmed and unselectable so a
   copy of the line by hand does not carry it either. */
.code .p { color: rgba(255, 255, 255, 0.3); user-select: none; }
.code .c { color: rgba(255, 255, 255, 0.38); font-style: italic; }
.code .s { color: #a7d68a; }
.code .k { color: #8ab4f8; }
.code .o { color: #7ee2a8; }
.code .w { color: #f0c674; }
.code .b { color: #f08a8a; }

/* ---- callouts --------------------------------------------------------------- */

/* A tinted panel with a rule down its left edge and a one-word label in the
   accent colour. The label is what the icon used to be, in fewer pixels and
   in the reader's own language. */
.note {
  --note-key: var(--grey);
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 2px solid var(--note-key);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--inset);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.note-tag {
  margin: 0 0 5px !important;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.005em;
  color: var(--note-key);
}
.note p { margin: 0 0 10px; }
.note > *:last-child { margin-bottom: 0; }
.note > div > *:last-child { margin-bottom: 0; }
.note b, .note strong { color: var(--ink); font-weight: 550; }
.note ul, .note ol { margin: 8px 0 0; padding-left: 20px; }
.note li { margin-bottom: 6px; }

.note.tip { --note-key: var(--accent); background: var(--accent-soft); }
.note.warn { --note-key: var(--amber); background: var(--amber-soft); }
.note.stop { --note-key: var(--red); background: var(--red-soft); }
.note.good { --note-key: var(--green); background: var(--green-soft); }

/* ---- steps ------------------------------------------------------------------
   A numbered procedure with a rule running down the gutter, so a long step
   with a code block in it still reads as one of five rather than as a new
   section. The counter is CSS so a step can be inserted without renumbering. */

.steps { counter-reset: step; list-style: none; margin: 24px 0; padding: 0; }
.steps > li {
  position: relative;
  margin: 0;
  padding: 0 0 26px 44px;
}
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--ring);
  font: 500 13px/1 var(--sans);
  color: var(--ink);
}
.steps > li::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 4px;
  width: 1px;
  background: var(--hairline);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps > li > p:first-child,
.steps > li > h3:first-child { margin-top: 3px; }
.steps > li > h3 { margin: 2px 0 8px; font-size: 16px; }
.steps > li > *:last-child { margin-bottom: 0; }

/* ---- symptom cards -----------------------------------------------------------
   The troubleshooting grammar: what you see, why it happens, what to do. Three
   labelled rows rather than three paragraphs, because a reader in this mood is
   scanning for their symptom and nothing else. */

.fixit {
  margin: 22px 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.fixit + .fixit { margin-top: 14px; }
.fixit-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px;
  background: var(--inset);
  border-bottom: 0.5px solid var(--hairline);
}
.fixit-head b { font-size: 15px; font-weight: 550; letter-spacing: -0.01em; }
.fixit-row { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 14px 18px; }
.fixit-row + .fixit-row { border-top: 0.5px solid var(--hairline-2); }
.fixit-row > span:first-child { font-size: 12px; color: var(--grey-2); padding-top: 2px; }
.fixit-row > div > *:first-child { margin-top: 0; }
.fixit-row > div > *:last-child { margin-bottom: 0; }
.fixit-row p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.fixit .code { margin: 12px 0 0; }

/* ---- tables ------------------------------------------------------------------ */

.table-wrap { margin: 22px 0; overflow-x: auto; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.prose th {
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--grey-2);
  white-space: nowrap;
}
.prose td {
  padding: 11px 14px 11px 0;
  border-bottom: 0.5px solid var(--hairline-2);
  color: var(--ink-2);
  vertical-align: top;
  line-height: 1.55;
}
.prose td:last-child, .prose th:last-child { padding-right: 0; }
.prose tr:last-child td { border-bottom: 0; }

/* ---- tabs -------------------------------------------------------------------
   Used for "the same step, per operating system". Without JS every panel is
   shown with its label above it, so the page never hides content behind a
   control that is not running. */

.tabs { margin: 22px 0; }
.tab-btns { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 0.5px solid var(--hairline); }
.tab-btn {
  padding: 8px 12px;
  border: 0;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  color: var(--grey);
  font: 500 13.5px/1 var(--sans);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent-lit); }
.tab-panel > *:first-child { margin-top: 0; }
.tab-label { display: none; }
.no-js .tab-btns { display: none; }
.no-js .tab-label {
  display: block;
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 550;
  color: var(--grey);
}

/* ---- inline extras ------------------------------------------------------------ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--inset);
  box-shadow: var(--ring);
  color: var(--grey);
  white-space: nowrap;
}
.pill.ok { background: var(--green-soft); color: var(--green); box-shadow: none; }
.pill.warn { background: var(--amber-soft); color: var(--amber); box-shadow: none; }
.pill.bad { background: var(--red-soft); color: var(--red); box-shadow: none; }

/* A path through the app, written the way the app reads: Settings → Agents. */
.path {
  font-size: 0.95em;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 22px 0;
}
.cards a {
  padding: 15px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-decoration: none !important;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cards a:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.cards b { display: block; font-size: 14.5px; font-weight: 550; margin-bottom: 4px; }
.cards span { display: block; font-size: 13px; line-height: 1.5; color: var(--grey); }

/* ---- feedback + pager ---------------------------------------------------------- */

.helpful {
  max-width: 74ch;
  margin-top: 56px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--inset);
}
.helpful-q { margin: 0 0 12px; font-size: 14.5px; font-weight: 550; }
.helpful-btns { display: flex; gap: 8px; }
.helpful-btn {
  min-width: 62px;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--ring);
  color: var(--ink);
  font: 500 13.5px/1 var(--sans);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.18s ease;
}
.helpful-btn:hover { transform: translateY(-1px); }
.helpful-btn.is-on { background: var(--ink); color: var(--page); }
.helpful-said { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--grey); }
.helpful-said a { color: var(--ink); }

.pager {
  max-width: 74ch;
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pager-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  box-shadow: var(--ring);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.3s var(--ease);
}
.pager-card:hover { background: var(--inset); transform: translateY(-1px); }
.pager-card span { font-size: 12px; color: var(--grey-2); }
.pager-card b { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.pager-card.next { text-align: right; }

/* ---- section index ------------------------------------------------------------- */

.art-grid { display: grid; gap: 10px; margin-top: 36px; max-width: 74ch; }
.art-card {
  position: relative;
  display: block;
  padding: 17px 46px 17px 19px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.art-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.art-card b { display: block; font-size: 15.5px; font-weight: 550; letter-spacing: -0.012em; margin-bottom: 4px; }
.art-card > span { display: block; font-size: 14px; line-height: 1.5; color: var(--grey); }
.art-go {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-2);
  transition: transform 0.3s var(--ease), color 0.2s ease;
}
.art-card:hover .art-go { transform: translateY(-50%) translateX(3px); color: var(--accent); }

/* ---- home ---------------------------------------------------------------------- */

.home .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding: 92px 24px 76px;
}
.hero-sky { position: absolute; inset: -60px 0 auto; height: 620px; z-index: -1; pointer-events: none; }
.hero-wash {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(860px 400px at 50% 14%, rgba(59, 130, 246, 0.2), transparent 68%),
    radial-gradient(520px 280px at 78% 34%, rgba(240, 216, 64, 0.14), transparent 72%),
    radial-gradient(620px 320px at 20% 30%, rgba(59, 130, 246, 0.12), transparent 70%);
  filter: blur(8px);
  animation: drift 30s ease-in-out infinite alternate;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 18%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(680px 380px at 50% 22%, #000, transparent 72%);
  mask-image: radial-gradient(680px 380px at 50% 22%, #000, transparent 72%);
}
@keyframes drift { to { transform: translate3d(0, -22px, 0) scale(1.06); } }

.eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--ring);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--grey);
}
.home h1 {
  margin: 0 0 16px;
  font-weight: 450;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
.hero-lede {
  max-width: 50ch;
  margin: 0 auto 30px;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--grey);
}

.hero-find {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(540px, 100%);
  margin: 0 auto;
  height: 54px;
  padding: 0 12px 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--ring), rgba(0, 0, 0, 0.07) 0 10px 26px -10px;
  color: var(--grey);
  font: 400 16px/1 var(--sans);
  cursor: pointer;
  transition: box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}
.hero-find:hover {
  transform: translateY(-1px);
  box-shadow: rgba(6, 7, 7, 0.3) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 14px 32px -12px;
}
:root[data-theme='dark'] .hero-find:hover { box-shadow: rgba(255, 255, 255, 0.24) 0 0 0 1px; }
.hero-find span { flex: 1; text-align: left; }
.hero-find svg { color: var(--grey-2); }

.hero-quick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--grey-2);
}
.hero-quick a {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--inset);
  box-shadow: var(--ring);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s ease, transform 0.25s var(--ease);
}
.hero-quick a:hover { background: var(--surface); transform: translateY(-1px); }

.band { padding: 0 24px; margin-top: 96px; }
.band-tight { margin-top: 68px; }
.band-inner { max-width: 1080px; margin-inline: auto; }
.sec-head { max-width: 620px; margin: 0 0 30px; }
/* A heading with its own "see it all" link on the far right, on one baseline.
   Saves a paragraph of sub-copy under every section on the page. */
.sec-head-row {
  max-width: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--hairline);
}
.sec-link { font-size: 13.5px; color: var(--grey); text-decoration: none; white-space: nowrap; }
.sec-link:hover { color: var(--ink); }
.kicker { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--accent); }

/* ---- agent row ----------------------------------------------------------------
   The vendors' own marks, in their own colours, at the size the marketing site
   uses them. Six links, and most visitors want exactly one of them. */

.agent-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 22px 10px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--ring);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.2s ease;
}
.agent svg { color: var(--tint, var(--ink)); transition: transform 0.35s var(--ease); }
:root[data-theme='dark'] .agent svg { color: var(--tint, var(--ink)); }
.agent b { font-size: 13px; font-weight: 500; letter-spacing: -0.008em; text-align: center; }
.agent:hover { transform: translateY(-3px); background: var(--surface); box-shadow: var(--shadow-card); }
.agent:hover svg { transform: scale(1.08); }

/* OpenClaw's mark is near-black by design and disappears on a dark page. */
:root[data-theme='dark'] .agent[style*='2b2b2b'] svg { color: #e6e6e6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .agent[style*='2b2b2b'] svg { color: #e6e6e6; }
}

/* ---- symptom router ------------------------------------------------------------ */

.sym-list { margin-top: 4px; }
.sym {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px 14px 0;
  border-top: 0.5px solid var(--hairline);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.16s ease, padding 0.26s var(--ease);
}
.sym:last-child { border-bottom: 0.5px solid var(--hairline); }
.sym svg { flex: none; color: var(--grey-2); transition: transform 0.28s var(--ease), color 0.16s ease; }
.sym:hover { color: var(--ink); padding-left: 6px; }
.sym:hover svg { color: var(--accent); transform: translateX(3px); }

.term-wrap { display: flex; flex-direction: column; gap: 14px; }
.term-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--grey-2); }
.term-note a { color: var(--ink); }

/* ---- setup path ----------------------------------------------------------------
   A numbered rail rather than five cards. Cards gave equal visual weight to
   five things that are strictly sequential, so nobody could tell it was an
   order. */

.path { counter-reset: p; list-style: none; margin: 0; padding: 0; }
.path li { position: relative; counter-increment: p; }
.path li a {
  display: grid;
  grid-template-columns: 34px minmax(0, 21ch) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 18px;
  padding: 16px 4px 16px 0;
  border-top: 0.5px solid var(--hairline);
  text-decoration: none;
  transition: padding 0.26s var(--ease), background 0.2s ease;
}
.path li:last-child a { border-bottom: 0.5px solid var(--hairline); }
.path li a::before {
  content: counter(p);
  font: 500 12.5px/1 var(--mono);
  color: var(--grey-2);
}
.path li a b { font-size: 15.5px; font-weight: 550; letter-spacing: -0.012em; color: var(--ink); }
.path li a span { font-size: 14px; line-height: 1.5; color: var(--grey); }
.path li a:hover { padding-left: 6px; }
.path li a:hover::before { color: var(--accent); }
.band h2 {
  margin: 0 0 10px;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.018em;
}
.sub { margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--grey); }
.sub code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--inset);
  padding: 1.5px 5px;
  border-radius: 5px;
}


.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cat {
  position: relative;
  display: block;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
/* A slow sheen from the corner the cursor is nowhere near. It reads as the
   card lifting toward the light rather than as an animation playing. */
.cat::after {
  content: '';
  position: absolute;
  inset: -40% 40% 40% -40%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.cat:hover::after { opacity: 1; transform: translate(28%, 28%); }
.cat-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--inset);
  color: var(--accent);
}
.cat b { position: relative; display: block; font-size: 16px; font-weight: 550; letter-spacing: -0.014em; margin-bottom: 5px; }
.cat-blurb { position: relative; display: block; font-size: 13.5px; line-height: 1.55; color: var(--grey); }
.cat-n { position: relative; display: block; margin-top: 12px; font-size: 12px; color: var(--grey-2); }

.split-help {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 44px;
  align-items: center;
}
.split-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

.term {
  border-radius: var(--r-md);
  background: var(--term-bg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.term-bar i { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.term-bar span { margin-left: 8px; font: 400 11.5px/1 var(--mono); color: rgba(255, 255, 255, 0.36); }
.term-body {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font: 400 12.5px/1.75 var(--mono);
  color: var(--term-ink);
  letter-spacing: 0;
}
.c-dim { color: rgba(255, 255, 255, 0.32); }
.c-ok { color: #7ee2a8; }
.c-warn { color: #f0c674; }
.c-bad { color: #f08a8a; }

.pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pop {
  display: block;
  padding: 17px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--ring);
  text-decoration: none;
  transition: background 0.22s ease, transform 0.3s var(--ease);
}
.pop:hover { background: var(--inset); transform: translateY(-2px); }
.pop b { display: block; font-size: 14.5px; font-weight: 550; letter-spacing: -0.012em; margin-bottom: 5px; }
.pop span { display: block; font-size: 13px; line-height: 1.5; color: var(--grey); }

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  margin-top: 110px;
  padding: 82px 24px 96px;
  background: var(--inset);
}
.closing::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(700px 340px at 50% 96%, rgba(59, 130, 246, 0.18), transparent 68%),
    radial-gradient(460px 240px at 24% 90%, rgba(240, 216, 64, 0.16), transparent 70%);
  filter: blur(10px);
  animation: drift 34s ease-in-out infinite alternate;
}
.closing h2 {
  margin: 0 0 12px;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.018em;
}
.closing .sub { margin-inline: auto; }
.closing-cta { display: flex; justify-content: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

.lost { max-width: 620px; margin: 0 auto; padding: 120px 24px 140px; text-align: center; }
.lost h1 { margin: 0 0 12px; font-weight: 450; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; }
.lost .sub { margin-inline: auto; }

/* ---- footer ----------------------------------------------------------------------
   The footer is the one place on the site allowed a picture for its own sake,
   and it is the same drawing tryruni.com ends on.

   It keeps a light palette in both themes. The illustration is drawn on cream
   paper; there is no dark version of it, and tinting one would either wash the
   artwork out or leave it floating in a rectangle of the wrong colour. So the
   page ends on paper instead — a plate at the bottom of a dark document rather
   than a dark footer with a light picture stuck to it. Every token the footer
   uses is re-declared here, which is why nothing inside it needs a
   theme-specific rule. */

.foot {
  --ink: #060707;
  --ink-2: rgba(6, 7, 7, 0.72);
  --grey: rgba(6, 7, 7, 0.58);
  --grey-2: rgba(6, 7, 7, 0.42);
  --surface: #fffef8;
  --inset: #f6f5ec;
  --hairline: rgba(6, 7, 7, 0.09);
  --ring: rgba(6, 7, 7, 0.15) 0 0 0 0.5px;

  position: relative;
  overflow: hidden;
  border-top: 0.5px solid rgba(6, 7, 7, 0.09);
  /* Warm paper, sampled from the illustration's own sky rather than chosen —
     the band and the artwork have to be the same value or the drawing sits in
     a faintly visible rectangle. Resample if the artwork is regenerated. */
  background: #fefef6;
  color: var(--ink);
}
/* Room for the drawing to stand in: it is placed against the bottom edge, so
   the footer has to reserve the height itself. */
.foot:has(.foot-scene) { padding-bottom: clamp(110px, 33.34vw, 520px); }

.foot-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: clamp(110px, 33.34vw, 520px);
  pointer-events: none;
  user-select: none;
}
.foot-scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  /* A short ramp, insurance for very wide viewports where the top of the band
     lands on skyline rather than sky. The two creams are identical, so there
     is nothing to disguise. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
}
@media (prefers-reduced-motion: no-preference) {
  .foot-scene img { animation: foot-scene-in 1.6s var(--ease) both; }
}
@keyframes foot-scene-in {
  from { opacity: 0; transform: translateY(14px) scale(1.015); }
  to { opacity: 1; transform: none; }
}

/* Above the sky. Both are already in flow; this only lifts them over the
   absolutely-placed drawing. */
.foot-inner,
.foot-bar { position: relative; z-index: 1; }

.foot-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 3fr;
  gap: 44px;
}
.foot-brand .brand { font-size: 16px; }
.foot-line { margin: 12px 0 16px; max-width: 24ch; font-size: 14px; line-height: 1.5; color: var(--grey); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-head { margin: 0 0 12px; font-size: 12.5px; font-weight: 500; color: var(--grey-2); }
.foot-col a {
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.18s ease;
}
.foot-col a:hover { color: var(--ink); }
.foot-bar {
  max-width: 1200px;
  margin-inline: auto;
  padding: 16px 24px 28px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--grey-2);
}
.foot-bar p { margin: 0; }
.foot-bar a { text-decoration: none; }
.foot-bar a:hover { color: var(--ink); }

/* ---- search overlay ---------------------------------------------------------------- */

.find-wrap {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 12vh 20px 20px;
}
.find-wrap[hidden] { display: none; }
.find-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 7, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade 0.2s var(--ease);
}
.find-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  max-height: 66vh;
  border-radius: var(--r-lg);
  background: var(--page);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: rise 0.24s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(-10px) scale(0.99); } to { opacity: 1; transform: none; } }

.find-line {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 14px 18px;
  border-bottom: 0.5px solid var(--hairline);
  color: var(--grey-2);
}
.find-line input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: 400 16px/1.4 var(--sans);
  color: var(--ink);
}
.find-line input::placeholder { color: var(--grey-2); }
.find-line input::-webkit-search-cancel-button { display: none; }
.find-esc { border: 0; background: none; padding: 0; cursor: pointer; }

.find-results { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.find-group {
  padding: 12px 10px 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--grey-2);
}
.find-hit {
  display: block;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
}
.find-hit b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.find-hit span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--grey); }
.find-hit mark { background: var(--gold-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.find-hit.is-on { background: var(--accent-soft); }
.find-hit.is-on b { color: var(--ink); }
.find-empty { padding: 34px 16px; text-align: center; font-size: 14px; color: var(--grey); }
.find-empty a { color: var(--ink); }

.find-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 0.5px solid var(--hairline);
  font-size: 12px;
  color: var(--grey-2);
}
.find-foot span { display: inline-flex; align-items: center; gap: 5px; }
.find-foot-mail { margin-left: auto; }
.find-foot-mail a { color: var(--ink); }

/* ---- reveal ---------------------------------------------------------------------- */

.js .home .band, .js .home .closing { opacity: 0; transform: translateY(16px); }
.js .home .band.in, .js .home .closing.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* ---- responsive ------------------------------------------------------------------- */

@media (max-width: 1240px) {
  .shell { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 34px; }
  .toc { display: none; }
}

@media (max-width: 1080px) {
  .top-links { display: none; }
  .find { margin-left: auto; }
  .agent-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid, .pop-grid { grid-template-columns: repeat(2, 1fr); }
  .split-help { grid-template-columns: 1fr; gap: 34px; }
  .foot-inner { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(3, 1fr); }
  .path li a { grid-template-columns: 30px 1fr; }
  .path li a span { grid-column: 2; }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding-inline: 20px; }
  .side { display: none; }
  .top-mail, .top-cta .btn-solid { display: none; }
  .burger { display: flex; }
  .find { width: auto; padding-right: 11px; }
  .find span, .find-key { display: none; }
  .find { width: 32px; height: 32px; justify-content: center; padding: 0; }
  .doc { padding-top: 22px; }
  .band { margin-top: 72px; }
  .pager { grid-template-columns: 1fr; }
  .pager-card.next { text-align: left; }
}

@media (max-width: 620px) {
  .cat-grid, .pop-grid { grid-template-columns: 1fr; }
  .agent-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .home .hero { padding: 64px 20px 56px; }
  .fixit-row { grid-template-columns: 1fr; gap: 6px; }
  .find-wrap { padding: 0; }
  .find-box { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .prose h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-wash, .closing::before { animation: none; }
  .find-scrim, .find-box { animation: none; }
  .rail-hook, .rail-ghost, .toc-mark { transition: opacity 0.15s ease; }
  .js .home .band, .js .home .closing { opacity: 1; transform: none; }
  .cat:hover, .pop:hover, .agent:hover, .art-card:hover, .cards a:hover,
  .pager-card:hover, .helpful-btn:hover, .hero-find:hover, .hero-quick a:hover { transform: none; }
  .sym:hover, .path li a:hover { padding-left: 0; }
  .agent:hover svg, .sym:hover svg, .art-card:hover .art-go { transform: none; }
  .helpful-btn:hover svg { transform: none; }
}

@media print {
  .top, .drawer, .side, .toc, .helpful, .pager, .foot, .find-wrap, .skip { display: none !important; }
  .shell { display: block; padding: 0; }
  .doc { padding: 0; }
  .code { background: none; box-shadow: none; border: 1px solid #ccc; }
  .code pre { color: #000; }
  .code-copy { display: none; }
}