/* =============================================
   MacEverything Website — Shared Styles
   Design tokens match DesignTokens.swift exactly
   ============================================= */

:root {
  /* Backgrounds */
  --bg-window:    #F7F7FA;
  --bg-secondary: #EDECF2;
  --bg-search:    #E6E6EB;

  /* Text */
  --text-primary:   #141419;
  --text-secondary: #7A7A85;
  --text-tertiary:  #ADB0B4;

  /* Accent */
  --accent:       #0078FF;
  --accent-light: #E8F2FF;

  /* Borders */
  --separator: #D6D6DC;
  --border:    #CCCCD3;
  --chip-bg:   #E0E0E6;

  /* Status */
  --status-green:  #38B853;
  --status-red:    #E63838;
  --status-orange: #F28420;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.05);
  --shadow-window: 0 20px 60px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.08);

  /* Layout */
  --nav-h: 60px;
  --max-w: 1100px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 100px;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  background: var(--bg-window);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ---- Navigation ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 24px;
  background: rgba(247, 247, 250, 0.80);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--separator);
}

.nav-inner {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--text-primary);
  text-decoration: none; flex-shrink: 0;
}
.nav-logo:hover { text-decoration: none; }

.nav-logo-icon {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 2px 6px rgba(0,120,255,0.35);
}

.nav-links {
  display: flex; align-items: center; gap: 4px;
  margin-left: 32px;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.nav-links a:hover { background: var(--bg-secondary); color: var(--text-primary); }
.nav-links a.active { color: var(--accent); }

.nav-cta {
  margin-left: auto;
  padding: 7px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: opacity 0.1s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(0,120,255,0.30);
}
.nav-cta:hover { opacity: 0.88; transform: translateY(-1px); text-decoration: none; }

/* ---- Page wrapper ---- */
.page { padding-top: var(--nav-h); min-height: 100vh; }

/* ---- Section ---- */
.section { padding: 80px 24px; max-width: var(--max-w); margin: 0 auto; }
.section-sm { padding: 60px 24px; max-width: var(--max-w); margin: 0 auto; }
.section-full { padding: 80px 24px; }

.section-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--accent); text-transform: uppercase;
  background: var(--accent-light);
  padding: 4px 10px; border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.section-title {
  font-size: 34px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--text-primary); line-height: 1.25;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 17px; font-weight: 400;
  color: var(--text-secondary); line-height: 1.6;
  max-width: 540px;
}

/* ---- Divider ---- */
.divider {
  height: 1px;
  background: var(--separator);
  margin: 0 24px;
  max-width: var(--max-w);
  margin-left: auto; margin-right: auto;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: none; cursor: pointer;
  text-decoration: none;
  transition: all 0.12s;
}

.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 10px rgba(0,120,255,0.30);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); text-decoration: none; }

.btn-secondary {
  background: var(--bg-secondary); color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border);
}
.btn-secondary:hover { background: var(--chip-bg); text-decoration: none; }

.btn-lg { font-size: 16px; padding: 13px 28px; }

/* ---- Chip / Badge ---- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--chip-bg); color: var(--text-secondary);
}
.chip-green { background: rgba(56,184,83,0.12); color: var(--status-green); }
.chip-blue  { background: var(--accent-light); color: var(--accent); }
.chip-orange{ background: rgba(242,132,32,0.12); color: var(--status-orange); }

/* ---- Card ---- */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ---- Footer ---- */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--separator);
  padding: 40px 24px;
}
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.footer-brand-icon {
  width: 22px; height: 22px;
  background: var(--accent); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}
.footer-links {
  display: flex; gap: 20px; list-style: none;
}
.footer-links a {
  font-size: 13px; color: var(--text-secondary);
  text-decoration: none; transition: color 0.1s;
}
.footer-links a:hover { color: var(--text-primary); }
.footer-copy {
  font-size: 12px; color: var(--text-tertiary);
  white-space: nowrap;
}

/* ---- Utility ---- */
.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

/* =============================================
   Homepage-specific
   ============================================= */

/* Hero */
.hero {
  padding: calc(var(--nav-h) + 72px) 24px 80px;
  text-align: center;
  background: linear-gradient(180deg, #F3F5FF 0%, var(--bg-window) 100%);
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,120,255,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--accent); text-transform: uppercase;
  background: var(--accent-light);
  padding: 5px 12px; border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.hero-title {
  font-size: 54px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--text-primary); line-height: 1.1;
  margin-bottom: 20px;
}
.hero-title em { font-style: normal; color: var(--accent); }

.hero-subtitle {
  font-size: 19px; font-weight: 400;
  color: var(--text-secondary); line-height: 1.65;
  max-width: 520px; margin: 0 auto 36px;
}

.hero-actions {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hero-hint {
  font-size: 12px; color: var(--text-tertiary);
}

/* App Window Mockup */
.hero-mockup {
  position: relative;
  max-width: 680px;
  margin: 56px auto 0;
}

.app-window {
  background: rgba(247, 247, 250, 0.95);
  border-radius: 14px;
  box-shadow: var(--shadow-window);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

.app-titlebar {
  height: 40px;
  background: rgba(237, 236, 242, 0.80);
  display: flex; align-items: center;
  padding: 0 14px;
  gap: 8px;
  border-bottom: 1px solid var(--separator);
}
.traffic-btn {
  width: 12px; height: 12px; border-radius: 50%;
}
.tb-red { background: #FF5F57; }
.tb-yellow { background: #FEBC2E; }
.tb-green { background: #28C840; }

.app-search-bar {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--separator);
}
.app-search-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-search);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
}
.search-icon { color: var(--text-tertiary); font-size: 14px; }
.search-text { font-size: 14px; color: var(--text-secondary); flex: 1; }
.search-cursor {
  width: 1.5px; height: 15px;
  background: var(--accent);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.app-col-header {
  display: grid;
  grid-template-columns: 1fr 200px 80px 110px;
  height: 28px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--separator);
  align-items: center;
  padding: 0 12px;
}
.col-h {
  font-size: 11px; font-weight: 500; color: var(--text-secondary);
  padding: 0 8px;
}

.app-results { }
.app-row {
  display: grid;
  grid-template-columns: 1fr 200px 80px 110px;
  height: 44px;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid rgba(214,214,220,0.5);
  transition: background 0.08s;
}
.app-row:hover { background: var(--bg-secondary); }
.app-row.selected { background: rgba(224, 239, 255, 0.8); }

.row-name {
  display: flex; align-items: center; gap: 10px; padding-left: 0;
}
.file-icon {
  width: 28px; height: 28px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  color: #fff;
}
.fi-blue   { background: #3380E6; }
.fi-red    { background: #E63838; }
.fi-green  { background: #38B853; }
.fi-orange { background: #F28420; }
.fi-purple { background: #8D52E6; }
.fi-folder { background: #5A99F2; }

.row-name-inner { display: flex; flex-direction: column; gap: 1px; }
.row-filename { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.row-path { font-size: 11px; color: var(--text-tertiary); }
.row-meta { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; padding: 0 8px; }

.app-statusbar {
  height: 32px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--separator);
  display: flex; align-items: center;
  padding: 0 12px;
  font-size: 11px; color: var(--text-secondary);
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.feature-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s, box-shadow 0.15s;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05);
}

.feature-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}
.fi-blue-bg   { background: #EEF4FF; }
.fi-green-bg  { background: #EDFAF1; }
.fi-orange-bg { background: #FFF4EA; }
.fi-purple-bg { background: #F5EEFF; }
.fi-gray-bg   { background: var(--bg-secondary); }
.fi-red-bg    { background: #FFF0F0; }

.feature-title {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 6px;
}
.feature-desc {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}

/* Hotkey demo */
.hotkey-demo {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
}
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  font-family: -apple-system, sans-serif;
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  align-items: start;
}

.pricing-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: transform 0.15s;
}
.pricing-card:hover { transform: translateY(-3px); }

.pricing-card.featured {
  background: var(--accent);
  color: #fff;
  transform: scale(1.03);
  box-shadow: 0 8px 32px rgba(0,120,255,0.30), 0 0 0 1px rgba(0,120,255,0.2);
}
.pricing-card.featured:hover { transform: scale(1.03) translateY(-3px); }

.pricing-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--status-orange);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pricing-plan {
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-tertiary);
  margin-bottom: 8px;
}
.pricing-card.featured .pricing-plan { color: rgba(255,255,255,0.65); }

.pricing-price {
  font-size: 36px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--text-primary); line-height: 1;
  margin-bottom: 4px;
}
.pricing-card.featured .pricing-price { color: #fff; }

.pricing-period {
  font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px;
}
.pricing-card.featured .pricing-period { color: rgba(255,255,255,0.6); }

.pricing-save {
  font-size: 12px; font-weight: 600;
  color: var(--status-green);
  background: rgba(56,184,83,0.10);
  padding: 2px 8px; border-radius: var(--radius-pill);
  display: inline-block; margin-bottom: 16px;
}
.pricing-card.featured .pricing-save {
  background: rgba(255,255,255,0.20); color: #fff;
}

.pricing-divider {
  height: 1px; background: var(--separator); margin: 16px 0;
}
.pricing-card.featured .pricing-divider { background: rgba(255,255,255,0.20); }

.pricing-features { list-style: none; margin-bottom: 24px; }
.pricing-features li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary);
  padding: 4px 0;
}
.pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.85); }
.pricing-features .check { color: var(--status-green); font-size: 12px; }
.pricing-card.featured .pricing-features .check { color: rgba(255,255,255,0.8); }

.pricing-btn {
  display: block; width: 100%; text-align: center;
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600;
  background: var(--accent-light); color: var(--accent);
  text-decoration: none; transition: all 0.12s;
  border: none; cursor: pointer;
}
.pricing-btn:hover { background: #D0E7FF; text-decoration: none; }
.pricing-card.featured .pricing-btn {
  background: #fff; color: var(--accent);
}
.pricing-card.featured .pricing-btn:hover { background: rgba(255,255,255,0.9); }

/* Trial callout */
.trial-callout {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 24px;
  font-size: 14px; color: var(--text-secondary);
  margin-top: 20px;
}
.trial-callout strong { color: var(--text-primary); }

/* Requirements */
.req-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.req-item {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}
.req-label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.req-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }

/* =============================================
   Download page
   ============================================= */

.download-hero {
  padding: calc(var(--nav-h) + 60px) 24px 60px;
  background: linear-gradient(180deg, #F0F5FF 0%, var(--bg-window) 100%);
  text-align: center;
}

.download-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  display: flex; align-items: center; gap: 28px;
  margin-top: 40px;
  max-width: 640px; margin-left: auto; margin-right: auto;
}

.download-app-icon {
  width: 80px; height: 80px; flex-shrink: 0;
  background: var(--accent);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; color: #fff;
  box-shadow: 0 6px 20px rgba(0,120,255,0.30);
}

.download-info { flex: 1; }
.download-name { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.download-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.download-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Version table */
.version-table-wrap {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-top: 32px;
}

.version-table {
  width: 100%; border-collapse: collapse;
}
.version-table thead tr {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--separator);
}
.version-table th {
  padding: 11px 16px;
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
  text-align: left; letter-spacing: 0.03em;
}
.version-table tbody tr {
  border-bottom: 1px solid rgba(214,214,220,0.5);
  transition: background 0.08s;
}
.version-table tbody tr:last-child { border-bottom: none; }
.version-table tbody tr:hover { background: var(--bg-window); }
.version-table td {
  padding: 14px 16px;
  font-size: 13px; color: var(--text-primary);
  vertical-align: middle;
}

.version-num {
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}

.version-changes {
  font-size: 12px; color: var(--text-secondary);
  display: flex; flex-wrap: wrap; gap: 5px;
}

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
}
.tag-new    { background: rgba(0,120,255,0.10); color: var(--accent); }
.tag-fix    { background: rgba(56,184,83,0.10);  color: var(--status-green); }
.tag-improve{ background: rgba(242,132,32,0.10); color: var(--status-orange); }
.tag-security{ background: rgba(230,56,56,0.10); color: var(--status-red); }

.download-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent); font-size: 13px; font-weight: 600;
  text-decoration: none; padding: 4px 0;
  transition: opacity 0.1s;
}
.download-link:hover { opacity: 0.7; text-decoration: none; }

.req-row { display: flex; align-items: center; gap: 8px; }
.req-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* =============================================
   Changelog page
   ============================================= */

.changelog-hero {
  padding: calc(var(--nav-h) + 60px) 24px 48px;
  background: linear-gradient(180deg, #F0F5FF 0%, var(--bg-window) 100%);
}

.changelog-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
  padding: 48px 24px 80px;
  max-width: var(--max-w); margin: 0 auto;
}

/* Sidebar TOC */
.cl-toc {
  position: sticky; top: calc(var(--nav-h) + 20px);
}
.cl-toc-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-tertiary);
  margin-bottom: 10px;
  padding: 0 12px;
}
.cl-toc-list { list-style: none; }
.cl-toc-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--text-secondary);
  text-decoration: none; transition: all 0.1s;
}
.cl-toc-list a:hover { background: var(--bg-secondary); color: var(--text-primary); }
.cl-toc-list a.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.toc-date { font-size: 11px; color: var(--text-tertiary); }

/* Changelog entries */
.cl-entries { display: flex; flex-direction: column; gap: 32px; }

.cl-entry {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.cl-entry-header {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--separator);
}

.cl-version-badge {
  display: inline-flex; align-items: center;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 4px 12px; border-radius: var(--radius-pill);
  letter-spacing: -0.01em;
}
.cl-version-badge.latest {
  background: var(--status-green);
}

.cl-entry-meta {
  flex: 1;
}
.cl-entry-title {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.cl-entry-date {
  font-size: 12px; color: var(--text-tertiary); margin-top: 2px;
}

.cl-entry-body { padding: 24px; }

.cl-section { margin-bottom: 20px; }
.cl-section:last-child { margin-bottom: 0; }

.cl-section-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(214,214,220,0.5);
}

.cl-section-title.new     { color: var(--accent); }
.cl-section-title.fix     { color: var(--status-green); }
.cl-section-title.improve { color: var(--status-orange); }

.cl-items { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cl-items li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 14px; color: var(--text-primary); line-height: 1.55;
}
.cl-bullet {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0; margin-top: 7px;
}
.cl-bullet-blue   { background: var(--accent); }
.cl-bullet-green  { background: var(--status-green); }
.cl-bullet-orange { background: var(--status-orange); }

/* Responsive */
@media (max-width: 900px) {
  .hero-title { font-size: 38px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; }
  .pricing-card.featured:hover { transform: translateY(-3px); }
  .req-grid { grid-template-columns: repeat(2, 1fr); }
  .changelog-wrap { grid-template-columns: 1fr; }
  .cl-toc { display: none; }
}

@media (max-width: 640px) {
  .hero-title { font-size: 30px; }
  .hero-subtitle { font-size: 16px; }
  .features-grid { grid-template-columns: 1fr; }
  .app-col-header, .app-row { grid-template-columns: 1fr 80px; }
  .app-row .row-meta:nth-child(3),
  .app-row .row-meta:nth-child(4),
  .app-col-header .col-h:nth-child(3),
  .app-col-header .col-h:nth-child(4) { display: none; }
  .download-card { flex-direction: column; text-align: center; }
  .download-actions { justify-content: center; }
}