:root {
  --bg: #07070b;
  --ink: #f4f1ea;
  --mute: #8b8796;
  --acid: #d6ff4b;
  --violet: #8a6dff;
  --line: rgba(244, 241, 234, 0.12);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
  cursor: none;
}

/* Sticky footer. body already reserves a full viewport via min-height, but the
   footer is just the last block in the flow, so on a short page (e.g. /docs)
   it stopped wherever the content ended and left the rest of the viewport
   empty underneath it. Making body a column and giving .floor an auto top
   margin pushes the footer to the bottom when there is spare room, and
   changes nothing once the content is tall enough to scroll. The backdrop
   layers (#field, .vignette, .noise, .spot, .cursor) are position:fixed, so
   they stay out of the flow and are unaffected. */
body {
  display: flex;
  flex-direction: column;
}

.floor {
  margin-top: auto;
  flex-shrink: 0;
}

a {
  color: var(--acid);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#field {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
}

.vignette,
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.vignette {
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

.noise {
  z-index: 2;
  opacity: var(--noise-opacity, 0.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='1024' height='1024'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch' seed='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 512px 512px;
  background-repeat: repeat;
}

.spot {
  position: fixed;
  top: 0;
  left: 0;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  background: radial-gradient(circle, rgba(138, 109, 255, 0.16), rgba(214, 255, 75, 0.05) 42%, transparent 70%);
  mix-blend-mode: screen;
}

.top,
.doc,
.floor {
  position: relative;
  z-index: 3;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding:
    calc(44px + env(safe-area-inset-top, 0px))
    calc(36px + env(safe-area-inset-right, 0px))
    28px
    calc(36px + env(safe-area-inset-left, 0px));
}

.nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: 0;
  color: var(--ink);
  font: 500 13px/1 "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 2px 10px 10px;
  cursor: inherit;
}

.nav-toggle-icon {
  width: 11px;
  height: 11px;
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  background: var(--acid);
  transition: transform 0.35s ease;
}

.nav-toggle-icon::before {
  width: 11px;
  height: 1px;
  left: 0;
  top: 5px;
}

.nav-toggle-icon::after {
  width: 1px;
  height: 11px;
  left: 5px;
  top: 0;
}

.top.is-nav-open .nav-toggle-icon::after {
  transform: rotate(90deg) scaleY(0);
}

.mark {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.28em;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
}

/* Boxed nav capsule: matches the homepage top menu - readable sentence case
   lifted off the background by a subtle bordered panel. */
.top-links {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(244, 241, 234, 0.2);
  border-radius: 12px;
  background: rgba(7, 7, 11, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Equal-width side columns keep the nav pill truly centred in the header,
   instead of centred in the (unequal) gap between the wordmark and the wider
   auth buttons. Mirrors the homepage's .top.slim treatment. On mobile .top
   becomes a grid, where these flex values are simply ignored. */
.top > .mark {
  flex: 1 1 0;
  min-width: 0;
}
.top > .auth-actions,
.top > .top-actions {
  flex: 1 1 0;
  justify-content: flex-end;
}

.top-links a {
  color: #cdcad6;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 7px 13px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.top-links a:hover,
.top-links a[aria-current="page"] {
  color: var(--ink);
  background: rgba(244, 241, 234, 0.05);
  text-decoration: none;
}

/* Account controls, injected into every page header by app.js. */
.auth-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* First paint uses the state remembered by look-boot.js, so the header does not
   flash the wrong buttons on every reload. app.js overwrites both of these with
   the truth as soon as /api/me answers. */
html[data-auth="in"] #auth-signin,
html[data-auth="in"] #auth-signup,
html[data-auth="out"] #auth-account,
html[data-auth="out"] #auth-logout {
  display: none;
}

html[data-auth="in"] #auth-account,
html[data-auth="in"] #auth-logout {
  display: inline-flex;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font: 600 13px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.02em;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(244, 241, 234, 0.16);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.auth-btn:hover {
  border-color: rgba(244, 241, 234, 0.4);
  background: rgba(244, 241, 234, 0.06);
}

.auth-btn.signup {
  background: var(--acid, #d6ff4b);
  border-color: var(--acid, #d6ff4b);
  color: #10110a;
}

.auth-btn.signup:hover {
  background: #e4ff7a;
  border-color: #e4ff7a;
}

.auth-btn.logout:hover {
  border-color: rgba(255, 122, 122, 0.5);
  color: #ffb4b4;
  background: rgba(255, 90, 90, 0.08);
}

.auth-btn[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .auth-actions {
    gap: 6px;
  }
  .auth-btn {
    padding: 8px 11px;
    font-size: 12.5px;
  }
}

.doc {
  width: min(760px, calc(100% - 48px));
  margin: 24px auto 96px;
  padding: 36px 36px 40px;
  border: 1px solid var(--line);
  background: rgba(7, 7, 11, 0.62);
  backdrop-filter: blur(18px);
}

.doc h1 {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -0.04em;
  line-height: 0.95;
}

/* Bilingual legal pages carry an English and a German version of the same
   document. The page keeps a single <h1> (the English title) for SEO; the
   German version's title is an <h2> that still reads as a full title. */
.doc h2.lang-title {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 64px 0 0;
}

.meta {
  margin: 18px 0 36px;
  color: var(--mute);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.doc h2 {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  margin: 36px 0 12px;
}

.doc h3 {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 28px 0 10px;
}

.doc p,
.doc li {
  color: rgba(244, 241, 234, 0.82);
  font-size: 16px;
  line-height: 1.65;
}

.doc p + p {
  margin-top: 12px;
}

.doc ul {
  margin: 8px 0 0 20px;
}

.doc li + li {
  margin-top: 8px;
}

.doc code {
  font-size: 0.9em;
  color: var(--acid);
}

.faq-group {
  margin-top: 40px;
  scroll-margin-top: 28px;
}

.faq-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}

.faq-group > h2 {
  margin: 0 0 22px;
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.faq-lead {
  margin: -8px 0 22px;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
}

.faq-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  scroll-margin-top: 28px;
}

/* Same control as Admin → Platforms → DISCORD MODERATION (web/src/styles.css). */
.gate-platform-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.gate-platform-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--mute);
  padding: 9px 12px;
  font: 500 12px/1 "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.gate-platform-tabs button:hover,
.gate-platform-tabs button.active {
  color: var(--ink);
  border-color: rgba(214, 255, 75, 0.45);
  background: rgba(214, 255, 75, 0.08);
}

.faq-answer {
  width: 100%;
  padding: 0 0 8px;
}

.faq-answer p:first-child,
.faq-answer ul:first-child {
  margin-top: 0;
}

.floor {
  border-top: 1px solid var(--line);
  padding:
    22px
    calc(36px + env(safe-area-inset-right, 0px))
    calc(28px + env(safe-area-inset-bottom, 0px))
    calc(36px + env(safe-area-inset-left, 0px));
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--mute);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.floor a {
  color: var(--ink);
  text-decoration: none;
}

.floor-legal {
  display: flex;
  gap: 16px;
  align-items: center;
}

.cursor {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  top: 0;
  left: 0;
  will-change: transform;
}

.cursor-dot,
.cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--acid);
  box-shadow: 0 0 12px var(--acid);
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244, 241, 234, 0.55);
  transition: border-color 0.2s, background 0.2s;
}

body.is-hover .cursor-ring {
  transform: translate(-50%, -50%) scale(1.68);
  border-color: var(--acid);
  background: rgba(214, 255, 75, 0.08);
}

.click-burst {
  position: fixed;
  width: 12px;
  height: 12px;
  border: 1px solid var(--acid);
  border-radius: 50%;
  pointer-events: none;
  z-index: 19;
  transform: translate(-50%, -50%) scale(1);
  animation: burst 0.7s ease-out forwards;
}

@keyframes burst {
  to {
    transform: translate(-50%, -50%) scale(18);
    opacity: 0;
  }
}

@media (pointer: coarse) {
  body {
    cursor: auto;
  }
  .cursor {
    display: none;
  }
  .letter:hover {
    filter: none;
  }
}

@media (max-width: 720px) {
  .top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding-left: max(32px, calc(env(safe-area-inset-left, 0px) + 20px));
    padding-right: max(32px, calc(env(safe-area-inset-right, 0px) + 20px));
    padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 16px));
    padding-bottom: 12px;
  }

  .floor {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding-left: max(32px, calc(env(safe-area-inset-left, 0px) + 20px));
    padding-right: max(32px, calc(env(safe-area-inset-right, 0px) + 20px));
    padding-top: 12px;
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  }

  .mark {
    letter-spacing: 0.16em;
    justify-self: start;
    min-width: 0;
  }

  .nav-toggle {
    display: inline-flex;
    justify-self: end;
    letter-spacing: 0.1em;
  }

  .top-links {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }

  .top.is-nav-open .top-links {
    display: flex;
  }

  .mark,
  .top-links a,
  .floor a,
  .floor span {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }

  .top-links a {
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 10px;
    font-size: 14px;
    letter-spacing: 0.01em;
  }

  .floor-legal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
    width: 100%;
    min-height: 0;
  }

  .floor-legal a,
  .floor a {
    min-height: 48px;
    height: 48px;
    padding: 0 8px 0 0;
    font-size: 13px;
    letter-spacing: 0.14em;
  }

  .doc {
    width: min(760px, calc(100% - 40px));
    padding: 24px 20px 28px;
    margin: 16px auto calc(48px + env(safe-area-inset-bottom, 0px));
  }
  .faq-group > h2 {
    font-size: 28px;
  }
}

.docs-page,
.faq-page {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .docs-page,
  .faq-page {
    scroll-behavior: auto;
  }
}

.docs-page .doc h2,
.docs-page .doc h3,
.faq-page .doc h2,
.faq-page .doc h3,
.faq-page .faq-group,
.faq-page .faq-item {
  scroll-margin-top: 28px;
}

.doc-shell {
  position: relative;
  z-index: 3;
  width: min(1020px, calc(100% - 48px));
  margin: 24px auto 40vh;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.doc-shell .doc {
  width: 100%;
  margin: 0;
}

.doc-nav-open,
.doc-nav-close {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(7, 7, 11, 0.62);
  border: 1px solid var(--line);
  cursor: inherit;
}

.doc-nav-open {
  display: none;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  justify-content: space-between;
  align-items: center;
}

.doc-nav-open::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--acid);
  border-bottom: 1.5px solid var(--acid);
  transform: rotate(45deg);
  margin-top: -4px;
}

.doc-nav-close {
  display: none;
  min-height: 36px;
  padding: 0 10px;
  color: var(--mute);
}

.doc-nav-backdrop {
  display: none;
}

.doc-nav {
  position: sticky;
  top: 24px;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 18px 16px 20px;
  border: 1px solid var(--line);
  background: rgba(7, 7, 11, 0.62);
  backdrop-filter: blur(18px);
}

.doc-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.doc-nav-title {
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.doc-nav-label {
  margin: 14px 0 4px;
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.doc-nav-head + .doc-nav-label {
  margin-top: 0;
}

.doc-nav-sub a {
  padding-left: 16px;
}

.doc-hub {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.doc-card {
  display: block;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  background: rgba(7, 7, 11, 0.42);
  text-decoration: none;
  color: inherit;
}

.doc-card:hover {
  border-color: rgba(214, 255, 75, 0.45);
  text-decoration: none;
}

.doc-card h2 {
  margin: 0 0 10px;
}

.doc-card p:last-child {
  margin: 0;
  color: var(--mute);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.docs-page .faq-group {
  margin-top: 48px;
}

.doc-nav a {
  display: block;
  color: var(--mute);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: 6px 0 6px 10px;
  border-left: 1px solid transparent;
}

.doc-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.doc-nav a[aria-current="location"] {
  color: var(--ink);
  border-left-color: var(--acid);
}

@media (max-width: 980px) {
  .docs-page .doc h2,
  .docs-page .doc h3,
  .faq-page .doc h2,
  .faq-page .doc h3,
  .faq-page .faq-group,
  .faq-page .faq-item {
    scroll-margin-top: 72px;
  }

  .doc-shell {
    display: block;
    width: min(760px, calc(100% - 32px));
    margin: 16px auto 40vh;
  }

  .doc-nav-open {
    display: inline-flex;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 6;
    margin-bottom: 12px;
    backdrop-filter: blur(18px);
  }

  .doc-nav-close {
    display: inline-flex;
    align-items: center;
  }

  .doc-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 7;
    background: rgba(7, 7, 11, 0.55);
  }

  .doc-nav-backdrop[hidden] {
    display: none;
  }

  .doc-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 8;
    width: min(280px, 86vw);
    max-height: none;
    padding:
      calc(20px + env(safe-area-inset-top, 0px))
      18px
      calc(20px + env(safe-area-inset-bottom, 0px))
      calc(18px + env(safe-area-inset-left, 0px));
    border-left: 0;
    border-radius: 0;
    transform: translateX(-110%);
    transition: transform 0.22s ease;
  }

  .doc-nav.is-open {
    transform: translateX(0);
  }

  .doc-shell .doc {
    margin: 0;
  }
}

/* Legal-page tables and the withdrawal model form */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 0.95rem;
}
.doc-table th,
.doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.doc-table thead th {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}
.doc-table code {
  color: var(--acid);
}
.doc-note {
  color: var(--mute);
  font-style: italic;
}
.doc-form {
  margin: 12px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--violet);
  border-radius: 10px;
  background: rgba(244, 241, 234, 0.03);
}
.doc-form p {
  margin: 0 0 8px;
}
.doc-form p:last-child {
  margin-bottom: 0;
}

/* Bilingual legal pages — language blocks + switch */
.lang-de { display: none; }
html[data-lang="de"] .lang-en { display: none; }
html[data-lang="de"] .lang-de { display: block; }
.doc-langbar {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(244, 241, 234, 0.03);
}
.doc-langbar button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.doc-langbar button:hover { color: var(--ink); }
.doc-langbar button.is-active {
  background: var(--acid);
  color: #07070b;
  font-weight: 600;
}

/* ===================================================================
   Docs redesign — persistent grouped sidebar, article column, and an
   optional "On this page" TOC (BotGhost-style). Scoped to .docs-page so
   /docs and /faq share it; the TOC column only appears when a .doc-toc
   is present (so /faq stays two-column).
   =================================================================== */
/* Desktop layout only — the mobile drawer (max-width:980px, earlier in this
   file) keeps its fixed positioning. */
@media (min-width: 981px) {
  .docs-page .doc-shell {
    width: min(1300px, calc(100% - 40px));
    margin: 8px auto 80px;
    grid-template-columns: 256px minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }
  .docs-page .doc-shell:has(.doc-toc) {
    grid-template-columns: 256px minmax(0, 1fr) 208px;
  }
  .docs-page .doc-nav {
    position: sticky;
    top: 12px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 8px 18px 48px 4px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }
}
.docs-page .doc-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 8px 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--mute);
}
.docs-page .doc-search svg { width: 15px; height: 15px; flex: none; }
.docs-page .doc-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--ink); font: inherit; font-size: 13px;
}
.docs-page .doc-search input::placeholder { color: var(--mute); }
.docs-page .doc-search kbd {
  font-size: 10px; color: var(--mute); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; font-family: inherit;
}
.docs-page .doc-nav-label {
  margin: 18px 0 4px; padding: 0 10px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--mute);
}
.docs-page .doc-nav-head + .doc-nav-label,
.docs-page .doc-search + .doc-nav-label { margin-top: 2px; }
.docs-page .doc-nav a,
.docs-page .doc-nav-sub a {
  display: block; padding: 7px 10px; border-left: 0; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; line-height: 1.35; color: #b9b6c4;
}
.docs-page .doc-nav a:hover { background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.docs-page .doc-nav a[aria-current="location"],
.docs-page .doc-nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600; border-left: 0;
  background: color-mix(in srgb, var(--violet) 16%, transparent);
  box-shadow: inset 2px 0 0 var(--violet);
}
.docs-page .doc-nav a.is-hidden { display: none; }
.docs-page .doc-nav-empty { display: none; color: var(--mute); font-size: 12.5px; padding: 8px 10px; }
.docs-page .doc-nav-empty.show { display: block; }

/* article */
.docs-page .doc-shell .doc { max-width: 780px; padding: 26px 0 0; }
.docs-page .doc-shell .doc { padding-left: clamp(0px, 3vw, 40px); padding-right: clamp(0px, 2vw, 24px); }
.docs-page .faq-kicker a { color: var(--sky); }

/* callouts */
.docs-page .doc-callout {
  display: flex; gap: 12px; margin: 22px 0; padding: 14px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sky) 34%, transparent);
  background: color-mix(in srgb, var(--sky) 9%, rgba(7,7,11,0.5));
}
.docs-page .doc-callout .ic { width: 20px; height: 20px; flex: none; color: var(--sky); margin-top: 1px; }
.docs-page .doc-callout b { display: block; font-size: 13.5px; margin-bottom: 2px; color: var(--ink); }
.docs-page .doc-callout p { margin: 0; font-size: 13.5px; color: #c5c2cf; letter-spacing: 0; }
.docs-page .doc-callout.warn { border-color: color-mix(in srgb, var(--coral, #ff7a59) 36%, transparent); background: color-mix(in srgb, var(--coral, #ff7a59) 9%, rgba(7,7,11,0.5)); }
.docs-page .doc-callout.warn .ic { color: var(--coral, #ff7a59); }

/* code block */
.docs-page .doc-code {
  margin: 18px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #0b0b11;
}
.docs-page .doc-code-h {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line);
  color: var(--mute); font-size: 11.5px; font-weight: 600;
}
.docs-page .doc-code-h .lang { color: var(--acid); }
.docs-page .doc-code pre {
  margin: 0; padding: 14px; overflow-x: auto; font-family: ui-monospace, "Source Code Pro", monospace;
  font-size: 13px; line-height: 1.6; color: #dbe7ff;
}

/* section cards on the hub */
.docs-page .doc-hub {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 22px;
}
.docs-page .doc-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); transition: transform .14s, border-color .14s;
}
.docs-page .doc-card:hover { border-color: color-mix(in srgb, var(--violet) 50%, transparent); transform: translateY(-2px); }
.docs-page .doc-card h2 { margin: 0 0 6px; font-size: 15px; }
.docs-page .doc-card .faq-kicker { margin-bottom: 8px; }

/* prev / next pager */
.docs-page .doc-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.docs-page .doc-pager a {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; color: inherit; text-decoration: none;
}
.docs-page .doc-pager a:hover { border-color: color-mix(in srgb, var(--violet) 50%, transparent); }
.docs-page .doc-pager span { color: var(--mute); font-size: 11.5px; font-weight: 600; }
.docs-page .doc-pager b { display: block; margin-top: 3px; font-size: 14.5px; }
.docs-page .doc-pager .next { text-align: right; }
.docs-page .doc-pager a.is-empty { visibility: hidden; }

/* on this page */
.docs-page .doc-toc {
  position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow-y: auto;
  padding: 28px 4px 40px 18px;
}
.docs-page .doc-toc p {
  color: var(--mute); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin: 0 0 10px;
}
.docs-page .doc-toc a {
  display: block; color: var(--mute); font-size: 12.5px; padding: 5px 0 5px 12px;
  border-left: 2px solid var(--line); text-decoration: none; letter-spacing: 0;
}
.docs-page .doc-toc a.lvl3 { padding-left: 24px; }
.docs-page .doc-toc a:hover { color: var(--ink); }
.docs-page .doc-toc a.on { color: var(--ink); border-left-color: var(--acid); font-weight: 600; }
.docs-page .doc-toc:empty { display: none; }
@media (max-width: 1080px) { .docs-page .doc-toc { display: none; } .docs-page .doc-shell:has(.doc-toc) { grid-template-columns: 256px minmax(0,1fr); } }
@media (max-width: 760px) { .docs-page .doc-shell, .docs-page .doc-shell:has(.doc-toc) { grid-template-columns: 1fr; } }

/* ---- Site footer (Docs / Pricing / FAQ + legal + CTA) ------------------- */
.site-floor {
  flex-wrap: wrap;
  align-items: center;
}
.site-floor .cta {
  margin-left: auto;
  color: #10110a;
  background: var(--acid);
  border-radius: 10px;
  padding: 10px 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}
.site-floor .cta:hover { background: #e4ff7a; }

/* ---- Error (404) page --------------------------------------------------- */
.error-page .err {
  position: relative;
  z-index: 3;
  width: min(720px, calc(100% - 48px));
  margin: clamp(40px, 12vh, 130px) auto 96px;
  text-align: center;
}
.err-kicker {
  color: var(--violet);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 8px;
}
.err-code {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(96px, 26vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  margin: 0;
  background: linear-gradient(120deg, var(--ink) 20%, var(--violet) 60%, var(--acid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.err-head {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 5vw, 40px);
  letter-spacing: -0.03em;
  margin: 18px 0 0;
}
.err-lead {
  color: var(--mute);
  font-size: 16px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 16px auto 0;
}
.err-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 30px 0 0;
}
.err-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font: 600 14px/1 "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
  padding: 12px 18px;
  border-radius: 11px;
  border: 1px solid rgba(244, 241, 234, 0.18);
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.err-btn:hover { border-color: rgba(244, 241, 234, 0.4); background: rgba(244, 241, 234, 0.06); }
.err-btn.solid { background: var(--acid); border-color: var(--acid); color: #10110a; }
.err-btn.solid:hover { background: #e4ff7a; border-color: #e4ff7a; }
.err-help { color: var(--mute); font-size: 13.5px; margin: 26px 0 0; }
.err-help a { color: var(--ink); }

/* ---- Pricing page ------------------------------------------------------- */
.pricing-page .pricing {
  position: relative;
  z-index: 3;
  width: min(1080px, calc(100% - 48px));
  margin: 24px auto 96px;
}
.pricing-head { text-align: center; max-width: 62ch; margin: 0 auto 40px; }
.pricing-head h1 {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 6vw, 54px);
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 8px 0 0;
}
.pricing-lead { color: var(--mute); font-size: 16px; line-height: 1.65; margin: 18px auto 0; }
.ptable {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.plan {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(7, 7, 11, 0.55);
  border-radius: 16px;
  padding: 26px 24px 28px;
  backdrop-filter: blur(14px);
}
.plan.featured { border-color: color-mix(in srgb, var(--acid) 45%, transparent); background: rgba(214, 255, 75, 0.05); }
.plan .badge {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--acid);
  color: #10110a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.plan-name {
  font-family: "Sora", "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.plan-desc { color: var(--mute); font-size: 13.5px; line-height: 1.5; margin: 8px 0 16px; min-height: 40px; }
.plan-price { min-height: 40px; display: flex; align-items: center; }
.plan-price .soon { color: var(--mute); font-size: 15px; font-style: italic; }
.plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 6px 0 18px;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid rgba(244, 241, 234, 0.18);
  color: var(--ink);
  text-decoration: none;
  font: 600 14px/1 "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.plan-cta:hover { border-color: rgba(244, 241, 234, 0.4); background: rgba(244, 241, 234, 0.06); }
.plan.featured .plan-cta { background: var(--acid); border-color: var(--acid); color: #10110a; }
.plan.featured .plan-cta:hover { background: #e4ff7a; }
.plan .feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.plan .feat li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 14px; line-height: 1.45; }
.plan .feat li i {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(214, 255, 75, 0.16);
  position: relative;
}
.plan .feat li i::after {
  content: "";
  position: absolute;
  left: 5px; top: 4px;
  width: 4px; height: 7px;
  border: solid var(--acid);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.plan-note { text-align: center; color: var(--mute); font-size: 14px; line-height: 1.6; margin: 30px auto 0; max-width: 62ch; }
.plan-note b { color: var(--ink); }
.pricing-faqlink { text-align: center; margin: 22px auto 0; max-width: 62ch; }
.pricing-faqlink p { color: var(--mute); font-size: 14px; line-height: 1.6; }
.pricing-faqlink a { color: var(--ink); }
@media (max-width: 860px) {
  .ptable { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan-desc, .plan-price { min-height: 0; }
}

/* Respect the OS "reduce motion" setting: kill decorative animation, drop the
   custom trailing cursor (restore the native one), and hide the particle field
   and spotlight. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body { cursor: auto; }
  .cursor { display: none !important; }
  #field,
  .spot,
  #bgfade { display: none !important; }
}