/* Compare hub — homepage comparison + write-ups (loaded by /compare/index.html only) */
:root {
  --cmp-row-gap: 16px;
  --cmp-cross: #d1d1d6;
  --cmp-dim: #aeaeb2;
  --row-hover: rgba(37, 99, 235, 0.05);
  --cmp-cross: oklch(0.8622 0.0068 286.26);
  --cmp-dim: oklch(0.752 0.0057 286.26);
  --row-hover: oklch(0.546 0.238 264.1 / 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cmp-cross: #48484a;
    --cmp-dim: #636366;
    --row-hover: rgba(96, 165, 250, 0.09);
    --cmp-cross: oklch(0.4024 0.0033 286.25);
    --cmp-dim: oklch(0.5007 0.0047 286.23);
    --row-hover: oklch(0.707 0.21 258.5 / 0.09);
  }
}

    /* Comparison */
    .comparison {
      width: 100%;
      max-width: 960px;
      margin-top: 80px;
    }
    .cmp-row {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: var(--cmp-row-gap);
      align-items: stretch;
    }
    .cmp-text-card {
      background: var(--faq-row-even);
      border: 1px solid var(--divider);
      border-radius: 16px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 14px;
    }
    .cmp-title {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .cmp-desc {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .cmp-footnote {
      margin: 0;
      margin-top: auto;
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-secondary);
    }

    .cmp-writeups {
      width: 100%;
      max-width: 960px;
      margin: var(--cmp-row-gap) auto 0;
    }
    .cmp-writeups-specialists {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 28px 40px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--divider);
    }
    .cmp-writeups-specialists-intro {
      flex: 1 1 220px;
      max-width: min(26rem, 100%);
      min-width: min(100%, 11rem);
    }
    .cmp-writeups-specialists .cmp-writeups-grid {
      flex: 2 1 400px;
      min-width: min(100%, 280px);
    }
    .cmp-writeups-specialists-title {
      margin: 0 0 10px;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .cmp-writeups-specialists-lead {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .cmp-writeups-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px 32px;
      align-items: start;
    }
    .cmp-writeups-cat {
      margin: 0 0 10px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .cmp-writeups-list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 14px;
      line-height: 1.65;
    }
    .cmp-writeups-list li + li {
      margin-top: 6px;
    }
    .cmp-writeups-list a {
      color: var(--text-secondary);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }
    .cmp-writeups-list a:hover {
      color: var(--text);
    }

    .cmp-writeups-suite {
      margin: 0 0 28px;
    }
    .cmp-writeups-suite-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items: stretch;
    }
    .cmp-writeups-suite-card {
      display: block;
      text-decoration: none;
      color: inherit;
      background: var(--bg);
      border: 1px solid var(--divider);
      border-radius: 12px;
      padding: 18px 20px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .cmp-writeups-suite-card:hover {
      border-color: var(--brand);
      box-shadow: 0 4px 20px var(--shadow-xs);
    }
    .cmp-writeups-suite-card-kicker {
      display: block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 6px;
    }
    .cmp-writeups-suite-card-name {
      display: block;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text);
      margin-bottom: 8px;
    }
    .cmp-writeups-suite-card-desc {
      margin: 0 0 12px;
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .cmp-writeups-suite-card-cta {
      font-size: 13px;
      font-weight: 600;
      color: var(--brand);
    }

    .comparison-card {
      background: var(--faq-row-even);
      border: 1px solid var(--divider);
      border-radius: 16px;
      overflow: hidden;
      padding-top: 12px;
    }
    .cmp-mobile-tabs {
      display: flex;
      padding: 0 14px 20px;
      justify-content: center;
    }
    .cmp-segmented {
      display: inline-flex;
      padding: 3px;
      background: var(--surface);
      border-radius: 9px;
      gap: 2px;
      width: 100%;
      max-width: 320px;
    }
    .cmp-tab {
      flex: 1 1 0;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      background: transparent;
      border: 0;
      border-radius: 6px;
      cursor: pointer;
      letter-spacing: -0.01em;
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }
    .cmp-tab:hover { color: var(--text); }
    .cmp-tab.is-active {
      background: var(--segmented-tab-active, var(--bg));
      color: var(--text);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 0 0 0.5px rgba(0, 0, 0, 0.04);
      box-shadow:
        0 1px 2px oklch(0 0 0 / 0.08),
        0 0 0 0.5px oklch(0 0 0 / 0.04);
    }
    @media (prefers-color-scheme: dark) {
      .cmp-tab.is-active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 2px oklch(0 0 0 / 0.3);
      }
    }
    .comparison-scroll {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .comparison-table {
      width: 100%;
      min-width: 0;
      border-collapse: separate;
      border-spacing: 0;
    }
    .comparison-table[data-active-cat="image"] th[data-cat="video"],
    .comparison-table[data-active-cat="image"] th[data-cat="pdf"],
    .comparison-table[data-active-cat="image"] td[data-col="video"],
    .comparison-table[data-active-cat="image"] td[data-col="pdf"],
    .comparison-table[data-active-cat="video"] th[data-cat="image"],
    .comparison-table[data-active-cat="video"] th[data-cat="pdf"],
    .comparison-table[data-active-cat="video"] td[data-col="image"],
    .comparison-table[data-active-cat="video"] td[data-col="pdf"],
    .comparison-table[data-active-cat="pdf"] th[data-cat="image"],
    .comparison-table[data-active-cat="pdf"] th[data-cat="video"],
    .comparison-table[data-active-cat="pdf"] td[data-col="image"],
    .comparison-table[data-active-cat="pdf"] td[data-col="video"] { display: none; }
    .comparison-table thead th {
      padding: 0 16px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      text-align: center;
      border-bottom: 1px solid var(--divider);
      white-space: nowrap;
    }
    .comparison-table thead th:first-child {
      text-align: left;
      padding-left: 24px;
    }
    .comparison-table thead th:last-child,
    .comparison-table tbody td:last-child { padding-right: 24px; }
    .comparison-table thead .th-dinky,
    .comparison-table thead .th-cycle { width: 170px; }
    .comparison-table thead .th-dinky { padding-bottom: 10px; vertical-align: top; }
    .th-dinky-name {
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      color: var(--brand);
      letter-spacing: -0.01em;
      line-height: 22px;
    }
    .comparison-table thead .th-cycle { padding-bottom: 10px; vertical-align: top; }
    .th-cat {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
      opacity: 0.7;
    }
    .th-cycle-row {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
    }
    .th-tool {
      display: inline-block;
      min-width: 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
      line-height: 22px;
      white-space: nowrap;
      transition: opacity 0.18s ease;
    }
    .th-tool.fading { opacity: 0; }
    .th-cycle-btn {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid var(--divider);
      background: transparent;
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .th-cycle-btn:hover {
      background: var(--button-secondary-hover);
      color: var(--text);
      border-color: var(--text-secondary);
    }
    .th-cycle-btn svg { width: 10px; height: 10px; }
    .comparison-table tbody td {
      padding: 12px 16px;
      text-align: center;
      font-size: 14px;
      color: var(--text-secondary);
      white-space: nowrap;
      border-bottom: 1px solid var(--divider);
      transition: background 0.15s ease;
    }
    .comparison-table tbody tr:last-child td {
      border-bottom: none;
    }
    .comparison-table tbody tr:hover td {
      background: var(--row-hover);
    }
    .comparison-table tbody tr:hover .cmp-label {
      color: var(--brand);
    }
    .comparison-table tbody tr:hover .cmp-icon {
      color: var(--brand);
    }

    .cmp-label-cell {
      text-align: left !important;
      padding-left: 24px !important;
    }
    .cmp-label {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      letter-spacing: -0.01em;
      transition: color 0.15s ease;
    }
    .cmp-icon {
      width: 15px;
      height: 15px;
      color: var(--text-secondary);
      flex-shrink: 0;
      overflow: visible;
      transition: color 0.15s ease;
    }
    .cmp-check {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      color: var(--brand);
    }
    .cmp-cross { color: var(--cmp-cross); }
    .cmp-dim {
      color: var(--cmp-dim);
      font-size: 13px;
    }

    @media (max-width: 900px) {
      .cmp-row { grid-template-columns: 1fr; }
      .cmp-text-card { padding: 24px; }
      .cmp-writeups-specialists {
        flex-direction: column;
        gap: 24px;
      }
      .cmp-writeups-specialists-intro {
        flex: none;
        max-width: 42rem;
      }
      .cmp-writeups-specialists .cmp-writeups-grid {
        flex: none;
        width: 100%;
        min-width: 0;
      }
      .cmp-writeups-grid { grid-template-columns: 1fr; gap: 20px; }
      .cmp-writeups-suite-cards { grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
      .comparison-card { border-radius: 12px; padding-top: 8px; }
      .comparison-table thead .th-dinky { width: 56px; }
      .comparison-table thead .th-cycle { width: 130px; }
      .comparison-table thead th:first-child,
      .cmp-label-cell { padding-left: 12px !important; }
      .comparison-table thead th:last-child,
      .comparison-table tbody td:last-child { padding-right: 12px; }
      .comparison-table th,
      .comparison-table td { padding: 10px 4px; font-size: 12px; white-space: normal; }
      .comparison-table .cmp-label { font-size: 12px; gap: 7px; }
      .comparison-table .cmp-icon { width: 14px; height: 14px; }
      .th-cycle-row { gap: 4px; flex-wrap: nowrap; }
      .th-cycle-btn { width: 16px; height: 16px; flex-shrink: 0; }
      .th-cycle-btn svg { width: 9px; height: 9px; }
      .th-tool { font-size: 12px; min-width: 0; white-space: nowrap; }
      .th-cat { font-size: 10px; }
    }

/* /compare/ hub layout */
.compare-wrap.compare-hub {
  max-width: 960px;
}

.compare-hub .comparison {
  margin-top: 48px;
}

/* Same vertical gap as between Clop/Picmal cards (suite grid gap = --cmp-row-gap, 16px) */
.compare-hub .cmp-writeups {
  margin: var(--cmp-row-gap) auto 0;
}