/* === reset.css === */
/* Reset + base — ported subset of normalize, minimal opinion. */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--brand-blue); }

button, input, select { font: inherit; }

/* === tokens.css === */
/* Design tokens — curated subset of elvo-website/src/styles/tokens.css.
   Excludes website-only tokens (device-pair, glass plane, chat bubble). */

:root {
  /* ── Palette ─────────────────────────────────────────────────────────── */
  --brand-blue:        #2563EB;
  --brand-blue-hover:  #1E40AF;
  --brand-cyan:        #00E5FF;
  --color-accent:      #818CF8;

  --bg-page:           #F8F7FF;
  --card-bg:           #FFFFFF;

  --text-primary:      #0A0A0A;
  --text-muted:        #4B5563;
  --text-subtle:       #6B7280;
  --text-faint:        #9CA3AF;

  --border-subtle:     rgba(0, 0, 0, 0.04);
  --card-border:       rgba(15, 23, 42, 0.06);

  /* Hero ambient (static gradient + dot-grid) */
  --wash-1-color:      #DDD6FE;
  --wash-2-color:      #818CF8;
  --dot-indigo:        165, 180, 252;     /* rgba-pairable */

  /* ── Typography ──────────────────────────────────────────────────────── */
  --ff-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:  'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --fs-caption:        12px;
  --fs-body-sm:        14px;
  --fs-link:           15px;
  --fs-body:           16px;
  --fs-title:          18px;
  --fs-heading-sm:     24px;
  --fs-heading:        32px;
  --fs-hero-h1:        40px;
  --fs-hero-h1-fluid:  clamp(28px, 5vw, 56px);

  /* ── Spacing (4px base) ─────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-btn:   10px;
  --radius-card:  20px;
  --radius-pill:  999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --card-shadow:        0 7px 40px rgba(37, 99, 235, 0.08);
  --card-shadow-hover:  0 14px 56px rgba(37, 99, 235, 0.18);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-cta:         0 6px 18px -6px rgba(37, 99, 235, 0.5);

  /* ── Container ───────────────────────────────────────────────────────── */
  --container-max: 1200px;

  /* ── Easings + durations ─────────────────────────────────────────────── */
  --ease-out:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-overshoot:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-md:     280ms;
}

/* ── Tier filtering (preserved from current build) ──────────────────── */
body[data-tier="enterprise"] [data-tier-only]:not([data-tier-only~="enterprise"]) { display: none; }
body[data-tier="partner"]    [data-tier-only]:not([data-tier-only~="partner"])    { display: none; }
body[data-tier="client"]     [data-tier-only]:not([data-tier-only~="client"])     { display: none; }

/* === layout.css === */
/* Layout — body wrapper, sticky frosted-glass header, sidebar+content grid. */

main {
  display: block;
  min-height: 100vh;
}

/* ── Sidebar + content grid ─────────────────────────────────────────── */

.manual-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  max-width: calc(var(--container-max) + 280px);
  margin: 0 auto;
  align-items: start;
}

.manual-content {
  min-width: 0;
}

@media (max-width: 899px) {
  .manual-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Hamburger button (always visible — toggles sidebar) ─────────── */
/* On mobile (<900px) it opens/closes the off-canvas sidebar.
   On desktop it hides/shows the persistent sidebar; state persisted
   to localStorage under "elvoManualSidebar". */

.manual-header__hamburger {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--text-primary);
  border-radius: var(--radius-btn);
  transition: background var(--duration-fast) var(--ease-out);
}

.manual-header__hamburger:hover {
  background: rgba(37, 99, 235, 0.05);
}

.manual-header__hamburger:focus {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* Desktop hidden state — sidebar slides out, content reclaims full width.
   Header inner shrinks to match so the brand and tier-select stay aligned
   with the now-narrower content area edges. */
@media (min-width: 900px) {
  body.sidebar-hidden .manual-sidebar {
    display: none;
  }
  body.sidebar-hidden .manual-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--container-max);
  }
  body.sidebar-hidden .manual-header__inner {
    max-width: var(--container-max);
  }
}

/* ── Sticky header ──────────────────────────────────────────────────── */

.manual-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-md) var(--ease-out),
              border-color var(--duration-md) var(--ease-out),
              box-shadow var(--duration-md) var(--ease-out);
}

.manual-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-md);
}

.manual-header__inner {
  /* Match `.manual-layout` outer bounds so the brand aligns with the
     sidebar's left edge and the tier select aligns with the content
     area's right edge. When the sidebar is hidden on desktop the
     header inner shrinks back to --container-max (see the body
     .sidebar-hidden rule below). */
  max-width: calc(var(--container-max) + 280px);
  height: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.manual-header__brand {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--duration-fast) var(--ease-out);
}

.manual-header__brand:hover {
  color: var(--brand-blue);
}

.manual-header__spacer { flex: 1; }

.manual-header__tier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.manual-header__tier-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.manual-header__tier select {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 32px 6px 14px;
  font-size: var(--fs-link);
  color: var(--text-primary);
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%234B5563' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.manual-header__tier select:hover { border-color: rgba(37, 99, 235, 0.3); }

.manual-header__tier select:focus {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .manual-header { height: 60px; }
  .manual-header__tier-label { display: none; }
}

/* === sidebar.css === */
/* Sidebar — vertical nav, collapsible Parts, active section highlight.
   Flush left (no internal horizontal padding), with summary/anchor padding
   providing breathing room. Sticky below the header on desktop; off-canvas
   with hamburger trigger on mobile.

   Premium aesthetic notes:
   - Active section uses a 90° indigo gradient + a 3px indigo left rail at
     the very edge of the sidebar (x=0) so the eye snaps to the current page.
   - Hover states use a softer 0.04 alpha wash instead of a hard fill.
   - Section list indented under the Part title for visual nesting (no
     border-left rail on the list — cleaner than the previous Markdown-tree
     style).
   - Scrollbar invisible until hover, then a thin neutral track. */

.manual-sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--card-bg);
  border-right: 1px solid var(--card-border);
  z-index: 40;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--duration-md) var(--ease-out);
}

.manual-sidebar:hover {
  scrollbar-color: var(--card-border) transparent;
}

.manual-sidebar::-webkit-scrollbar {
  width: 6px;
}

.manual-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background var(--duration-md) var(--ease-out);
}

.manual-sidebar:hover::-webkit-scrollbar-thumb {
  background: var(--card-border);
}

.manual-nav {
  padding: var(--space-4) 0;
}

.manual-nav__part {
  margin: 0;
}

.manual-nav__part summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  user-select: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.manual-nav__part summary::-webkit-details-marker { display: none; }
.manual-nav__part summary::marker { content: ''; }

.manual-nav__part summary:hover {
  background: rgba(37, 99, 235, 0.04);
}

.manual-nav__part-title {
  flex: 1;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.35;
}

.manual-nav__chevron {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform var(--duration-md) var(--ease-out),
              color var(--duration-md) var(--ease-out);
}

.manual-nav__part[open] .manual-nav__chevron {
  transform: rotate(180deg);
  color: var(--brand-blue);
}

.manual-nav__sections {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-3) 0;
}

.manual-nav__section {
  margin: 0;
  position: relative;
}

.manual-nav__section a {
  display: block;
  /* Section text aligns with the Part title text — both padded 20px from
     the sidebar's left edge, clear of the 3px active rail at x=0. */
  padding: 7px 20px;
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.4;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  position: relative;
}

.manual-nav__section a:hover {
  background: rgba(37, 99, 235, 0.04);
  color: var(--brand-blue);
}

.manual-nav__section--active a {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.04) 60%, transparent);
  color: var(--brand-blue);
  font-weight: var(--fw-semibold);
}

.manual-nav__section--active a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-blue);
  border-radius: 0 2px 2px 0;
}

/* ── Mobile off-canvas behaviour ─────────────────────────────────── */

.manual-sidebar__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 55;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 899px) {
  .manual-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 86vw;
    height: 100vh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--duration-md) var(--ease-out);
    box-shadow: 0 0 24px rgba(15, 23, 42, 0.15);
  }

  .manual-sidebar.open {
    transform: translateX(0);
  }

  .manual-sidebar.open + .manual-sidebar__overlay {
    display: block;
  }
}

/* === hero.css === */
/* Hero band — per-section title, breadcrumb, meta. Static ambient
   gradient + dot-grid; reveal fade-up on text (one-shot). */

.hero {
  position: relative;
  width: 100%;
  padding: var(--space-20) var(--space-10) var(--space-16);
  background-color: var(--bg-page);
  background-image:
    radial-gradient(circle at 0% 0%, var(--wash-1-color) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, var(--wash-2-color) 0%, transparent 45%),
    radial-gradient(circle, rgba(var(--dot-indigo), 0.22) 1px, transparent 1px);
  background-size: auto, auto, 16px 16px;
  background-repeat: no-repeat, no-repeat, repeat;
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hero__caption {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-blue);
}

.hero__caption-sep {
  color: var(--text-faint);
  font-weight: var(--fw-regular);
}

.hero__title {
  margin: 0 0 var(--space-5);
  font-family: var(--ff-sans);
  font-size: var(--fs-hero-h1);
  line-height: 1.08;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__lede {
  margin: 0 0 var(--space-6);
  max-width: 600px;
  font-size: var(--fs-link);
  line-height: 1.5;
  color: var(--text-muted);
}

.hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.hero__meta-sep {
  color: var(--text-faint);
}

.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__meta-item svg {
  color: var(--brand-blue);
  opacity: 0.75;
  flex-shrink: 0;
}

/* Reveal — one-shot fade-up on initial paint. */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__caption,
.hero__title,
.hero__lede,
.hero__meta {
  animation: heroReveal 600ms var(--ease-out) backwards;
}

.hero__caption { animation-delay: 0ms;   }
.hero__title   { animation-delay: 80ms;  }
.hero__lede    { animation-delay: 160ms; }
.hero__meta    { animation-delay: 240ms; }

@media (max-width: 900px) {
  .hero { padding: var(--space-16) var(--space-5) var(--space-12); }
  .hero__title { font-size: var(--fs-hero-h1-fluid); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__caption,
  .hero__title,
  .hero__lede,
  .hero__meta {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* === prose.css === */
/* Prose styling — H1/H2/H3, P, lists, blockquote, code, HR, tables, images.
   Scoped under .prose so it does not affect chrome/components. */

.body {
  padding: var(--space-12) var(--space-10) var(--space-16);
  background: #FFFFFF;
}

.body__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.prose {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
}

.prose h2[id],
.prose h3[id] { scroll-margin-top: 88px; }

.prose h2 {
  margin: var(--space-12) 0 var(--space-4);
  font-size: clamp(var(--fs-heading-sm), 3vw, var(--fs-heading));
  line-height: 1.2;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.prose h2:first-child { margin-top: 0; }

.prose h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--fs-title);
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.prose h4 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.prose p {
  margin: 0 0 var(--space-5);
  text-align: left;
  hyphens: none;
}

.prose strong {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.prose em { font-style: italic; }

.prose a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  word-break: break-word;
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-thickness var(--duration-fast) var(--ease-out);
}
.prose a:hover {
  color: var(--brand-blue-hover);
  text-decoration-thickness: 2px;
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
}
.prose li {
  margin: 0 0 var(--space-2);
  line-height: 1.65;
}
.prose li::marker { color: var(--brand-blue); }

.prose blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--brand-blue);
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.04), rgba(129, 140, 248, 0.02));
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.65;
}
.prose blockquote p { text-align: left; margin: 0 0 var(--space-3); }
.prose blockquote p:last-child { margin: 0; }
.prose blockquote strong { color: var(--text-primary); }

.prose code {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 4px;
  color: var(--text-primary);
}

.prose pre {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow-x: auto;
  font-family: var(--ff-mono);
  font-size: 14px;
  line-height: 1.55;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--card-border);
  margin: var(--space-10) 0;
}

/* ── Tables ─────────────────────────────────────────────────────────── */
.prose table {
  width: 100%;
  margin: var(--space-8) 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: var(--fs-body-sm);
  box-shadow: var(--card-shadow);
}
.prose thead {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.07), rgba(37, 99, 235, 0.03));
}
.prose thead th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-blue);
  border-bottom: 2px solid rgba(37, 99, 235, 0.18);
  white-space: nowrap;
}
.prose tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}
.prose tbody tr:nth-child(even) { background: rgba(248, 247, 255, 0.55); }
.prose tbody tr:hover            { background: rgba(37, 99, 235, 0.05); }
.prose tbody td {
  padding: var(--space-4) var(--space-5);
  vertical-align: top;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
  hyphens: none;
  line-height: 1.55;
  color: var(--text-primary);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .prose tbody td:first-child { white-space: normal; }
}

/* ── Images (screenshots) ───────────────────────────────────────────── */
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-6) auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

@media (max-width: 899px) {
  .body { padding: var(--space-10) var(--space-5) var(--space-12); }
}

/* === components.css === */
/* Components — TOC card, tier badge, Prev/Next footer cards,
   index Part cards, back-to-contents link. */

/* ── TOC card ───────────────────────────────────────────────────────── */
.toc {
  margin: 0 0 var(--space-12);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary:hover { background: rgba(37, 99, 235, 0.03); }
.toc__label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-blue);
}
.toc__chevron {
  color: var(--text-muted);
  transition: transform var(--duration-md) var(--ease-out);
}
.toc[open] .toc__chevron { transform: rotate(180deg); }
.toc__list {
  list-style: none;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  border-top: 1px solid var(--card-border);
}
@media (min-width: 900px) {
  .toc__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }
}
.toc__list li { margin: 0; }
.toc__list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--fs-body);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--duration-fast) var(--ease-out);
}
.toc__list a:hover { color: var(--brand-blue); }
.toc__num {
  flex-shrink: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--brand-blue);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  min-width: 26px;
}

/* ── Tier badge ─────────────────────────────────────────────────────── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.12);
  color: var(--brand-blue);
}

/* ── Footer band: Prev/Next cards + back-to-contents ────────────────── */
.footer {
  padding: var(--space-16) var(--space-10) var(--space-20);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-page) 100%);
}
.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.nav-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .nav-grid { grid-template-columns: repeat(2, 1fr); }
}

.nav-card {
  display: block;
  padding: var(--space-6);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-md) var(--ease-out),
              transform var(--duration-md) var(--ease-out),
              border-color var(--duration-md) var(--ease-out);
}
.nav-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.18);
}

.nav-card__caption {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}
.nav-card__caption svg { color: var(--brand-blue); }

.nav-card__title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.nav-card__num {
  color: var(--brand-blue);
  font-variant-numeric: tabular-nums;
  margin-right: var(--space-2);
}

.nav-card--next .nav-card__caption { justify-content: flex-end; }
.nav-card--next .nav-card__title { text-align: right; }

@media (max-width: 899px) {
  .footer { padding: var(--space-12) var(--space-5) var(--space-16); }
}