/* Shared by the artifact-style pages (About, Blog): header block, corner dots, eyebrow/lead and the dark CTA band.
   Ported from the artifact's pages.css, scoped under .gx so it uses the header/footer design tokens and cannot leak into legacy
   pages. rem is converted to px because legacy pages run under a fluid root font-size. Plain CSS on purpose. */
.gx .pg-head__eyebrow {
  color:var(--color-accent-active);
}
.gx .pg-head__lead {
  margin-top:var(--space-4);
  max-width:var(--measure-copy);
  color:var(--color-text-subtle);
  font-size:var(--text-lg);
}
.gx .pg-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.gx .pg-cta {
  padding-block:var(--section-y);
  background:var(--color-inverse-bg);
  color:var(--color-inverse-text);
}
.gx .pg-cta__inner {
  display:grid;
  justify-items:center;
  text-align:center;
}
.gx .pg-cta__title {
  font-size:var(--text-display);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-snug);
  text-wrap:balance;
}
.gx .pg-cta__text {
  margin-top:var(--space-4);
  max-width:var(--measure-copy);
  color:var(--color-inverse-muted);
  font-size:var(--text-lg);
}
.gx .pg-cta .btn--ghost {
  --btn-fg: var(--color-inverse-text);
  --btn-border: var(--charcoal-600);
  --btn-bg-hover: var(--charcoal-700);
  --btn-bg-active: var(--charcoal-600);
}
.gx .pg-cta__actions {
  justify-content:center;
}
.gx .pg-bhead {
  padding-block:var(--space-12) var(--space-10);
}
.gx .pg-bhead__frame {
  position:relative;
  display:grid;
  gap:var(--space-10);
  padding-block:var(--space-12);
  border-block:var(--border-hair) solid var(--color-border);
}
@media (min-width:1024px) {
  .gx .pg-bhead__frame {
    grid-template-columns:minmax(0,1fr) minmax(0,320px);
    gap:var(--space-16);
    align-items:end;
    padding-block:var(--space-16);
  }
}
.gx .pg-dot {
  position:absolute;
  width:var(--space-1);
  height:var(--space-1);
  border-radius:var(--radius-full);
  background:var(--color-text-muted);
  transform:translate(-50%,-50%);
}
.gx .pg-dot--tl {
  left:var(--gutter);
  top:0;
}
.pg-dot--tr {
  left:calc(100% - var(--gutter));
  top:0;
}
.pg-dot--bl {
  left:var(--gutter);
  top:100%;
}
.pg-dot--br {
  left:calc(100% - var(--gutter));
  top:100%;
}
.gx .pg-bhead__title {
  margin-top:var(--space-4);
  font-size:clamp(44px,25.6px + 4.8vw,88px);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-snug);
  text-wrap:balance;
}
.gx .pg-bhead__title span {
  color:var(--color-text-muted);
}
.gx .pg-bhead__frame {
  grid-template-columns:minmax(0,1fr);
}
.gx .pg-chead .pg-bhead__title span {
  color:var(--color-text-muted);
}
@media (min-width:1024px) {
  .gx .pg-chead .pg-bhead__frame {
    grid-template-columns:minmax(0,1fr) auto;
  }
}

/* v196 pressed states (changes doc 12a) */
.gx .pg-add__l:active, .gx .pg-inline:active, .gx .pg-crumbs a:active, .gx .pg-article__tag:active, .gx .post__tag:active, .gx .pg-demo__consent a:active, .gx .pg-step__d a:active, .gx .pg-alist__a:active .pg-alist__t {color:var(--color-text-subtle);text-decoration-color:currentColor}

/* Quotes (orange mark + word reveal) and the centred page head, shared by About and Pricing (design update 2026-11-12) */
.gx .pg-aquote{padding-bottom:var(--section-y)}
.gx .pg-aquote__fig{margin:0;padding:var(--space-10, 40px) var(--space-6);border-radius:var(--radius-xl);background:var(--color-bg-sunken);border:var(--border-hair) solid var(--color-border)}
@media (min-width:1024px){.gx .pg-aquote__fig{padding:var(--space-16)}}
.gx .pg-aquote__q{margin:0;max-width:40ch;font-size:var(--text-2xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-snug);text-wrap:balance}
.gx .pg-aquote__by{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-8)}
.gx .pg-aquote__img{width:var(--space-12);height:var(--space-12);border-radius:var(--radius-lg);object-fit:cover}
.gx .pg-aquote__by>span{display:grid}
.gx .pg-aquote__by>span>span{color:var(--color-text-subtle)}
.gx .pg-bhead--center .pg-bhead__frame{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.gx .pg-bhead--center .pg-head__lead{margin-inline:auto}
.gx .pg-aquote__img--logo{padding:var(--space-2);background:var(--color-inverse-bg);object-fit:contain}
.gx .pg-aquote--narrow .pg-aquote__fig{max-width:960px;margin-inline:auto}
.gx .pg-aquote__fig--mark{display:grid;justify-items:center;text-align:center}
.gx .pg-aquote__mark{width:var(--space-8);height:var(--space-6);margin-bottom:var(--space-6);color:var(--color-accent)}
.gx .pg-aquote__fig--mark .pg-aquote__q{max-width:var(--measure-quote)}
.gx .pg-aquote__fig--mark .pg-aquote__q p{margin:0}
@media (min-width:1024px){.gx .pg-aquote__fig--mark .pg-aquote__q{font-size:var(--text-3xl)}}
.gx .pg-aquote__fig--mark .pg-aquote__by{justify-content:center;text-align:left}