/* Marketing pages: /compare charts and matrix, /features groups, /docs layout. Float tokens only. */

.center { text-align: center; margin: var(--s-6) 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seg.jump { flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); }
.seg.jump a { padding: 6px 14px; }
.seg.jump a:hover { color: var(--text); }
section[id] { scroll-margin-top: 96px; }
.chart-h { margin: var(--s-5) 0 var(--s-3); font: 650 var(--fs-xs)/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.chart-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: var(--s-4); }

/* Bars: grow in with a liquid ease, staggered per row */
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 210px) 1fr auto; grid-template-areas: "name track val" ". note note"; align-items: center; column-gap: 14px; row-gap: 2px; }
.bar-name { grid-area: name; font-size: var(--fs-sm); font-weight: 600; }
.bar-track { grid-area: track; height: 14px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: color-mix(in oklab, var(--text-faint) 55%, var(--surface-3));
  transform-origin: left; animation: bar-grow 900ms var(--ease-liquid) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.bar-fill.over { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent calc(100% - 18px), transparent calc(100% - 12px), #000 calc(100% - 8px)); mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent calc(100% - 18px), transparent calc(100% - 12px), #000 calc(100% - 8px)); }
.bar-row.hi .bar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px -4px var(--glow); }
.bar-row.hi .bar-name { color: var(--accent); }
.bar-val { grid-area: val; font: 700 var(--fs-md)/1 var(--font-display); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.bar-note { grid-area: note; }
@keyframes bar-grow { from { transform: scaleX(0); } }
@media (max-width: 600px) {
  .bar-row { grid-template-columns: 1fr auto; grid-template-areas: "name val" "track track" "note note"; }
}

/* Citations */
.cite { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 4px; padding: 0 4px; border-radius: var(--r-pill); font: 700 10px/1 var(--font-ui); color: var(--accent); background: var(--accent-soft); vertical-align: 1px; }
.sources { margin: var(--s-3) 0 0; padding-left: 20px; display: grid; gap: 6px; }
.sources li:target { color: var(--accent); }

/* Feature matrix */
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: var(--s-4) 0 var(--s-3); color: var(--text-muted); }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.table-scroll { overflow-x: auto; margin: 0 calc(var(--s-5) * -1); padding: 0 var(--s-5); -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-md); }
.matrix { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.matrix th, .matrix td { padding: 12px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.matrix thead th { position: sticky; top: 0; font: 650 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); background: var(--surface-solid); }
.matrix tbody th { width: 24%; font-weight: 500; }
.matrix tbody th b { display: block; font-weight: 650; margin-bottom: 2px; }
.matrix tbody th span { display: block; }
.matrix td { display: table-cell; color: var(--text-muted); }
.matrix td .cell { display: block; margin-top: 4px; font-size: var(--fs-xs); line-height: 1.35; }
.matrix .us { background: color-mix(in oklab, var(--accent) 6%, transparent); color: var(--text); }
.matrix thead th.us { color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface-solid)); border-radius: var(--r-md) var(--r-md) 0 0; }
.matrix tbody tr:last-child td.us { border-radius: 0 0 var(--r-md) var(--r-md); }
.matrix tbody tr { transition: background-color var(--t-fast); }
.matrix tbody tr:hover { background: var(--surface-2); }
.mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 800 11px/1 var(--font-ui); flex: none; }
.st-ok .mark { background: var(--pos); color: #fff; } .st-ok .mark::before { content: "✓"; }
.st-part .mark { background: color-mix(in oklab, #f59e0b 22%, transparent); color: #b45309; } .st-part .mark::before { content: "◐"; }
.st-paid .mark { background: color-mix(in oklab, #f59e0b 22%, transparent); color: #b45309; } .st-paid .mark::before { content: "$"; }
.st-plug .mark { background: var(--pos); color: #fff; opacity: .78; } .st-plug .mark::before { content: "✓"; }
.st-addon .mark { background: var(--surface-3); color: var(--text-muted); } .st-addon .mark::before { content: "+"; }
.st-no .mark { background: color-mix(in oklab, var(--neg) 12%, transparent); color: var(--neg); } .st-no .mark::before { content: "✕"; }
.st-unk .mark { background: var(--surface-3); color: var(--text-faint); } .st-unk .mark::before { content: "?"; }

/* Setup cards */
.setup-grid { display: grid; gap: var(--gap-float); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: var(--s-4) 0 var(--gap-float); }
.setup-card { padding: var(--s-5); }
.setup-card h3 { margin: 0 0 2px; font: 650 var(--fs-md)/1.3 var(--font-display); }
.setup-card.us { box-shadow: var(--rim), var(--e-2), 0 0 0 2px var(--accent); }
.steps { margin: var(--s-3) 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--fs-sm); }
.steps code { font-size: .85em; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); }

/* Compare teaser */
.compare-teaser .stat b { font-size: var(--fs-xl); background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Features page */
.feature-group { margin: var(--s-8) 0 var(--s-6); }
.group-head { max-width: 640px; margin-bottom: var(--s-4); }
.group-head p { margin: 0; }

/* Docs */
a.doc-card { display: block; color: inherit; text-decoration: none; }
a.doc-card:hover h3 { color: var(--accent); }
.docs-layout { display: grid; gap: var(--gap-float); grid-template-columns: minmax(0, 1fr); align-items: start; }
.docs-layout > * { min-width: 0; }
.docs-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: var(--s-3); }
.docs-nav a { padding: 8px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.docs-nav a[aria-current] { color: var(--accent); background: var(--accent-soft); }
.docs-layout .prose { max-width: none; margin: 0; }
.prose pre { overflow-x: auto; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); font-size: var(--fs-sm); }
.prose .lead { margin: 0 0 var(--s-4); text-align: left; }
.doc-next { margin-top: var(--s-7); }
@media (min-width: 900px) {
  .docs-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .docs-nav { flex-direction: column; position: sticky; top: 96px; }
}

@media (prefers-reduced-motion: reduce) { .bar-fill { animation: none; } }
@media print { .bar-fill { animation: none; } .table-scroll { overflow: visible; } }
@media (max-width: 760px) {
  .matrix { min-width: 760px; }
  .matrix tbody th, .matrix thead th:first-child { position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px; background: var(--surface-solid); box-shadow: 6px 0 10px -8px hsl(var(--sh) / .25); }
  .matrix thead th:first-child { z-index: 2; }
}

/* Legal pages */
.toc { display: flex; flex-wrap: wrap; gap: 4px; padding: var(--s-3); }
.toc a { padding: 6px 10px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.toc a:hover { color: var(--accent); background: var(--accent-soft); }
.toc b { width: 100%; padding: 4px 10px; }
@media (min-width: 900px) { .toc { flex-direction: column; position: sticky; top: 96px; } }
.legal section { scroll-margin-top: 96px; }
.legal section + section { border-top: 1px solid var(--border); margin-top: var(--s-6); padding-top: var(--s-2); }

/* What's new */
.release { padding: var(--s-6); }
.release-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.release-head h2 { margin: 0; }
.release .ticks b { margin-right: 4px; }

/* Roadmap */
.rm-board { display: grid; gap: var(--gap-float); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.rm-col { padding: var(--s-4); }
.rm-col h2 { font-size: var(--fs-md); display: flex; gap: 8px; align-items: baseline; margin: 0 0 var(--s-3); }
.rm-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rm-card { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.rm-card p { margin: 4px 0 0; }
.rm-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.rm-shipped h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pos); align-self: center; }
.rm-next h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); align-self: center; }
.rm-later h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); align-self: center; }