/* Shared styling for the /compare/*.html landing pages. Extends legal.css's
   theme tokens (already linked alongside this on every compare page) with
   the handful of accent tokens the main app also uses, so these pages read
   as the same brand instead of a plainer "legal page" skin. */
:root {
  --color-surface2: #17171c;
  --color-link: #4a7ae8;
  --color-link-bright: #6e9bf0;
  --color-attack-text: #ff5c76;
  --color-defence-bright: #6e9bf0;
  --shadow-elevated: 0.5;
}
:root[data-theme='light'] {
  --color-surface2: #f3f4f6;
  --color-link: #1b3fa8;
  --color-link-bright: #1b3fa8;
  --color-attack-text: #b3122f;
  --shadow-elevated: 0.12;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --color-surface2: #f3f4f6;
    --color-link: #1b3fa8;
    --color-link-bright: #1b3fa8;
    --color-attack-text: #b3122f;
    --shadow-elevated: 0.12;
  }
}

body { font-family: 'Inter', -apple-system, sans-serif; }

.wide-main { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

.cmp-hero { max-width: 780px; margin: 0 auto; padding: 72px 24px 8px; text-align: center; }
.cmp-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  color: var(--color-link-bright); margin-bottom: 16px;
}
.cmp-hero h1 {
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: clamp(30px, 5vw, 52px);
  letter-spacing: -0.035em; line-height: 1.08; color: var(--color-text); margin: 0 0 20px;
}
.cmp-hero p { font-size: 16px; line-height: 1.7; color: var(--color-muted); margin: 0 auto 32px; max-width: 620px; }

.cmp-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-bottom: 88px; }
.cmp-btn {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px;
  border-radius: 10px; padding: 13px 28px; text-decoration: none; letter-spacing: -0.01em;
  display: inline-block;
}
.cmp-btn-primary { background: #1b3fa8; color: #fff; box-shadow: 0 0 30px rgba(27,63,168,0.4); }
.cmp-btn-ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }

.cmp-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--color-border); margin-bottom: 88px; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 13.5px; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--color-border); }
.cmp-table thead th {
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--color-muted);
}
.cmp-table thead th:first-child { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px; }
.cmp-table thead th.cmp-col-secorvia { color: var(--color-link-bright); font-weight: 700; background: rgba(74,122,232,0.08); }
.cmp-table tbody th { font-weight: 500; color: var(--color-text); }
.cmp-table tbody tr:last-child td, .cmp-table tbody tr:last-child th { border-bottom: none; }
.cmp-table td.cmp-col-secorvia { background: rgba(74,122,232,0.06); }
.cmp-mark { display: inline-flex; align-items: center; gap: 7px; }
.cmp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cmp-dot-yes { background: var(--color-link-bright); }
.cmp-dot-partial { background: var(--color-muted); }
.cmp-dot-no { background: var(--color-border); border: 1px solid var(--color-muted); }

.cmp-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 88px; }
.cmp-why-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 24px; }
.cmp-why-card h3 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: var(--color-text); margin: 0 0 8px; }
.cmp-why-card p { font-size: 13.5px; line-height: 1.6; color: var(--color-muted); margin: 0; }

.cmp-band {
  text-align: center; padding: 64px 24px; margin: 0 -24px 0; border-top: 1px solid var(--color-border);
}
.cmp-band h2 { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: clamp(24px, 4vw, 38px); color: var(--color-text); margin: 0 0 24px; letter-spacing: -0.03em; }