/* ───────── self-hosted fonts (variable, latin-subset) ─────────
   One file per family. Each woff2 carries the full wght axis the
   page uses (Inter 100-900, JBMono 400-800, Oswald 400-700) and
   the browser interpolates the requested weight on demand. The
   files are subsetted to the latin range used by the page (~30 KB
   Inter, 14 KB JBMono, 19 KB Oswald) instead of the full ~250 KB
   pre-dedup payload.
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter.woff2') format('woff2-variations'),
       url('assets/fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/oswald.woff2') format('woff2-variations'),
       url('assets/fonts/oswald.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/jbmono.woff2') format('woff2-variations'),
       url('assets/fonts/jbmono.woff2') format('woff2');
}

/* ───────── fallback font-face overrides ─────────
   Eliminate the layout shift when the webfont swaps in: each fallback
   uses a system font but is rescaled and re-anchored so its line-box
   metrics match the eventual webfont. font-weight: 100 900 makes the
   override apply across all weights (without it, only 400 is covered
   and bold text bypasses the fix). Used as the second name in each
   font stack below.
*/
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica');
  font-weight: 100 900;
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial Narrow'), local('Impact'), local('Arial');
  font-weight: 100 900;
  size-adjust: 87%;
  ascent-override: 100%;
  descent-override: 31%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Menlo'), local('Consolas'), local('Courier New');
  font-weight: 100 900;
  size-adjust: 99%;
  ascent-override: 100%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ───────── tokens ───────── */
:root {
  --bg:           #0a0e13;
  --bg-section:   #0d1219;
  --bg-card:      #111820;
  --bg-card-2:    #161e28;

  --border:       #1f2933;
  --border-hover: #2a3a4a;

  --text:         #e6edf3;
  --text-mute:    #9eaab8;
  --text-dim:     #5b6671;

  --accent:       #5eead4;          /* teal, primary brand mark */
  --accent-blue:  #60a5fa;          /* secondary accent */
  --accent-orange:#e9a033;          /* shared with rayforce, used sparingly */

  --font:    'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Oswald', 'Oswald Fallback', 'Inter', 'Inter Fallback', ui-sans-serif, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

  --container-w: 1180px;
}

/* ───────── reset + base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--text); }
img { max-width: 100%; height: auto; display: block; }
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(94, 234, 212, 0.08);
  color: var(--text);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
em { font-style: normal; color: var(--accent); font-weight: 600; }

/* ───────── layout primitives ───────── */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}
.container.narrow {
  max-width: 820px;
}

/* ───────── nav ───────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(10, 14, 19, 0.78);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--text);
}
.brand:hover { color: var(--text); }
.brand-mark { display: inline-flex; line-height: 0; }
.brand-name { font-family: var(--font-display); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  color: var(--text-mute);
  font-size: 0.92rem;
  font-weight: 500;
}
.nav-links a:hover { color: var(--text); }
.nav-link-strong {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.nav-link-strong:hover { border-color: var(--border-hover); background: rgba(255, 255, 255, 0.04); }

@media (max-width: 720px) {
  .nav-links { gap: 16px; }
  .nav-links a:not(.nav-link-strong) { display: none; }
}

/* ───────── hero ───────── */
.hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(94, 234, 212, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94, 234, 212, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(94, 234, 212, 0.13) 0%, transparent 60%);
  filter: blur(40px);
}

.hero .container { position: relative; z-index: 1; }
.hero-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero { padding: 64px 0 48px; }
  .hero-grid-2 { grid-template-columns: 1fr; gap: 40px; }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  background: rgba(94, 234, 212, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  margin-bottom: 24px;
}
.hero h1 .highlight {
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent), #7df0d6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lead {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--text-mute);
  margin-bottom: 32px;
  max-width: 560px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ───────── buttons ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: #06251f;
  border: 1px solid var(--accent);
}
.btn-primary:hover { background: #7df0d6; color: #06251f; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-hover);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--accent); color: var(--text); }

/* ───────── hero aside (treemap) ───────── */
.hero-aside { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.device-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.device-frame img { display: block; width: 100%; height: auto; }
.hero-aside-caption {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ───────── section base ───────── */
.section {
  padding: 96px 0;
  border-bottom: 1px solid var(--border);
}
.section-alt { background: var(--bg-section); }
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 16px;
}
.section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 20px;
  max-width: 800px;
}
.section-lead {
  color: var(--text-mute);
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 720px;
  margin-bottom: 40px;
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
}

/* ───────── signal grid ───────── */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
@media (max-width: 880px) { .signal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .signal-grid { grid-template-columns: 1fr; } }
.signal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: border-color 0.2s, transform 0.1s;
  position: relative;
  overflow: hidden;
}
.signal-card:hover { border-color: var(--border-hover); }
.signal-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 16px;
}
.signal-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}
.signal-card p {
  color: var(--text-mute);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ───────── code blocks ───────── */
.code-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}
@media (max-width: 880px) { .code-grid { grid-template-columns: 1fr; } }

.code-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.code-block-wide { margin-top: 12px; }
.code-block-head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  background: var(--bg-card-2);
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}
.code-block pre {
  margin: 0;
  padding: 20px 22px;
  overflow-x: auto;
}
.code-block code {
  background: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
}
.hl-cmt  { color: var(--text-dim); }
.hl-kw   { color: var(--accent);        font-weight: 500; }
.hl-str  { color: #f0c994; }
.hl-sym  { color: var(--accent-orange); }
.hl-num  { color: var(--accent-blue);   font-weight: 500; }
.hl-good { color: #5eead4;              font-weight: 600; }
.hl-bad  { color: #ef6f6f;              font-weight: 600; }
.hl-key  { color: var(--text-mute); }

/* ───────── phase grid (for-agents) ───────── */
/* Phase grid is exactly 6 cards (Bootstrap -> Impact -> Verify -> Drift ->
   Audit -> Query). 3 cols x 2 rows is the only layout where every row
   is full at every supported width. */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 880px) { .phase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .phase-grid { grid-template-columns: 1fr; } }
.phase-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  position: relative;
  transition: border-color 0.2s, background 0.15s;
}
.phase-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-2);
}
.phase-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.phase-step {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 0;
  opacity: 0.65;
}
.phase-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--text);
}
.phase-card p {
  font-size: 0.92rem;
  color: var(--text-mute);
  line-height: 1.55;
}

/* ───────── feature grid (what you get) ───────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
/* Auto-detect "exactly 4 cards" and switch to 2x2 to avoid the orphan
   that 3-col gives (3 + 1). :has() is universally supported since
   early 2024. */
.feature-grid:has(> .feature-card:nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 880px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .feature-grid,
                            .feature-grid:has(> .feature-card:nth-child(4):last-child) {
                              grid-template-columns: 1fr;
                            } }
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: border-color 0.2s, background 0.15s;
}
.feature-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-2);
}
.feature-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--text);
}
.feature-card p {
  font-size: 0.95rem;
  color: var(--text-mute);
  line-height: 1.6;
}

/* ───────── card icons (Font Awesome via inline SVG sprite) ───────── */
.card-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  fill: currentColor;
  display: block;
  flex-shrink: 0;
  transition: transform 0.18s ease, color 0.18s;
}
.feature-card .card-icon { margin-bottom: 16px; }
.phase-card .card-icon  { width: 24px; height: 24px; }
.feature-card:hover .card-icon,
.phase-card:hover  .card-icon { transform: translateY(-2px) scale(1.05); }

/* ───────── built on rayforce ───────── */
.section-rayforce { background: var(--bg-section); }
.rayforce-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 48px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s, transform 0.15s;
  color: var(--text);
}
.rayforce-card:hover {
  border-color: var(--accent);
  color: var(--text);
}
.rayforce-card img { max-width: 280px; height: auto; }
.rayforce-card p {
  color: var(--text-mute);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 640px;
}
.rayforce-cta {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ───────── footer ───────── */
.footer {
  padding: 40px 0;
  background: var(--bg);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}
.footer-links {
  display: flex;
  gap: 24px;
  font-size: 0.92rem;
}
.footer-links a { color: var(--text-mute); }
.footer-links a:hover { color: var(--accent); }
.footer-meta {
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ───────── language coverage grid ───────── */
.lang-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
}
.lang-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.lang-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex: none;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
  margin-bottom: 32px;
}
.lang-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-align: center;
  border: 1px solid var(--border);
  transition: transform 0.12s ease, border-color 0.15s, background 0.15s;
}
.lang-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  /* Strip brand colors and recolor uniformly via the cell's own color
     so tier-1/2/3 tints flow through to the icon. brightness(0) collapses
     every pixel to black, then invert(1) flips to white, and the per-tier
     opacity below picks the final tone. */
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.15s;
}
.lang-cell:hover .lang-icon { opacity: 0.85; }
.lang-tier-2 .lang-icon { opacity: 0.85; }
.lang-tier-3 .lang-icon { opacity: 1; }
.lang-cell .lang-name {
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lang-cell:hover {
  transform: translateY(-2px);
  z-index: 2;
}

.lang-tier-3,
.lang-swatch.lang-tier-3 {
  background: rgba(94, 234, 212, 0.18);
  border-color: var(--accent);
  color: var(--accent);
}
.lang-tier-3:hover {
  background: rgba(94, 234, 212, 0.28);
}
.lang-tier-2,
.lang-swatch.lang-tier-2 {
  background: rgba(96, 165, 250, 0.10);
  border-color: rgba(96, 165, 250, 0.55);
  color: #82bbff;
}
.lang-tier-2:hover {
  background: rgba(96, 165, 250, 0.18);
}
.lang-tier-1,
.lang-swatch.lang-tier-1 {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border);
  color: var(--text-mute);
}
.lang-tier-1:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-hover);
  color: var(--text);
}

.lang-footnote {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 720px;
}

/* ───────── faq ───────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--border-hover); }
.faq-item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--text);
}
.faq-item p {
  font-size: 0.95rem;
  color: var(--text-mute);
  line-height: 1.65;
  margin: 0;
}

/* ───────── footer meta separator ───────── */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.footer-meta-sep { color: var(--text-dim); opacity: 0.55; }

/* ───────── prose pages (about, posts, compare) ───────── */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 0 60px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mute);
}
.prose h1 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 24px;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--text);
  margin: 40px 0 14px;
}
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text);
  margin: 28px 0 10px;
}
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin: 0 0 8px; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--text);
}
.prose pre {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  overflow-x: auto;
  margin: 16px 0 24px;
}
.prose pre code { background: none; border: none; padding: 0; }
.prose a { color: var(--accent); }
.prose a:hover { text-decoration: underline; }
.prose .meta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 36px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  margin: 16px 0 24px;
  padding: 4px 0 4px 20px;
  color: var(--text);
  font-style: italic;
}
.prose .lede {
  font-size: 1.1rem;
  color: var(--text);
}

/* ───────── post list ───────── */
.post-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.post-list li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: border-color 0.2s;
}
.post-list li:hover { border-color: var(--border-hover); }
.post-list a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
}
.post-list a:hover { color: var(--accent); }
.post-list .post-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0.03em;
}
.post-list .post-summary {
  margin: 8px 0 0;
  color: var(--text-mute);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ───────── compare table ───────── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.compare-table th, .compare-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare-table thead th {
  background: var(--bg-card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.compare-table tbody td:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-yes { color: #5eead4; }
.compare-no { color: var(--text-dim); }
.compare-partial { color: #e9a033; }

/* ───────── selection ───────── */
::selection { background: rgba(94, 234, 212, 0.32); color: var(--text); }