/* Contact page "Schedule a demo" (template-parts/page-schedule.php). Ported from the artifact's pages.css (.pg-demo*, .pg-phone*, .pg-req),
   scoped under .gx; rem converted to px for legacy pages. Plain CSS on purpose. The form itself is the HubSpot embed (its own styles). */
.gx .pg-contactpage {
  position: relative;
  background: var(--color-bg);
}
.gx .pg-demo {padding-block:var(--space-12) var(--section-y)}
.gx .pg-demo__grid {display:grid;gap:var(--space-10)}
@media (min-width:1024px) {
  .gx .pg-demo__grid {grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16);align-items:start}
  .gx .pg-demo__intro {position:sticky;top:calc(var(--header-h) + var(--space-8))}
}
.gx .pg-demo__title {margin-top:0;font-size:var(--text-display);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}
.gx .pg-demo__lead {margin-top:var(--space-5);max-width:var(--measure-copy);color:var(--color-text-subtle);font-size:var(--text-lg)}
.gx .pg-demo__lead p {margin:0}
.gx .pg-demo__list {display:grid;gap:var(--space-3);margin:var(--space-5) 0 0;padding:0;list-style:none}
.gx .pg-demo__list li {display:flex;gap:var(--space-3);color:var(--color-text)}
.gx .pg-demo__list svg {flex:none;width:var(--space-5);height:var(--space-5);margin-top:var(--space-0-5);color:var(--color-accent)}
.gx .pg-demo__book {display:grid;justify-items:start;gap:var(--space-4);margin-top:var(--space-10);padding:var(--space-6);border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-raised)}
.gx .pg-demo__book-t {margin:0;font-size:var(--text-lg);font-weight:var(--weight-medium)}
.gx .pg-demo__book-btn svg {width:var(--space-4);height:var(--space-4);margin-left:var(--space-2)}
.gx .pg-demo__card {padding:var(--space-4) 0;border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-bg-raised)}
/* the HubSpot form already has its own inner padding: no side padding on phones, so the fields get the full width */
@media (min-width:768px) {
  .gx .pg-demo__card {padding:var(--space-10)}
}