/* Home-page video demo: the "Quick demo" from the Precision Floor Marking YouTube channel (D_97XG2Y6yE),
   carried over from the old site's homepage. Uses the app.css tokens; the tape | paint | tape rule under the
   player reads as a finished floor line. */
.demo{scroll-margin-top:72px}
.demo-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.demo-grid{grid-template-columns:1fr}}
.demo-media{min-width:0}
.demo-frame{position:relative;aspect-ratio:16/9;background:var(--stage);border-radius:var(--r) var(--r) 0 0;overflow:hidden;box-shadow:var(--shadow)}
.demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.demo-media .line-rule.long{border-radius:0 0 var(--r) var(--r)}
.demo-copy{display:grid;gap:14px;align-content:center;min-width:0}
.demo-copy .cta-row{margin-top:8px}

/* hero jump link */
.demo-jump{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:0;background:none;border:0;cursor:pointer;color:var(--stage-ink);font:700 1rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--safety);text-decoration-thickness:3px;text-underline-offset:5px}
.demo-jump i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--safety)}
.demo-jump i::before{content:"";margin-left:4px;border-left:13px solid var(--on-safety);border-top:8px solid transparent;border-bottom:8px solid transparent}
.demo-jump:hover i{background:#FFD84A}
.demo-jump:hover{text-decoration-color:var(--tape)}