/* ============================================================ Placeholder marking — preview vs live ON by default (preview). Add class="live" to , or load any page with ?live, to hide every marker for the real launch. ============================================================ */ [data-ph] { outline: 2px dashed #f59e0b; outline-offset: 2px; position: relative; } [data-ph]::after { content: "PLACEHOLDER · " attr(data-ph); position: absolute; top: -0.65rem; left: 0; font: 600 10px/1 system-ui, sans-serif; background: #f59e0b; color: #111; padding: 2px 6px; border-radius: 4px; white-space: nowrap; z-index: 5; pointer-events: none; } .ph-banner { position: sticky; top: 0; z-index: 9999; background: #f59e0b; color: #111; text-align: center; font: 600 13px/1.4 system-ui, sans-serif; padding: 8px 12px; } html.live [data-ph] { outline: none; } html.live [data-ph]::after, html.live .ph-banner { display: none; } @media print { [data-ph]::after, .ph-banner { display: none; } }