/* ── Reset ────────────────────────────────────────────────────────────── */

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

/* ── Design Tokens ───────────────────────────────────────────────────── */

:root {
  /* Surface */
  --bg:            #fafaf9;
  --bg-elevated:   #ffffff;
  --bg-sunken:     #f0efed;
  --bg-wash:       #e8e6e3;

  /* Text */
  --fg:            #1c1917;
  --fg-secondary:  #44403c;
  --fg-tertiary:   #a8a29e;

  /* Border */
  --border:        #e7e5e4;
  --border-strong:  #d6d3d1;

  /* Accent — warm teal */
  --accent:        #0d9488;
  --accent-hover:  #0f766e;
  --accent-subtle: #ccfbf1;
  --accent-fg:     #134e4a;

  /* Grades */
  --grade-a:     #059669;
  --grade-a-bg:  #d1fae5;
  --grade-a-fg:  #064e3b;
  --grade-b:     #65a30d;
  --grade-b-bg:  #ecfccb;
  --grade-b-fg:  #365314;
  --grade-c:     #d97706;
  --grade-c-bg:  #fef3c7;
  --grade-c-fg:  #78350f;
  --grade-d:     #ea580c;
  --grade-d-bg:  #fed7aa;
  --grade-d-fg:  #7c2d12;
  --grade-f:     #dc2626;
  --grade-f-bg:  #fee2e2;
  --grade-f-fg:  #7f1d1d;

  /* Layout */
  --max-w:       960px;
  --max-w-narrow: 780px;
  --radius:      8px;
  --radius-lg:   12px;

  /* Typography */
  --font:       "Work Sans", system-ui, -apple-system, sans-serif;
  --font-mono:  "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(28,25,23,0.04);
  --shadow:     0 1px 3px rgba(28,25,23,0.06), 0 1px 2px rgba(28,25,23,0.04);
  --shadow-md:  0 4px 6px -1px rgba(28,25,23,0.06), 0 2px 4px -2px rgba(28,25,23,0.04);
  --shadow-lg:  0 10px 15px -3px rgba(28,25,23,0.06), 0 4px 6px -4px rgba(28,25,23,0.04);
}

[data-theme="dark"] {
    --bg:           #0c0a09;
    --bg-elevated:  #1c1917;
    --bg-sunken:    #0c0a09;
    --bg-wash:      #292524;

    --fg:           #fafaf9;
    --fg-secondary: #a8a29e;
    --fg-tertiary:  #78716c;

    --border:       #292524;
    --border-strong: #44403c;

    --accent:       #2dd4bf;
    --accent-hover: #5eead4;
    --accent-subtle: rgba(45,212,191,0.08);
    --accent-fg:    #2dd4bf;

    --grade-a-bg:  rgba(5,150,105,0.15);
    --grade-a-fg:  #34d399;
    --grade-b-bg:  rgba(101,163,13,0.15);
    --grade-b-fg:  #a3e635;
    --grade-c-bg:  rgba(217,119,6,0.15);
    --grade-c-fg:  #fbbf24;
    --grade-d-bg:  rgba(234,88,12,0.15);
    --grade-d-fg:  #fb923c;
    --grade-f-bg:  rgba(220,38,38,0.15);
    --grade-f-fg:  #f87171;

    --shadow-sm:  0 1px 2px rgba(0,0,0,0.2);
    --shadow:     0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2);
}


/* ── Base ─────────────────────────────────────────────────────────────── */

html {
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 {
  font-family: var(--font);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.1rem; }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-feature-settings: "calt" 1, "liga" 1;
}

pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--bg-sunken);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 3rem; }
.container-narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 3rem; }


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

.site-header {
  border-bottom: 1px solid var(--border);
  padding: 0;
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
}

.site-logo {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.logo-icon {
  flex-shrink: 0;
  display: block;
}
.site-logo:hover { color: var(--accent); text-decoration: none; }

.site-nav { display: flex; gap: 0.25rem; align-items: center; }

/* Theme toggle */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-secondary);
  cursor: pointer;
  padding: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-left: 0.25rem;
}
.theme-toggle:hover {
  color: var(--fg);
  border-color: var(--border-strong);
  background: var(--bg-sunken);
}
.theme-icon { display: none; }
[data-theme-setting="light"] .icon-sun { display: block; }
[data-theme-setting="dark"] .icon-moon { display: block; }
[data-theme-setting="system"] .icon-system { display: block; }
.site-nav a {
  color: var(--fg-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--fg);
  background: var(--bg-sunken);
  text-decoration: none;
}
.site-nav a.active {
  color: var(--accent-fg);
  background: var(--accent-subtle);
}
.site-nav a.nav-cta {
  color: var(--accent-fg);
  background: var(--accent-subtle);
  font-weight: 600;
  border: 1px solid var(--accent);
}
.site-nav a.nav-cta:hover {
  background: #b2f5ea;
}
.site-nav a.nav-cta.active {
  color: #fff;
  background: var(--accent);
}


/* ── Why Page ────────────────────────────────────────────────────────── */

.why-page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}
.why-header {
  margin-bottom: 2.5rem;
}
.why-header h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.why-lead {
  font-size: 1.15rem;
  color: var(--fg-secondary);
  line-height: 1.5;
}

.why-section {
  margin-bottom: 2.5rem;
}
.why-section h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--accent);
}
.why-section p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin-bottom: 0.75rem;
}
.why-section code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.why-reasons {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}
.reason {
  padding-left: 1rem;
  border-left: 3px solid var(--border-strong);
}
.reason h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.reason p {
  margin-bottom: 0.35rem;
}
.reason cite {
  font-size: 0.78rem;
  font-style: normal;
  color: var(--fg-tertiary);
}
.reason cite a {
  color: var(--accent);
  text-decoration: none;
}
.reason cite a:hover { text-decoration: underline; }

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}
.eco-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.eco-card h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.eco-card p {
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}
.eco-card cite {
  font-size: 0.75rem;
  font-style: normal;
  color: var(--fg-tertiary);
}
.eco-card cite a {
  color: var(--accent);
  text-decoration: none;
}
.eco-card cite a:hover { text-decoration: underline; }

.why-note {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--fg-tertiary);
}

.why-cta-section {
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}
.why-cta-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.65rem 1.75rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s;
}
.why-cta-btn:hover { background: var(--accent-hover); }

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


/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  margin-top: 4rem;
  color: var(--fg-tertiary);
  font-size: 0.8rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-meta { font-family: var(--font-mono); font-size: 0.75rem; }


/* ── Lander ──────────────────────────────────────────────────────────── */

.lander {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

.lander-hero {
  text-align: center;
  margin-bottom: 2.5rem;
}
.lander-hero h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.lander-sub {
  font-size: 1.05rem;
  color: var(--fg-secondary);
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 auto;
}
.lander-sub strong {
  color: var(--fg);
}

.lander-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.lander-stat {
  text-align: center;
}
.lander-stat-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
}
.lander-stat-label {
  font-size: 0.78rem;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lander-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 3rem;
}

.lander-cta {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cta-primary {
  background: var(--bg-elevated);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 0 transparent;
}
.cta-primary:hover {
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.cta-secondary {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
}
.cta-secondary:hover {
  border-color: var(--accent);
}
.cta-protect {
  background: #fffbeb;
  border: 1px solid #f59e0b;
}
.cta-protect:hover {
  background: #fef3c7;
}

.cta-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.1rem;
}
.cta-text strong {
  display: block;
  font-size: 1rem;
  color: var(--fg);
  margin-bottom: 0.2rem;
}
.cta-text small {
  font-size: 0.82rem;
  color: var(--fg-secondary);
  line-height: 1.4;
}

.lander-protocol {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}
.lander-protocol h2 {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--fg-secondary);
  font-weight: 500;
}
.protocol-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
}
.protocol-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.step-num {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.step-body strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.step-body p {
  font-size: 0.82rem;
  color: var(--fg-secondary);
  line-height: 1.45;
}
.step-body code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

@media (max-width: 768px) {
  .lander-hero h1 { font-size: 1.6rem; }
  .lander-stats { gap: 1.5rem; }
  .lander-stat-value { font-size: 1.3rem; }
  .lander-ctas { grid-template-columns: 1fr; }
  .protocol-steps { grid-template-columns: 1fr; gap: 1rem; }
}


/* ── Hero (Homepage) ─────────────────────────────────────────────────── */

.hero {
  padding: 4rem 0 2rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.hero .tagline {
  font-size: 1.15rem;
  color: var(--fg-secondary);
  margin-top: 0.75rem;
  font-weight: 400;
}


/* ── Search Bar ──────────────────────────────────────────────────────── */

.search-section {
  max-width: 640px;
  margin: 0 auto 3rem;
}

.search-box {
  position: relative;
}

.search-input {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.8rem 1rem 0.8rem 2.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  color: var(--fg);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input::placeholder { color: var(--fg-tertiary); }
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-tertiary);
  pointer-events: none;
  width: 1.1rem;
  height: 1.1rem;
}

.search-count {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
}


/* ── Category Pills ──────────────────────────────────────────────────── */

.categories-section {
  margin-bottom: 3rem;
}

.categories-section h2 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-tertiary);
  margin-bottom: 0.75rem;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.category-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
  text-decoration: none;
}
.category-pill.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent-fg);
}

.category-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-tertiary);
}


/* ── Reliability Index ───────────────────────────────────────────────── */

.reliability-section {
  margin-bottom: 3rem;
}

.reliability-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.reliability-header h2 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-tertiary);
  margin-bottom: 0;
}

.reliability-header .summary {
  font-size: 0.8rem;
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: border-color 0.15s ease;
}
.stat-card:hover { border-color: var(--border-strong); }

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-family: var(--font-mono);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--fg-tertiary);
  margin-top: 0.2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.grade-bar-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}

.grade-bar-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary);
  margin-bottom: 0.6rem;
}

.grade-bar {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  height: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 2px;
}

.grade-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}
.grade-segment:hover { opacity: 0.85; }

.grade-segment.a { background: var(--grade-a); color: #fff; }
.grade-segment.b { background: var(--grade-b); color: #fff; }
.grade-segment.c { background: var(--grade-c); color: #fff; }
.grade-segment.d { background: var(--grade-d); color: #fff; }
.grade-segment.f { background: var(--grade-f); color: #fff; }


/* ── Grade Badge ─────────────────────────────────────────────────────── */

.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.grade-a { background: var(--grade-a-bg); color: var(--grade-a-fg); }
.grade-b { background: var(--grade-b-bg); color: var(--grade-b-fg); }
.grade-c { background: var(--grade-c-bg); color: var(--grade-c-fg); }
.grade-d { background: var(--grade-d-bg); color: var(--grade-d-fg); }
.grade-f { background: var(--grade-f-bg); color: var(--grade-f-fg); }


/* ── Service Cards (Listings) ────────────────────────────────────────── */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 3rem;
}

.service-row {
  display: grid;
  grid-template-columns: 1fr 2.5rem 3.5rem 5rem 2.5rem 5rem;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: var(--bg-elevated);
  transition: background 0.1s ease;
  text-decoration: none;
  color: inherit;
}
.service-row:hover {
  background: var(--bg-sunken);
  text-decoration: none;
  color: inherit;
}

.service-row-header {
  display: grid;
  grid-template-columns: 1fr 2.5rem 3.5rem 5rem 2.5rem 5rem;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 1.25rem;
  background: var(--bg-sunken);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary);
  user-select: none;
}
.service-row-header span { cursor: pointer; transition: color 0.15s ease; }
.service-row-header span:hover { color: var(--fg); }
.service-row-header span:not(:first-child) { text-align: right; }
.service-row-header span.sort-asc::after { content: " \2191"; }
.service-row-header span.sort-desc::after { content: " \2193"; }

.service-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  overflow: hidden;
}
.service-name > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.service-row .service-name { color: var(--fg); font-weight: 500; }
a.service-row:hover .service-name { color: var(--accent); }

.service-cell {
  font-size: 0.85rem;
  color: var(--fg-secondary);
  white-space: nowrap;
  text-align: right;
}
.service-cell.mono { font-family: var(--font-mono); font-size: 0.8rem; }
.service-cell.method { color: var(--accent-fg); font-weight: 500; }


/* ── Tables (Detail pages) ───────────────────────────────────────────── */

.table-wrap { overflow-x: auto; margin-bottom: 1rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  user-select: none;
}
th[data-sort] { cursor: pointer; }
th[data-sort]:hover { color: var(--fg-secondary); }
th.sort-asc::after { content: " \2191"; }
th.sort-desc::after { content: " \2193"; }

tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
tbody tr:hover { background: var(--bg-sunken); }


/* ── Cards ───────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.card h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card h2 .card-count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg-tertiary);
}


/* ── Service Detail ──────────────────────────────────────────────────── */

.breadcrumb {
  font-size: 0.8rem;
  color: var(--fg-tertiary);
  padding: 1rem 0;
}
.breadcrumb a { color: var(--fg-tertiary); }
.breadcrumb a:hover { color: var(--accent); }

/* ── Service Detail Grid ─────────────────────────────────────────────── */

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .service-grid {
    grid-template-columns: 1fr 1fr;
  }
  .service-grid .card-full {
    grid-column: 1 / -1;
  }
}

.service-hero {
  margin-bottom: 2rem;
  padding-top: 0.5rem;
}
.service-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.service-title-row h1 { margin: 0; }

.service-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--fg-secondary);
}

.score {
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--fg);
}

.umbrella-badge {
  font-size: 0.75rem;
  background: var(--bg-sunken);
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--fg-tertiary);
}

.categories {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag {
  font-size: 0.7rem;
  font-weight: 500;
  background: var(--accent-subtle);
  color: var(--accent-fg);
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
}


/* ── Definition Grid ─────────────────────────────────────────────────── */

.def-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.5rem;
  font-size: 0.875rem;
}
.def-grid dt {
  color: var(--fg-tertiary);
  font-weight: 500;
  font-size: 0.8rem;
}
.def-grid dd { word-break: break-all; }


/* ── Compliance Checklist ────────────────────────────────────────────── */

.compliance-grid { display: flex; flex-direction: column; gap: 2px; }

.check-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

.check-row.pass { background: var(--grade-a-bg); }
.check-row.fail { background: var(--grade-f-bg); }
.check-row.skipped { background: var(--bg-sunken); color: var(--fg-tertiary); }

.check-icon {
  font-weight: 700;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}
.check-row.pass .check-icon { color: var(--grade-a-fg); }
.check-row.fail .check-icon { color: var(--grade-f-fg); }

.check-name { flex: 1; }

.check-level {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-family: var(--font-mono);
}
.level-must { color: var(--grade-f-fg); }
.level-should { color: var(--grade-c-fg); }

.check-weight {
  color: var(--fg-tertiary);
  font-size: 0.7rem;
  min-width: 2.5rem;
  text-align: right;
  font-family: var(--font-mono);
}


/* ── Status Indicators ───────────────────────────────────────────────── */

.status-up { color: var(--grade-a-fg); font-weight: 600; }
.status-down { color: var(--grade-f-fg); font-weight: 600; }

.inferred {
  color: var(--fg-tertiary);
  font-size: 0.8em;
  font-style: italic;
}

.non-standard {
  color: var(--grade-c-fg);
  font-style: italic;
}

.non-standard-row td {
  background: var(--grade-c-bg);
  border-top: none;
  padding-top: 0;
}
.non-standard-row small { font-size: 0.78rem; }
.non-standard-row code {
  font-size: 0.8rem;
  background: var(--bg-wash);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}


/* ── Operation Details ────────────────────────────────────────────────── */

.op-detail {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: var(--bg-elevated);
  overflow: hidden;
}
.op-detail[open] {
  border-color: var(--border-strong);
}
.op-detail + .op-detail { margin-top: 0; }

.op-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  font-size: 0.88rem;
  list-style: none;
  user-select: none;
  flex-wrap: wrap;
}
.op-summary::-webkit-details-marker { display: none; }
.op-summary::before {
  content: "▸";
  font-size: 0.75rem;
  color: var(--fg-tertiary);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.op-detail[open] > .op-summary::before { transform: rotate(90deg); }

.op-summary:hover { background: var(--bg-sunken); }

.op-method {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.http-get  { background: #dbeafe; color: #1e40af; }
.http-post { background: #d1fae5; color: #065f46; }
.http-put  { background: #fef3c7; color: #92400e; }
.http-delete { background: #fee2e2; color: #991b1b; }
.http-patch  { background: #ede9fe; color: #5b21b6; }

[data-theme="dark"] .http-get  { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .http-post { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .http-put  { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .http-delete { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .http-patch  { background: #4c1d95; color: #c4b5fd; }

.op-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-pricing {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--fg-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.op-body {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.op-desc {
  font-size: 0.88rem;
  color: var(--fg-secondary);
  line-height: 1.5;
}
.op-desc strong { color: var(--fg); }
.op-desc p { margin-top: 0.25rem; }

.op-payment-row {
  background: var(--bg-sunken);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
}

.def-grid.compact { gap: 0.3rem 1rem; font-size: 0.84rem; }

.op-nonstandard {
  padding: 0.4rem 0.6rem;
  background: var(--grade-c-bg);
  border-radius: 6px;
}

.op-section h4 {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
  margin-bottom: 0.4rem;
}
.op-section h4 small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.schema-table {
  font-size: 0.82rem;
  max-width: 100%;
}
.schema-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
  font-weight: 600;
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.schema-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.schema-table td:last-child {
  max-width: 20rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.schema-table td small { color: var(--fg-tertiary); }
.schema-table tr:last-child td { border-bottom: none; }

.schema-raw {
  background: var(--bg-sunken);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  overflow-x: auto;
  max-height: 20rem;
}
.schema-raw code {
  font-family: var(--font-mono);
  white-space: pre;
}


/* ── Issues ──────────────────────────────────────────────────────────── */

.issues-details { margin-top: 1rem; }
.issues-details summary {
  cursor: pointer;
  color: var(--fg-tertiary);
  font-size: 0.85rem;
  font-weight: 500;
}
.issues-list {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--fg-secondary);
}
.issues-list li { margin-bottom: 0.25rem; }


/* ── Hash ────────────────────────────────────────────────────────────── */

.hash { font-size: 0.7em; word-break: break-all; }


/* ── Address List ────────────────────────────────────────────────────── */

.address-list { list-style: none; padding: 0; }
.address-list li {
  padding: 0.3rem 0;
  font-size: 0.85rem;
  word-break: break-all;
}


/* ── Changelog ───────────────────────────────────────────────────────── */

.subtitle {
  color: var(--fg-secondary);
  margin-bottom: 2rem;
  font-weight: 400;
}

.changelog-entry {
  margin-bottom: 1.5rem;
}

.changelog-entry h2 {
  font-size: 1rem;
  font-family: var(--font-mono);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.change-group { margin-bottom: 1rem; }
.change-group h3 { font-size: 0.9rem; margin-bottom: 0.4rem; }
.change-group ul { padding-left: 1.25rem; font-size: 0.85rem; }
.change-group li { margin-bottom: 0.2rem; }

.change-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-right: 0.3rem;
}
.change-badge.added { background: var(--grade-a-bg); color: var(--grade-a-fg); }
.change-badge.removed { background: var(--grade-f-bg); color: var(--grade-f-fg); }


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

.page-header {
  padding: 2rem 0 1.5rem;
}

.page-header h1 {
  margin-bottom: 0.25rem;
}

.page-header .subtitle {
  margin-bottom: 0;
}


/* ── No Results ──────────────────────────────────────────────────────── */

.no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--fg-tertiary);
  font-size: 0.9rem;
  display: none;
}


/* ── Copy Raw Button ─────────────────────────────────────────────────── */

.copy-raw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  margin-left: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-sunken);
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
  line-height: 1;
}
.copy-raw:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}
.copy-raw.copied {
  border-color: var(--grade-a);
  color: var(--grade-a-fg);
  background: var(--grade-a-bg);
}


/* ── Version History ─────────────────────────────────────────────────── */

.history-changes { margin-bottom: 1rem; }

.history-entry {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.history-entry:last-child { border-bottom: none; }

.history-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-secondary);
}

.history-detail {
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

.grade-change { color: var(--accent-fg); font-weight: 500; }

.history-detail-list {
  margin-top: 0.25rem;
  padding-left: 1.25rem;
  font-size: 0.8rem;
  color: var(--fg-secondary);
}
.history-detail-list li { margin-bottom: 0.15rem; }


/* ── use.mpp.land Promo ─────────────────────────────────────────────── */

.use-promo {
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  color: #78350f;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.use-promo a {
  color: #b45309;
  font-weight: 600;
  text-decoration: none;
}
.use-promo a:hover {
  text-decoration: underline;
}
.use-promo small {
  color: #92400e;
  font-size: 0.78rem;
}

/* ── Get Protected ──────────────────────────────────────────────────── */

.protect-page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}
.protect-header {
  margin-bottom: 2.5rem;
}
.protect-header h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.protect-lead {
  font-size: 1.15rem;
  color: var(--fg-secondary);
  line-height: 1.5;
}
.protect-badge {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent-subtle);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.protect-section {
  margin-bottom: 2.5rem;
}
.protect-section h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--accent);
}
.protect-section p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--fg-secondary);
  margin-bottom: 0.75rem;
}
.protect-section code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.protect-problems {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}
.protect-problem {
  padding: 1rem 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--grade-d);
  border-radius: var(--radius);
}
.protect-problem h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.protect-problem p {
  margin-bottom: 0;
}

.protect-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.protect-feature {
  padding: 1rem 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.protect-feature h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--fg);
}
.protect-feature p {
  font-size: 0.85rem;
  margin-bottom: 0;
}

.protect-waitlist {
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}
.waitlist-form {
  margin-top: 1.25rem;
}
@media (max-width: 768px) {
  .waitlist-form {
    overflow: hidden;
    max-width: 100%;
  }
  .waitlist-form .formkit-form,
  .waitlist-form .formkit-form *,
  .waitlist-form .seva-form,
  .waitlist-form .seva-form * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .waitlist-form .formkit-form {
    overflow: hidden !important;
  }
}

/* Flow Diagram */
.flow-diagram {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 0;
  margin: 1.5rem 0;
  font-size: 0.82rem;
}
.flow-label {
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
  border-bottom: 2px solid var(--border-strong);
  margin-bottom: 0.5rem;
}
.flow-col.flow-proxy .flow-label {
  color: var(--fg);
}
.flow-cell {
  padding: 0.25rem 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
}
.flow-cell.flow-proxy {
  border-left: 1px dashed var(--border-strong);
  border-right: 1px dashed var(--border-strong);
}

.flow-node {
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: center;
  white-space: nowrap;
}
.node-agent {
  background: var(--bg-sunken);
  border: 1px solid var(--border-strong);
  color: var(--fg);
}
.node-blocked {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}
.node-endpoint {
  background: var(--bg-sunken);
  border: 1px solid var(--border-strong);
  color: var(--fg);
}

.flow-gate {
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
}
.gate-check {
  background: #fffbeb;
  border: 1px solid #fbbf24;
  color: #78350f;
}
.gate-pass {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #064e3b;
  font-weight: 600;
}

.flow-arrow {
  font-size: 0.75rem;
  color: var(--fg-tertiary);
  text-align: center;
}
.arrow-blocked {
  color: #dc2626;
}
.arrow-pass {
  color: var(--grade-a);
}

[data-theme="dark"] .cta-protect {
  background: rgba(217,119,6,0.12);
  border-color: #b45309;
}
[data-theme="dark"] .cta-protect:hover {
  background: rgba(217,119,6,0.2);
}
[data-theme="dark"] .node-blocked {
  background: rgba(220,38,38,0.15);
  border-color: #b91c1c;
  color: #fca5a5;
}
[data-theme="dark"] .gate-check {
  background: rgba(217,119,6,0.15);
  border-color: #b45309;
  color: #fcd34d;
}
[data-theme="dark"] .gate-pass {
  background: rgba(5,150,105,0.15);
  border-color: #059669;
  color: #6ee7b7;
}
[data-theme="dark"] .arrow-blocked {
  color: #f87171;
}
[data-theme="dark"] .use-promo {
  background: rgba(217,119,6,0.12);
  border-color: #b45309;
  color: #fcd34d;
}
[data-theme="dark"] .use-promo a {
  color: #fbbf24;
}
[data-theme="dark"] .use-promo small {
  color: #f59e0b;
}

@media (max-width: 768px) {
  .protect-features { grid-template-columns: 1fr; }
  .flow-diagram {
    font-size: 0.65rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .flow-node, .flow-gate { font-size: 0.6rem; padding: 0.15rem 0.3rem; }
  .flow-node { white-space: normal; }
  .flow-label { font-size: 0.6rem; padding: 0.35rem 0.25rem; letter-spacing: 0.02em; }
  .flow-arrow { font-size: 0.6rem; }
}

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

@media (max-width: 768px) {
  html { font-size: 17px; }

  .container, .container-narrow { padding: 0 1rem; max-width: 100vw; overflow-x: hidden; }

  .header-inner { height: auto; padding: 0.5rem 1rem; flex-wrap: wrap; gap: 0.15rem 0.5rem; }
  .site-nav { flex-wrap: wrap; gap: 0.1rem; }
  .site-logo { font-size: 0.95rem; gap: 0.3rem; }
  .logo-icon { width: 16px; height: 16px; }
  .site-nav a { font-size: 0.7rem; padding: 0.2rem 0.35rem; }
  .site-nav a.nav-cta { font-size: 0.7rem; padding: 0.2rem 0.35rem; }

  .hero { padding: 2.5rem 0 1.5rem; }
  .hero h1 { font-size: 2rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .service-row {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
  }
  .service-row .service-cell:not(:nth-child(2)):not(:nth-child(3)) {
    display: none;
  }

  .service-row-header {
    grid-template-columns: 1fr auto;
  }

  .def-grid {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .def-grid dt { font-weight: 600; }

  .service-title-row { flex-wrap: wrap; }
  .service-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .table-wrap { -webkit-overflow-scrolling: touch; }
  table { font-size: 0.78rem; }
  .schema-table { font-size: 0.72rem; }
  .schema-table th, .schema-table td { padding: 0.25rem 0.35rem; }
  .schema-table td:last-child { max-width: 10rem; }

  .mono { word-break: break-all; }
  .hash { font-size: 0.7rem; }

  .op-summary { font-size: 0.82rem; }
  .op-path { word-break: break-all; white-space: normal; }

  .card { overflow: hidden; }

  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .stat-card { padding: 0.75rem 0.5rem; }
  .stat-value { font-size: 1.35rem; }

  .category-pills { gap: 0.35rem; }
  .category-pill { font-size: 0.78rem; padding: 0.3rem 0.65rem; }
}