/* vNext prototype (legacy, to be reduced page by page). Not a source of truth for core. */
/* ===== Proof page ===== */
.phero .photo { aspect-ratio: 4 / 3; overflow: hidden; }
.phero .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act code, .tile-bar code { font: 12px var(--font-mono); text-transform: none; letter-spacing: 0; }
.cap { margin-top: 18px; color: var(--muted); }
.ho-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ho-a, .ho-b { display: grid; gap: 10px; padding: 24px; min-height: 230px; align-content: end; }
.ho-a h3, .ho-b h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); }
.ho-b { background: #1E3A5F; color: #FFF6E5; border-radius: 22px; font-family: Georgia, 'Times New Roman', serif; }
.ho-b h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: 0; }
.ho-b span { font: 600 12px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #F2B84B; }
@media (max-width: 700px) { .ho-grid { grid-template-columns: minmax(0, 1fr); } }
.code { margin: 20px 0 0; padding: 18px; overflow-x: auto; background: var(--fg); color: var(--bg); font: 13px/1.6 var(--font-mono); }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-demo { display: grid; place-items: center; min-height: 180px; }
.st-demo i { display: block; width: 72px; height: 72px; background: var(--accent); }
@media (max-width: 700px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }
.ep { width: 100%; border-collapse: collapse; }
.ep th, .ep td { text-align: start; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.ep th { font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.real { display: grid; gap: 10px; padding: 28px 22px; max-width: 640px; }
.real b { font: 800 clamp(1.8rem, 4vw, 3rem)/1 var(--font-display); letter-spacing: -.03em; }
.real .mono:last-child { color: var(--muted); }

/* Accessibility section */
.ct-wrap { border: 1px solid var(--line); background: var(--surface); }
.ct-t { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ct-t th, .ct-t td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ct-t thead th { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ct-t tbody th { font-weight: 600; } .ct-t td { font-variant-numeric: tabular-nums; }
.ct-t tr:last-child th, .ct-t tr:last-child td { border-bottom: 0; }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.ct-l { margin: 0; padding: 18px 20px 20px 36px; display: grid; gap: 10px; color: var(--muted); }
@media (max-width: 800px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } .ct-t th, .ct-t td { padding: 10px 10px; font-size: .85rem; } }

/* Proof: Tailwind host, weight, speed */
.pf-tw { min-width: 0; }
.pf-tw .tw-demo { min-width: 0; }
.pf-facts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); }
.pf-facts b { color: var(--fg); font: 800 1.4rem/1 var(--font-display); letter-spacing: -.02em; margin-inline-end: 8px; }
.pf-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.pf-bars li { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 4.5rem; gap: 12px; align-items: center; }
.pf-bars span { color: var(--muted); }
.pf-bars i { display: block; height: 16px; width: calc(var(--v) / 54236 * 100%); min-width: 6px; background: var(--accent); }
.pf-bars li.alt i { background: var(--fg); opacity: .55; }
.pf-bars b { font-weight: 400; text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .pf-bars li { grid-template-columns: minmax(0, 1fr) 4.5rem; } .pf-bars li i { grid-column: 1 / -1; grid-row: 2; } }
.pf-t td, .pf-t th { font-variant-numeric: tabular-nums; }
.pf-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pf-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pf-rules { grid-template-columns: minmax(0, 1fr); } }
.ct-wrap { overflow-x: auto; }
.pf-t { min-width: 560px; }
.pf-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pf-rules li { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.pf-rules b { font: 800 1.35rem/1.05 var(--font-display); letter-spacing: -.02em; }
.pf-rules span { color: var(--muted); }