/* Monitor ghosting test — explainer page that funnels into the live tester at
 * /monitor-test/#pattern=ghosting rather than duplicating it. Shared tokens/components
 * live in ../base.css. Mirrors ../ghosting-test/ghosting-test.css and
 * ../chatter-test/chatter-test.css — same page shape — so keep all three in sync.
 */

/* Reuses the monitor tester's logo markup; these rules live in monitor-test/monitor-test.css
 * normally, which this page doesn't load, so they're repeated here rather than pulling in
 * a whole stylesheet of pattern-catalog rules for four fill/stroke colors. */
.logo-plate { fill: var(--accent); }
.logo-half { fill: var(--on-accent); }
.logo-screen { fill: none; stroke: var(--on-accent); stroke-width: 1.7; }
.logo-stand { fill: none; stroke: var(--on-accent); stroke-width: 1.7; stroke-linecap: round; }

.monitor-ghosting-intro { margin-top: 20px; }

/* This page carries more explanatory prose than the rest of the site, where content
 * sections are mostly short FAQ answers. The shared --muted body color reads fine for
 * those but gets fatiguing over several paragraphs, so bump contrast here specifically. */
.content-section p { color: color-mix(in oklab, var(--muted) 70%, var(--text) 30%); }
.content-section ul.tier-list { margin: 0 0 12px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.content-section ul.tier-list li::marker { color: var(--accent); }
.content-section ul.tier-list strong { color: var(--text); }

.cta-panel {
  max-width: 720px; margin: 20px auto 0; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 32px; box-shadow: var(--shadow);
}
.cta-panel h2 {
  font-family: var(--mono); font-weight: 600; text-transform: none; letter-spacing: -0.01em;
  font-size: 1.15rem; color: var(--text); margin: 0 0 10px;
}
.cta-panel p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0 0 16px; }
.cta-panel-end p { margin-bottom: 14px; font-size: 0.95rem; }