.demo-page header,
.demo-page main,
.demo-page footer { max-width: 1160px; }
.demo-page main { padding-top: 6px; }
.demo-page h1 { max-width: 1000px; font-size: clamp(32px, 4.6vw, 54px); letter-spacing: -1.5px; }
.demo-page h2 { margin: 0 0 18px; }
.demo-page p { max-width: none; }
.demo-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 22px; color: #65758a; font-size: 13px; }
.demo-breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: #7e8ca0; }
.demo-watch .eyebrow { margin-bottom: 0; }
.demo-watch .lead { margin: 0 0 26px; }
.demo-player { margin: 0; }
.demo-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #080b15; border-radius: 18px; box-shadow: 0 18px 48px #152c4317; }
.demo-player video:focus-visible { outline: 3px solid #007aff; outline-offset: 5px; }
.demo-player figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 13px; color: #5a6d84; font-size: 13px; }
.demo-language-note { color: #5a6d84; font-size: 14px; margin: 12px 0 0; }
.demo-details { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, 1fr); gap: 42px; align-items: start; margin-top: 46px; }
.demo-timeline { list-style: none; margin: 0; padding: 0; }
.demo-timeline li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 19px 0; border-top: 1px solid #dfe7f1; }
.demo-time { color: #50667f; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 3px; }
.demo-timeline h3 { font-size: 17px; line-height: 1.5; margin: 0 0 6px; }
.demo-timeline p { font-size: 15px; color: #536880; margin: 0; }
.demo-try { padding: 28px; border: 1px solid #dbe6f3; border-radius: 20px; background: white; }
.demo-try .eyebrow { margin-top: 0; }
.demo-try h2 { font-size: 25px; }
.demo-try p { font-size: 15px; }
.demo-button { display: block; padding: 12px 16px; margin: 22px 0 12px; border-radius: 11px; background: #006bdc; color: white; text-align: center; text-decoration: none; line-height: 1.6; font-size: 15px; font-weight: 600; }
.demo-button:hover { background: #005bc0; }
.demo-price-link { display: block; text-align: center; font-size: 14px; }
.demo-try .demo-small { margin-top: 22px; font-size: 13px; color: #5a6d84; }
.demo-sample { margin-top: 38px; padding: 27px 30px; border-left: 3px solid #86bdf5; border-radius: 0 14px 14px 0; background: #eaf3fe; }
.demo-sample h2 { font-size: 21px; }
.demo-sample p { color: #405a75; font-size: 15px; }
.demo-sample p:last-child { margin-bottom: 0; }
.demo-related { margin-top: 46px; }
.demo-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.demo-guide-grid a { padding: 20px 23px; border: 1px solid #dfe7f1; border-radius: 14px; background: white; text-decoration: none; }
.demo-guide-grid a:hover { border-color: #8bbcf0; }
.demo-guide-grid strong,
.demo-guide-grid span { display: block; }
.demo-guide-grid strong { font-size: 17px; }
.demo-guide-grid span { margin-top: 6px; color: #536880; font-size: 14px; }
.demo-page footer nav { flex-wrap: wrap; }
@media (max-width: 800px) {
  .demo-details { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .demo-try { max-width: 620px; }
}
@media (max-width: 650px) {
  .demo-page header,
  .demo-page main,
  .demo-page footer { padding-right: 18px; padding-left: 18px; }
  .demo-page header { gap: 14px; }
  .demo-page header nav { gap: 14px; }
  .demo-page h1 { letter-spacing: -1px; }
  .demo-watch .lead { font-size: 17px; }
  .demo-player video { border-radius: 10px; }
  .demo-details { margin-top: 32px; }
  .demo-timeline li { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .demo-try { padding: 24px; }
  .demo-sample { padding: 23px; }
  .demo-guide-grid { grid-template-columns: minmax(0, 1fr); }
}