/* Public product tour; loaded only on /demo. The fixtures are independent of
   customer data and all navigation still works when scripting is disabled. */
.demo-tour [hidden] { display:none !important; }
.demo-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin:1.5rem 0 1.8rem; }
.demo-head h1 { font-size:clamp(2.2rem,4vw,3.4rem); letter-spacing:-.045em; line-height:1.12; }
.demo-head h1 span { color:var(--accent-ink); }
.demo-head .lead { max-width:40rem; margin:.9rem 0 0; }
.demo-head > a { flex-shrink:0; margin-bottom:.2rem; }
.demo-disclosure { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; padding:.85rem 1rem; background:var(--accent-wash); border:1px solid var(--accent-line); border-radius:var(--r-sm); color:var(--muted); font-size:.8rem; margin:0 0 3rem; }
.demo-disclosure strong { color:var(--accent-ink); font-size:.78rem; }
.demo-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.demo-flow, .demo-dashboard { scroll-margin-top:110px; }
.demo-section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem; margin:0 0 1.3rem; }
.demo-section-title h2 { font-size:clamp(1.55rem,2.6vw,2rem); letter-spacing:-.035em; }
.demo-section-title .lead { font-size:1rem; margin:.55rem 0 0; }
.demo-switch { display:flex; gap:.3rem; padding:.3rem; border:1px solid var(--line); background:var(--surface-2); border-radius:var(--r-sm); }
.demo-switch a { padding:.6rem 1rem; border-radius:5px; color:var(--muted); font-size:.88rem; font-weight:560; text-align:center; transition:background .18s,color .18s; }
.demo-switch a:hover { text-decoration:none; color:var(--ink); background:var(--surface); }
.demo-switch a[aria-current=true] { background:var(--surface); color:var(--accent-ink); box-shadow:0 1px 5px #0f172510; }
.demo-scenarios { width:fit-content; max-width:100%; margin-bottom:1.5rem; }
.demo-scene { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4rem); align-items:center; padding:1rem 0; }
.demo-explanation h3 { font-size:1.5rem; letter-spacing:-.025em; line-height:1.3; max-width:23rem; }
.demo-explanation > p { color:var(--muted); font-size:.97rem; margin:.9rem 0; }
.demo-route { list-style:none; margin:1.7rem 0; padding:0; }
.demo-route li { display:flex; align-items:center; position:relative; gap:1rem; padding:.55rem 0; font-size:.9rem; }
.demo-route li:not(:last-child)::after { content:""; position:absolute; left:6px; top:calc(50% + 8px); width:1px; height:calc(100% - 16px); background:var(--accent-line); }
.demo-route-dot { width:13px; height:13px; flex-shrink:0; border:3px solid var(--accent-line); background:var(--accent); border-radius:50%; }
.demo-explanation .demo-result { border-top:1px solid var(--line); padding-top:1rem; font-size:.85rem; font-weight:600; }
.demo-pass { color:var(--pass-ink) !important; }
.demo-challenge-color { color:var(--chal-ink) !important; }
.demo-window { border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; min-width:0; }
.demo-window-bar { display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; border-bottom:1px solid var(--line); color:var(--muted); background:var(--surface-2); font-family:var(--mono); font-size:.7rem; }
.demo-window-bar > span:nth-child(2) { overflow-wrap:anywhere; min-width:0; }
.demo-window-dots { color:var(--line-strong); white-space:nowrap; font-size:.65rem; }
.demo-window-label { margin-left:auto; font-family:var(--sans); color:var(--faint); }
.demo-catalog, .demo-check-screen, .demo-integration-screen { min-height:340px; padding:1.6rem; }
.demo-catalog-heading { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1.2rem; font-size:.7rem; color:var(--muted); }
.demo-catalog-heading > span:first-child { color:var(--ink); font-weight:650; font-size:.93rem; }
.demo-products { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.demo-product-art { height:145px; background:var(--accent-wash); border-radius:6px; display:grid; place-items:center; color:var(--accent-ink); }
.demo-product-art-warm { background:var(--chal-wash); color:var(--chal-ink); }
.demo-product-art svg { width:110px; height:110px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.demo-products h4 { font-weight:550; font-size:.83rem; margin:.7rem 0 .15rem; }
.demo-products p { font-size:.82rem; font-weight:650; }
.demo-window-foot { display:flex; align-items:center; gap:.5rem; font-size:.7rem; color:var(--muted); margin:1.25rem 0 0; }
.demo-check-screen, .demo-integration-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.demo-check-screen > svg { width:58px; height:58px; stroke:var(--accent); fill:var(--accent-wash); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.6rem; }
.demo-check-screen h4, .demo-integration-screen h4 { font-size:1.2rem; font-weight:600; margin:.2rem 0 .4rem; }
.demo-check-screen > p:not(.eyebrow) { color:var(--muted); font-size:.85rem; }
.demo-check-caption { font-size:.7rem; color:var(--faint); margin-top:1.8rem; }
.demo-receipt-icon { background:var(--pass-wash); color:var(--pass-ink); border:1px solid var(--pass-line); width:40px; height:40px; display:grid; place-items:center; border-radius:50%; font-size:1.2rem; margin-bottom:1rem; }
.demo-receipt { display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem; text-align:left; margin:1rem 0; border-top:1px solid var(--line); padding-top:1rem; font-size:.75rem; width:100%; }
.demo-receipt span { color:var(--muted); }
.demo-receipt code { padding:0; background:none; border:0; overflow-wrap:anywhere; }
.demo-integration-screen .helper { font-size:.72rem; }
.demo-boundaries { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:1.5rem; }
.demo-boundaries summary { padding:1rem 0; cursor:pointer; font-size:.9rem; font-weight:550; }
.demo-boundaries > div { padding:0 0 1rem; max-width:52rem; font-size:.88rem; color:var(--muted); }
.demo-boundaries p { margin:0 0 .65rem; }
.demo-feedback { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); }
.demo-dashboard { margin:4.5rem 0 3rem; }
.demo-sample-label { flex-shrink:0; font-size:.72rem; border:1px solid var(--line); padding:.35rem .6rem; border-radius:5px; color:var(--muted); background:var(--surface); }
.demo-console { background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-md); overflow:hidden; }
.demo-console-bar { padding:1.3rem 1.6rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.demo-console-bar > span { font-size:.9rem; }
.demo-console-bar .helper { display:block; margin:.2rem 0 0; font-size:.75rem; }
.demo-periods a { padding:.4rem .8rem; font-size:.77rem; }
.demo-range { padding:1.5rem 1.6rem 1.7rem; }
.demo-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-bottom:1.5rem; }
.demo-stats > div { border-right:1px solid var(--line); }
.demo-stats > div:last-child { border:0; }
.demo-stats span { display:block; font-size:.8rem; font-weight:500; color:var(--muted); }
.demo-stats strong { display:block; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:620; letter-spacing:-.035em; margin:.3rem 0 .05rem; font-variant-numeric:tabular-nums; }
.demo-stats small { font-size:.72rem; color:var(--muted); }
.demo-chart { padding-top:1rem; }
.demo-chart-bars { display:flex; height:155px; gap:5px; border-bottom:1px solid var(--line-strong); background:repeating-linear-gradient(to top,transparent 0,transparent calc(50% - 1px),var(--line) calc(50% - 1px),var(--line) 50%); }
.demo-point { display:block; border:0; padding:0; flex:1; min-width:0; height:100%; background:none; border-radius:3px; cursor:pointer; color:inherit; transition:background .15s; }
.demo-point:disabled { cursor:default; opacity:1; }
.demo-point svg { width:100%; height:100%; display:block; }
.demo-point[data-selected], .demo-point:not(:disabled):hover, .demo-point:focus-visible { background:var(--accent-wash); }
.demo-fill-pass { fill:var(--pass); background:var(--pass); }
.demo-fill-challenge { fill:var(--chal); background:var(--chal); }
.demo-fill-block { fill:var(--block); background:var(--block); }
.demo-fill-passthrough { fill:var(--faint); background:var(--faint); }
.demo-chart-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.7rem; padding-top:.5rem; }
.demo-point-info { min-height:2.8em; font-size:.75rem; color:var(--muted); margin:1rem 0; }
.demo-legend { display:grid; grid-template-columns:1fr 1fr; gap:.1rem 2rem; margin:0; }
.demo-legend > div { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--line); padding:.7rem 0; font-size:.82rem; }
.demo-legend dt { display:flex; align-items:center; gap:.5rem; }
.demo-legend dd { font-variant-numeric:tabular-nums; font-weight:600; margin:0; white-space:nowrap; }
.demo-key { display:inline-block; width:7px; height:7px; border-radius:2px; flex-shrink:0; }
.demo-console-note { font-size:.78rem; color:var(--muted); border:1px solid var(--line); background:var(--surface-2); padding:.8rem; border-radius:5px; margin:1rem 0 0; }
.demo-reading { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin:1.8rem 0 1.2rem; }
.demo-reading h3 { font-size:1rem; }
.demo-reading p { font-size:.87rem; color:var(--muted); margin:.5rem 0 0; }
.demo-next { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:3rem; align-items:center; padding:2rem; background:var(--accent-wash); border:1px solid var(--accent-line); border-radius:var(--r-lg); }
.demo-next h2 { font-size:1.6rem; letter-spacing:-.025em; }
.demo-next p:not(.eyebrow) { color:var(--muted); font-size:.92rem; margin:.7rem 0 0; }
.demo-next-actions { display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; font-size:.84rem; }
.demo-next-actions > .btn { margin-bottom:.2rem; }
.demo-live-link { margin-top:1rem; }
@keyframes demo-arrive { from { opacity:.45; transform:translateY(5px); } to { opacity:1; transform:none; } }
.demo-scene:not([hidden]) .demo-window { animation:demo-arrive .35s ease-out both; }
@media (max-width:760px) {
  .demo-flow, .demo-dashboard { scroll-margin-top:170px; }
  .demo-head { display:block; margin-top:.5rem; }
  .demo-head > a { margin-top:1.2rem; }
  .demo-scene { grid-template-columns:1fr; gap:1rem; }
  .demo-explanation h3 { max-width:none; }
  .demo-route { margin:1rem 0; }
  .demo-section-title { flex-wrap:wrap; }
  .demo-reading { gap:1.5rem; }
  .demo-next { grid-template-columns:1fr; gap:1.5rem; padding:1.5rem; }
}
@media (max-width:480px) {
  .demo-disclosure { margin-bottom:2rem; }
  .demo-scenarios { width:100%; gap:.15rem; }
  .demo-scenarios a { padding:.65rem .45rem; font-size:.75rem; flex:1; display:grid; place-items:center; }
  .demo-window-bar { padding:.7rem; gap:.4rem; font-size:.62rem; }
  .demo-window-dots { display:none; }
  .demo-catalog, .demo-check-screen, .demo-integration-screen { padding:1rem; min-height:310px; }
  .demo-products { gap:.8rem; }
  .demo-product-art { height:130px; }
  .demo-catalog-heading { font-size:.62rem; }
  .demo-catalog-heading > span:first-child { font-size:.8rem; }
  .demo-receipt { grid-template-columns:1fr; text-align:center; }
  .demo-console-bar, .demo-range { padding:1rem; }
  .demo-stats { gap:.8rem; grid-template-columns:1fr; }
  .demo-stats > div { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.2rem .5rem; border-right:0; border-bottom:1px solid var(--line); padding-bottom:.65rem; }
  .demo-stats strong { grid-column:2; grid-row:1 / 3; margin:0; font-size:1.5rem; }
  .demo-stats small { grid-row:2; }
  .demo-chart-bars { height:135px; gap:2px; }
  .demo-point-info { min-height:5em; }
  .demo-legend { grid-template-columns:1fr; }
  .demo-reading { grid-template-columns:1fr; }
  .demo-dashboard { margin-top:3rem; }
}
@media (prefers-reduced-motion:reduce) {
  .demo-tour *, .demo-tour *::before, .demo-tour *::after { animation:none !important; transition:none !important; }
}