/* /demo/: three apps to try. Copy left, a browser-style screen right; stacks on phones. */
.dmo .section-inner { width: min(var(--site-column, 1180px), 100%); margin-inline: auto; }
.dmo-hero { padding-top: calc(var(--section-y, 64px) + 72px); }
.dmo-hero h1 { max-width: 15ch; margin: 0; font-size: clamp(3rem, 1.2rem + 5.6vw, 6.75rem); line-height: .96; letter-spacing: -.02em; text-wrap: balance; }
.dmo-hero .section-lede { max-width: 48ch; margin-top: 24px; }
.dmo-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.dmo-jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(246, 240, 228, .16); border-radius: 999px; color: rgba(246, 240, 228, .86); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.dmo-jump a::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--cyan, #53d9d4); box-shadow: 0 0 10px var(--cyan, #53d9d4); }
.dmo-jump a:hover { border-color: rgba(83, 217, 212, .6); background: rgba(83, 217, 212, .08); }

.dmo-app { scroll-margin-top: 72px; }
.dmo-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.dmo-app:nth-of-type(odd) .dmo-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.dmo-app:nth-of-type(odd) .dmo-copy { order: 2; }
.dmo-copy h2 { margin: 0; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.dmo-copy .section-lede { margin: 18px 0 0; }
.dmo-points { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; color: rgba(246, 240, 228, .86); }
.dmo-points li { display: flex; gap: 10px; align-items: baseline; }
.dmo-points li::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--cyan, #53d9d4); box-shadow: 0 0 10px var(--cyan, #53d9d4); transform: translateY(-2px); }
.dmo-actions { margin-top: 28px; }
.dmo-actions button.primary-link { cursor: pointer; font-family: inherit; }
.dmo-offer { margin: 18px 0 0; color: var(--gold, #d7b56d); font-size: 14px; font-weight: 600; }

.dmo-screen { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(246, 240, 228, .14); border-radius: 14px; background: #0b0d13; box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.dmo-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid rgba(246, 240, 228, .08); background: #10131b; }
.dmo-bar > span { inline-size: 10px; block-size: 10px; border-radius: 50%; background: rgba(246, 240, 228, .18); }
.dmo-bar strong { margin-left: 8px; color: rgba(246, 240, 228, .7); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.dmo-view { position: relative; aspect-ratio: 16 / 10; background: #07090e; }
.dmo-view img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s ease; }
.dmo-view iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; background: #07090e; opacity: 0; transition: opacity .4s ease; }
.dmo-view iframe.is-ready { opacity: 1; }
.dmo-screen.is-live .dmo-view { aspect-ratio: auto; block-size: clamp(520px, 72vh, 760px); }
.dmo-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 16px; border: 0; border-radius: 999px; background: rgba(7, 9, 14, .86); color: #f6f0e4; font: 800 15px/1 "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif; cursor: pointer; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9), 0 0 0 1px rgba(246, 240, 228, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .25s ease, background-color .25s ease; }
.dmo-play span { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--cyan, #53d9d4); }
.dmo-play span::after { content: ""; margin-left: 3px; border-left: 11px solid #04252a; border-block: 7px solid transparent; }
@media (hover: hover) and (pointer: fine) {
  .dmo-screen:hover .dmo-view img { transform: scale(1.02); filter: brightness(.82); }
  .dmo-play:hover { transform: translate(-50%, -50%) scale(1.04); background: rgba(7, 9, 14, .94); }
}
.dmo-screen.is-live .dmo-play, .dmo-screen.is-live img { display: none; }
.dmo-screen.is-loading .dmo-play { opacity: .6; pointer-events: none; }

.dmo-close { text-align: left; border-top: 1px solid rgba(246, 240, 228, .08); }
.dmo-close h2 { margin: 0; max-width: 18ch; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1.04; letter-spacing: -.03em; }
.dmo-close .hero-actions { margin-top: 28px; }

@media (max-width: 900px) {
  .dmo-grid, .dmo-app:nth-of-type(odd) .dmo-grid { grid-template-columns: minmax(0, 1fr); }
  .dmo-app:nth-of-type(odd) .dmo-copy { order: 0; }
}
@media (max-width: 700px) {
  .dmo-hero { padding-top: calc(var(--section-y, 48px) + 56px); }
  .dmo-hero h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .dmo-actions > * { flex: 1 1 100%; justify-content: center; text-align: center; }
  .dmo-play { min-height: 46px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .dmo-view img, .dmo-view iframe, .dmo-play { transition: none; } }