/* Celium site styles.
 *
 * One stylesheet, no framework and no build-time CSS processing: the page is a
 * marketing page that has to load instantly from a relay in a browser that may
 * be eight years old, so the fewer moving parts the better. Assets are hashed at
 * build time, which is what makes the long cache lifetime in the vhost safe.
 *
 * Two audiences live in this file: the landing page and the documentation. They
 * share the tokens, the navigation, the buttons, the code blocks and the footer,
 * and nothing else.
 */

/* ============================================================== tokens ==== */

:root {
  /* Surfaces */
  --ink: #0e1628;
  --ink-2: #16273f;
  --ink-3: #24405f;
  --ink-4: #2f5580;
  --bg: #ffffff;
  --bg-alt: #f5f8fc;
  --bg-sunken: #eef3f9;
  --line: #e3e9f1;
  --line-strong: #cdd8e6;

  /* Text. Every value below is checked against the surface it is used on:
     --text on white is 14.6:1, --muted on white 5.4:1, on --bg-alt 5.1:1 and on
     --bg-sunken 4.9:1; --muted-2, which is only ever a small label, 5.1:1. */
  --text: #131c26;
  --muted: #5a6b7f;
  --muted-2: #5f7080;

  /* Accent. --accent is for dark surfaces (7.4:1 on --ink); --accent-ink is the
     readable green on white (5.1:1). Using the bright one for small text on a
     light background was the cheapest-looking mistake this page made. */
  --accent: #1ec98b;
  --accent-ink: #0a7a52;
  --accent-dark: #0f9e6b;
  --accent-soft: #e8fbf3;

  --link: #1553b8;
  --link-hover: #0d3d8c;

  /* Code surfaces */
  --code-bg: #0c1526;
  --code-head: #101d33;
  --code-line: #1e2f4a;
  --code-text: #dce7f7;
  --tok-comment: #8497b0;
  --tok-str: #7fd6a9;
  --tok-key: #8db8ff;
  --tok-num: #ffc46b;
  --tok-opt: #a9bcd8;
  --tok-block: #ff9f7a;
  --tok-var: #d8b4ff;
  --tok-prompt: #55d39a;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-lg: 0 2px 4px rgba(13, 25, 45, .07), 0 18px 48px rgba(13, 25, 45, .12);
  --shadow-glow: 0 0 0 1px rgba(30, 201, 139, .35), 0 12px 40px rgba(30, 201, 139, .18);

  --wrap: 1140px;
  --nav-h: 66px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 680; letter-spacing: -.011em; }
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 18px; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Inline code is a chip. Inside a <pre> it must not be one — that rule used to
   apply there too, which painted a light chip behind light text and made every
   documented command unreadable. */
code {
  font-family: var(--mono); font-size: .92em;
  background: var(--bg-sunken); color: var(--text);
  padding: .12em .38em; border-radius: 5px;
  border: 1px solid var(--line);
  overflow-wrap: break-word;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }

.wrap { width: min(var(--wrap), calc(100% - 44px)); margin: 0 auto; }
.narrow { max-width: 820px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

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

/* ================================================================= nav ==== */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease, background .2s ease;
}
.nav.is-stuck { box-shadow: 0 6px 24px rgba(13, 25, 45, .07); background: rgba(255, 255, 255, .93); }
/* A hairline that says "there is a network under this page". */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 201, 139, .55), rgba(29, 99, 210, .35), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.nav.is-stuck::after { opacity: 1; }

.nav-inner {
  width: min(var(--wrap), calc(100% - 44px)); margin: 0 auto;
  display: flex; align-items: center; gap: 26px; min-height: var(--nav-h);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 7px; }
.nav-links { display: flex; gap: 4px; margin-left: 6px; }
.nav-links a {
  color: var(--muted); font-size: 15px; padding: 9px 12px; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.nav-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line-strong);
  border-radius: 8px; font-size: 18px; line-height: 1; padding: 8px 12px; cursor: pointer; color: var(--ink);
}
.nav-menu { display: none; flex-direction: column; border-top: 1px solid var(--line); background: #fff; }
.nav-menu a { padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--ink); }

/* ============================================================= buttons ==== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-sm); padding: 10px 18px; font-size: 15px; font-weight: 600;
  border: 1px solid transparent; transition: transform .16s ease, background .16s ease,
  border-color .16s ease, box-shadow .16s ease; white-space: nowrap; cursor: pointer;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(14, 22, 40, .2); }
.btn-primary:hover { background: var(--ink-2); box-shadow: 0 8px 22px rgba(14, 22, 40, .22); }
.btn-outline { border-color: var(--line-strong); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--ink-4); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--bg-alt); }

/* ================================================================ hero ==== */

.hero {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #0b1220 0%, var(--ink) 45%, var(--ink-2) 100%);
  color: #e8eef7; padding: 84px 0 0; overflow: hidden;
}
/* Three layers behind the copy: the mesh canvas, a technical grid, and a soft
   accent glow. All three are decoration and all three are inert without JS. */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -3; opacity: .85;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  mask-image: radial-gradient(1100px 560px at 62% 12%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(1100px 560px at 62% 12%, #000 25%, transparent 78%);
}
.hero::after {
  content: ""; position: absolute; inset: -20% -10% auto; height: 70%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 300px at 74% 8%, rgba(30, 201, 139, .22), transparent 66%),
    radial-gradient(520px 260px at 12% 0%, rgba(45, 108, 223, .18), transparent 68%);
}
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 52px; align-items: center; }
.hero-copy h1 { color: #fff; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: .15em; font-size: 12px; font-weight: 700;
  color: var(--accent-ink); margin-bottom: 14px;
}
.hero .eyebrow { color: var(--accent); }
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6;
}
.lede { font-size: 17.5px; color: #b9c7db; max-width: 34em; }
.lede strong { color: #fff; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 22px; }
.hero .btn-primary { background: var(--accent); color: #06231a; box-shadow: 0 10px 30px rgba(30, 201, 139, .28); }
.hero .btn-primary:hover { background: #2adf9b; }
.hero .btn-outline { background: transparent; border-color: rgba(255, 255, 255, .26); color: #e8eef7; }
.hero .btn-outline:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); }
.hero-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: #9fb1c9; font-size: 14.5px; }
.hero-points li { display: flex; gap: 9px; align-items: flex-start; }
.hero-points li::before { content: "✓"; color: var(--accent); font-weight: 700; line-height: 1.7; }

/* Terminal */
.hero-term {
  position: relative;
  background: rgba(9, 17, 31, .92); border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 14px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden; font-family: var(--mono); font-size: 12.8px;
}
.hero-term::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(160deg, rgba(30, 201, 139, .12), transparent 42%);
}
.term-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: rgba(17, 28, 46, .95); border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.term-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #2c3d57; }
.term-bar .dot:first-child { background: #3b4f6d; }
.term-title { margin-left: 8px; color: #7c8ea8; font-size: 11.5px; letter-spacing: .05em; }
.term-live { margin-left: auto; display: flex; align-items: center; gap: 6px; color: #7fd6a9; font-size: 11px; letter-spacing: .06em; }
.term-live i { width: 6px; height: 6px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 3px rgba(61, 220, 151, .18); }
.term-body {
  margin: 0; padding: 16px 18px 20px; color: #cbd9ec; white-space: pre-wrap;
  overflow-wrap: anywhere; line-height: 1.8; min-height: 322px;
}
.term-body .caret {
  display: inline-block; width: 8px; height: 15px; margin-left: 2px;
  background: var(--accent); vertical-align: -3px; animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.t-dim { color: #8497b0; }
.t-ok { color: #3ddc97; }
.t-link { color: #86bcff; text-decoration: underline; text-underline-offset: 2px; }
.t-warn { color: #ffc46b; }
.t-key { color: #9fd0ff; }

.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .09); border-radius: 12px; overflow: hidden;
  margin: 58px auto 0; transform: translateY(1px);
}
.fact { background: rgba(16, 29, 49, .92); padding: 17px 20px; }
.fact .label { display: block; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: #8497b0; }
.fact .value { font-size: 17px; font-weight: 650; color: #fff; }

/* ============================================================ sections ==== */

.section { padding: 84px 0; position: relative; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-lede { font-size: 17px; color: var(--muted); max-width: 46em; margin-bottom: 40px; }
.section h2 + .section-lede { margin-top: 14px; }

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Cards carry a pointer-tracked highlight: --mx/--my are set by app.js, and
   without JavaScript the gradient simply never appears. */
.card, .case {
  /* `overflow: hidden` is deliberately absent: the featured plan's badge sits
     half outside its card on purpose, and clipping the card cut the badge in
     half. The pointer highlight is clipped by its own border radius instead. */
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 6px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card::before, .case::before, .plan::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(30, 201, 139, .1), transparent 65%);
}
.card:hover::before, .case:hover::before, .plan:hover::before { opacity: 1; }
.card:hover, .case:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { margin-bottom: .45em; }
.card p, .case p { color: var(--muted); font-size: 15px; }
.case { padding-bottom: 18px; }
/* A small mono tag keeps the "this is infrastructure" register. */
.card h3 code, .case h3 code { font-size: .9em; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px;
}
.step-no { font-family: var(--mono); font-size: 13px; color: var(--accent-ink); font-weight: 700; letter-spacing: .08em; }
.step h3 { margin-top: .5em; }
.step p { color: var(--muted); font-size: 15px; margin-bottom: 0; }
.step::after {
  content: ""; position: absolute; top: 34px; right: -14px; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.step:last-child::after { display: none; }

/* =============================================================== plans ==== */

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
.plan {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; display: flex; flex-direction: column; height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan.featured { border-color: var(--ink); box-shadow: var(--shadow); }
/* Sits astride the card's top edge, so it is drawn over the card rather than in
   it — the plan card must not clip its own contents. */
.plan-badge {
  position: absolute; top: -12px; left: 20px; z-index: 1;
  background: var(--ink); color: #fff; white-space: nowrap;
  font-size: 12px; font-weight: 650; padding: 3px 11px; border-radius: 999px; letter-spacing: .02em;
}
.plan h3 { margin-bottom: .2em; }
.plan .tagline { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.plan .amount { font-size: 38px; font-weight: 720; letter-spacing: -.02em; }
.plan .amount small { font-size: 17px; font-weight: 600; }
.plan .unit { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.plan .btn { width: 100%; margin-bottom: 18px; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; color: var(--muted); }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-ink); font-weight: 700; }
.plans-note { color: var(--muted); font-size: 14px; margin-top: 26px; }

/* ================================================================ code ==== */

.code-block {
  position: relative; margin: 0 0 1.4em; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--code-line); background: var(--code-bg);
  box-shadow: 0 10px 30px rgba(12, 21, 38, .16);
}
.code-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;
  background: var(--code-head); border-bottom: 1px solid var(--code-line);
}
.code-lang {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #8ea3c0;
}
.copy {
  margin-left: auto; font: inherit; font-size: 12px; font-family: var(--mono);
  color: #a9bcd8; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; transition: background .16s ease, color .16s ease;
}
.copy:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.copy.is-done { color: #3ddc97; border-color: rgba(61, 220, 151, .4); }

.code, .term-body {
  font-family: var(--mono);
}
.code {
  margin: 0; padding: 18px 18px 20px; background: var(--code-bg); color: var(--code-text);
  font-size: 13.2px; line-height: 1.75; overflow-x: auto; white-space: pre;
  border: 0; border-radius: 0;
  -webkit-overflow-scrolling: touch;
}
.code code { display: block; }
/* Token colours. Comments sit at 5.5:1 on --code-bg, the lowest of the set. */
.tok-comment { color: var(--tok-comment); font-style: italic; }
.tok-str { color: var(--tok-str); }
.tok-key { color: var(--tok-key); }
.tok-num { color: var(--tok-num); }
.tok-opt { color: var(--tok-opt); }
.tok-block { color: var(--tok-block); }
.tok-var { color: var(--tok-var); }
.tok-lit { color: var(--tok-num); }
.tok-section { color: var(--tok-block); }
.tok-prompt { color: var(--tok-prompt); }

/* ================================================================= faq ==== */

.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary {
  cursor: pointer; font-weight: 620; font-size: 16.5px; list-style: none; position: relative;
  padding: 4px 34px 4px 0; transition: color .15s ease;
}
.faq summary:hover { color: var(--link); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 2px; color: var(--muted-2);
  font-size: 20px; font-weight: 400; transition: transform .2s ease, color .2s ease;
}
.faq details[open] summary::after { content: "−"; color: var(--accent-ink); }
.faq p { color: var(--muted); margin: 12px 0 0; font-size: 15px; }

/* ================================================================= cta ==== */

.cta-band { position: relative; overflow: hidden; background: var(--ink); color: #e8eef7; padding: 58px 0; }
.cta-band::after {
  content: ""; position: absolute; inset: -60% -10% auto; height: 220%; pointer-events: none;
  background: radial-gradient(560px 280px at 82% 60%, rgba(30, 201, 139, .2), transparent 62%);
}
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-inner h2 { color: #fff; margin-bottom: .25em; }
.cta-inner p { color: #9fb1c9; margin: 0; }
.cta-band .btn-primary { background: var(--accent); color: #06231a; }
.cta-band .btn-primary:hover { background: #2adf9b; }

/* ============================================================== footer ==== */

.footer { background: #0b1524; color: #a4b5cc; padding: 52px 0 26px; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-brand > span { color: #fff; font-weight: 700; font-size: 17px; }
.footer-brand img { margin-bottom: 4px; border-radius: 7px; }
.footer-brand p { color: #8ea3bd; font-size: 14px; margin-top: 6px; max-width: 30em; }
.footer h4 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.footer a { color: #a4b5cc; display: block; margin-bottom: 9px; padding: 2px 0; }
.footer a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 20px;
  color: #93a5bf; font-size: 13px;
}
.footer-legal { max-width: 60em; }

/* ============================================================ revealed ==== */
/* app.js adds .is-in when an element scrolls into view. Without JavaScript the
   class is never added, so this must be a no-op for the un-animated state. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }

/* ============================================================== docs ====== */
/* The documentation is its own layout: a section sidebar, the article, and the
   page's own table of contents. It shares tokens and chrome with the landing
   page and nothing else. */

.doc-page { background: var(--bg); }

.doc-main { min-height: 70vh; }

.doc-shell {
  display: grid; grid-template-columns: 232px minmax(0, 1fr) 224px;
  gap: 46px; padding: 40px 0 88px; align-items: start;
}

/* --- sidebar --- */
.doc-side { position: sticky; top: calc(var(--nav-h) + 24px); font-size: 14.5px; }
.doc-side-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 12px;
}
.doc-nav-group { margin-bottom: 20px; }
.doc-nav-group > span {
  display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 7px;
}
.doc-nav a {
  display: block; padding: 6px 11px; margin-left: -11px; border-radius: 7px;
  color: var(--muted); border-left: 2px solid transparent;
}
.doc-nav a:hover { color: var(--ink); background: var(--bg-alt); text-decoration: none; }
.doc-nav a.is-active {
  color: var(--ink); background: var(--accent-soft); border-left-color: var(--accent-dark); font-weight: 600;
}
.doc-side-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }

/* --- article --- */
.doc-body { min-width: 0; max-width: 760px; }
.doc-crumb {
  font-size: 13px; color: var(--muted-2); margin-bottom: 14px; display: flex; gap: 8px; align-items: center;
}
.doc-crumb a { color: var(--muted); }
.doc-body h1 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: .5em; }
.doc-body h2 {
  font-size: 24px; margin-top: 1.9em; padding-top: 1.1em; border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 18px);
}
.doc-body h3 { font-size: 18.5px; margin-top: 1.7em; scroll-margin-top: calc(var(--nav-h) + 18px); }
.doc-body h2:first-child, .doc-body h1 + h2 { border-top: 0; padding-top: 0; margin-top: 1.1em; }
.doc-body p, .doc-body li { color: #26313d; }
.doc-body ul, .doc-body ol { padding-left: 1.35em; margin: 0 0 1.2em; }
.doc-body li { margin-bottom: .45em; }
.doc-body li::marker { color: var(--muted-2); }
.doc-body strong { color: var(--text); }
.doc-body a { text-decoration: underline; text-decoration-color: rgba(21, 83, 184, .35); text-underline-offset: 2px; }
.doc-body a:hover { text-decoration-color: currentColor; }
.doc-body blockquote {
  margin: 0 0 1.4em; padding: 14px 18px; border-left: 3px solid var(--accent-dark);
  background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: #1d3b31;
}
.doc-body blockquote p:last-child { margin-bottom: 0; }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.doc-body img { max-width: 100%; height: auto; }

/* Heading anchors: invisible until the heading is hovered or focused. */
.h-anchor {
  margin-left: .4em; color: var(--line-strong); font-weight: 400; opacity: 0;
  transition: opacity .15s ease, color .15s ease; text-decoration: none;
}
h2:hover .h-anchor, h3:hover .h-anchor, .h-anchor:focus { opacity: 1; color: var(--accent-ink); }

/* --- tables --- */
.table-wrap {
  margin: 0 0 1.5em; overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch;
}
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 420px; }
.table-wrap th, .table-wrap td {
  text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.table-wrap thead th {
  background: var(--bg-alt); font-weight: 650; font-size: 13px; letter-spacing: .02em;
  color: var(--ink); white-space: nowrap;
}
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover { background: #fafcfe; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }

/* --- per-page table of contents --- */
.doc-toc {
  position: sticky; top: calc(var(--nav-h) + 24px);
  font-size: 13.5px; border-left: 1px solid var(--line); padding-left: 18px;
}
.doc-toc h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 10px; font-weight: 600;
}
.doc-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.doc-toc a {
  display: block; padding: 5px 0 5px 10px; color: var(--muted); border-left: 2px solid transparent;
  margin-left: -11px; line-height: 1.5;
}
.doc-toc a:hover { color: var(--ink); text-decoration: none; }
.doc-toc a.is-active { color: var(--accent-ink); border-left-color: var(--accent-dark); font-weight: 600; }
.doc-toc .lvl3 a { padding-left: 22px; font-size: 13px; }

/* --- prev / next --- */
.doc-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line);
}
.doc-pager a {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.doc-pager a:hover { border-color: var(--line-strong); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-1px); }
.doc-pager .dir { display: block; font-size: 12px; color: var(--muted-2); margin-bottom: 4px; }
.doc-pager .page { color: var(--ink); font-weight: 620; }
.doc-pager .next { text-align: right; grid-column: 2; }
.doc-pager .prev.empty, .doc-pager .next.empty { visibility: hidden; }

/* --- documentation index --- */
.docs-hero { padding: 58px 0 26px; }
.docs-hero h1 { margin-bottom: .28em; }
.docs-hero p { color: var(--muted); font-size: 17px; max-width: 42em; }
.doc-group { margin-top: 44px; }
.doc-group > h2 {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
  font-weight: 650; margin-bottom: 16px;
}
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.doc-card {
  position: relative; display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 20px 18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.doc-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow); text-decoration: none; }
.doc-card h3 { margin: 0 0 6px; color: var(--ink); font-size: 17px; }
.doc-card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.doc-card::after {
  content: "→"; position: absolute; right: 18px; top: 20px; color: var(--line-strong);
  transition: color .18s ease, transform .18s ease;
}
.doc-card:hover::after { color: var(--accent-ink); transform: translateX(3px); }

/* ========================================================== responsive ==== */

@media (max-width: 1180px) {
  .doc-shell { grid-template-columns: 210px minmax(0, 1fr); gap: 36px; }
  .doc-toc { display: none; }
}

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 26px; }
  .doc-side { position: static; }
  .doc-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px 12px; }
  .doc-nav-group { margin-bottom: 12px; }
  .doc-nav a { margin-left: 0; padding: 8px 10px; border-left: 0; border: 1px solid var(--line); }
  .doc-nav a.is-active { border-color: var(--accent-dark); }
  .doc-side-foot { display: none; }
  .doc-body { max-width: none; }
}

@media (max-width: 760px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: block; }
  .nav-menu[hidden] { display: none; }
  .nav-menu { display: flex; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-2, .steps, .plans { grid-template-columns: 1fr; }
  .section { padding: 58px 0; }
  .hero { padding-top: 52px; }
  .hero-term { font-size: 12px; }
  .term-body { min-height: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .doc-pager { grid-template-columns: 1fr; }
  .doc-pager .next { grid-column: 1; text-align: left; }
  .docs-hero { padding: 38px 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .btn:hover, .card:hover, .case:hover, .plan:hover, .doc-card:hover { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .term-body .caret { display: none; }
  .hero-canvas { display: none; }
}

@media print {
  .nav, .footer, .doc-side, .doc-toc, .doc-pager, .copy, .hero-canvas { display: none !important; }
  .doc-shell { display: block; }
  .code-block { border-color: #ccc; }
}