/*
 * Ordewell site — one stylesheet, no framework, no webfont.
 *
 * Colour values are the ones in assets/brand.json, not approximations of them:
 * `--cyan` and `--ink` are read verbatim out of the logo SVGs, so a hand-tuned
 * near-miss here would show as a seam wherever the lockup sits on the page.
 * The page runs darker than the app chrome (--bg is black, not #15161A) because
 * every screenshot on it is #15161A — the shots need to sit *on* something.
 */

:root {
  --cyan: #0891b2;
  --cyan-bright: #0bc7f4;
  --cyan-deep: #06677f;

  --bg: #08090b;
  --bg-raised: #101114;
  --bg-inset: #15161a;

  --line: #1c1f24;
  --line-strong: #2a2d34;

  --fg: #e6e8ec;
  --fg-dim: #a7aeb8;
  --fg-mute: #6b7280;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
    "DejaVu Sans Mono", Menlo, Consolas, monospace;
  /* brand.json's displayStack — the family the wordmark in the logo files was set
     in (Noto Sans Display Bold), so the nav's typed wordmark matches the lockup
     rather than merely resembling it. Still no webfont: on a machine without Noto
     this degrades to the local grotesque, which is a near-miss on eight lowercase
     letters, not a wrong logo. The image lockup carries the exact form. */
  --display: "Noto Sans Display", "Noto Sans", "DejaVu Sans", var(--sans);

  --page: 1160px;
  --prose: 720px;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; font-weight: 640; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
.prose { max-width: var(--prose); }

/* Section rhythm: one hairline per band, so the page reads as stacked plates
   rather than a run of floating blocks. */
section { padding: 5.5rem 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
@media (max-width: 700px) { section { padding: 3.75rem 0; } }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1rem;
}

.lede { font-size: 1.1rem; color: var(--fg-dim); }

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 9, 11, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav[data-scrolled] { border-bottom-color: var(--line); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 64px;
}
/* The nav logo is the lockup rebuilt from a mark and live type, so its three
   proportions are the printed lockup's, measured off it and written as multiples
   of the wordmark's own ink height (0.781em for this face at this weight):
   mark height 1.082×, mark-to-word gap 0.898×. Sizing them in `em` off a font-size
   set here means the whole assembly rescales as one if the bar ever changes.
   The mark is the on-dark variant — the vector source is dark ink and is very
   nearly invisible against this bar — and it is cropped to its ink, so `height`
   alone is set and the left edge lands flush with the page's content column. */
.nav-logo {
  display: flex;
  align-items: center;
  /* 0.898em of wordmark ink height, less the `o`'s left side bearing — the lockup's
     gap is ink to ink, and flex gap is box to box. */
  gap: 0.666em;
  margin-right: auto;
  font-size: 1.08rem;
}
.nav-logo img { height: 0.845em; width: auto; }
/* Set, not capitalised: the name is lowercase in every logo file, and the split
   between light `orde` and cyan `well` is the wordmark's, reproduced here rather
   than approximated. The tracking is what makes the set width match the printed
   wordmark's 5.077 width-to-height ratio; the face's default is fractionally loose. */
.nav-logo .wordmark {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.nav-logo .wordmark span { color: var(--cyan); }
/* A logo is not a link that underlines — the colour split is the affordance. */
.nav-logo:hover { text-decoration: none; }
.nav-links { display: flex; gap: 1.75rem; align-items: center; }
.nav-links a {
  color: var(--fg-dim);
  font-size: 0.92rem;
  text-decoration: none;
}
.nav-links a:hover { color: var(--fg); }
/* Links drop out in reverse order of usefulness rather than wrapping to a second
   row — a 64px-tall sticky bar that grows to 96px shifts the whole page under it. */
@media (max-width: 800px) { .nav-links { gap: 1.25rem; } .nav-links a.opt { display: none; } }
@media (max-width: 560px) { .nav-links a.opt2 { display: none; } }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  font-size: 0.95rem;
  font-weight: 560;
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.btn:hover { text-decoration: none; border-color: var(--cyan-deep); background: var(--bg-raised); }
.btn-primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04191f;
  font-weight: 640;
}
.btn-primary:hover { background: var(--cyan-bright); border-color: var(--cyan-bright); }

/* ---------- hero ---------- */

.hero { position: relative; padding: 5rem 0 4.5rem; overflow: hidden; }
/* One radial glow, seeded on the brand cyan. It is the only decoration on the
   page that is not either type or a screenshot. */
.hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(8, 145, 178, 0.16) 0%, transparent 62%);
  pointer-events: none;
}
.hero > * { position: relative; }

/* The lockup opens the page, above the eyebrow rather than beside the headline:
   a mark set flush-left over the first line of type reads as a masthead, where the
   same mark alongside it competes with the h1 for the same optical weight. The
   asset is cropped to its own ink, so this left edge is the headline's left edge.
   210 px is the ceiling, not a preference: past roughly a third of the headline's
   own width the lockup stops introducing the h1 and starts being a second one, and
   the hero has to be read twice. The hero's top padding gives back the height this
   costs, so the fold lands where it did before. */
.hero-logo {
  width: min(210px, 46vw);
  height: auto;
  margin: 0 0 1.6rem;
}
@media (max-width: 700px) { .hero-logo { margin-bottom: 1.25rem; } }

.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.1rem);
  letter-spacing: -0.035em;
  max-width: 15ch;
  font-weight: 660;
}
.hero .kicker {
  display: block;
  color: var(--fg-mute);
}
.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--fg-dim);
  max-width: 62ch;
  margin: 1.6rem 0 0;
}
.hero-sub strong { color: var(--fg); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.hero-meta {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--fg-mute);
}

/* ---------- media frames ---------- */

/* Every screenshot in the app is dark-on-dark, so it needs a border to have an
   edge at all. The cyan wash underneath is what stops a 1400 px shot reading as
   a hole punched in the page. */
.frame {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-inset);
  box-shadow: 0 24px 70px -30px rgba(8, 145, 178, 0.4), 0 2px 14px rgba(0, 0, 0, 0.6);
}
.frame img, .frame video { width: 100%; }
.frame-wide { margin-top: 3rem; }

/* The wide captures are 1400–1800 px of terminal and editor type. Below 700 px
   they are noise, so the narrow layout swaps in text that scales instead. */
.show-narrow { display: none; }
@media (max-width: 700px) {
  .hide-narrow { display: none; }
  .show-narrow { display: block; }
}

/* ---------- plan sketch (narrow-screen stand-in for the hero capture) ---------- */

/* Deliberately typographic rather than a fake window: it is the plan's *content*
   at a readable size, not an imitation of a screenshot. */
.plan-sketch {
  margin-top: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg-inset);
  padding: 1.1rem 1.2rem 1.3rem;
  font-family: var(--mono);
}
.plan-sketch-head {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 0.9rem;
}
.plan-sketch ol { list-style: none; margin: 0; padding: 0; }
.plan-sketch li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}
.plan-sketch li:first-child { border-top: 0; }
.ps-n {
  flex: none;
  width: 1.35rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--fg-mute);
}
.ps-n.done { color: #6fc28b; }
.ps-n.run { color: var(--cyan-bright); }
.ps-n.man { color: #d8b064; }
.ps-t { font-size: 0.86rem; color: var(--fg); line-height: 1.45; }
.ps-t em {
  display: block;
  font-style: normal;
  font-size: 0.76rem;
  color: var(--fg-mute);
  margin-top: 0.15rem;
}

/* The plan crop is 1860 px of panel. Capped at 940 it renders at ~0.5 scale, which
   is where the model and mode pills stay readable; full-bleed it is needlessly
   large and the row height starts to look like a mistake. */
.plan-shot { max-width: 940px; }

figure { margin: 0; }
figcaption {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--fg-mute);
  max-width: 70ch;
}

/* ---------- pillars ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  background: linear-gradient(180deg, var(--bg-raised), var(--bg));
}
.pillar .step {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--cyan);
  text-transform: uppercase;
}
.pillar h3 { margin: 0.6rem 0 0.55rem; }
.pillar p { color: var(--fg-dim); font-size: 0.94rem; margin: 0; }

/* ---------- feature rows (surface sections) ---------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 3.25rem;
}
.feature + .feature { margin-top: 4.5rem; }
.feature.flip .feature-media { order: -1; }
/* A grid item's automatic minimum is its min-content, and a `pre` is only a
   scroll container for its *own* overflow — it still reports its longest line as
   min-content. Without this, one wide code block widens the whole column and the
   page scrolls sideways on a phone. */
.feature > * { min-width: 0; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.5rem; }
  .feature + .feature { margin-top: 3rem; }
  .feature.flip .feature-media { order: 0; }
}
.feature h3 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.feature p { color: var(--fg-dim); font-size: 0.98rem; }
.feature-media img { border-radius: 8px; border: 1px solid var(--line-strong); }
.feature-media .frame img { border: 0; border-radius: 0; }

/* A tall portrait capture beside prose: give the media the narrow column and cap
   it, so a 2.19:1 panel shot informs the paragraph instead of burying it. */
.feature-narrow { grid-template-columns: 1fr 300px; align-items: center; margin-top: 4.5rem; }
.feature-narrow .feature-media { max-width: 300px; }
@media (max-width: 900px) {
  .feature-narrow { grid-template-columns: 1fr; }
  .feature-narrow .feature-media { max-width: 300px; }
}

/* ---------- detail cards ---------- */

.details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
}
@media (max-width: 820px) { .details { grid-template-columns: 1fr; margin-top: 2.5rem; } }

.detail {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-raised), var(--bg));
}
/* The crops span 17:1 to 2.4:1, and one fitting rule cannot serve both. A fixed
   band keeps side-by-side cards aligned; which rule applies inside it is the
   card's choice, because the two shapes fail in opposite directions — `contain`
   shrinks a tall panel until its labels are unreadable, and `cover` crops a
   17:1 strip down to its middle third. */
/* One height for every band, so two cards in a row start their headings on the
   same line. Only the fit rule differs. */
.detail-media {
  height: 168px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.detail-media img { border-radius: 4px; }

/* Wide, short strips: show all of it, matted. */
.detail-media.strip { padding: 1rem 1.4rem; }
.detail-media.strip img { max-height: 100%; max-width: 100%; width: auto; }

/* Taller panels: fill the band and crop from the top, where the affordance the
   caption is talking about actually lives. */
.detail-media.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Top *left*, not top centre: these panels are left-aligned label/control rows,
     so centring the crop slices the first word off every one of them. */
  object-position: top left;
  border-radius: 0;
}
/* The two 2.4:1 captures are the exception: `cover` in the 168px band throws away
   their bottom third, which is the runners row on one and the approve/reject
   buttons on the other — the part the caption is pointing at. Size the band from
   the taller one's own ratio instead and fit rather than crop, so it stays whole
   at every column width. Their row-mate carries `.tall` too, so the two bands
   still resolve to the same height. */
.detail-media.tall {
  height: auto;
  aspect-ratio: 1860 / 768;
}
.detail-media.tall img {
  object-fit: contain;
  object-position: center;
}

.detail h3 { margin: 1.25rem 1.4rem 0.5rem; font-size: 1.08rem; }
.detail p { margin: 0 1.4rem 1.4rem; color: var(--fg-dim); font-size: 0.93rem; }

/* On a phone the card is ~320px and these are ~2.4× captures, so `contain` would
   render a 13:1 strip 25px tall — present, and unreadable. Pin them to a legible
   width and crop from the left instead, which is what the panels already do at
   this size. A partial view you can read beats a whole one you cannot. */
@media (max-width: 620px) {
  .detail-media { height: 118px; justify-content: flex-start; padding: 0; }
  /* One rule for both shapes here: `cover` on a 1860 px panel picks the
     width-driven scale and lands at 0.19, which is no more readable than the
     `contain` it replaced. Pinning a native-ish width and letting the card clip
     it is the only fitting that keeps type at a legible size on a phone. */
  /* Both classes named explicitly: a media query adds no specificity, so a bare
     `.detail-media img` here loses to the `.detail-media.strip img` above it. */
  .detail-media.strip img,
  .detail-media.panel img {
    width: 760px;
    height: auto;
    max-width: none;
    max-height: none;
    flex: none;
    object-fit: fill;
    border-radius: 0;
  }
  .detail-media.strip { align-items: center; padding-left: 0.9rem; }
  .detail-media.panel { align-items: flex-start; }
  /* Same pinned-width crop as the other panels here — the aspect band would be
     132px on a phone, which clips harder than the plain height does. Give these
     two more of it, since they are three stacked rows rather than one. */
  .detail-media.tall { height: 200px; aspect-ratio: auto; }
}

/* ---------- capability grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

.cell { background: var(--bg); padding: 1.8rem 1.6rem; }
.cell h3 { margin-bottom: 0.55rem; }
.cell p { color: var(--fg-dim); font-size: 0.93rem; margin: 0; }
.cell .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.7rem;
}

/* ---------- key bindings ---------- */

.keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem 1.5rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}
.keys li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.55rem;
}
kbd {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.12rem 0.45rem;
  color: var(--fg);
  flex: none;
  min-width: 2.4rem;
  text-align: center;
}

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

.code {
  position: relative;
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1.5rem;
}
.code-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--fg-mute);
}
.code-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.code pre {
  margin: 0;
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.855rem;
  line-height: 1.7;
  color: var(--fg);
  tab-size: 2;
}
.code code { font-family: inherit; }

/* Terminal transcript colouring, matched to brand.json's ansi block. */
.c-cyan { color: var(--cyan-bright); }
.c-dim { color: var(--fg-mute); }
.c-green { color: #6fc28b; }
.c-yellow { color: #d8b064; }
.c-mag { color: #b588d0; }
.c-blue { color: #7fb2dc; }

.copy {
  position: absolute;
  top: 0.42rem;
  right: 0.5rem;
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.copy:hover { color: var(--cyan-bright); border-color: var(--cyan-deep); }
.copy[data-done] { color: #6fc28b; border-color: #2f5540; }

.next {
  margin-top: 3rem;
  max-width: 900px;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.next h3 { margin-bottom: 0.6rem; }
.next p { color: var(--fg-dim); font-size: 0.98rem; max-width: 68ch; }
.next .btn { margin-top: 0.5rem; }

/* ---------- install paths ---------- */

/* Two cards side by side rather than a tablist: the terminal and the extension
   are the two ways in, and a tab would hide one of them behind a click. */
.paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 820px) { .paths { grid-template-columns: 1fr; } }

.path {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.7rem 1.6rem;
}
.path > .eyebrow { margin-bottom: 0.4rem; }
.path h3 { margin-bottom: 0.25rem; }
.path p { color: var(--fg-dim); font-size: 0.94rem; margin: 1.25rem 0 0; }
.path .btn { margin-top: 1.35rem; }

.reqs { margin-top: 3rem; max-width: 900px; }
.reqs ul { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.reqs li {
  color: var(--fg-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding: 0.8rem 0;
}
.reqs li:last-child { border-bottom: 1px solid var(--line); }
.reqs li strong { color: var(--fg); font-weight: 600; }

/* ---------- runners ---------- */

.runners {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}
.runners li {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--fg-dim);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}
.runners li::before { content: "● "; color: var(--cyan); font-size: 0.7em; }
.runners li.plugin::before { color: var(--fg-mute); }

/* ---------- table ---------- */

.table-scroll { overflow-x: auto; margin-top: 2rem; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
}
td { color: var(--fg-dim); }
td code, p code, li code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.08em 0.36em;
  color: var(--cyan-bright);
}

/* ---------- closing CTA ---------- */

.closer { text-align: center; padding: 6rem 0; }
.closer h2 { max-width: 18ch; margin-inline: auto; }
.closer .hero-cta { justify-content: center; }
.closer p { color: var(--fg-dim); margin-top: 1.1rem; }

/* ---------- footer ---------- */

footer { border-top: 1px solid var(--line); padding: 3rem 0; }
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
/* Sized here, not by a width attribute: the attributes carry the served file's real
   880×126 so the browser reserves the right box, and this decides how big it
   actually draws. */
.foot img { width: 168px; height: auto; opacity: 0.85; }
.foot-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot-links a { color: var(--fg-dim); font-size: 0.9rem; }
.foot-links a:hover { color: var(--cyan-bright); }
.foot small { color: var(--fg-mute); font-size: 0.85rem; }

/* ---------- docs page ---------- */

.docs-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
  padding: 3.5rem 0 5rem;
}
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; gap: 2rem; } }
/* Same reason as `.feature > *`: the widest `pre` in the body would otherwise set
   the column's minimum and take the page with it. */
.docs-layout > * { min-width: 0; }

.toc { position: sticky; top: 96px; }
@media (max-width: 900px) {
  .toc { position: static; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
}
.toc ol { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.toc li { margin-bottom: 0.15rem; }
.toc a {
  display: block;
  color: var(--fg-dim);
  font-size: 0.9rem;
  padding: 0.25rem 0 0.25rem 0.85rem;
  border-left: 2px solid var(--line);
  text-decoration: none;
}
.toc a:hover { color: var(--fg); border-left-color: var(--line-strong); }
.toc a[data-active] { color: var(--cyan-bright); border-left-color: var(--cyan); }

.docs-body > section {
  border-top: 0;
  padding: 0 0 3.25rem;
  max-width: var(--prose);
}
.docs-body h2 { font-size: 1.75rem; margin-bottom: 1rem; scroll-margin-top: 96px; }
.docs-body h3 { margin: 2rem 0 0.6rem; }
.docs-body p, .docs-body li { color: var(--fg-dim); }
.docs-body ul { padding-left: 1.15rem; margin: 0 0 1.1rem; }
.docs-body li { margin-bottom: 0.4rem; }
.docs-body strong { color: var(--fg); font-weight: 600; }

.note {
  border-left: 2px solid var(--cyan);
  background: rgba(8, 145, 178, 0.07);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.94rem;
}
.note strong { color: var(--cyan-bright); }