/* Content pages (compare, alternatives). Tokens mirror landing.html and
   client/src/styles/index.css. */
:root {
  --ink: #202020;
  --ink-muted: #4c4c4c;
  --cocoa-dark: #3e1a06;
  --cocoa: #753512;
  --cream: #ede4db;
  --cream-soft: #ded5c6;
  --paper: #f5efe8;
  --border: rgba(117, 53, 18, 0.18);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--cocoa); color: var(--cream); }

main {
  max-width: 760px;
  margin: 0 auto;
  padding-top: max(2rem, env(safe-area-inset-top));
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
.wordmark {
  font: 500 1.125rem/1.2 var(--serif);
  color: var(--cocoa);
  text-decoration: none;
}
h1, h2 { font-family: var(--serif); font-weight: 500; color: var(--cocoa-dark); text-wrap: balance; }
h1 {
  margin: 3rem 0 1.25rem;
  font-size: clamp(2.25rem, 8vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
h2 { margin: 3rem 0 0.75rem; font-size: 1.625rem; line-height: 1.2; }
p, ul { margin: 0 0 1rem; max-width: 65ch; }
ul { padding-left: 1.25rem; }
li { margin-bottom: 0.375rem; }
li::marker { color: var(--cocoa); }
a { color: var(--cocoa); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 3px; border-radius: 2px; }
strong { font-weight: 600; }
.lede { font-size: 1.1875rem; color: var(--ink-muted); }
.checked { font-size: 0.875rem; color: var(--ink-muted); }

/* Wide tables scroll inside their own frame; the page never scrolls sideways. */
.table-wrap {
  margin: 1.5rem 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--paper);
}
table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
th, td { padding: 0.75rem 0.875rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
thead th { font-weight: 600; background: var(--cream-soft); white-space: nowrap; }
tbody th { font-weight: 600; }
.us { background: rgba(117, 53, 18, 0.06); }
thead .us { color: var(--cocoa); }
/* Row labels stay in view while the table scrolls sideways on a phone. */
tbody th, thead th:first-child { position: sticky; left: 0; z-index: 1; }
tbody th { background: var(--paper); }
/* On wide screens the comparison table breaks out of the reading column. */
@media (min-width: 1120px) {
  .table-wrap.wide { margin-left: -160px; margin-right: -160px; }
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0.9375rem 1.625rem;
  border-radius: 999px;
  background: var(--cocoa);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.cta:active { transform: scale(0.97); }
.cta-arrow { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--cocoa-dark); }
  .cta:hover .cta-arrow { transform: translateX(3px); }
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 4.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
}