/*
 * primitives.css -- GlowPilots reusable section-primitive library
 * Implements DESIGN-SYSTEM-CONTRACT.md section 4 (gp-* primitives).
 * Pages compose these instead of inventing per-page layouts.
 *
 * Depends on: tokens.css, base.css, typography.css, components.css
 * Load order: after components.css, before visuals.css and motion.css.
 *
 * RULE: Zero hardcoded hex. All color references resolve to --gp-* tokens
 *       from tokens.css. The only literal color values used here are the
 *       same derived rgba() overlays already established in components.css
 *       (Plasma/Cobalt/Solar at low alpha for meshes and hover halos).
 * Mobile-first. Breakpoints at 640 / 768 / 1024 / 1280.
 * Every primitive: responsive, AA-contrast safe, focus-visible aware,
 * reduced-motion safe (transforms ride --gp-transition-* tokens that zero out).
 */

/* === SHARED PRIMITIVE SCAFFOLD === */
/* Common rhythm shared by every gp-* section: vertical padding matches the
   home blocks (.four-pillars uses --gp-space-9), inner stack, eyebrow + heading
   + lede pattern from the contract markup convention. */

.gp-section {
  padding-block: var(--gp-space-9);
}

.gp-section--sm { padding-block: var(--gp-space-7); }
.gp-section--lg { padding-block: var(--gp-space-10); }

.gp-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-5);
}

.gp-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
  max-width: 56ch;
}

.gp-section__header--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.gp-section__heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h2);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h2);
  color: var(--gp-ink);
  margin: 0;
  max-width: 26ch;
}

.gp-section__lede {
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-slate-700);
  margin: 0;
  max-width: 72ch;
}

@media (max-width: 639px) {
  /* Mobile length tighten: drop section padding from 48px (--gp-space-7) to 32px
     (--gp-space-6), and --sm sections to 24px, across ~12 sections (~280px saved
     page-wide). Also tighten the inner content stack gap from 24px to 16px, which
     closes the large void below intros (e.g. below the "Nine attorneys" paragraph
     before the roster). No content removed; copy density unchanged. */
  .gp-section    { padding-block: var(--gp-space-6); }
  .gp-section--sm { padding-block: var(--gp-space-5); }
  .gp-section--lg { padding-block: var(--gp-space-8); }
  .gp-section__inner { gap: var(--gp-space-4); }
}

/* === GP-HERO === */
/* Split page hero: eyebrow + H1 (outcome) + subhead (qualified WHO) + dual CTA
   + a coded-visual or .gp-image-slot. --media-left / --media-right swap the
   media column. Dark gradient-mesh backdrop hook reuses the home hero recipe
   (--gp-hero-panel / --gp-hero-edge) so it matches the services hub register. */

.gp-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--gp-space-8);
  background-color: var(--gp-bone);
}

.gp-hero__inner {
  position: relative;
  z-index: var(--gp-z-raised);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-7);
  align-items: center;
}

.gp-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-5);
  max-width: 60ch;
}

.gp-hero__eyebrow {
  align-self: flex-start;
}

.gp-hero__heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h1);
  font-weight: var(--gp-weight-bold);
  line-height: var(--gp-leading-h1);
  color: var(--gp-ink);
  margin: 0;
  max-width: 18ch;
}

.gp-hero__subhead {
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-slate-700);
  margin: 0;
  max-width: 54ch;
}

.gp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-space-4);
  margin-top: var(--gp-space-2);
}

.gp-hero__media {
  position: relative;
  width: 100%;
}

/* Gradient-mesh backdrop hook: add .gp-hero--mesh for the dark, premium,
   Plasma-to-Cobalt mesh on --gp-hero-panel (matches services-hub__hero). */
.gp-hero--mesh {
  color: var(--gp-static-white);
  background:
    radial-gradient(60% 80% at 82% 12%, rgba(192, 38, 211, 0.22), transparent 60%),
    radial-gradient(55% 70% at 8% 88%, rgba(11, 95, 255, 0.20), transparent 62%),
    linear-gradient(135deg, var(--gp-static-ink), var(--gp-hero-panel) 70%, var(--gp-hero-edge));
}

.gp-hero--mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--gp-z-base);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.7;
  pointer-events: none;
}

.gp-hero--mesh .gp-hero__heading,
.gp-hero--mesh .gp-hero__subhead {
  color: var(--gp-static-white);
}

.gp-hero--mesh .gp-hero__subhead {
  /* Bone over the dark mesh keeps body text well above 4.5:1. */
  color: var(--gp-bone);
}

/* Media-position modifiers (desktop only; stacked on mobile). */
@media (min-width: 1024px) {
  .gp-hero__inner {
    grid-template-columns: 7fr 5fr;
  }

  .gp-hero--media-left .gp-hero__media  { order: 1; }
  .gp-hero--media-left .gp-hero__body   { order: 2; }
  .gp-hero--media-right .gp-hero__media { order: 2; }
  .gp-hero--media-right .gp-hero__body  { order: 1; }
}

@media (max-width: 639px) {
  .gp-hero__heading { font-size: var(--gp-text-h2); }
  .gp-hero__actions { flex-direction: column; align-items: stretch; }
  .gp-hero__actions .btn { width: 100%; }
}

/* === GP-STAT-STRIP === */
/* 3-4 count-up stats. Numbers carry the count-up hook (data-count-to);
   the markup supplies ledger-safe values. Reduced-motion shows final value. */

.gp-stat-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-5);
  list-style: none;
  margin: 0;
  padding-block: var(--gp-space-7);
  border-top: 1px solid var(--gp-slate-200);
  border-bottom: 1px solid var(--gp-slate-200);
}

.gp-stat-strip__item {
  text-align: center;
  padding: var(--gp-space-4);
}

.gp-stat-strip__number {
  display: block;
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h1);
  font-weight: var(--gp-weight-semibold);
  line-height: 1;
  color: var(--gp-primary);
}

.gp-stat-strip__label {
  display: block;
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
  margin-top: var(--gp-space-2);
  max-width: 28ch;
  margin-inline: auto;
}

.surface--ink .gp-stat-strip__number,
.surface--primary .gp-stat-strip__number,
.gp-hero--mesh .gp-stat-strip__number {
  color: var(--gp-static-white);
}

.surface--ink .gp-stat-strip__label,
.surface--primary .gp-stat-strip__label,
.gp-hero--mesh .gp-stat-strip__label {
  color: var(--gp-bone);
}

@media (min-width: 640px) {
  .gp-stat-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gp-stat-strip__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gp-stat-strip__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* === GP-PROBLEM === */
/* Buyer's felt pain. Calibrated-question labels and the 3-leak pattern.
   Cards use a left Plasma rule to read as named, diagnosed problems. */

.gp-problem {
  background-color: var(--gp-bone);
}

.gp-problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-5);
  list-style: none;
  margin: var(--gp-space-2) 0 0;
  padding: 0;
}

.gp-problem__item {
  background-color: var(--gp-white);
  border: var(--gp-card-border);
  border-left: 4px solid var(--gp-primary);
  border-radius: var(--gp-radius-lg);
  padding: var(--gp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
}

.gp-problem__label {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-primary-700);
  margin: 0;
}

.gp-problem__heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h4);
  color: var(--gp-ink);
  margin: 0;
}

.gp-problem__body {
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
  margin: 0;
}

@media (min-width: 768px) {
  .gp-problem__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* === GP-AUDIENCE === */
/* Two honest columns: who this is for (--for) and who it is not (--not-for). */

.gp-audience__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-5);
  margin: var(--gp-space-2) 0 0;
}

.gp-audience__col {
  border: var(--gp-card-border);
  border-radius: var(--gp-radius-lg);
  padding: var(--gp-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
  background-color: var(--gp-white);
}

.gp-audience__col--for {
  border-top: 4px solid var(--gp-success);
  background-color: var(--gp-bone);
}

.gp-audience__col--not-for {
  border-top: 4px solid var(--gp-slate-700);
}

.gp-audience__col-heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h4);
  color: var(--gp-ink);
  margin: 0;
}

.gp-audience__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
}

.gp-audience__item {
  position: relative;
  padding-left: var(--gp-space-6);
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
}

/* Check glyph for the for-column. */
.gp-audience__col--for .gp-audience__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 16px;
  background-color: var(--gp-success);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Minus glyph for the not-for column. */
.gp-audience__col--not-for .gp-audience__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 16px;
  background-color: var(--gp-slate-700);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

@media (min-width: 768px) {
  .gp-audience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === GP-CARD-GRID === */
/* Capability / service / feature cards with hover lift.
   --2 / --3 / --4 set the desktop column count. Hover lift is the contract's
   signature: --gp-shadow-md + translateY(-4px) on --gp-transition-base. */

.gp-card-grid {
  display: grid;
  /* minmax(0,1fr) not 1fr: a bare 1fr track has an `auto` (min-content) floor, so a
     wide child (a form, a button with long label) can blow the single-column track
     past the viewport at 320px. Clamping the floor to 0 forces children to shrink. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gp-space-5);
  list-style: none;
  margin: var(--gp-space-2) 0 0;
  padding: 0;
}

.gp-card-grid__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
  background-color: var(--gp-card-bg);
  border: var(--gp-card-border);
  border-radius: var(--gp-card-radius);
  padding: var(--gp-space-6);
  min-height: 240px;
  transition:
    border-color var(--gp-transition-base),
    box-shadow    var(--gp-transition-base),
    transform     var(--gp-transition-base);
}

.gp-card-grid__card:hover {
  border-color: var(--gp-primary);
  box-shadow: var(--gp-shadow-md);
  transform: translateY(-4px);
}

/* When the whole card is a link, keep the lift and expose focus state. */
.gp-card-grid__card:focus-within {
  border-color: var(--gp-primary);
}

a.gp-card-grid__card {
  text-decoration: none;
  color: inherit;
}

a.gp-card-grid__card:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

.gp-card-grid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--gp-radius-md);
  background-color: var(--gp-primary-50);
  color: var(--gp-primary-700);
  flex-shrink: 0;
}

.gp-card-grid__icon svg {
  width: 24px;
  height: 24px;
}

.gp-card-grid__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h4);
  color: var(--gp-ink);
  margin: 0;
}

.gp-card-grid__body {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
  margin: 0;
  flex: 1;
}

.gp-card-grid__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  align-self: flex-start;
  margin-top: var(--gp-space-2);
  color: var(--gp-secondary);
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-semibold);
  text-decoration: none;
}

.gp-card-grid__link::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: transform var(--gp-transition-base);
}

.gp-card-grid__card:hover .gp-card-grid__link {
  color: var(--gp-primary);
}

.gp-card-grid__card:hover .gp-card-grid__link::after {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .gp-card-grid--2,
  .gp-card-grid--3,
  .gp-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gp-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gp-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile length tighten: single-column card stacks (e.g. the 9-up attorney roster)
   carry a 24px gap between every card. Trimming to 16px at <=640px reclaims ~8px per
   gap with no content change. Multi-column desktop layouts keep the 24px gap. */
@media (max-width: 640px) {
  .gp-card-grid--3,
  .gp-card-grid--4 { gap: var(--gp-space-4); }
}

/* === GP-SYSTEM === */
/* The connected-stack narrative: search to site to automation to retention to
   attribution. Horizontal flow on desktop, vertical on mobile, with a Plasma
   to Cobalt connector rail behind the nodes. */

.gp-system__flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-5);
  margin: var(--gp-space-4) 0 0;
  list-style: none;
  padding: 0;
}

.gp-system__node {
  position: relative;
  z-index: var(--gp-z-raised);
  background-color: var(--gp-white);
  border: var(--gp-card-border);
  border-radius: var(--gp-radius-lg);
  padding: var(--gp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  transition:
    border-color var(--gp-transition-base),
    box-shadow    var(--gp-transition-base);
}

.gp-system__node:hover {
  border-color: var(--gp-secondary);
  box-shadow: var(--gp-shadow-sm);
}

.gp-system__step {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-caption);
  font-weight: var(--gp-weight-bold);
  color: var(--gp-secondary);
  letter-spacing: var(--gp-tracking-eyebrow);
  text-transform: uppercase;
}

.gp-system__node-title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h5);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  margin: 0;
}

.gp-system__node-body {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
  margin: 0;
}

@media (min-width: 1024px) {
  .gp-system__flow {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
  }

  /* Connector rail behind the nodes (the animated draw-in hook lives in
     motion.css; this is the static premium baseline). */
  .gp-system__flow::before {
    content: "";
    position: absolute;
    z-index: var(--gp-z-base);
    top: var(--gp-space-6);
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--gp-primary), var(--gp-secondary));
    opacity: 0.5;
  }
}

/* === GP-STEPPER === */
/* Numbered process / 4-phase funnel with an animated connector hook.
   Counter-driven numbers match the .four-pillars decimal-leading-zero feel. */

.gp-stepper {
  counter-reset: gp-step;
  list-style: none;
  margin: var(--gp-space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-6);
}

.gp-stepper__item {
  position: relative;
  counter-increment: gp-step;
  padding-left: var(--gp-space-9);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.gp-stepper__item::before {
  content: counter(gp-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-primary-50);
  color: var(--gp-primary-700);
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-bold);
  z-index: var(--gp-z-raised);
}

/* Animated connector hook: vertical rail joining the numbered tokens.
   motion.css can draw this in on reveal; static here for the baseline. */
.gp-stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: calc(-1 * var(--gp-space-6));
  width: 2px;
  background: linear-gradient(180deg, var(--gp-primary), var(--gp-secondary));
  opacity: 0.4;
}

.gp-stepper__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h4);
  color: var(--gp-ink);
  margin: 0;
}

.gp-stepper__body {
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
  margin: 0;
}

@media (min-width: 1024px) {
  /* Horizontal 4-phase funnel layout. */
  .gp-stepper--horizontal {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--gp-space-7);
  }

  .gp-stepper--horizontal .gp-stepper__item {
    padding-left: 0;
    padding-top: var(--gp-space-8);
  }

  .gp-stepper--horizontal .gp-stepper__item::before {
    left: 0;
  }

  .gp-stepper--horizontal .gp-stepper__item:not(:last-child)::after {
    left: 56px;
    top: 27px;
    bottom: auto;
    right: calc(-1 * var(--gp-space-7));
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--gp-primary), var(--gp-secondary));
  }
}

/* === GP-PULLQUOTE === */
/* Editorial pull-quote. Source Serif 4, Plasma (default) or Cobalt accent bar. */

.gp-pullquote {
  position: relative;
  padding: var(--gp-space-6) 0 var(--gp-space-6) var(--gp-space-6);
  border-left: 4px solid var(--gp-primary);
  max-width: 60ch;
  margin-inline: auto;
}

.gp-pullquote--cobalt {
  border-left-color: var(--gp-secondary);
}

.gp-pullquote__text {
  font-family: var(--gp-font-editorial);
  font-size: var(--gp-text-h3);
  font-weight: var(--gp-weight-regular);
  line-height: var(--gp-leading-h3);
  color: var(--gp-ink);
  margin: 0;
}

.gp-pullquote__cite {
  display: block;
  margin-top: var(--gp-space-4);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);
  font-style: normal;
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-slate-700);
}

.surface--ink .gp-pullquote__text,
.surface--primary .gp-pullquote__text {
  color: var(--gp-static-white);
}

@media (min-width: 768px) {
  .gp-pullquote {
    padding-left: var(--gp-space-7);
  }
  .gp-pullquote__text {
    font-size: var(--gp-text-h2);
    line-height: var(--gp-leading-h2);
  }
}

/* === GP-PROOF === */
/* Operator credibility: named entities, compliance posture, honest placeholders.
   A two-part layout: a claim panel and a list of verifiable proof points. */

.gp-proof {
  background-color: var(--gp-bone);
}

.gp-proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-6);
  align-items: start;
  margin-top: var(--gp-space-4);
}

.gp-proof__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
}

.gp-proof__point {
  display: flex;
  gap: var(--gp-space-4);
  align-items: flex-start;
  background-color: var(--gp-white);
  border: var(--gp-card-border);
  border-radius: var(--gp-radius-lg);
  padding: var(--gp-space-5);
  transition: border-color var(--gp-transition-base);
}

.gp-proof__point:hover {
  border-color: var(--gp-slate-700);
}

.gp-proof__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-secondary-50);
  color: var(--gp-secondary);
  flex-shrink: 0;
}

.gp-proof__marker svg {
  width: 20px;
  height: 20px;
}

.gp-proof__point-title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h5);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  margin: 0 0 var(--gp-space-1);
}

.gp-proof__point-body {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
  margin: 0;
}

@media (min-width: 1024px) {
  .gp-proof__grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--gp-space-8);
  }
}

/* === GP-COMPLIANCE === */
/* PHI boundary / BAA-eligible / FTC framing. Risk-aware tone: Ink panel with a
   Cobalt data-surface accent (compliance is a data/tech surface, not Plasma). */

.gp-compliance__panel {
  background-color: var(--gp-ink);
  color: var(--gp-static-white);
  border-radius: var(--gp-radius-xl);
  border-left: 4px solid var(--gp-secondary);
  padding: var(--gp-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-5);
  margin-top: var(--gp-space-4);
}

.gp-compliance__heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h3);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h3);
  color: var(--gp-static-white);
  margin: 0;
}

.gp-compliance__lede {
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
  /* Bone over Ink stays well above 4.5:1. */
  color: var(--gp-bone);
  margin: 0;
  max-width: 64ch;
}

.gp-compliance__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-4);
}

.gp-compliance__item {
  position: relative;
  padding-left: var(--gp-space-6);
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-bone);
}

.gp-compliance__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  background-color: var(--gp-secondary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.gp-compliance__note {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  /* Lighter slate over Ink: A0AEC0 in dark token, AA-safe for supporting note. */
  color: var(--gp-slate-200);
  margin: 0;
}

@media (min-width: 768px) {
  .gp-compliance__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === GP-MATRIX === */
/* Comparison table. No unsupported superiority. Builds on the .data-table
   register but adds a responsive card-collapse on small screens and a
   highlighted GlowPilots column without claiming raw superiority. */

.gp-matrix {
  margin-top: var(--gp-space-4);
}

.gp-matrix__wrapper {
  overflow-x: auto;
  border: 1px solid var(--gp-slate-200);
  border-radius: var(--gp-radius-lg);
}

.gp-matrix__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gp-text-body-sm);
  min-width: 540px;
}

.gp-matrix__table thead th {
  background-color: var(--gp-ink);
  color: var(--gp-static-white);
  padding: var(--gp-space-4);
  text-align: left;
  font-family: var(--gp-font-display);
  font-weight: var(--gp-weight-semibold);
  font-size: var(--gp-text-body-sm);
  vertical-align: bottom;
}

.gp-matrix__table thead th:first-child {
  font-size: var(--gp-text-caption);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-slate-200);
}

/* Highlighted GlowPilots column (presence, not a superiority claim). */
.gp-matrix__col--highlight {
  background-color: var(--gp-primary);
  color: var(--gp-static-white);
}

.gp-matrix__table tbody tr {
  border-top: 1px solid var(--gp-slate-200);
}

.gp-matrix__table tbody th {
  text-align: left;
  padding: var(--gp-space-4);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  background-color: var(--gp-bone);
  vertical-align: top;
}

.gp-matrix__table tbody td {
  padding: var(--gp-space-4);
  color: var(--gp-slate-700);
  vertical-align: top;
  text-align: center;
}

.gp-matrix__table tbody td.gp-matrix__col--highlight {
  background-color: var(--gp-primary-50);
  color: var(--gp-ink);
  font-weight: var(--gp-weight-medium);
}

/* Yes / no marks. */
.gp-matrix__yes,
.gp-matrix__no {
  display: inline-flex;
  width: 22px;
  height: 22px;
}

.gp-matrix__yes {
  color: var(--gp-success);
}

.gp-matrix__no {
  color: var(--gp-slate-700);
}

.gp-matrix__yes svg,
.gp-matrix__no svg {
  width: 100%;
  height: 100%;
}

/* === GP-FAQ === */
/* PAA-sourced Q&A. Details-based accordion + JS enhance. Reuses the styled
   .faq register so it matches the home FAQ exactly, with a gp- alias wrapper
   so page agents can target the primitive without re-styling. */

.gp-faq {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  margin-top: var(--gp-space-4);
}

.gp-faq__item {
  border: 1px solid var(--gp-slate-200);
  border-radius: var(--gp-radius-lg);
  overflow: hidden;
  transition: border-color var(--gp-transition-base);
}

.gp-faq__item[open] {
  border-color: var(--gp-primary);
}

.gp-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gp-space-4);
  padding: var(--gp-space-5);
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  cursor: pointer;
  list-style: none;
  background-color: var(--gp-white);
  min-height: 56px;
  transition:
    background-color var(--gp-transition-base),
    color            var(--gp-transition-base);
}

.gp-faq__question::-webkit-details-marker { display: none; }
.gp-faq__question::marker { display: none; }

.gp-faq__question:hover,
.gp-faq__item[open] .gp-faq__question {
  background-color: var(--gp-primary-50);
  color: var(--gp-primary-700);
}

.gp-faq__question:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: calc(-1 * var(--gp-focus-offset));
}

.gp-faq__icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-slate-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background-color var(--gp-transition-base),
    transform        var(--gp-transition-moderate);
}

.gp-faq__icon::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--gp-slate-700);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background-color var(--gp-transition-base);
}

.gp-faq__item[open] .gp-faq__icon {
  background-color: var(--gp-primary);
  transform: rotate(180deg);
}

.gp-faq__item[open] .gp-faq__icon::after {
  background-color: var(--gp-white);
}

.gp-faq__answer {
  padding: 0 var(--gp-space-5) var(--gp-space-5);
  background-color: var(--gp-white);
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
}

.gp-faq__answer p + p {
  margin-top: var(--gp-space-3);
}

/* === GP-LINKS === */
/* Interlink cluster: keep-reading parent / sibling / child / proof links
   forming the silo graph. Grouped, labeled, with arrow-nudge micro-interaction. */

.gp-links {
  background-color: var(--gp-bone);
}

.gp-links__groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-6);
  margin-top: var(--gp-space-4);
}

.gp-links__group-label {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-slate-700);
  margin: 0 0 var(--gp-space-3);
}

.gp-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.gp-links__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  color: var(--gp-secondary);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-medium);
  text-decoration: none;
  padding-block: var(--gp-space-1);
}

.gp-links__link:hover {
  color: var(--gp-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gp-links__link:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

.gp-links__link::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: transform var(--gp-transition-base);
}

.gp-links__link:hover::before {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .gp-links__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .gp-links__groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* === GP-CTA-BAND === */
/* Action plus outcome CTA with a non-booking next step. Plasma band that
   matches the existing .cta-band rhythm, plus a tertiary next-step row for the
   not-ready visitor (contract section 7 CRO requirement). */

.gp-cta-band {
  background-color: var(--gp-primary);
  padding-block: var(--gp-space-9);
  text-align: center;
}

.gp-cta-band__inner {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gp-container-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gp-space-4);
}

.gp-cta-band__eyebrow {
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-static-white);
  margin: 0;
}

.gp-cta-band__heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h1);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h1);
  color: var(--gp-static-white);
  margin: 0;
}

.gp-cta-band__subhead {
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-static-white);
  margin: 0;
  max-width: 56ch;
}

.gp-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-4);
  margin-top: var(--gp-space-2);
}

/* Non-booking next step for the not-ready visitor. */
.gp-cta-band__next-step {
  font-size: var(--gp-text-body-sm);
  color: var(--gp-static-white);
  margin: 0;
}

.gp-cta-band__next-step a {
  color: var(--gp-static-white);
  font-weight: var(--gp-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gp-cta-band__next-step a:hover {
  color: var(--gp-primary-50);
}

.gp-cta-band__next-step a:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-static-white);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

@media (max-width: 639px) {
  .gp-cta-band { padding-block: var(--gp-space-7); }
  .gp-cta-band__heading { font-size: var(--gp-text-h2); }
  .gp-cta-band__actions { flex-direction: column; width: 100%; }
  .gp-cta-band__actions .btn { width: 100%; }
}

/* === GP-IMAGE-SLOT === */
/* Intentional branded placeholder. Zero layout shift via aspect-ratio; an
   ACF <img> drops in later with width/height so nothing reflows. The default
   state shows a tasteful Plasma-to-Cobalt mesh with a GlowPilots mark, never a
   broken-image box, never stock photography. */

.gp-image-slot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--gp-radius-xl);
  overflow: hidden;
  border: 1px solid var(--gp-slate-200);
  background-color: var(--gp-bone);
}

/* Aspect-ratio modifiers (still zero-shift; each reserves its own box). */
.gp-image-slot--square   { aspect-ratio: 1 / 1; }
.gp-image-slot--portrait { aspect-ratio: 3 / 4; }
.gp-image-slot--wide     { aspect-ratio: 16 / 9; }

/* Real image fills the reserved box with no shift. */
.gp-image-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Branded placeholder layer (shown when no img is present). */
.gp-image-slot__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(70% 90% at 75% 18%, rgba(192, 38, 211, 0.20), transparent 60%),
    radial-gradient(65% 80% at 12% 86%, rgba(11, 95, 255, 0.18), transparent 62%),
    linear-gradient(135deg, var(--gp-hero-panel), var(--gp-hero-edge));
}

.gp-image-slot__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.6;
}

.gp-image-slot__mark {
  position: relative;
  z-index: var(--gp-z-raised);
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h5);
  font-weight: var(--gp-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--gp-static-white);
  opacity: 0.92;
}

/* Optional caption under a slot. */
.gp-image-slot__caption {
  position: absolute;
  left: var(--gp-space-4);
  bottom: var(--gp-space-4);
  z-index: var(--gp-z-raised);
  font-size: var(--gp-text-caption);
  color: var(--gp-static-white);
  background-color: rgba(15, 20, 25, 0.55);
  padding: var(--gp-space-1) var(--gp-space-3);
  border-radius: var(--gp-radius-full);
}