/* alternative.css — shared styles for High Shelf's "coming from X" landing
   pages (letterboxd-alternative.html, goodreads-alternative.html, etc).
   Same dark design language as index.html's inline styles, factored into
   one file since 7+ near-identical pages would otherwise duplicate the
   whole block per file. index.html / support.html / privacy.html /
   terms.html keep their own inline styles (small, one-off pages) — this
   file is only for the alternative-page family. */

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0a0a0a;
  --bg-card: #141414;
  --bg-card-2: #191919;
  --border: #222;
  --text: #f0f0f0;
  --text-muted: #999;
  --text-faint: #666;
  --accent: #6c7b66;
  --accent-dim: #5c6957;
  --good: #7fa87a;
  --neutral: #999;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
a { color: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* Top nav */
.nav { border-bottom: 1px solid var(--border); }
.nav-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { font-weight: 700; font-size: 16px; letter-spacing: -0.3px; color: var(--text); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-link { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-link:hover { color: var(--text); }
.nav-btn {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 50px;
}
.nav-btn:hover { background: var(--accent-dim); }

/* Breadcrumb-ish trail under the nav */
.crumbs {
  padding: 16px 24px 0;
  max-width: 1040px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--text-faint);
}
.crumbs a { color: var(--text-faint); text-decoration: none; }
.crumbs a:hover { color: var(--text-muted); }

/* Comparison hero */
.hero-alt {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 48px;
  text-align: center;
}
.hero-alt .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.hero-alt h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin-bottom: 18px;
}
.hero-alt h1 .vs { color: var(--text-faint); font-weight: 500; }
.hero-alt .dek {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 32px;
}
.hero-alt .store-badges { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-alt .badge {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
}
.hero-alt .badge:hover { background: #fff; }
.hero-alt .badge.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.hero-alt .badge.secondary:hover { border-color: var(--accent); }
.hero-alt .fine-print { color: var(--text-faint); font-size: 13px; }

/* Section shell (shared with index.html naming) */
section.block { padding: 64px 24px; border-bottom: 1px solid var(--border); }
section.block:last-of-type { border-bottom: none; }
.block-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.block-head h2 { font-size: 26px; font-weight: 700; margin-bottom: 12px; }
.block-head p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* Comparison table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
table.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
table.compare th, table.compare td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
table.compare thead th {
  background: var(--bg-card);
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
table.compare thead th:not(:first-child) { text-align: center; }
table.compare tbody th {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
table.compare tbody td { text-align: center; color: var(--text-muted); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: none; }
table.compare .yes { color: var(--good); font-weight: 700; }
table.compare .no { color: var(--text-faint); }
table.compare .col-hs { background: rgba(108, 123, 102, 0.08); }

/* Feature / fairness cards */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 780px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-grid.two-col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 780px) { .feature-grid.two-col { grid-template-columns: 1fr; } }
.feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 26px; }
.feature-card .icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(108, 123, 102, 0.15); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 16px;
}
.feature-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* "What they get right" fairness callout */
.fair-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 760px;
  margin: 0 auto;
}
.fair-box p { color: var(--text-muted); font-size: 15px; line-height: 1.7; }
.fair-box p + p { margin-top: 12px; }
.fair-box strong { color: var(--text); }

/* Migration / CTA band */
.cta-band {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 32px;
}
.cta-band h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.cta-band p { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin-bottom: 24px; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-band .badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
}
.cta-band .badge:hover { background: var(--accent-dim); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 26px; max-width: 720px; margin: 0 auto; }
.faq-item h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.faq-item p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* Related pages row */
.related { max-width: 1040px; margin: 0 auto; padding: 48px 24px; }
.related h2 { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; }
.related-links { display: flex; flex-wrap: wrap; gap: 12px; }
.related-links a {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.related-links a:hover { border-color: var(--accent); color: var(--text); }

/* Full footer */
footer.site {
  border-top: 1px solid var(--border);
  padding: 56px 24px 40px;
}
.footer-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr 1fr;
  gap: 32px;
}
@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand a.nav-logo { display: inline-block; margin-bottom: 10px; }
.footer-brand p { color: var(--text-faint); font-size: 13px; line-height: 1.6; max-width: 220px; }
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text-muted); text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1040px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 12px;
}