/* Demo page: the film in its own frame, chapters, what each demo shows, and a closing call to action.
   v2.css and legal.css supply the tokens, fonts, navigation, buttons and footer. */
.demo {max-width: 1180px; margin: 0 auto; padding: 104px 24px 96px}
.demo h1, .demo h2, .demo h3 {margin: 0; color: var(--v-ink); font-family: LandingSans, var(--v-sys); font-weight: 600}
.demo-head {max-width: 720px; margin: 0 auto 28px; text-align: center}
.demo-head h1 {margin-bottom: 16px; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance}
.demo-head h1 .demo-sub {display: block; margin-top: 10px; color: var(--v-ink-2); font-size: .5em; line-height: 1.2; letter-spacing: -.025em}

/* The film fits the screen with its chapters: widescreen up to the column width, vertical up to the viewport height. */
.reel {margin: 0 auto 96px}
.film-frame {position: relative; margin: 0 auto; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--v-line), 0 30px 60px -30px #0c0d1040}
.film-frame[data-shape=landscape] {width: min(100%, 1080px, max(640px, calc((100svh - 390px) * 16 / 9))); aspect-ratio: 16 / 9}
.film-frame[data-shape=portrait] {width: min(100%, calc((100svh - 96px) * 9 / 16)); aspect-ratio: 9 / 16; border-radius: 26px}
.film-video {display: block; width: 100%; height: 100%; object-fit: cover; background: #fff}
.film-video:fullscreen {object-fit: contain}
.film-play {position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; padding: 0 0 0 5px; border: 0; border-radius: 50%; background: var(--v-blue); color: #fff; box-shadow: 0 0 0 8px #007aff2e, 0 18px 36px -14px #007affcc; transform: translate(-50%, -50%); cursor: pointer; transition: transform .2s var(--v-out), background-color .15s}
.film-play:hover {background: #0a6cf0; transform: translate(-50%, -50%) scale(1.05)}
.film-play:focus-visible {outline: 3px solid color-mix(in srgb, var(--v-blue) 45%, transparent); outline-offset: 3px}
.film-frame.is-started .film-play {display: none}
.film-fallback {display: grid; place-items: center; height: 100%; margin: 0}
.film-fallback a {color: var(--v-blue); text-decoration: underline}

.chapters {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; padding: 0; list-style: none}
.chapters button {display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 12px; border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-card); color: var(--v-ink-2); font: 500 14px/1 LandingSans, var(--v-sys); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s}
.chapters button:hover {background: var(--v-soft)}
.chapters time {color: var(--v-muted); font-variant-numeric: tabular-nums}
.chapters button[aria-current=true] {border-color: var(--v-blue); background: var(--v-blue); color: #fff}
.chapters button[aria-current=true] time {color: #ffffffc0}

/* Three short proof points under the film, then the way into the tap-through demos on the home page. */
.proof {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1080px; margin: 28px auto 0; padding: 0; list-style: none}
.proof li {display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--v-soft); color: var(--v-ink); font: 500 15.5px/1.45 LandingSans, var(--v-sys)}
.proof-ic {display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--v-card); color: var(--v-blue)}
.try-demos {margin: 20px 0 0; text-align: center}
.try-demos a {display: inline-flex; align-items: center; gap: 6px; color: var(--v-blue); font: 600 16px/1 LandingSans, var(--v-sys)}
.try-demos a:hover span {transform: translateX(3px)}
.try-demos span {transition: transform .15s}

.saw {margin: 0 0 96px}
.saw-head {max-width: 640px; margin: 0 0 32px}
.saw-head h2, .more h2, .ahead h2, .demo-cta h2 {font-size: clamp(30px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -.035em}
.saw-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px}
.saw-grid article {padding: 28px; border-radius: 22px; background: var(--v-soft)}
.saw-num {margin: 0 0 14px; color: var(--v-blue); font: 600 12.5px/1 LandingSans, var(--v-sys); letter-spacing: .08em; text-transform: uppercase}
.saw-grid h3 {margin-bottom: 12px; font-size: 21px; line-height: 1.3; letter-spacing: -.015em}
.saw-grid p:last-child {margin: 0; color: var(--v-body); font-size: 16px; line-height: 1.6}

.more {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; margin: 0 0 96px; padding-top: 40px; border-top: 1px solid var(--v-line)}
.more ul {display: grid; gap: 18px; margin: 0; padding: 0; list-style: none}
.more li {color: var(--v-body); font-size: 16.5px; line-height: 1.6}
.more li b {color: var(--v-ink); font-weight: 600}

/* Where we're going: today, next and the goal, read left to right. */
.ahead {margin: 0 0 96px; padding-top: 40px; border-top: 1px solid var(--v-line)}
.ahead h2 {margin-bottom: 28px}
.ahead-steps {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step}
.ahead-steps li {position: relative; padding: 24px; border: 1px solid var(--v-line); border-radius: 22px; background: var(--v-card)}
.ahead-steps li:last-child {border-color: var(--v-ink); background: var(--v-soft)}
.ahead-when {margin: 0 0 12px; color: var(--v-blue); font: 600 12.5px/1 LandingSans, var(--v-sys); letter-spacing: .08em; text-transform: uppercase}
.ahead-steps h3 {margin-bottom: 8px; font-size: 21px; line-height: 1.25; letter-spacing: -.015em}
.ahead-steps li > p:last-child {margin: 0; color: var(--v-body); font-size: 16px; line-height: 1.55}

.demo-cta {max-width: 680px; margin: 0 auto; text-align: center}
.demo-cta > p {margin: 14px 0 0; color: var(--v-body); font-size: 17px; line-height: 1.6}
.demo-cta-row {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0}
.demo-cta .fine {color: var(--v-muted)}
.demo-cta .fine a {color: var(--v-blue)}

@media (max-width: 720px) {
  .demo {padding: 92px 16px 72px}
  .demo-head {margin-bottom: 24px}
  .reel {margin-bottom: 72px}
  .film-frame[data-shape=portrait] {border-radius: 22px}
  /* Chapters scroll sideways on phones instead of wrapping into a block. */
  .chapters {flex-wrap: nowrap; justify-content: flex-start; margin: 14px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none}
  .chapters::-webkit-scrollbar {display: none}
  .chapters button {white-space: nowrap}
  .proof {grid-template-columns: 1fr; gap: 8px; margin-top: 20px}
  .proof li {padding: 12px 14px; font-size: 15px}
  .demo-head h1 .demo-sub {font-size: .58em}
  .saw {margin-bottom: 72px}
  .saw-grid {grid-template-columns: 1fr; gap: 12px}
  .saw-grid article {padding: 22px}
  .saw-grid h3 {font-size: 19px}
  .more {grid-template-columns: 1fr; gap: 22px; margin-bottom: 72px}
  .demo-cta-row .btn {flex: 1 1 100%}
  .ahead {margin-bottom: 72px}
  .ahead-steps {grid-template-columns: 1fr; gap: 10px}
  .ahead-steps li {padding: 20px}
}