/* Relay website — design tokens ported 1:1 from desktop/styles/app.css
   (the Electron app's own stylesheet), per the P52 design audit: same
   colors, spacing, radii, and shape language as the actual product. Where
   a token has no app equivalent (section rhythm, monospace stack,
   container width) it's added here rather than borrowed, and named to
   read as a deliberate extension, not a guess. */

:root {
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-border: #e3e5e9;
  --color-border-strong: #cfd3da;
  --color-text: #1a1d23;
  --color-text-secondary: #565c66;
  /* #8a8f98 (the app's own token) reads at only ~3.2:1 on this site's
     surfaces — fine for the app's own UI chrome, not for public marketing
     copy set at small sizes (footnotes, captions). Darkened here, website
     only, to clear WCAG AA's 4.5:1 text threshold while staying visibly
     lighter than --color-text-secondary. */
  --color-text-muted: #6c717a;
  --color-primary: #2d6cdf;
  --color-primary-hover: #2559ba;
  --color-primary-bg: #eaf1fd;
  --color-danger: #c0342c;
  --color-danger-bg: #fbeceb;
  --color-success: #1a8754;
  --color-success-bg: #e9f7f0;

  --radius-sm: 6px;
  --radius-md: 10px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  /* Section-level rhythm: the app never needs spacing beyond --space-7
     (48px), but a scrolling marketing-adjacent page needs room to
     separate full sections. Continues the same growth pattern. */
  --space-8: 64px;
  --space-9: 96px;

  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Used only for version strings, platform tags, checksums, and install
     commands — the "technical" accent borrowed from Direction B, per the
     approved hybrid. */
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --container-width: 1120px;
  --header-height: 64px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

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

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p {
  margin: 0;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-4);
  }
}

.muted {
  color: var(--color-text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until keyboard-focused, matches the app's own
   focus-visible discipline (form inputs get a visible primary outline). */
.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: top 0.12s ease;
}

.skip-link:focus {
  top: var(--space-3);
}

/* ---------------------------------------------------------------------
   Header / navigation — lifted directly from app.css's #nav pattern: an
   open row of text links, active/hover state via color + a bottom
   underline, never a filled background or boxed tab.
   --------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* 1fr auto 1fr: the nav's middle column is sized to its own content and
   centered within it, so "How It Works / Features / Downloads" sit in
   the true center of the header regardless of the brand and GitHub
   links' widths — not a space-between illusion. */
.site-header .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
}

/* The <nav> itself holds no visual box on desktop — display: contents
   dissolves it so its two children (.nav-links, .github-link) become
   direct children of .container's grid, landing in the center and end
   columns respectively. This is what makes the three-link group
   genuinely centered in the full header width (col 1 and col 3 are both
   1fr, so they're always equal, regardless of the brand/GitHub link's
   own widths) rather than centered in whatever space is left over after
   a space-between layout. There is exactly one GitHub link in the DOM;
   the mobile media query below re-groups the same nav for the dropdown
   instead of introducing a second element. */
.site-nav {
  display: contents;
}

.nav-links {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  justify-self: center;
}

.github-link {
  justify-self: end;
}

/* Needs the extra .site-nav a compound to outweigh that rule's own
   font-weight: 500 (equal-specificity .github-link alone would lose). */
.site-nav a.github-link {
  font-weight: 700;
}

.site-nav a {
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 0 2px;
  border-bottom: 2px solid transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.site-nav a:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-border-strong);
}

.site-nav a.active {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
  color: var(--color-text);
}

@media (max-width: 760px) {
  .site-header .container {
    grid-template-columns: 1fr auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* <nav> becomes the real dropdown panel box here (no longer
     display: contents), and .nav-links dissolves instead — its three
     links become direct flex children of <nav> alongside .github-link,
     producing one unified vertical list (How It Works, Features,
     Downloads, GitHub) from the same single-source markup used for the
     desktop layout, not a duplicated mobile-only copy. */
  .site-nav {
    display: flex;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.18s ease;
  }

  .nav-links {
    display: contents;
  }

  .site-header.nav-open .site-nav {
    max-height: 320px;
  }

  .site-nav a {
    height: auto;
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    border-left: 2px solid transparent;
  }

  .site-nav a.active {
    border-bottom: 1px solid var(--color-border);
    border-left-color: var(--color-primary);
  }
}

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */

.section {
  padding: var(--space-9) 0;
  border-bottom: 1px solid var(--color-border);
}

.section:last-of-type {
  border-bottom: none;
}

/* ---------------------------------------------------------------------
   Hero — states what Relay is, what it connects, and what to do next
   (P52.2). Denser than .section's default var(--space-9) rhythm on
   purpose: a hero that's mostly whitespace reads as unfinished, not
   premium, for a product this concrete. The right-column diagram is a
   schematic, not an illustration — the same monitor/phone/transfer-arrow
   glyph geometry already used elsewhere in the app (desktop's
   icons.js/deviceIcon, android's icons.tsx/DesktopIcon, and the
   relay-mark.png icon itself for the center node), not a new visual
   language invented for the website.
   --------------------------------------------------------------------- */

.hero {
  padding: var(--space-8) 0;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-8);
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.hero-headline {
  margin-top: var(--space-3);
  font-size: 40px;
}

.hero-description {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: 17px;
  color: var(--color-text-secondary);
}

.hero-ctas {
  margin-top: var(--space-6);
}

.hero-cta-note {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* The diagram is a .card (reused, not a new surface component) holding
   three stacked device nodes joined by a plain connector line — the
   Windows <-> Relay <-> Android relationship the copy already states in
   words, shown structurally instead of illustrated. */
.hero-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}

.diagram-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.diagram-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

.diagram-icon svg {
  width: 26px;
  height: 26px;
}

.diagram-icon-relay {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-color: var(--color-primary);
}

.diagram-icon-relay img {
  width: 100%;
  height: 100%;
}

.diagram-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.diagram-connector {
  width: 2px;
  height: 28px;
  background: var(--color-border-strong);
}

.diagram-caption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 900px) {
  .hero-container {
    grid-template-columns: 1fr;
  }

  .hero-headline {
    font-size: 32px;
  }

  .hero-diagram {
    margin-top: var(--space-2);
  }
}

@media (max-width: 480px) {
  .hero-headline {
    font-size: 28px;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-ctas .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   How It Works (P52.3) — a three-stage workflow (Discover / Pair /
   Transfer), not a feature grid. Each stage reuses the hero diagram's own
   .diagram-icon box so the two sections read as one visual system, plus
   the exact icon geometry already used in the real app for each step
   (desktop's qrIcon for Pair, transferIcon for Transfer, and the same
   monitor glyph the hero's own "Windows" node uses for Discover). The
   connector between stages is a plain line + chevron — same muted
   border color as the hero's connector line, not the primary blue —
   and is the one element that changes orientation (rotated 90deg) when
   stages stack on narrow screens, rather than swapping in a second icon.
   --------------------------------------------------------------------- */

.section-heading {
  max-width: 56ch;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.section-heading h2 {
  font-size: 28px;
}

.section-heading p {
  margin-top: var(--space-3);
  font-size: 16px;
  color: var(--color-text-secondary);
}

.workflow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  text-align: center;
}

.workflow-icon {
  color: var(--color-text-secondary);
}

.workflow-number {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

.workflow-title {
  margin-top: var(--space-1);
  font-size: 19px;
}

.workflow-description {
  margin-top: var(--space-2);
  font-size: 15px;
  color: var(--color-text-secondary);
}

.workflow-connector {
  flex: 0 0 auto;
  margin-top: 16px;
  color: var(--color-border-strong);
}

.workflow-connector svg {
  width: 32px;
  height: 16px;
}

@media (max-width: 900px) {
  .workflow {
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .workflow-step {
    width: 100%;
    max-width: 340px;
  }

  .workflow-connector {
    margin-top: 0;
  }

  .workflow-connector svg {
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .section-heading h2 {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------------------
   Product Visuals (P52.4) — real, unedited screenshots of the actual
   Desktop (Electron) and Android apps, captured from a live pairing and
   a real Shared Files list (not staged/mocked data). A wide landscape
   screenshot and a tall portrait one don't share an aspect ratio, so
   this deliberately isn't a grid forcing equal columns/heights — each
   figure gets its own realistic max-width (a typical desktop-screenshot
   width, a typical phone-screenshot width) and the flex row centers them
   together. .showcase-frame is a thin border + modest radius only (no
   card padding, no shadow, no device/browser mockup chrome) — the
   screenshots already carry their own real application/OS chrome, so
   this stays the minimal frame the P52.4 brief calls for.
   --------------------------------------------------------------------- */

.showcase {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-7);
}

.showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  text-align: center;
}

.showcase-desktop {
  width: 620px;
  max-width: 100%;
}

.showcase-android {
  width: 240px;
  max-width: 100%;
}

.showcase-frame {
  width: 100%;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.showcase-frame img {
  width: 100%;
  height: auto;
}

.showcase-item figcaption {
  margin-top: var(--space-4);
  max-width: 42ch;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.showcase-platform {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .showcase-desktop {
    width: 460px;
  }

  .showcase-android {
    width: 190px;
  }
}

@media (max-width: 640px) {
  .showcase {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .showcase-desktop,
  .showcase-android {
    width: 340px;
  }
}

/* ---------------------------------------------------------------------
   Features (P52.5) — capability groups, not a generic feature-card grid.
   Transfer leads with more visual weight (a wide card, icon + copy on the
   left, a checklist of its three concrete capabilities on the right);
   Devices/Network/History follow as three equal supporting cards below.
   Every icon here is an existing glyph reused from desktop/icons.js or
   android/icons.tsx (phone, folder/transfer, settings sliders, clock,
   check) — none invented for the website. .feature-icon extends the
   hero/workflow .diagram-icon box exactly (same bordered square), just
   slightly smaller to suit a card header rather than a centered diagram
   node.
   --------------------------------------------------------------------- */

.feature-icon {
  width: 44px;
  height: 44px;
  color: var(--color-primary);
  border-color: var(--color-border);
}

.feature-icon svg {
  width: 22px;
  height: 22px;
}

.feature-eyebrow {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.feature-lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  padding: var(--space-6);
}

.feature-lead-text h3 {
  margin-top: var(--space-2);
  font-size: 24px;
}

.feature-lead-text p {
  margin-top: var(--space-3);
  font-size: 15px;
  color: var(--color-text-secondary);
}

.feature-lead-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-lead-items li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.feature-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-success);
}

.feature-lead-items h4 {
  font-size: 15px;
}

.feature-lead-items p {
  margin-top: var(--space-1);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feature-card h3 {
  margin-top: var(--space-2);
  font-size: 18px;
}

.feature-card p {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .feature-lead {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Download & Installation (P52.6 scaffold, P53 wired to the real
   v1.0.0 GitHub Release) — states the version, the exact artifact name,
   and what to do next per platform. Reuses .feature-icon (P52.5) for the
   platform glyphs, .badge (existing) for the version tag, and .btn (the
   site's existing anchor-button component) for the actual download link
   — no new component was added for P53's swap from status text to a
   real link.
   --------------------------------------------------------------------- */

.download-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-2);
}

.download-platform {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.download-platform-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.download-platform-header h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 18px;
}

.download-platform-sub {
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--color-text-muted);
}

.download-cta {
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.download-cta-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.download-artifact {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.download-artifact code {
  color: var(--color-text);
}

.download-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.download-steps li + li {
  margin-top: var(--space-2);
}

.download-note {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.download-footnote {
  margin-top: var(--space-6);
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

.download-footnote code {
  color: var(--color-text-secondary);
}

.download-footnote a {
  color: var(--color-text-secondary);
  font-weight: 600;
  text-decoration: none;
}

.download-footnote a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .download-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Requirements & Compatibility (P52.7) — a compact specification-style
   list, not a three-card checkmark grid: one bordered .card, one
   definition-list row per requirement (term = Windows/Android/Network/
   Pairing, wrapped .diagram-icon reusing .feature-icon exactly as
   Download's platform headers do; definition = the verified requirement
   plus one supporting detail line). Every fact here is checked against
   the real project config (README's stated Windows 10/11 target,
   android/android/build.gradle's minSdkVersion 26, docs/09_Networking.md,
   docs/12_Packaging_Deployment.md) rather than invented — no RAM/CPU/
   storage figures, no device-brand claims. The network and pairing icons
   are reused verbatim from the Features and How It Works sections rather
   than invented for this one.
   --------------------------------------------------------------------- */

.requirements-list {
  padding: 0;
}

.requirement-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.requirement-row:last-child {
  border-bottom: none;
}

.requirement-row dt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.requirement-icon {
  width: 36px;
  height: 36px;
}

.requirement-icon svg {
  width: 18px;
  height: 18px;
}

.requirement-row dd {
  margin: 0;
}

.requirement-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.requirement-detail {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.requirements-footnote {
  max-width: 68ch;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .requirement-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4);
  }
}

/* ---------------------------------------------------------------------
   Buttons — same shape/variant language as app.css's button rules
   (primary / text-button), adapted for anchor-tag CTAs and a larger
   hero size the app itself never needs.
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:hover {
  background: var(--color-bg);
  border-color: var(--color-text-muted);
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  border-color: transparent;
  background: none;
  color: var(--color-text-secondary);
}

.btn-secondary:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: 15px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------------
   Cards, badges, code blocks — same flat/bordered/no-shadow language as
   app.css's .card and .badge; code blocks are the one net-new component
   (install commands, checksums), styled with the monospace stack.
   --------------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.badge-mono {
  font-family: var(--font-mono);
}

code,
.code-block {
  font-family: var(--font-mono);
  font-size: 13px;
}

.code-block {
  display: block;
  overflow-x: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  white-space: pre;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

.site-footer {
  padding: var(--space-4) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.footer-links a {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.footer-meta {
  font-size: 13px;
  color: var(--color-text-muted);
}

.footer-meta .badge {
  vertical-align: middle;
  margin-left: var(--space-2);
}