/* cgpt/section-heading — Figma "Top Section".
   Two 550 columns, 40px apart; badge Geist Mono 14/20/600 in a 20-radius pill;
   heading 44/500; description 20/400 #565656. */

.cgpt-shead {
  display: grid;
  gap: 40px;
  align-items: start;
}

/* Two equal columns is what the design shows. Stacked puts the description
   under the heading, for narrower sections.

   Three grid items on two rows: the badge alone on the first, then the title
   and the description beside each other on the second. That is what keeps the
   two aligned no matter how long the title runs.

   It replaces bottom-alignment. Figma groups the badge and title together in
   the left column and sets counterAxisAlignItems=MAX on "Top Section"
   (1140x162), so the previous rule ended both columns on the same line. That
   only reads correctly while the title is the taller of the two — a short
   description floated down to meet the title's last line instead of starting
   with it, and a longer title dragged it further. Splitting the badge onto its
   own row gives the title and the description a shared top edge, which is the
   relationship the design is actually showing at its own content lengths. */
@media (min-width: 768px) {
  .cgpt-shead--split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    /* 20 down, matching __lead's badge-to-title gap; 40 across, as before. */
    gap: 20px 40px;
  }

  /* Dissolved so the badge and title become grid items in their own right
     rather than a single column. The element keeps its flex rules for every
     other layout. */
  .cgpt-shead--split .cgpt-shead__lead { display: contents; }

  .cgpt-shead--split .cgpt-shead__badge {
    grid-column: 1 / -1;
    /* A grid item stretches; the pill has to hug its text. */
    justify-self: start;
  }

  .cgpt-shead--split .cgpt-shead__title { grid-column: 1; }

  /* Sat on the bottom edge, level with the last line of the title — which is
     counterAxisAlignItems=MAX on Figma's Top Section (17:8554). Aligning the
     tops instead left a short description floating against a two-line heading,
     and the 12px nudge that used to compensate is no longer needed. Desktop
     only: stacked on phones there is nothing to sit level with. */
  .cgpt-shead--split .cgpt-shead__desc {
    grid-column: 2;
    align-self: end;
  }

  .cgpt-shead--split .cgpt-shead__action {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
/* Lead Generation (4226:37850): two 540 columns 60 apart, each centred. */
.cgpt-shead--split-centered {
  grid-template-columns: 1fr;
  gap: 20px;
  justify-items: center;
  text-align: center;
}

.cgpt-shead--split-centered .cgpt-shead__lead { align-items: center; }

@media (min-width: 768px) {
  .cgpt-shead--split-centered {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
}

/* 840 wide and left-aligned, which is what Figma gives every stacked head —
   53:2338 and 53:2978 both sit at 840 inside a 1320 band, so the title wraps
   at a readable measure instead of running the width of the section. */
.cgpt-shead--stacked { grid-template-columns: 1fr; gap: 20px; max-inline-size: 840px; }

/* Centred on phones. The lead is a flex column pinned to flex-start, so the
   badge and title both need the axis flipping, not just text-align — and the
   description is a sibling rather than part of the lead, so it is brought
   along explicitly or a stacked heading that has one would sit left under a
   centred title. */
@media (max-width: 767.98px) {
  .cgpt-shead--stacked .cgpt-shead__lead { align-items: center; text-align: center; }
  .cgpt-shead--stacked .cgpt-shead__desc { text-align: center; }
}

/* Centred: everything in one column, 840 wide, stacked at 20 with the button
   40px below. From Figma 1400:5158 and 2596:20472. */
.cgpt-shead--centered {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 20px;
  max-inline-size: 840px;
  margin-inline: auto;
  text-align: center;
}
.cgpt-shead--centered .cgpt-shead__lead { align-items: center; gap: 20px; }
.cgpt-shead--centered .cgpt-shead__desc { max-inline-size: 68ch; }

.cgpt-shead--wide { max-inline-size: none; }

.cgpt-shead__lead {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* The eyebrow pill. Geist Mono SemiBold is deliberate — it is the one place
   the design leaves Inter, and it does so on every section label across the
   site (171 of them, all named "Section Header Container" in Figma), not just
   here. Figma node 1957:14974/14975: 8/16 padding, radius 20, #F1F1F1 ground,
   14/20 in #565656. */
.cgpt-shead__badge {
  margin: 0;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: var(--cgpt-surface-tinted);
  font-family: var(--cgpt-font-mono);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  line-height: var(--cgpt-lh-sm);
  color: var(--cgpt-ink-soft);
}

.cgpt-shead__title {
  margin: 0;
  font-weight: 500;
  line-height: var(--cgpt-lh-display);
  color: var(--cgpt-ink);
  text-wrap: balance;
}
/* Heading/L, 44/54. */
.cgpt-shead--display .cgpt-shead__title {
  font-size: var(--wp--preset--font-size--display);
  line-height: 1.2273;
}
.cgpt-shead--heading .cgpt-shead__title { font-size: var(--wp--preset--font-size--heading); }
/* Heading/XL, 54/62. */
.cgpt-shead--display-lg .cgpt-shead__title {
  font-size: var(--wp--preset--font-size--display-lg);
  line-height: 1.1481;
}

/* Heading/M, 40/48. Not a preset: the scale steps 32 then 44 (3612:27021). */
.cgpt-shead--display-md .cgpt-shead__title {
  font-size: 2.5rem;
  line-height: 1.2;
}

.cgpt-shead--display-sm .cgpt-shead__title {
  font-size: var(--wp--preset--font-size--display-sm);
  line-height: 1.25;
}

/* A subheading on its own introduces the row under it: 32 above it, not the
   section's 60 (206:25166); 32 not 40 on a phone (206:25471). */
.cgpt-section__grid .cgpt-shead--display-sm:not(:has(.cgpt-shead__desc, .cgpt-shead__badge)) { margin-block-end: -8px; }

@media (min-width: 768px) {
  .cgpt-section__grid .cgpt-shead--display-sm:not(:has(.cgpt-shead__desc, .cgpt-shead__badge)) { margin-block-end: -28px; }
}

@media (max-width: 767.98px) {
  .cgpt-shead__br { display: none; }
}

/* In the split layout the button belongs under the left column, not stretched
   across both. */
.cgpt-shead__action { justify-self: start; }
/* The other 20 of the 40 above a centred button. */
/* The heading's own gap already sets the button off; a margin on top of it
   pushed it 20 further than the designs draw (Jose, 2026-09-20). */
.cgpt-shead--centered .cgpt-shead__action {
  justify-self: center;
}

.cgpt-shead__desc {
  font-size: var(--wp--preset--font-size--lead);
  line-height: var(--cgpt-lh-lead);
  color: var(--cgpt-ink-soft);
}
.cgpt-shead__desc > :not(:last-child) { margin-block-end: var(--cgpt-space-4); }

/* 18/26 under the title — the customer stories heading (178:11658). */
.cgpt-shead--d18 .cgpt-shead__desc {
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 26px;
}

/* 1:206 */
.cgpt-shead__desc hr {
  inline-size: 120px;
  block-size: 0;
  margin: 0;
  border: 0;
  border-block-start: 1px solid var(--cgpt-rule);
}

/* 3612:28582: 32 either side on desktop, the block's 20 gap plus 12. */
.cgpt-shead__rule {
  inline-size: 120px;
  block-size: 0;
  margin-block: 12px;
  margin-inline: 0;
  border: 0;
  border-block-start: 1px solid var(--cgpt-rule);
}

/* ---------------------------------------------------------------------------
   Mobile — Figma "Home mobile" Top Section (343x220).

   Sizes are per size class, not a single step: the design reduces the same
   44px desktop heading to 20 here and to 32 on the testimonials block, so one
   global rule cannot serve both. `lead` is not used for the 20 because
   typography.css deliberately steps that token down to 18 for body copy.
--------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .cgpt-shead { gap: 24px; }
  .cgpt-shead__lead { gap: 12px; }

  /* 12 apart on a phone — 94:24851. */
  .cgpt-shead--centered { gap: 12px; }

  .cgpt-shead--display .cgpt-shead__title {
    font-size: 1.25rem;
    line-height: var(--cgpt-lh-display);
  }

  .cgpt-shead--display-lg .cgpt-shead__title {
    font-size: var(--wp--preset--font-size--display-sm);
    line-height: 1.1875;
  }

  .cgpt-shead--display-md .cgpt-shead__title {
    font-size: var(--wp--preset--font-size--display-sm);
    line-height: 1.1875;
  }

  .cgpt-shead__desc {
    font-size: var(--wp--preset--font-size--body-lg);
    line-height: var(--cgpt-lh-sm);
  }

  /* Explicit per-section phone sizes. The design reduces the same desktop
     heading to 20, 24, 32 or 40 depending on the section, so this is set on
     the block rather than derived from the desktop size. */
  .cgpt-shead--m20 .cgpt-shead__title { font-size: 1.25rem; line-height: 1.2; }
  .cgpt-shead--m24 .cgpt-shead__title { font-size: 1.5rem;  line-height: 1.2083; }
  .cgpt-shead--m32 .cgpt-shead__title { font-size: 2rem;    line-height: 1.1875; }
  .cgpt-shead--stacked.cgpt-shead--m32 .cgpt-shead__lead { gap: 20px; }
  .cgpt-shead--m40 .cgpt-shead__title { font-size: 2.5rem;  line-height: 1.2; }

  /* Not the `lead` token: that is the one stepped down to 18 just above. */
  .cgpt-shead--md20 .cgpt-shead__desc {
    font-size: 1.25rem;
    line-height: var(--cgpt-lh-lead);
  }
}

.cgpt-shead__placeholder {
  padding: var(--cgpt-space-4);
  border: 1px dashed var(--cgpt-border-strong);
  border-radius: var(--cgpt-radius-md);
  color: var(--cgpt-fg-muted);
}

/* A mark above the heading — 153:12685: the 160 badge, 32 to the title, the
   caption 20 under it at 16/24. */
.cgpt-shead__mark {
  display: block;
  inline-size: auto;
  max-inline-size: 160px;
  block-size: auto;
  max-block-size: 160px;
  margin-block-end: 12px;
}

/* 238:9835 — the award mark over a single line, at 72. */
.cgpt-shead__mark--sm {
  max-inline-size: 72px;
  max-block-size: 72px;
}

/* 3841:28193 — a company wordmark, MIT at 166x44. Capped on the height alone:
   these lockups share an optical height and let the width run, so a square cap
   sizes them by whichever is longest and leaves the short ones tiny. */
.cgpt-shead__mark--logo {
  max-inline-size: min(220px, 100%);
  max-block-size: 44px;
}

.cgpt-shead--marked .cgpt-shead__desc {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
}

@media (max-width: 767.98px) {
  .cgpt-shead__mark { max-inline-size: 120px; max-block-size: 120px; }
  .cgpt-shead__mark--sm { max-inline-size: 72px; max-block-size: 72px; }
  .cgpt-shead__mark--logo { max-inline-size: min(220px, 100%); max-block-size: 44px; }
}

/* 1:506, 1:547 */
@media (max-width: 767.98px) {
  .cgpt-shead--ma-start { justify-items: start; text-align: start; }
  .cgpt-shead--ma-start .cgpt-shead__lead { align-items: flex-start; text-align: start; }
  .cgpt-shead--ma-start .cgpt-shead__desc { text-align: start; }
}

/*
 * A statement under a pill, with no heading over it — Retention's "The story"
 * (193:16051): 24/34 italic in ink, 840 wide, the same on a phone. The words
 * to stress go in <em>, drawn in the accent rather than set in a second italic
 * inside the first. Two classes on the block so it outranks the phone size the
 * description otherwise steps down to.
 */
.cgpt-shead.cgpt-shead--dstatement .cgpt-shead__desc {
  max-inline-size: 840px;
  font-size: var(--wp--preset--font-size--heading);
  font-style: italic;
  line-height: 34px;
  color: var(--cgpt-ink);
}

.cgpt-shead--dstatement .cgpt-shead__desc em {
  font-style: inherit;
  color: var(--cgpt-accent);
}

/*
 * Short points with a check before each (3612:27021, frame 38508): 18/26
 * regular ink, the 24px check 12 from its text. Beside a split heading they
 * sit in a row 24 apart, right-aligned and level with the title's last line;
 * on phones they stack 16 apart under it (193:15472).
 */
.cgpt-shead__checks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cgpt-shead__checks li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 1.125rem;   /* 18/26 at every width, so not the body-lg token */
  font-weight: 400;
  line-height: 1.4444;
  color: var(--cgpt-ink);
}

/* A filled disc carrying the tick, not an outlined check glyph. */
.cgpt-shead__check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background-color: var(--cgpt-success-mark);
  color: #F8FAF9;
}

.cgpt-shead__check-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

@media (min-width: 768px) {
  .cgpt-shead__checks {
    flex-flow: row wrap;
    gap: 16px 24px;
  }

  /* The checks take the width they need (622 of 1140) and the title the
     rest, rather than two equal halves. */
  .cgpt-shead--split:has(.cgpt-shead__checks) { grid-template-columns: minmax(0, 1fr) auto; }

  .cgpt-shead--split .cgpt-shead__checks {
    grid-column: 2;
    align-self: end;
    justify-content: flex-end;
  }
}

/* ---------------------------------------------------------------------------
   A phrase picked out in a section heading — live gradients one in several of
   these ("new value", "expert AI assistants", "3 simple steps"). The gradient
   runs across the whole title and shows only through the marked run, the same
   way the hero does it (hero/style.css), so a phrase early in the line reads
   blue and a later one plum.
--------------------------------------------------------------------------- */
.cgpt-shead__title:has(.cgpt-em) {
  background-image: linear-gradient(115deg, #3A7EEC 0%, #641859 100%);
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still needs
     the prefixed form to clip a background to the text. */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--cgpt-ink);
}

.cgpt-shead__title .cgpt-em {
  color: transparent;
  -webkit-text-fill-color: transparent;
}