/* ============================================================================
   Ferrosa AI — product documentation
   Shared stylesheet for every page under /productdocs/.

   Docs pages link this file and carry no <style> block of their own, except
   for the handful of genuine per-page variations noted in each page.

   Palette and type are the Ferrosa AI design system (docs/design-system.html).
   Do not introduce new colour literals here — use the tokens below.
   ========================================================================= */

:root {
  /* semantic surfaces — Ferrosa AI design system, dark */
  --bg-primary: #05070c;      /* --ferrosa-bg */
  --bg-secondary: #09111f;    /* --ferrosa-surface-inset */
  --bg-card: #0e1726;         /* --ferrosa-surface */
  --bg-card-hover: #16243a;   /* --ferrosa-surface-2 */
  --text-primary: #e8f4ff;    /* --ferrosa-text */
  --text-secondary: #9bb3cf;  /* --ferrosa-text-muted */
  --text-muted: #6d829a;      /* --ferrosa-text-subtle */
  --accent: #348cff;          /* --ferrosa-primary */
  --accent-warm: #f4a261;     /* --ferrosa-warning */
  --accent-green: #6bc9a0;    /* --ferrosa-success */
  --accent-cool: #7ee7ff;     /* --ferrosa-accent */
  --border: #17273d;
  --code-bg: #060b14;
  --on-accent: #04101f;       /* --ferrosa-text-on-primary (AA on --accent) */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* The header is sticky and 65px tall, so an anchor jump would otherwise park
   the heading behind it and drop you into the section's body with no visible
   sign of which section you are in. Offset every jump target by the header
   plus some air. :target covers fragment navigation; the heading selectors
   also cover scrollIntoView and a reloaded page landing on its own hash. */
:target,
h1[id], h2[id], h3[id], h4[id] { scroll-margin-top: 85px; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.docs-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 7, 12, 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.docs-header-inner {
  max-width: 1200px;
  min-height: 64px;
  margin: 0 auto;
  padding: 0.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.docs-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.docs-logo img { width: 140px; height: 42px; display: block; }

/* Sidebar toggle — the only route to the nav below 1024px, where the sidebar
   itself moves off-canvas. Hidden above that, where the sidebar is always up.
   The button holds a single empty <span>; the two bars are its pseudo-
   elements. Its behaviour is the script the nav generator writes. */
.sidebar-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
}
.sidebar-toggle:hover { background: var(--bg-card-hover); border-color: var(--text-muted); }
.sidebar-toggle span,
.sidebar-toggle span::before,
.sidebar-toggle span::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.sidebar-toggle span { position: relative; }
.sidebar-toggle span::before { content: ''; position: absolute; top: -5px; }
.sidebar-toggle span::after  { content: ''; position: absolute; top: 5px; }

.docs-actions { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.docs-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.docs-actions a:hover { background: var(--bg-card-hover); border-color: var(--text-muted); text-decoration: none; }
.docs-actions svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ── Layout ─────────────────────────────────────────────────────────────────
   Two columns: a fixed-width nav rail and the content column. .container keeps
   its 960px measure and its auto margins, so it stays centred in whatever the
   content column gives it and no page's line length changes on a wide screen.

   minmax(0, 1fr) rather than 1fr: grid items are min-width:auto by default and
   refuse to shrink below their content, which is what pushed a <pre> 564px past
   a 320px viewport last round.
   ───────────────────────────────────────────────────────────────────────── */

.docs-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  align-items: start;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

/* An explicit width is load-bearing here, not decoration. Auto margins on a
   grid item suppress the normal stretch and make it shrink-to-fit, which for
   .container means max-content — 846px of it hanging off a 320px viewport.
   With a width set, the margins go back to just centring it inside the track.
   (print.html's .container is a plain block child of body and is unaffected.) */
.docs-layout > .container { width: 100%; }

/* ── Sidebar ────────────────────────────────────────────────────────────────
   Generated into every docs page from docs/productdocs/nav.json by
   scripts/build-docs-nav.py. Do not hand-edit it in the pages.
   ───────────────────────────────────────────────────────────────────────── */

.docs-sidebar {
  position: sticky;
  top: 64px;                        /* clears the sticky header */
  align-self: start;
  height: calc(100vh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  min-width: 0;
  padding: 2.5rem 1.25rem 3rem 2rem;
  border-right: 1px solid var(--border);
}

.docs-nav, .docs-nav-pages, .docs-nav-sections { list-style: none; margin: 0; padding: 0; }
/* The content rules give every li a bottom margin and a 720px measure. */
.docs-nav li { margin: 0; max-width: none; }
.docs-nav-product + .docs-nav-product { margin-top: 1.75rem; }

.docs-nav-title {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}
a.docs-nav-title:hover { color: var(--accent); text-decoration: none; }
.docs-nav-title.is-soon { color: var(--text-muted); }
/* Its own line for every product. Inline, it fits after "Ferrosa Forge" but
   wraps after "Ferrosa Memory", so the two coming-soon entries would not
   match each other. */
.docs-nav-soon {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.docs-nav-pages a {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.docs-nav-pages a:hover { background: var(--bg-card); color: var(--text-primary); text-decoration: none; }
.docs-nav-pages a[aria-current="page"] {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.docs-nav-pages .n {
  flex-shrink: 0;
  min-width: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.docs-nav-pages .ext { color: var(--text-muted); font-size: 0.75rem; }

/* The open chapter's own sections — the same list as its "On this page" box.
   Indented to sit under the chapter label, clear of the number column. */
.docs-nav-sections { margin: 0.15rem 0 0.5rem; padding-left: 1.8rem; }
.docs-nav-sections a {
  display: block;
  padding: 0.25rem 0.5rem;
  border-left: 1px solid var(--border);
  border-radius: 0 6px 6px 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
}
.docs-nav-sections a:hover {
  border-left-color: var(--accent);
  color: var(--text-primary);
  text-decoration: none;
}

/* ── Prev / next ────────────────────────────────────────────────────────── */

.docs-prevnext {
  display: flex;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.docs-prevnext a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  max-width: 22rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  text-decoration: none;
}
.docs-prevnext a:hover { border-color: var(--accent); text-decoration: none; }
.docs-next { margin-left: auto; text-align: right; align-items: flex-end; }
.docs-prevnext .dir {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.docs-prevnext .lbl { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }

/* ── Print view ─────────────────────────────────────────────────────────────
   database/print.html: every chapter concatenated, no header, no sidebar.
   ───────────────────────────────────────────────────────────────────────── */

.print-chapter { min-width: 0; }
.print-chapter + .print-chapter {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

/* Printing needs the light palette, not an exception to the "no new colour
   literals" rule: browsers drop background colours when printing, so the dark
   theme's #e8f4ff body text would land on white paper and be invisible. Every
   value below is lifted verbatim from the design system's light theme
   (docs/design-system.html, :root[data-theme="light"]) — the same pairs
   check-brand-contrast.mjs already verifies at AA against #ffffff. */
@media print {
  :root {
    --bg-primary: #ffffff;      /* --ferrosa-surface */
    --bg-secondary: #eef4fb;    /* --ferrosa-surface-inset */
    --bg-card: #ffffff;         /* --ferrosa-surface */
    --bg-card-hover: #e7eef7;   /* --ferrosa-surface-2 */
    --text-primary: #0c1a2b;    /* --ferrosa-text */
    --text-secondary: #44586f;  /* --ferrosa-text-muted */
    --text-muted: #61738a;      /* --ferrosa-text-subtle */
    --accent: #2270d8;          /* --ferrosa-primary */
    --accent-cool: #0e7ea3;     /* --ferrosa-accent */
    --accent-green: #1d805c;    /* --ferrosa-success */
    --accent-warm: #a15c14;     /* --ferrosa-warning */
    --border: #6a93bf;          /* --ferrosa-border */
    --code-bg: #eef4fb;         /* --ferrosa-surface-inset */
    --on-accent: #ffffff;       /* --ferrosa-text-on-primary */
  }

  body { background: #ffffff; color: var(--text-primary); }

  .docs-header, .docs-sidebar, .docs-prevnext, footer { display: none; }
  /* print.html's chapter list is on-screen navigation — that page has no
     sidebar, and it stays useful if the print dialog is cancelled. On paper it
     is dead weight, and the Rust book's print view carries no contents page
     either, so it comes out of the printed document. */
  .print-toc { display: none; }
  .docs-layout { display: block; }
  .container { max-width: none; padding: 0; }
  .print-chapter + .print-chapter { break-before: page; border-top: none; }

  /* Callout tints are rgba on a dark ground; on paper only the border survives
     the background being dropped, so give them one that reads. */
  .note, .warning, .success, .extension, .toc, .card {
    border: 1px solid var(--border);
    background: none;
  }

  /* Syntax colours are a dark-theme scheme. Remap to the light tokens so code
     is legible on paper instead of washing out. */
  pre .cm, .comment { color: var(--text-muted); }
  pre .kw, .keyword { color: var(--accent); }
  pre .str, .string { color: var(--accent-green); }
  pre .var, .uri    { color: var(--accent-warm); }
  pre .type         { color: var(--accent-cool); }

  pre, code { border: 1px solid var(--border); background: none; color: var(--text-primary); }
  a { color: var(--accent); }
  h1, h2, h3, h4 { break-after: avoid; }
  pre, table, .note, .warning { break-inside: avoid; }
}

/* Chapter list on the print view. (It was also the product index pages, which
   are now meta-refresh stubs onto Getting Started.) */
.docs-index { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 720px; }
.docs-index li { margin: 0; border-bottom: 1px solid var(--border); }
.docs-index li:first-child { border-top: 1px solid var(--border); }
.docs-index a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.9rem 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}
.docs-index a:hover { text-decoration: none; color: var(--accent-cool); }
.docs-index .n { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; min-width: 1.5rem; }
.docs-index .ext { color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; }

/* The product-card grid that stood on the docs home went with that page: the
   products are the sidebar now. */

/* ── Content ────────────────────────────────────────────────────────────────
   Carried over verbatim from the pages these docs came from, retokenised to
   the design system. Page copy and markup are unchanged.
   ───────────────────────────────────────────────────────────────────────── */

.back-link { display: inline-block; color: var(--accent); text-decoration: none; font-size: 0.875rem; font-weight: 500; margin-bottom: 2rem; }
.back-link:hover { text-decoration: underline; }

h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
h1 span { color: var(--accent); }
.subtitle { font-size: 1.125rem; color: var(--text-secondary); margin-bottom: 3rem; max-width: 640px; line-height: 1.7; }
h2 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 1.5rem; margin-top: 4rem; }
h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; margin-top: 2rem; }
p, li { color: var(--text-secondary); margin-bottom: 1rem; max-width: 720px; line-height: 1.7; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1.5rem; }
li { margin-bottom: 0.5rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: var(--font-mono); font-size: 0.875em; background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 4px; border: 1px solid var(--border); color: var(--accent-cool); }
pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; overflow-x: auto; margin-bottom: 1.5rem; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.8; color: var(--text-secondary); }

/* Code token colours are a syntax theme, not brand palette — left as authored. */
pre .cm { color: #546e7a; }
pre .kw { color: #c792ea; }
pre .str { color: #c3e88d; }
pre .var { color: #f78c6c; }
pre .type { color: #ffcb6b; }

table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }
td { color: var(--text-secondary); }
td:first-child { color: var(--text-primary); font-weight: 600; font-family: var(--font-mono); font-size: 0.875rem; }
td code { font-size: 0.8125rem; }

.note { background: rgba(52, 140, 255, 0.08); border: 1px solid rgba(52, 140, 255, 0.2); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.9375rem; color: var(--text-secondary); }
.note strong { color: var(--accent); }
.warning { background: rgba(244, 162, 97, 0.08); border: 1px solid rgba(244, 162, 97, 0.3); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; font-size: 0.9375rem; color: var(--text-secondary); }
.warning strong { color: var(--accent-warm); }
.success { background: rgba(107, 201, 160, 0.08); border: 1px solid rgba(107, 201, 160, 0.2); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.9375rem; color: var(--text-secondary); }
.success strong { color: var(--accent-green); }
.extension { background: rgba(107, 201, 160, 0.08); border: 1px solid rgba(107, 201, 160, 0.2); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.9375rem; color: var(--text-secondary); }
.extension strong { color: var(--accent-green); }

.toc { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem 2rem; margin-bottom: 2rem; }
.toc h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.75rem; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: 0.375rem; }
.toc a { font-size: 0.9375rem; font-weight: 500; }

.check { color: var(--accent-green); }
.cross { color: var(--text-muted); }
.partial { color: var(--accent-warm); }
.win { color: var(--accent-green); font-weight: 600; }

.comment { color: var(--text-muted); }
.keyword { color: var(--accent-cool); }
.string { color: var(--accent-green); }
.uri { color: var(--accent-warm); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; margin-bottom: 2rem; }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: border-color 0.2s; }
.card:hover { border-color: var(--accent); }
.card h4 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.5rem; }
.card p { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0; }

.step-grid { display: grid; grid-template-columns: 60px 1fr; gap: 0 1.5rem; margin: 2rem 0; }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.125rem; color: var(--accent); margin-top: 0.25rem; }
.step-content { padding-bottom: 2rem; border-left: 1px solid var(--border); padding-left: 1.5rem; margin-left: -38px; }
.step-content:last-child { border-left: none; }
.step-content h3 { margin-top: 0; }
/* was #fff on --accent (3.31:1, under AA); --on-accent is 5.77:1 */
.step-number { display: inline-block; background: var(--accent); color: var(--on-accent); font-size: 0.75rem; font-weight: 700; width: 1.5rem; height: 1.5rem; border-radius: 50%; text-align: center; line-height: 1.5rem; margin-right: 0.5rem; flex-shrink: 0; }

/* ── Footer — the standard site footer ──────────────────────────────────── */

footer { border-top: 1px solid var(--border); }
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.footer-community { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.community-title { margin: 0; border: 0; padding: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); text-transform: none; }
.social-links { display: flex; gap: 0.6rem; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.social-link:hover { color: var(--text-primary); border-color: var(--accent); background: var(--bg-card-hover); text-decoration: none; }
.social-link svg { width: 18px; height: 18px; }
.footer-legal { font-size: 0.85rem; color: var(--text-muted); text-align: center; }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.footer-links a { color: var(--text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--text-primary); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Long identifiers in inline code would otherwise push the page wider than the
   viewport, since they contain no break opportunities. */
code { overflow-wrap: anywhere; }

/* Below 1024px the sidebar slides in over the page from the header toggle
   instead of holding a rail. The toggle is the only route to it at these
   widths — it must never be hidden here. Escape, a link click, or a click
   outside all close it.

   1024px, not the 860px first tried: at 861px the 272px rail left a 589px
   content column, and the widest reference tables have a larger min-content
   width than that, so cql-compatibility.html ran 32px off the side. The
   breakpoint has to sit high enough that the narrowest two-column content
   track (1025 - 272 = 753px) still clears them. */
@media (max-width: 1024px) {
  .docs-header-inner { padding: 0.5rem 1rem; }
  .docs-logo img { width: 120px; height: 36px; }
  .sidebar-toggle { display: inline-flex; }

  .docs-layout { grid-template-columns: minmax(0, 1fr); }

  .docs-sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    z-index: 30;
    width: min(300px, 85vw);
    height: auto;
    background: var(--bg-secondary);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  body.nav-open .docs-sidebar { transform: none; }

  /* Scrim. Purely visual — the outside-click close is in the nav script. */
  body.nav-open::after {
    content: '';
    position: fixed;
    inset: 64px 0 0 0;
    z-index: 25;
    background: rgba(5, 7, 12, 0.6);
  }
}

/* Grid and flex items default to min-width:auto, so they refuse to shrink below
   their content's intrinsic width — a long <pre> inside .step-content was forcing
   the page 500px wider than the viewport on phones. This is a pre-existing bug on
   the pages these docs came from; min-width:0 lets the code block scroll itself. */
.step-grid, .step-content, .card-grid, .card, .container { min-width: 0; }
pre { max-width: 100%; }

/* The print action is a third icon in the header. Below ~420px the row of
   toggle + lockup + three actions no longer fits — at 320px it ran 27px over.
   Everything steps down together rather than any affordance being dropped:
   print is only reachable from the header, so hiding it on a phone would
   remove the print view from small screens entirely. */
@media (max-width: 420px) {
  .docs-header-inner { gap: 0.625rem; padding: 0.5rem 0.75rem; }
  .docs-logo img { width: 96px; height: 29px; }   /* keeps the 140x42 ratio */
  .sidebar-toggle { width: 34px; height: 34px; }
  .docs-actions { gap: 0.4rem; }
  .docs-actions a { width: 34px; height: 34px; }
  .docs-actions svg { width: 15px; height: 15px; }
}

@media (max-width: 640px) {
  .container { padding: 2.5rem 1rem 4rem; }
  h1 { font-size: 1.75rem; }
  /* Wide reference tables scroll inside their own box rather than the page. */
  table { font-size: 0.8125rem; display: block; overflow-x: auto; max-width: 100%; }
  th, td { padding: 0.5rem 0.625rem; }
  .card-grid { grid-template-columns: 1fr; }
  .step-grid { grid-template-columns: 1fr; }
  /* Side by side, the two chapter links get too narrow to read their labels. */
  .docs-prevnext { flex-direction: column; }
  .docs-prevnext a { max-width: none; }
  .docs-next { margin-left: 0; text-align: left; align-items: flex-start; }
  .step-content { border-left: none; margin-left: 0; padding-left: 0; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.25rem; padding: 2rem 1rem; }
  .footer-community, .footer-links { justify-content: center; }
}