/* Retained Auto QA trial. The exact HubSpot form sits in a light island; the sample
   transcripts use the established dark-band tile and control recipes. */
.marketing-grid > .auto-qa-demo.section--band { margin-top: 0; padding-block: var(--section-band-pad); }
.auto-qa-demo-layout { display: grid; gap: var(--s-7); align-items: start; }

.auto-qa-demo-intro { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.auto-qa-demo-intro h1 { max-width: 14ch; color: var(--ink); font-size: var(--fs-display); line-height: var(--lh-display); }
.auto-qa-demo-intro p { max-width: 48ch; margin: 0; color: var(--body); font-size: var(--fs-lead-sm); line-height: var(--lh-sub); }
.auto-qa-demo-mark { display: grid; place-items: center; width: var(--sp-72); aspect-ratio: 1; border: 1px solid var(--border-strong); border-radius: var(--r-circle); background: var(--tile); color: var(--ink); }

.auto-qa-demo-form { min-height: 42rem; padding: var(--s-6); color-scheme: light; background: var(--bg); box-shadow: 0 30px 80px -20px rgba(15, 13, 28, .55); }
.auto-qa-demo-form:hover { transform: none; border-color: var(--border); box-shadow: 0 30px 80px -20px rgba(15, 13, 28, .55); }
.auto-qa-demo-form .hs-form-frame { min-height: 36rem; }
.auto-qa-demo-form noscript p { margin: 0; color: var(--body); }

.auto-qa-examples { display: grid; gap: var(--s-5); }
.auto-qa-examples-head { display: grid; gap: var(--s-4); }
.auto-qa-examples-head h2 { color: var(--ink); font-size: var(--fs-subhead); line-height: var(--lh-tight); }
.auto-qa-examples-head ol { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--s-2); color: var(--body); }
.auto-qa-examples-head li::marker { color: var(--ink); font-weight: var(--fw-display); }

.auto-qa-sample-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.auto-qa-sample { height: 100%; padding: var(--s-5); }
.auto-qa-sample:hover { transform: none; box-shadow: none; }
.auto-qa-sample h3 { color: var(--ink); }
.auto-qa-sample p { margin: 0; }
.auto-qa-sample .btn { width: fit-content; margin-top: var(--s-2); }
.auto-qa-sample .btn .icon { flex: none; }
.auto-qa-copy-status { min-height: 1.5em; color: var(--body); }
.auto-qa-disclaimer { max-width: 52ch; margin: 0; color: var(--muted); font-size: var(--fs-small); }

@media (min-width: 960px) {
  .auto-qa-demo-layout { grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); column-gap: var(--s-7); }
  .auto-qa-demo-intro { grid-column: 1 / -1; }
  .auto-qa-demo-form { grid-column: 1; }
  .auto-qa-examples { grid-column: 2; }
}

@media (min-width: 1200px) {
  .auto-qa-demo-layout { column-gap: var(--s-8); }
}