/* Bootstrap guide — self-contained, no external requests */
:root {
  --ink: #1a2332;
  --ink-soft: #4a5568;
  --paper: #f7f8fa;
  --card: #ffffff;
  --line: #dfe4ec;
  --accent: #0d6e6e;
  --accent-ink: #ffffff;
  --code-bg: #eef1f5;
  --pre-bg: #101623;
  --pre-ink: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

.hero, main > section, footer > * { max-width: 46rem; margin-inline: auto; }

.hero {
  padding: 2.5rem 1.25rem 1.5rem;
  background: linear-gradient(180deg, #0f2436 0%, #143244 100%);
  color: var(--accent-ink);
}
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: #9fc4c4;
  margin: 0 0 0.5rem;
}
.hero h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 0.75rem; }
.hero .lede { color: #d9e5ee; margin: 0 0 0.5rem; }
.hero .note { color: #9fc4c4; font-size: 0.95rem; margin: 0; }

.toc {
  max-width: 46rem;
  margin: 1rem auto 0;
  padding: 0 1.25rem;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.95rem;
}
.toc li { margin: 0; }
.toc a { color: var(--accent); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

main > section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 1.4rem 1.5rem;
  margin-top: 1.25rem;
}
section h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 0.8rem;
  scroll-margin-top: 1rem;
}
section p { margin: 0 0 0.8rem; }
section ul { margin: 0 0 0.8rem; padding-inline-start: 1.4rem; }
section li { margin-bottom: 0.4rem; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  color: var(--ink);
  padding: 0.1em 0.35em;
  border-radius: 0.25em;
}
pre {
  background: var(--pre-bg);
  color: var(--pre-ink);
  padding: 0.9rem 1.1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0 0 0.9rem;
}
pre code { background: none; padding: 0; font-size: 0.88rem; line-height: 1.55; color: inherit; }

.aside {
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--accent);
  padding-left: 0.9rem;
}

table { width: 100%; border-collapse: collapse; margin: 0 0 0.5rem; font-size: 0.97rem; }
caption { text-align: left; color: var(--ink-soft); font-size: 0.9rem; padding-bottom: 0.4rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
tr:last-child td { border-bottom: none; }

footer { padding: 2rem 1.25rem 2.5rem; }
footer p { margin: 0 0 0.4rem; color: var(--ink-soft); font-size: 0.95rem; }
footer .meta { font-size: 0.85rem; }
footer a { color: var(--accent); }

a { color: var(--accent); }

/* Mobile: stack table rows as label/value cards */
@media (max-width: 42rem) {
  body { font-size: 1rem; }
  .hero h1 { font-size: 1.5rem; }
  section { padding: 1.15rem 1.1rem; }
  th { display: none; }
  td { display: block; border-bottom: none; padding: 0.15rem 0.6rem; }
  td:first-child { padding-top: 0.5rem; font-weight: 600; }
  td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    margin-bottom: 0.15rem;
  }
  td:last-child { padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
  tr:last-child td:last-child { border-bottom: none; }
}