.demo-hero { padding-block: clamp(4.5rem, 10vw, 8rem); border-bottom: 1px solid var(--border); }
.demo-hero-grid { display: grid; gap: clamp(2.5rem, 7vw, 6rem); }
.demo-hero h1 { max-width: 13ch; font-size: clamp(3rem, 8vw, 6.5rem); }
.demo-hero-copy { max-width: 39rem; align-self: end; color: var(--text-muted); }
.demo-hero-copy p { margin: 0; }
.demo-hero-copy p + p { margin-top: 1rem; }
.demo-hero-copy .demo-lead { color: var(--text-main); font-size: clamp(1.2rem, 2.3vw, 1.55rem); line-height: 1.55; }
.demo-notice { width: fit-content; padding: .65rem .85rem; color: var(--green-dark); border-left: 2px solid var(--brown); background: var(--bg-alt); font: 600 .74rem/1.55 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.demo-notice span { color: var(--brown); }
.demo-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.5rem; }
.demo-hero-actions .button { min-height: 3.25rem; }

.demo-jump-nav { position: sticky; top: 0; z-index: 15; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-main) 94%, transparent); backdrop-filter: blur(12px); }
.demo-jump-nav .container { display: flex; gap: 1rem 1.5rem; align-items: center; min-height: 3.65rem; }
.demo-jump-nav p { flex: 0 0 auto; margin: 0; color: var(--brown); font: 600 .67rem/1.3 var(--font-mono); letter-spacing: .045em; text-transform: uppercase; }
.demo-jump-nav div div { overflow-x: auto; display: flex; gap: .25rem 1.25rem; align-items: center; padding-block: .35rem; scrollbar-width: none; }
.demo-jump-nav div div::-webkit-scrollbar { display: none; }
.demo-jump-nav a { min-height: 2.75rem; display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--text-muted); font-size: .78rem; font-weight: 700; text-underline-offset: .35em; }
.demo-jump-nav a:hover { color: var(--green); }

.demo-section { padding-block: clamp(4.75rem, 9vw, 8rem); border-bottom: 1px solid var(--border); }
.demo-section-heading { display: grid; gap: 1.5rem clamp(2.5rem, 7vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.demo-section-heading .section-label { margin-bottom: 1rem; }
.demo-section-heading h2 { max-width: 16ch; font-size: clamp(2.25rem, 5vw, 4.2rem); }
.demo-section-heading > p { max-width: 38rem; margin: 0; color: var(--text-muted); }
.loading-state { min-height: 12rem; display: grid; place-items: center; padding: 2rem; border: 1px solid var(--border); color: var(--text-muted); font: 500 .78rem/1.5 var(--font-mono); text-align: center; text-transform: uppercase; }
.loading-state.is-error { color: #773a32; border-color: #b88980; background: #f4e7e3; }

.dashboard-section { background: var(--bg-alt); }
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.kpi-card { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--white) 68%, transparent); }
.kpi-card dt { min-height: 2.8em; margin-bottom: 1.1rem; color: var(--text-muted); font: 600 .7rem/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.kpi-card dd { margin: 0; color: var(--green-dark); font-size: clamp(1.65rem, 5vw, 2.85rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.kpi-card dd small { display: block; margin-top: .65rem; color: var(--brown); font: 600 .67rem/1.4 var(--font-mono); letter-spacing: .035em; text-transform: uppercase; }
.dashboard-explainer { display: grid; gap: .65rem; margin: 0 0 clamp(2.5rem, 6vw, 4rem); padding: clamp(1.25rem, 3vw, 2rem); border-left: 3px solid var(--brown); background: color-mix(in srgb, var(--white) 76%, transparent); }
.dashboard-explainer p { max-width: 63rem; margin: 0; color: var(--text-muted); line-height: 1.65; }
.dashboard-explainer .dashboard-explainer-headline { color: var(--text-main); font-size: clamp(1.1rem, 2vw, 1.35rem); }
.dashboard-explainer-headline strong { color: var(--green-dark); }
.dashboard-explainer-result { color: var(--green-dark) !important; font: 600 .72rem/1.55 var(--font-mono); letter-spacing: .025em; text-transform: uppercase; }

.chart-grid { display: grid; gap: 1rem; }
.chart-card { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--border); background: var(--bg-main); }
.chart-card header { margin-bottom: 1.75rem; }
.chart-card h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
.chart-kicker { margin: 0 0 .45rem; color: var(--brown); font: 600 .68rem/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.bar-chart { display: grid; gap: 1rem; }
.bar-row { display: grid; grid-template-columns: minmax(5rem, 7rem) minmax(6rem, 1fr); gap: .75rem 1rem; align-items: center; }
.bar-label { min-width: 0; color: var(--text-muted); font-size: .78rem; line-height: 1.35; }
.bar-track { position: relative; height: 1.55rem; background: #e5e0d7; }
.bar-fill { height: 100%; min-width: 2px; background: var(--green); }
.bar-value { position: absolute; inset: 50% .45rem auto auto; color: var(--text-main); font: 600 .65rem/1 var(--font-mono); transform: translateY(-50%); }
.bar-fill.is-long + .bar-value { color: var(--white); }
.quality-visual { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr; gap: 1.25rem; align-items: center; }
.quality-ring { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0 var(--retained), var(--brown) var(--retained) 100%); }
.quality-ring::before { width: 68%; aspect-ratio: 1; border-radius: 50%; background: var(--bg-main); content: ""; }
.quality-ring-label { position: absolute; color: var(--green-dark); font: 700 .72rem/1.25 var(--font-mono); text-align: center; }
.quality-ring-wrap { position: relative; display: grid; place-items: center; }
.chart-legend { display: grid; gap: .75rem; }
.legend-item { display: grid; grid-template-columns: .7rem 1fr auto; gap: .55rem; align-items: center; color: var(--text-muted); font-size: .75rem; }
.legend-swatch { width: .7rem; height: .7rem; background: var(--green); }
.legend-item:last-child .legend-swatch { background: var(--brown); }
.legend-item strong { color: var(--text-main); font: 600 .7rem/1 var(--font-mono); }

.cleaned-section { background: var(--bg-alt); }
.data-explorer { min-width: 0; }
.table-tools { display: grid; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.table-tools label, .comparison-picker label { display: grid; gap: .45rem; color: var(--text-muted); font: 600 .7rem/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.table-tools input, .table-tools select, .comparison-picker select { width: 100%; min-height: 3rem; padding: .7rem .8rem; color: var(--text-main); border: 1px solid var(--border); border-radius: 0; background: var(--white); font: 500 .9rem/1.3 var(--font-sans); }
.record-count { margin: 0; padding-bottom: .65rem; color: var(--green-dark); font: 600 .72rem/1.4 var(--font-mono); text-transform: uppercase; }
.table-scroll { overflow: auto; border: 1px solid var(--border); background: var(--white); scrollbar-color: var(--brown) var(--bg-alt); }
.table-scroll:focus-visible { outline-offset: 3px; }
.data-explorer table { width: 100%; min-width: 68rem; border-collapse: collapse; font-size: .78rem; line-height: 1.45; }
.data-explorer th { position: sticky; top: 0; z-index: 1; padding: 0; color: var(--white); background: var(--green-dark); font: 600 .65rem/1.3 var(--font-mono); letter-spacing: .035em; text-align: left; text-transform: uppercase; }
.data-explorer th button { width: 100%; min-height: 3rem; display: flex; gap: .4rem; align-items: center; padding: .65rem .75rem; color: inherit; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.data-explorer th button:hover { background: rgba(255,255,255,.08); }
.data-explorer td { max-width: 16rem; padding: .7rem .75rem; border-bottom: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.data-explorer tr:last-child td { border-bottom: 0; }
.data-explorer tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-alt) 55%, transparent); }
.data-explorer tbody tr.is-excluded { background: #f4e7e3; }
.status-pill { display: inline-flex; align-items: center; padding: .25rem .45rem; color: var(--green-dark); background: #e1ebe4; font: 600 .62rem/1.35 var(--font-mono); text-transform: uppercase; }
.status-pill.is-excluded { color: #713a31; background: #efd6d0; }
.pagination { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.pagination button { min-height: 2.75rem; padding: .55rem .9rem; color: var(--green-dark); border: 1px solid var(--border); background: transparent; font: 700 .78rem/1 var(--font-sans); cursor: pointer; }
.pagination button:hover:not(:disabled) { color: var(--white); border-color: var(--green); background: var(--green); }
.pagination button:disabled { opacity: .45; cursor: not-allowed; }
.pagination span { color: var(--text-muted); font: 600 .68rem/1.4 var(--font-mono); text-transform: uppercase; }

.comparison-section { background: var(--dark); color: var(--white); }
.comparison-section .section-label, .comparison-section .chart-kicker { color: #b59a81; }
.comparison-section .demo-section-heading > p { color: #c2c4bd; }
.comparison-picker { max-width: 46rem; margin-bottom: 1.25rem; }
.comparison-picker label { color: #c2c4bd; }
.comparison-picker select { color: var(--text-main); background: var(--bg-main); }
.comparison-grid { display: grid; gap: 1rem; }
.comparison-grid article, .comparison-grid aside { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #4a4d45; }
.comparison-grid article { background: #2d302a; }
.comparison-grid aside { color: #d3d4cf; background: #353831; }
.comparison-grid aside strong { display: block; margin-bottom: .45rem; color: var(--white); }
.comparison-summary { margin: 0; }
.comparison-summary div { display: grid; gap: .25rem; padding-block: .75rem; border-bottom: 1px solid #4b4e46; }
.comparison-summary div:last-child { border-bottom: 0; }
.comparison-summary dt { color: #acaea7; font: 500 .65rem/1.4 var(--font-mono); letter-spacing: .035em; text-transform: uppercase; }
.comparison-summary dd { margin: 0; color: var(--white); font-size: clamp(.95rem, 2vw, 1.08rem); font-weight: 600; overflow-wrap: anywhere; }
.comparison-grid article:nth-child(2) .comparison-summary dd { color: #d7e5dc; }
.comparison-details { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #4b4e46; }
.comparison-details summary { min-height: 2.75rem; width: fit-content; display: inline-flex; gap: .55rem; align-items: center; color: #d0b49b; font-size: .76rem; font-weight: 700; cursor: pointer; }
.comparison-details summary::before { content: "+"; font: 500 1rem/1 var(--font-mono); }
.comparison-details[open] summary::before { content: "−"; }
.comparison-details summary::marker, .comparison-details summary::-webkit-details-marker { display: none; }
.comparison-details .record-detail { margin-top: .75rem; padding-top: .4rem; border-top: 1px solid #464941; }
.record-detail { margin: 0; }
.record-detail div { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: .75rem; padding-block: .55rem; border-bottom: 1px solid #464941; }
.record-detail div:last-child { border-bottom: 0; }
.record-detail dt { color: #acaea7; font: 500 .65rem/1.45 var(--font-mono); text-transform: uppercase; }
.record-detail dd { min-width: 0; margin: 0; color: var(--white); font-size: .8rem; overflow-wrap: anywhere; }
.empty-result { margin: 0; color: #c8a38d; }

.audit-section { background: var(--bg-alt); }
.audit-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.audit-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.audit-counts div { padding: 1.25rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.audit-counts dt { color: var(--text-muted); font: 600 .66rem/1.4 var(--font-mono); text-transform: uppercase; }
.audit-counts dd { margin: .5rem 0 0; color: var(--green-dark); font-size: 1.65rem; font-weight: 600; line-height: 1; }
.audit-rules h3 { margin-bottom: 1.25rem; }
.audit-rules ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.audit-rules li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding-block: 1rem; border-bottom: 1px solid var(--border); }
.audit-rules li > span { color: var(--brown); font: 600 .66rem/1.5 var(--font-mono); }
.audit-rules strong { display: block; font-size: .9rem; }
.audit-rules p { margin: .3rem 0 0; color: var(--text-muted); font-size: .83rem; line-height: 1.6; }

.method-steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.method-steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--border); }
.method-steps li > span { padding-top: .25rem; color: var(--brown); font: 600 .68rem/1 var(--font-mono); }
.method-steps h3 { font-size: 1.05rem; }
.method-steps p { margin: .45rem 0 0; color: var(--text-muted); font-size: .9rem; line-height: 1.65; }

.demo-cta { padding-block: clamp(4.5rem, 9vw, 7rem); color: var(--white); background: var(--green-dark); }
.demo-cta-grid { display: grid; gap: 1.5rem clamp(2.5rem, 6vw, 5rem); align-items: end; }
.demo-cta .section-label { color: #c2a88f; }
.demo-cta h2 { max-width: 16ch; font-size: clamp(2.25rem, 5vw, 4.2rem); }
.demo-cta h2 + p { max-width: 37rem; margin: 1.2rem 0 0; color: #d2d6d0; }
.demo-cta .button { width: fit-content; }

@media (min-width: 43rem) {
  .demo-hero-grid, .demo-section-heading { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-card-wide { grid-column: 1 / -1; }
  .bar-chart-monthly { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; align-items: end; min-height: 14rem; }
  .bar-chart-monthly .bar-row { height: 100%; display: flex; flex-direction: column-reverse; gap: .55rem; align-items: stretch; }
  .bar-chart-monthly .bar-track { height: 11rem; display: flex; align-items: end; }
  .bar-chart-monthly .bar-fill { width: 100% !important; height: var(--bar-size); }
  .bar-chart-monthly .bar-value { inset: auto 0 calc(var(--bar-size) + .35rem); text-align: center; }
  .bar-chart-monthly .bar-fill.is-long + .bar-value { color: var(--text-main); }
  .bar-chart-monthly .bar-label { text-align: center; }
  .table-tools { grid-template-columns: minmax(16rem, 1fr) minmax(12rem, .5fr) auto; }
  .comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-grid aside { grid-column: 1 / -1; }
  .audit-layout { grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr); }
  .method-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--border); }
  .method-steps li { padding: 1.5rem; border-right: 1px solid var(--border); }
  .demo-cta-grid { grid-template-columns: minmax(8rem, .4fr) minmax(0, 1fr) auto; }
}

@media (min-width: 52rem) {
  .demo-jump-nav { top: 4.75rem; }
}

@media (min-width: 64rem) {
  .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-card-wide { grid-column: 1 / -1; }
  .method-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 42.99rem) {
  .demo-hero h1 { font-size: clamp(2.65rem, 14vw, 4.2rem); }
  .kpi-card { padding: 1rem; }
  .kpi-card dt { min-height: 3.8em; font-size: .62rem; }
  .kpi-card dd { font-size: clamp(1.4rem, 8vw, 2.1rem); }
  .quality-visual { grid-template-columns: minmax(6.5rem, 8rem) 1fr; }
  .comparison-grid article, .comparison-grid aside { padding: 1rem; }
  .record-detail div { grid-template-columns: 1fr; gap: .2rem; }
  .demo-jump-nav .container { display: block; padding-top: .5rem; }
  .demo-jump-nav p { margin-bottom: -.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}