.reader-hero { padding-bottom: 68px; }
.reader-hero .lede { max-width: 790px; }
.reader-hero .hero-code { max-width: 820px; }
.reader-benefits { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:24px; }
.reader-benefits article { padding:23px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-muted); }
.reader-benefits article.benefit-wide { grid-column:1/-1; background:linear-gradient(135deg,#eff6ff,#f8fafc 60%); border-color:#bfdbfe; }
.reader-benefits h3 { margin:0 0 8px; font-size:18px; }
.reader-benefits p { margin:0; color:var(--ink-soft); }

.fixture-choices { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 16px; }
.fixture-choices button { appearance:none; padding:8px 13px; color:var(--ink-soft); background:#fff; border:1px solid var(--line-strong); border-radius:99px; cursor:pointer; font:600 12px/1.2 ui-monospace,monospace; transition:.15s ease; }
.fixture-choices button:hover { border-color:var(--accent); color:var(--accent); }
.fixture-choices button.active { color:#fff; background:var(--accent); border-color:var(--accent); }
.comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); gap:14px; overflow-x:auto; padding-bottom:2px; }
.comparison-pane { min-width:0; overflow:hidden; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-md); }
.comparison-pane .viewer-bar { justify-content:space-between; }
.comparison-pane .viewer-bar strong { color:var(--ink); font-size:11px; }
.comparison-pane iframe { display:block; width:100%; height:620px; border:0; background:#fff; }
.live-metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:14px; }
.live-metrics div { padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-muted); }
.live-metrics strong,.live-metrics span { display:block; }
.live-metrics strong { color:var(--accent); font:700 18px/1.2 ui-monospace,monospace; }
.live-metrics span { margin-top:5px; color:var(--muted); font-size:11px; }
.demo-status { margin:12px 2px 0; color:var(--muted); font:12px/1.4 ui-monospace,monospace; }
.demo-status.ready::before { content:"● "; color:#168554; }.demo-status.loading::before { content:"● "; color:#d97706; }.demo-status.error { color:#b42318; }

.semantic-hero { padding-bottom:70px; }
.semantic-hero .lede { max-width:820px; }
.intent-comparison { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }
.intent-card { padding:26px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-muted); }
.intent-card.visual-intent { border-color:#bfdbfe; background:#eff6ff; }
.intent-card.semantic-intent { border-color:#fed7aa; background:#fff7ed; }
.intent-card h3 { margin:13px 0 8px; font-size:20px; }
.intent-card p { color:var(--ink-soft); }
.intent-card ul { margin:16px 0 0; padding-left:20px; color:var(--ink-soft); }
.intent-card li + li { margin-top:5px; }
.semantic-principle { margin-top:18px; padding:18px 20px; border-left:4px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--ink-soft); background:#f8fafc; }
.semantic-pipeline { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:15px; align-items:center; margin:26px 0; }
.semantic-pipeline div { min-height:120px; display:flex; flex-direction:column; justify-content:center; padding:20px; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; }
.semantic-pipeline b { color:var(--accent); font:700 12px/1 ui-monospace,monospace; }
.semantic-pipeline strong { margin-top:10px; font-size:18px; }
.semantic-pipeline span { margin-top:6px; color:var(--muted); font-size:12px; }
.semantic-pipeline > i { color:var(--accent); font-style:normal; font-size:25px; }
.semantic-uses article.benefit-wide { grid-column:auto; }
.semantic-comparison iframe { height:680px; }
.semantic-metrics { grid-template-columns:repeat(4,1fr); }

.visual-demo { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:22px; align-items:stretch; }
.document-shell { overflow:hidden; border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:#dfe5eb; box-shadow:var(--shadow-md); }
.viewer-bar { display:flex; align-items:center; gap:7px; height:38px; padding:0 13px; color:#64748b; background:#f8fafc; border-bottom:1px solid #cbd5e1; font:11px/1 ui-monospace,monospace; }
.viewer-bar i { width:8px; height:8px; border-radius:50%; background:#cbd5e1; }.viewer-bar span { margin-left:6px; }
.reconstructed-page { position:relative; width:min(82%,560px); aspect-ratio:1.414/1; margin:30px auto; padding:8% 8% 7%; overflow:hidden; color:#172033; background:#fff; box-shadow:0 9px 30px rgba(15,23,42,.18); font-size:clamp(7px,1.15vw,12px); }
.invoice-mark { color:#1746a2; font-size:1.2em; font-weight:900; line-height:.9; letter-spacing:.08em; }.invoice-mark small { font-size:.47em; letter-spacing:.22em; }
.invoice-title { position:absolute; top:8%; right:8%; font-size:3em; font-weight:300; letter-spacing:.12em; }
.invoice-meta { display:flex; gap:20px; margin-top:7%; color:#64748b; font: .82em/1.2 ui-monospace,monospace; }.invoice-rule { height:3px; margin:4% 0; background:#1746a2; }
.invoice-address { line-height:1.55; }.invoice-address b { text-transform:uppercase; color:#1746a2; letter-spacing:.1em; font-size:.82em; }
.invoice-items { display:grid; grid-template-columns:1fr 34px 70px; gap:7px 10px; margin-top:6%; padding-top:3%; border-top:1px solid #cbd5e1; }.invoice-items > :nth-child(3n+2),.invoice-items > :nth-child(3n+3){text-align:right}.invoice-items b{font-size:.72em;letter-spacing:.08em;color:#64748b}
.invoice-total { display:flex; justify-content:flex-end; gap:22px; margin-top:5%; padding-top:3%; border-top:1px solid #cbd5e1; font-size:1.25em; }.invoice-stamp { position:absolute; right:8%; bottom:8%; padding:.3em .7em; transform:rotate(-7deg); color:#168554; border:3px double #168554; font-size:1.5em; font-weight:900; letter-spacing:.12em; opacity:.72; }
.parity-panel { display:grid; gap:10px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-muted); }.parity-panel div{padding:15px;border:1px solid var(--line);border-radius:var(--radius-sm);background:white}.parity-panel strong,.parity-panel span{display:block}.parity-panel strong{color:var(--accent);font-size:28px;line-height:1}.parity-panel span{margin-top:6px;color:var(--muted);font-size:12px}.parity-panel p{color:var(--ink-soft);font-size:14px}

.speed-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:20px; }.timeline-card,.jump-card{padding:24px;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.9)}
.timeline-label{display:flex;justify-content:space-between;margin:12px 0 6px;font-size:13px}.timeline-label b{color:var(--accent)}.timeline-label.faint{color:var(--muted)}.timeline{height:9px;overflow:hidden;border-radius:99px;background:#e2e8f0}.timeline i{display:block;height:100%;border-radius:inherit;background:var(--accent)}.timeline.pending{background:repeating-linear-gradient(90deg,#e2e8f0 0 8px,transparent 8px 13px)}.timeline-card p,.jump-card p{margin:18px 0 0;color:var(--muted);font-size:12.5px}
.jump-card{position:relative;min-height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column}.page-stack,.page-front{width:120px;height:150px;border:1px solid #94a3b8;border-radius:4px;background:white}.page-stack{position:absolute}.page-back{transform:translate(14px,-12px) rotate(4deg)}.page-mid{transform:translate(7px,-6px) rotate(2deg)}.page-front{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:var(--shadow-md)}.page-front b{font-size:31px;color:var(--accent)}.page-front span{font-size:10px;color:var(--muted)}

.memory-chart{display:grid;gap:17px;padding:25px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-muted)}.chart-row{display:grid;grid-template-columns:130px 1fr 90px;gap:14px;align-items:center;font-size:13px}.chart-row i{display:block;width:var(--value);min-width:5px;height:28px;border-radius:4px;background:#94a3b8}.chart-row.reader i{background:var(--accent)}.chart-row.reader b{color:var(--accent)}.chart-row b{text-align:right}.memory-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.memory-stats div{padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm)}.memory-stats strong,.memory-stats span{display:block}.memory-stats strong{font-size:20px;color:var(--accent)}.memory-stats span{margin-top:5px;color:var(--muted);font-size:12px}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.profile-grid article{padding:24px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-muted)}.profile-grid h3{margin:13px 0 7px;font-size:19px}.profile-grid p{margin:0;color:var(--ink-soft)}.profile-tag{display:inline-block;padding:4px 9px;border-radius:99px;color:#1746a2;background:#dbeafe;font:700 11px/1.4 ui-monospace,monospace}.profile-tag.semantic{color:#7c3d12;background:#ffedd5}.install-block>pre{max-width:620px}
@media(max-width:900px){.comparison-pane iframe{height:500px}.live-metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.visual-demo,.speed-grid,.profile-grid,.reader-benefits,.intent-comparison{grid-template-columns:1fr}.reader-benefits article.benefit-wide{grid-column:auto}.semantic-pipeline{grid-template-columns:1fr}.semantic-pipeline>i{transform:rotate(90deg);text-align:center}.comparison-pane iframe{height:460px}.live-metrics{grid-template-columns:repeat(2,1fr)}.memory-stats{grid-template-columns:1fr}.chart-row{grid-template-columns:100px 1fr 76px}.reconstructed-page{width:88%}}