/* Shared styles for generated /compare/*.html pages (see compare/_generate.mjs). */
.cmp-wrap { max-width: 880px; margin: 0 auto; padding: 64px 20px 0; }
.cmp-eyebrow { font-family:var(--font-sans, 'Switzer', system-ui, sans-serif); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.cmp-wrap h1 { font-family:var(--font-display, 'Instrument Serif', Georgia, serif); font-weight:400; font-size:50px; line-height:1.06; letter-spacing:-.01em; margin-bottom:18px; }
.cmp-wrap h1 em { color:var(--accent); font-style:italic; }
.cmp-sub { font-size:18px; color:var(--muted2); line-height:1.6; max-width:660px; margin-bottom:24px; }
.cmp-cta { display:inline-block; background:var(--btn); color:#fff; padding:13px 26px; border-radius:9px; font-weight:600; font-size:15px; text-decoration:none; }
.cmp-cta:hover { background:var(--btn-hover); }
.cmp-note { font-size:13px; color:var(--muted); margin-top:12px; }
.cmp-tldr { background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:12px; padding:20px 22px; margin:34px 0 0; font-size:15.5px; line-height:1.65; color:var(--text); }
.cmp-tldr b { color:var(--text); }
.cmp-h2 { font-family:var(--font-display, 'Instrument Serif', Georgia, serif); font-weight:400; font-size:32px; margin:58px 0 16px; }
.cmp-p { font-size:15.5px; color:var(--muted2); line-height:1.7; margin:0 0 14px; }
.cmp-p b { color:var(--text); }
.cmp-table-wrap { overflow-x:auto; margin:8px 0 0; border:1px solid var(--border); border-radius:14px; }
table.cmp { width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
table.cmp th, table.cmp td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:top; }
table.cmp thead th { font-family:var(--font-sans, 'Switzer', system-ui, sans-serif); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
table.cmp thead th.us { color:var(--accent); }
table.cmp tbody td:first-child { color:var(--muted2); font-weight:500; width:34%; }
table.cmp td.us { color:var(--text); font-weight:500; }
table.cmp tr:last-child td { border-bottom:0; }
.cmp-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:8px 0 0; }
@media(max-width:680px){ .cmp-cards{grid-template-columns:1fr} .cmp-wrap h1{font-size:38px} }
.cmp-card { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:20px 22px; }
.cmp-card h3 { font-size:16.5px; margin:0 0 7px; }
.cmp-card p { font-size:14px; color:var(--muted2); line-height:1.6; margin:0; }
.cmp-fair { background:var(--bg3); border:1px solid var(--border2); border-radius:14px; padding:22px 24px; margin:8px 0 0; }
.cmp-fair h3 { font-size:16px; margin:0 0 10px; }
.cmp-fair ul { margin:0; padding-left:18px; }
.cmp-fair li { font-size:14.5px; color:var(--muted2); line-height:1.7; margin-bottom:6px; }
.cmp-fair li b { color:var(--text); }
.cmp-faq { margin:8px 0 0; }
.cmp-faq details { border-top:1px solid var(--border); padding:16px 0; }
.cmp-faq summary { font-size:16px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.cmp-faq summary::-webkit-details-marker { display:none; }
.cmp-faq summary::after { content:"+"; font-family:'Geist Mono',monospace; font-size:20px; color:var(--muted); }
.cmp-faq details[open] summary::after { content:"\2212"; }
.cmp-faq p { font-size:14.5px; color:var(--muted2); line-height:1.7; margin:10px 0 0; }
.cmp-foot-cta { text-align:center; margin:64px 0 0; }
.cmp-foot-cta p { font-size:15px; color:var(--muted2); margin:0 0 16px; }
/* Guide / how-to pages — extends compare.css with theme-aware chrome. */
.cmp-wrap:has(.gd-crumb) { padding-top: 88px; }

.gd-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans, 'Switzer', system-ui, sans-serif);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 26px;
}
.gd-crumb a { color: var(--muted2); transition: color .15s; }
.gd-crumb a:hover { color: var(--accent); }
.gd-crumb .sep { color: var(--muted); opacity: .45; user-select: none; }
.gd-crumb .here { color: var(--text); }

.gd-tldr {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 28px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}
.gd-tldr a {
  color: var(--accent-ink, var(--accent));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.gd-tldr .lbl {
  display: block;
  font-family: var(--font-sans, 'Switzer', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.gd-when {
  margin: 14px 0 0;
  padding: 18px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: 12px;
}
.gd-when h2 {
  font-family: var(--font-sans, 'Switzer', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--muted);
}
.gd-when p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted2);
  line-height: 1.65;
}

.gd-code {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 8px 0 0;
  box-shadow: inset 0 1px 0 var(--border);
}
.gd-code pre {
  margin: 0;
  font-family: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre;
}

.gd-steps { counter-reset: s; list-style: none; padding: 0; margin: 6px 0 0; }
.gd-steps li {
  counter-increment: s;
  position: relative;
  padding: 12px 0 12px 44px;
  border-bottom: 1px solid var(--border);
  line-height: 1.65;
  font-size: 15px;
  color: var(--muted2);
}
.gd-steps li:last-child { border-bottom: 0; }
.gd-steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 11px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono, 'Geist Mono', monospace);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gd-steps code, .cmp-p code, .cmp-fair code, .gd-tldr code, .gd-when code {
  font-family: var(--font-mono, 'Geist Mono', monospace);
  font-size: .9em;
  background: var(--code-bg);
  padding: 1px 6px;
  border-radius: 5px;
}

.gd-agent {
  margin: 36px 0 0;
  padding: 18px 20px;
  border: 1px dashed var(--border2, var(--border));
  border-radius: 12px;
  background: transparent;
}
.gd-agent p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted2);
  line-height: 1.65;
}
.gd-agent a { color: var(--accent); font-weight: 600; }

.gd-related {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 10px 0 0;
}
@media (max-width: 680px) {
  .gd-related { grid-template-columns: 1fr; }
}
.gd-related a {
  display: block;
  text-decoration: none;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color .15s, transform .12s;
  color: inherit;
}
.gd-related a:hover { border-color: var(--accent); transform: translateY(-1px); }
.gd-related .k {
  font-family: var(--font-sans, 'Switzer', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.gd-related h3 {
  font-family: var(--font-sans, 'Switzer', system-ui, sans-serif);
  font-size: 15.5px;
  font-weight: 600;
  margin: 6px 0 4px;
  color: var(--text);
}
.gd-related p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

.gd-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 680px) {
  .gd-hub-grid { grid-template-columns: 1fr; }
}
.gd-hub-card {
  display: block;
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.gd-hub-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.gd-hub-card .k {
  font-family: var(--font-sans, 'Switzer', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.gd-hub-card h3 {
  margin: 8px 0 4px;
  font-family: var(--font-sans, 'Switzer', system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
}
.gd-hub-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

.gd-section-label {
  font-family: var(--font-sans, 'Switzer', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 48px 0 14px;
}