/* Playbeam — extras on top of the shared /style.css: steps + text features (no screenshots) */

/* Demo loop. Narrower max-width than Notch Mirror's: this clip is nearly square
   (phone beside the popover) rather than landscape, so it needs reining in. */
.demo { display: flex; justify-content: center; padding: 8px 24px 32px; }

.demo-video {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  background: #000;
}

@media (prefers-color-scheme: dark) {
  .demo-video { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
}

.section-head { text-align: center; padding-top: 56px; }
.section-head h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 36px 0 16px;
}
.step { text-align: center; padding: 8px; }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 18px;
  margin-bottom: 14px;
}
.step h3 { font-size: 19px; margin-bottom: 6px; }
.step p { color: var(--text-muted); font-size: 15px; }

.showcase { padding: 12px 0 8px; }
.shots {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.shots img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

.features {
  padding: 24px 0 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
}
.features .item h3 { font-size: 21px; margin-bottom: 8px; }
.features .item p { color: var(--text-muted); font-size: 16px; }

/* Pricing */
.pricing { text-align: center; padding: 56px 24px 8px; }
.pricing h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; }
.pricing .lede { max-width: 560px; margin: 14px auto 0; color: var(--text-muted); font-size: 17px; }
.pricing .price { margin: 18px 0 0; font-size: 21px; }
.pricing .note { max-width: 560px; margin: 10px auto 0; color: var(--text-muted); font-size: 15px; }

/* FAQ — native <details>, no JS */
.faq { max-width: 720px; margin: 0 auto 32px; text-align: left; }
.faq h3 {
  font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
  margin: 32px 0 8px;
}
.faq h3:first-child { margin-top: 8px; }
.faq details { border-top: 1px solid rgba(128, 128, 128, 0.25); }
.faq details:last-child { border-bottom: 1px solid rgba(128, 128, 128, 0.25); }
.faq summary {
  cursor: pointer; padding: 14px 4px; font-size: 16px; font-weight: 500;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--text-muted); font-weight: 400; flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent); }
.faq details > p,
.faq details > ul { color: var(--text-muted); font-size: 15px; padding: 0 4px 14px; }
.faq details > p + p { padding-top: 0; margin-top: -6px; }
.faq details > ul { margin: 0; padding-left: 22px; }
.faq details > ul li { margin-bottom: 8px; }

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .features { grid-template-columns: 1fr; gap: 24px; }
  .shots { grid-template-columns: 1fr; gap: 16px; max-width: 460px; }
}