/* Static-site additions: things the canvas runtime did, plus the demo, legal and error pages. */

/* Product windows wait for the script, so they never flash their finished state first. */
.js [data-mock]:not(.is-live) { visibility: hidden; }
.mk__pause[hidden] { display: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 88px; }

/* Simple pages: thanks, privacy, terms, 404 */
.sp { background: var(--canvas); }
.sp-hero { padding: var(--space-10) 0; min-height: 52vh; }
.sp-wrap { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--page-margin); }
.sp-title { max-width: 16ch; font-size: 56px; }
.sp-body { margin: var(--space-5) 0 0; color: var(--ink-secondary); font: 400 17px/28px var(--font-sans); }

/* Demo request */
.dm { background: var(--canvas); padding: var(--space-9) 0 var(--space-10); }
.dm-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--page-margin); }
.dm-text { grid-column: 1 / span 5; padding-top: var(--space-5); }
.dm-title { font-size: 56px; max-width: 12ch; }
.dm-list { margin-top: var(--space-6); max-width: 30em; }
.dm-note { margin: var(--space-5) 0 0; color: var(--ink-muted); font: 400 15px/24px var(--font-sans); }
.dm-form { grid-column: 7 / span 6; display: grid; gap: var(--space-5); padding: var(--space-7); background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-md); }
.dm-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.dm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dm-submit { justify-self: start; border: 0; cursor: pointer; font: inherit; }
.dm-fine { margin: 0; color: var(--ink-muted); }

@media (max-width: 960px) {
  .dm-text, .dm-form { grid-column: 1 / -1; }
  .dm-form { margin-top: var(--space-7); padding: var(--space-6); }
}
@media (max-width: 767px) {
  .dm-title, .sp-title { font-size: 40px; }
  .dm-row { grid-template-columns: 1fr; }
  .sp-hero { padding: var(--space-8) 0; }
}