/*
  Compare pages — subset of site/index.html tokens and components.
  Color system: OKLCH with identical sRGB fallbacks.
*/
:root {
  --bg: #fff;
  --text: #1c1c1e;
  --text-secondary: #6b6b70;
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --divider: #eaeaea;
  --button-secondary-hover: #f1f1f3;
  --surface: #f1f1f3;
  --shadow-xs: rgba(0, 0, 0, 0.08);
  --shadow-md: rgba(0, 0, 0, 0.18);
  --text-on-brand: #fff;
  --faq-row-even: rgba(0, 0, 0, 0.03);
  --bg: oklch(1 0 0);
  --text: oklch(0.2273 0.0038 286.09);
  --text-secondary: oklch(0.5295 0.0077 286.13);
  --brand: oklch(0.546 0.238 264.1);
  --brand-hover: oklch(0.492 0.232 264.2);
  --divider: oklch(0.937 0 0);
  --button-secondary-hover: oklch(0.9587 0.0027 286.35);
  --surface: oklch(0.9587 0.0027 286.35);
  --shadow-xs: oklch(0 0 0 / 0.08);
  --shadow-md: oklch(0 0 0 / 0.18);
  --text-on-brand: oklch(1 0 0);
  --faq-row-even: oklch(0 0 0 / 0.03);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e0f;
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --brand: #60a5fa;
    --brand-hover: #93c5fd;
    --divider: #38383a;
    --button-secondary-hover: #2c2c2e;
    --surface: #3a3a3c;
    --shadow-xs: rgba(0, 0, 0, 0.4);
    --shadow-md: rgba(0, 0, 0, 0.5);
    --faq-row-even: rgba(255, 255, 255, 0.04);
    --bg: oklch(0.1137 0.0019 286.09);
    --text: oklch(0.9707 0.0027 286.35);
    --text-secondary: oklch(0.6812 0.0073 286.21);
    --brand: oklch(0.707 0.21 258.5);
    --brand-hover: oklch(0.79 0.165 255.7);
    --divider: oklch(0.3414 0.0034 286.22);
    --button-secondary-hover: oklch(0.2939 0.0036 286.18);
    --surface: oklch(0.3492 0.0034 286.22);
    --shadow-xs: oklch(0 0 0 / 0.4);
    --shadow-md: oklch(0 0 0 / 0.5);
    --faq-row-even: oklch(1 0 0 / 0.04);
  }
}

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

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  padding: 44px 28px 56px;
}

.compare-wrap {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.compare-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.compare-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.compare-brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow:
    0 1px 1px var(--shadow-xs),
    0 6px 14px var(--shadow-md);
}

.compare-brand:hover {
  color: var(--brand);
}

.compare-hero {
  margin-bottom: 48px;
  text-align: center;
}

.compare-hero-title {
  margin: 0 0 22px;
  font-size: clamp(2.45rem, 6.5vw, 3.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.12;
}

.compare-intro {
  margin: 0 auto 40px;
  max-width: 600px;
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.6;
  text-wrap: pretty;
}

.compare-intro a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.compare-intro a:hover {
  color: var(--text);
}

/*
  Two-up “Choose …” blocks: grid gap reveals a hairline rule (reads like the reference)
  instead of same-color border + white columns blending together.
*/
.compare-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 16px;
  text-align: left;
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
  background: var(--divider);
}

.compare-split-col {
  min-width: 0;
  padding: 32px 36px;
  background: var(--bg);
}

.compare-split-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.3;
}

.compare-split-desc {
  margin: 0;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.compare-table-wrap {
  overflow-x: auto;
  margin-bottom: 36px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--faq-row-even);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.compare-table th,
.compare-table td {
  padding: 14px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--divider);
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table thead th {
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
}

.compare-table tbody th[scope="row"] {
  font-weight: 500;
  color: var(--text);
  width: 28%;
  min-width: 120px;
}

.compare-table td {
  color: var(--text-secondary);
  line-height: 1.5;
}

.compare-table .col-dinky {
  color: var(--text);
  font-weight: 500;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
  border: 1px solid transparent;
  line-height: 1.4;
}

.btn:has(> svg) {
  padding-left: 11px;
}

.btn-primary {
  background: var(--brand);
  color: var(--text-on-brand);
}

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

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

.btn-secondary:hover {
  background: var(--button-secondary-hover);
}

.btn svg {
  width: 14px;
  height: 14px;
}

/* End-of-page CTA (watch-folder style layout; image varies by compare) */
.compare-cta {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--divider);
}

.compare-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 40px;
  align-items: center;
}

.compare-cta-media {
  min-width: 0;
}

.compare-cta-media img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--divider);
  box-shadow:
    0 1px 2px var(--shadow-xs),
    0 12px 32px var(--shadow-md);
}

.compare-cta-body {
  min-width: 0;
}

.compare-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

.compare-cta-eyebrow svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.9;
}

.compare-cta-title {
  margin: 0 0 14px;
  font-size: clamp(1.35rem, 3.5vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}

.compare-cta-lead {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.compare-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.compare-cta .version {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.compare-related {
  margin-top: 48px;
}

.compare-related h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.compare-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px 36px;
  align-items: start;
}

.compare-related-heading {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.compare-related-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.65;
}

.compare-related-col li {
  margin: 0;
  padding: 0;
}

.compare-related-col li + li {
  margin-top: 4px;
}

.compare-related a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.compare-related a:hover {
  color: var(--text);
}

footer {
  margin-top: 56px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}

footer a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

footer a:hover {
  color: var(--text);
}

@media (max-width: 700px) {
  body {
    padding: 32px 22px 44px;
  }

  .compare-hero {
    margin-bottom: 36px;
  }

  .compare-split {
    grid-template-columns: 1fr;
    /* gap: 1px already draws the horizontal rule between stacked panels */
  }

  .compare-split-col {
    padding: 26px 22px;
  }

  .compare-related-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .compare-cta-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .compare-cta-media img {
    max-width: 100%;
  }

  .compare-cta-actions {
    justify-content: center;
  }

  .compare-cta .version {
    text-align: center;
  }

  .compare-table thead th,
  .compare-table tbody th,
  .compare-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}