/* Home page layout details. */

.home-hero { align-items: center; }
.home-demo { min-width: 0; }
.home-demo .code-view { max-height: 260px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.card-cta { border-style: dashed; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checklist li { position: relative; padding: 16px 18px 16px 46px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--dim); }
.checklist li::before {
  content: ""; position: absolute; inset-inline-start: 18px; top: 21px; width: 14px; height: 8px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg);
}
.checklist strong { color: var(--text); font-weight: 600; }

.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative;
  font-family: var(--serif); font-size: 1.12rem; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; inset-inline-end: 20px; top: 50%; transform: translateY(-50%);
  font: 400 22px/1 var(--mono); color: var(--green);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--dim); }

.trailer { margin: 0; }
.trailer-choices {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px;
}
.trailer-choice {
  padding: 6px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--dim); font: inherit; font-size: 14px;
}
.trailer-choice:hover { color: var(--text); }
.trailer-choice[aria-pressed="true"] { background: var(--green); color: #06110a; }
.trailer-choice:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.trailer-video {
  display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--line); border-radius: var(--radius);
}