/* The product demonstration continues the hero, before supporting details. */
.hero { padding-top: 56px; padding-bottom: 38px; }
.product-demo { margin: 0; }
.demo-scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-bottom: 20px; }
.demo-scenes button { position: relative; border: 0; border-bottom: 1px solid var(--rule); padding: 17px 0; background: transparent; color: var(--text-muted); text-align: left; font-size: clamp(15px, 1.65vw, 21px); letter-spacing: -.025em; cursor: pointer; }
.demo-scenes button::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(var(--progress, 0)); transform-origin: left; background: var(--activity); }
.demo-scenes button[aria-current=true] { color: var(--fg); }
.demo-surface { overflow: hidden; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); }
#stage { position: relative; height: 560px; overflow: hidden; }
.demo-transport { display: flex; justify-content: flex-end; gap: 4px; padding-top: 10px; }
.demo-transport button { width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; }
.demo-transport button:hover { background: var(--surface); color: var(--fg); }
.pitch { padding-top: 48px; }
@media (max-width: 700px) {
  .hero { padding-top: 38px; padding-bottom: 28px; }
  .demo-scenes { gap: 14px; margin-bottom: 14px; }
  .demo-scenes button { font-size: 16px; line-height: 1.35; }
}
@media (max-width: 600px) {
  .demo-scenes { gap: 10px; }
  .demo-scenes button { max-width: 100%; font-size: clamp(11px, 3.3vw, 15px); }
  #stage { height: 780px; }
  .product-demo[data-scene="0"] #stage { height: 560px; }
}


/* The demonstration leads directly to the existing explanation banner. */
.how-banner { margin-top: 32px; }

.hero-action { max-width: 320px; }
.hero-action .setup-details { margin-top: 12px; display: grid; gap: 4px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.setup-details p { margin: 0; }

.hero-bottom { align-items: flex-start; }

@media(max-width:600px){ .product-demo[data-scene="4"] #stage { height:710px; } }

/* Long answers should read as comfortably as the introduction. */
.faq-item > summary { font-size: 20px; }
.faq-answer { max-width: 760px; font-size: 18px; line-height: 1.7; }
@media(max-width:700px) {
  .faq-item > summary { font-size: 18px; }
  .faq-answer { font-size: 17px; line-height: 1.65; }
}

@media(max-width:600px){ .product-demo[data-scene="1"] #stage, .product-demo[data-scene="2"] #stage { height:480px; } }

.hero-action .cta { width:100%; }
.hero-action .setup-details { gap:2px; margin-top:10px; text-align:center; }