/* cgpt/hero — Figma node 1400:4867.
   Title 64/500 #16152A in an 840px column, 44px to a 48px CTA, then the
   product collage at 1320 wide, radius 16. */

.cgpt-hero {
  /* How far the showcase hangs below the section. The clearance under the
     video variant is derived from this, so the two cannot drift apart. */
  --cgpt-hero-overhang: 110px;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  /* No longer clamped to the viewport: the showcase panel below the CTA needs
     the full height, and capping it cropped the panel. */
  /* The clearance for the fixed header plus 40: every Figma hero pads 144 under
     the 44px announcement bar (17:11089, 53:1533, 57:7434, 60:10843). A fixed
     160 landed the content 29px high with the bar showing and 16px low without
     it; tied to --cgpt-header-clear it follows the bar either way. */
  padding: calc(var(--cgpt-header-clear) + 40px) var(--cgpt-gutter) var(--cgpt-space-9);
  /* Not hidden: the showcase overhangs the bottom edge on purpose (below).
     The video background clips itself inside .cgpt-video-bg, so nothing else
     needs this. */
  isolation: isolate;
  text-align: center;

  background-color: var(--cgpt-surface);
}

/*
 * The image sits on its own layer rather than on the section, because Figma
 * puts these washes in at partial strength — 44% on the product pages, 25% on
 * the builder — and a background-image cannot be faded. Painted straight onto
 * the section they came out roughly twice as strong as the design.
 *
 * z-index -1 inside the hero's isolation keeps it behind the copy but still in
 * front of the section's own background-color, so the wash composites over
 * white exactly as it does in Figma.
 */
.cgpt-hero--bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--cgpt-hero-bg, none);
  background-size: cover;
  background-position: center;
  opacity: var(--cgpt-hero-bg-opacity, 1);
  pointer-events: none;
}

.cgpt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/*
 * The same pill the sections use. Figma draws the hero eyebrow with the shared
 * "Section Header Container" component — 17:7851 on RAG API, 53:1542 on
 * Customer Support AI — not as the uppercase micro-type this had before, which
 * was a guess made before the component was identified. Kept in step with
 * .cgpt-shead__badge by matching its declarations exactly.
 */
.cgpt-hero__eyebrow {
  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-hero__sub {
  margin: 0;
  max-inline-size: var(--cgpt-measure);
  font-size: var(--wp--preset--font-size--lead);
  line-height: var(--cgpt-lh-lead);
  color: var(--cgpt-ink-soft);
}

/* 18/26 where the design asks for it (the membership pages, 193:16310). Those
   frames set the heading and copy in an 800 box inside the 840 column, so the
   heading breaks onto two lines and the copy onto two, as drawn — at the
   column's full width both ran a line shorter than the design. */
/* Two classes on the hero so this outranks the side-by-side layout's own
   subheading size (the AI Blueprint hero, 193:14675, is split and sets 18). */
.cgpt-hero.cgpt-hero--sub-18 .cgpt-hero__sub {
  max-inline-size: 800px;
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: var(--cgpt-lh-body-lg);
}

.cgpt-hero--sub-18 .cgpt-hero__title { max-inline-size: 800px; }

/*
 * The closing line and the rule over it (193:16310): paragraph, 24, a 120px
 * hairline, 24, the line. The copy stack is 20 apart, so each side of the rule
 * takes the extra 4 as a margin.
 */
.cgpt-hero__rule {
  display: block;
  inline-size: 120px;
  block-size: 1px;
  margin-block: 4px;
  background-color: var(--cgpt-rule);
}

.cgpt-hero__tagline {
  margin: 0;
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: var(--cgpt-lh-body-lg);
  color: var(--cgpt-accent);
}

/*
 * The brand gradient, clipped to the letters. Sized to the words rather than
 * the row so it spans the line the same way at any length: sampled from the
 * export, the lettering runs from #4C51AB at its left end to #4070D7 at its
 * right. Figma's own handles sit on an 800px box and would put the whole
 * sentence at one end of the ramp. The accent colour above is the fallback
 * where background-clip:text is not supported.
 */
@supports (background-clip: text) {
  .cgpt-hero__tagline > span {
    background-image: linear-gradient(90deg, #4C51AB 0%, #4070D7 100%);
    background-clip: text;
    color: transparent;
  }
}

.cgpt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cgpt-space-3);
}

/*
 * Buttons and the line under them travel together: Figma's 53:1546 stacks them
 * 16 apart inside the hero's 44 rhythm, so they cannot both be children of
 * __inner. The wrapper is always emitted when either exists, which keeps a
 * button-only hero looking exactly as it did.
 */
.cgpt-hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cgpt-hero__note {
  margin: 0;
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink-soft);
}

/* Figma 53:1538 opens Customer Support AI on the soft grey the rest of the
   product pages use for their second band. */
.cgpt-hero--ground-soft { background-color: var(--cgpt-surface-soft); }

/*
 * The Industries heroes open on a wash that runs across the page rather than
 * on a flat colour or a photograph: 56:2579 and 56:3324 both fill left to
 * right from #FBF6F7 to #F0EAFA. Two stops, both nearly white — it reads as a
 * faint warm-to-cool drift behind the headline, not as a coloured band.
 */
.cgpt-hero--bg-gradient {
  background-image: linear-gradient(90deg, #FBF6F7 0%, #F0EAFA 100%);
}

/* The Partner directory hero (149:10411) drifts warm to cool instead:
   #FBF6F7 to #E5EDF3, left to right. */
.cgpt-hero--bg-gradient-cool {
  background-image: linear-gradient(90deg, #FBF6F7 0%, #E5EDF3 100%);
}

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

.cgpt-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  inline-size: 100%;
  max-inline-size: 840px;
}

/* Pill, headline and standfirst, 20 apart — the group the 44 above separates
   from the buttons (53:1541). */
.cgpt-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 20px;
  inline-size: 100%;
}

.cgpt-hero__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--display-xl);
  font-weight: 500;
  line-height: var(--cgpt-lh-display);
  color: var(--cgpt-ink);
  text-wrap: balance;
}

/* The video should stop where the content does rather than run on under it,
   so this variant has no bottom padding. The showcase still hangs
   --cgpt-hero-overhang below the section, so the same amount is put back as
   margin: that is outside the background, so it reads as white space, and it
   leaves the marquee starting exactly where the image ends instead of 110px
   over the top of it. */
.cgpt-hero--bg-video {
  padding-block-end: 0;
  margin-block-end: var(--cgpt-hero-overhang);
}

/* --- showcase panel ----------------------------------------------------
   1320x714 at radius 16 in the design. The source is 1980x1071 (same 1.85
   ratio), exported rather than built as DOM. */
.cgpt-hero__showcase {
  inline-size: 100%;
  max-inline-size: var(--cgpt-content);
  /* Overhangs into the section below, as the design has it. */
  margin-block-end: calc(var(--cgpt-hero-overhang) * -1);
}

.cgpt-hero__showcase-img {
  inline-size: 100%;
  block-size: auto;
  border-radius: 16px;
  /* Width and height are on the element, so the box is reserved before the
     image decodes — no layout shift against the CLS budget. */
}

/*
 * The panel heroes bring their own corners. Their exports are transparent
 * outside a 12px radius (measured: 23px of inset on a 2x file), where the two
 * collage heroes are a translucent wash with no edge of their own and need the
 * 16 above to have any corner at all. At 16 the clip cut about 4px into the
 * hairline the panel already draws, which is why this matches 12 rather than
 * removing the radius.
 */
.cgpt-hero--split .cgpt-hero__showcase-img { border-radius: 12px; }

/*
 * The centred hero has two sizes, not one. Only the homepage is the 64/1320
 * version the block was first built from; Anti-hallucination, Security and
 * Enterprise Knowledge Search all set 44 over a 1140 panel with 12px corners.
 * Defaults are the homepage's, so nothing already published moves unless the
 * page says so.
 */
.cgpt-hero--title-display .cgpt-hero__title {
  font-size: var(--wp--preset--font-size--display);
}

/* 40/48 — a customer story (289:28157), under its own mark. */
.cgpt-hero--title-story .cgpt-hero__title {
  font-size: 2.5rem;
  line-height: 1.2;
}

/* 63x72 in the design; the height is what is held, so any mark lands on the
   same line whatever its file (289:28144). */
.cgpt-hero__mark {
  display: block;
  inline-size: auto;
  max-block-size: 72px;
  margin-inline: auto;
}

/* 54/64.8 — the Solutions Partner hero (57:8129), between the two. */
.cgpt-hero--title-display-lg .cgpt-hero__title {
  font-size: var(--wp--preset--font-size--display-lg);
}

/* The link that finishes the note ("Already an affiliate? Log in"). The span
   around it is the GTM wrapper every CTA has; here it must stay inline. */
.cgpt-hero__note-cta { display: inline; }

.cgpt-hero__note-link {
  margin-inline-start: 4px;
  font-weight: 500;
  color: var(--cgpt-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgpt-hero__note-link:hover { color: var(--cgpt-accent); }

.cgpt-hero--showcase-narrow .cgpt-hero__showcase { max-inline-size: 1140px; }
.cgpt-hero--showcase-narrow .cgpt-hero__showcase-img { border-radius: 12px; }

/* 56:2585 keeps the Government panel to the 840 its headline sits in. */
.cgpt-hero--showcase-panel .cgpt-hero__showcase { max-inline-size: 840px; }
.cgpt-hero--showcase-panel .cgpt-hero__showcase-img { border-radius: 12px; }

/*
 * No overhang on this variant: Figma ends the panel 100px above the section's
 * bottom edge and starts the next band there (53:2294 — 144 + 246 + 80 + 585 +
 * 100 = 1155, its exact height).
 *
 * The same is true of every other hero in the file, the homepage included
 * (1400:4867 leaves 36 below its collage, and the marquee begins exactly where
 * the hero ends). The 110px overhang the block applies is not in the design
 * anywhere. It is scoped rather than removed, because changing it moves five
 * pages that have already been signed off — flagged for the client instead.
 */
.cgpt-hero--showcase-narrow,
.cgpt-hero--showcase-panel,
.cgpt-hero--showcase-flat { --cgpt-hero-overhang: 0px; }

/* 60:10852 — How it works runs its diagram the full 1320 but, like every page
   hero, keeps it inside the section with 12px corners. */
.cgpt-hero--showcase-flat .cgpt-hero__showcase-img { border-radius: 12px; }


@media (max-width: 767.98px) {
  /*
   * Figma's phone heroes (53:3801, 53:4344, 53:5166) are all the same shape:
   * the section pads 40 and gaps 40, the copy and the panel sit 32 apart, and
   * the headline drops to 32/38.4 over an 18/26 standfirst 12 below it. The
   * top is the header clearance plus that 40, so the copy clears the bar and
   * the header whether or not the announcement bar is showing — a fixed 112
   * put it a pixel under the header with the bar up.
   */
  .cgpt-hero {
    /* Nothing hangs below on a phone. Only the video variant said so before,
       which left every other showcase overlapping the band underneath it. */
    --cgpt-hero-overhang: 0px;

    gap: 40px;
    padding-block: calc(var(--cgpt-header-clear) + 40px) 40px;
  }

  .cgpt-hero__copy { gap: 12px; }

  .cgpt-hero__title,
  .cgpt-hero--title-display-lg .cgpt-hero__title,
  .cgpt-hero--title-display .cgpt-hero__title,
  .cgpt-hero--split .cgpt-hero__title {
    font-size: 2rem;        /* 32/38.4 */
    line-height: 1.2;
  }

  .cgpt-hero__sub,
  .cgpt-hero--split .cgpt-hero__sub {
    font-size: var(--wp--preset--font-size--body-lg);
    line-height: 1.444;     /* 26/18 */
  }

  /* Mobile has no overhang: Figma's 375 hero (1892:29444) keeps the showcase
     inside the section rather than hanging it below, so the variable goes to
     zero. That removes the negative margin and, with it, the clearance below
     the section, which was only ever there to cancel it out.

     padding-block-end has to be restated. `.cgpt-hero--bg-video` looks like the
     more specific selector but it is a single class, exactly like `.cgpt-hero`,
     so the two tie and source order decides — and the `.cgpt-hero` rule above
     sets padding-block, which would otherwise win here. */
  .cgpt-hero--bg-video { padding-block-end: 0; }
  .cgpt-hero__inner { gap: var(--cgpt-space-6); }
  .cgpt-hero__showcase-img { border-radius: var(--cgpt-radius-md); }
}

/* --- showcase video ------------------------------------------------------ */

/*
 * Figma (17:6874) draws a 1140x515 rounded rectangle here labelled "Animated
 * video" — a placeholder box rather than artwork. The width and the radius are
 * taken from it; the height is not. 1140x515 is 2.21:1, and this video is 16:9
 * like every other, so honouring the box exactly would letterbox real footage
 * inside it. Raised as an open question rather than settled here.
 */
.cgpt-hero__showcase--video {
  max-inline-size: 1140px;
  /* Figma keeps the video inside the hero rather than hanging it into the
     section below, unlike the product-image showcase. */
  margin-block-end: 0;
}

/* --- showcase flush to the bottom edge ----------------------------------- */

/*
 * Figma 17:8533: the builder's showcase meets the bottom of the hero with only
 * its top corners rounded, so the product image reads as sliding up into view.
 * The other product heroes keep 100px of air below a fully rounded panel, which
 * is why this is a setting rather than the default.
 */
.cgpt-hero--flush { padding-block-end: 0; }

.cgpt-hero__showcase--flush { margin-block-end: 0; }

.cgpt-hero__showcase--flush .cgpt-hero__showcase-img {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

@media (max-width: 767.98px) {
  .cgpt-hero__showcase--flush .cgpt-hero__showcase-img {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }
}

/* --- side by side -------------------------------------------------------- */

/*
 * Figma 17:7848 (RAG API) and 17:7312 (Data connectors): the copy sits
 * left-aligned in one column with the image 80 to its right, rather than
 * centred with the image beneath. The section keeps its 144/100 padding.
 *
 * A variant rather than a modifier of the centred hero, because five things
 * move together — direction, alignment, the gap, the title size and where the
 * showcase goes — and the two read as different components in the file.
 */
@media (min-width: 900px) {
  .cgpt-hero--split {
    display: grid;
    /* 590 and 470 either side of an 80 gutter, which is 1140 — the content box
       Figma's hero pads to (150 each side of 1440). The padding is expressed as
       "whatever centres 1140", so it collapses to the normal gutter on anything
       narrower instead of overflowing. */
    grid-template-columns: 590fr 470fr;
    gap: 80px;
    padding-inline: max(var(--cgpt-gutter), calc((100% - 1140px) / 2));
    place-items: center stretch;
    text-align: start;
  }

  .cgpt-hero--split .cgpt-hero__inner {
    align-items: flex-start;
    text-align: start;
  }

  .cgpt-hero--split .cgpt-hero__actions { justify-content: flex-start; }
  .cgpt-hero--split .cgpt-hero__cta-group { align-items: flex-start; }

  /* The showcase is the second column here, not a band below the copy, so the
     overhang and the content-width cap both go. */
  .cgpt-hero--split .cgpt-hero__showcase {
    max-inline-size: none;
    margin-block-end: 0;
  }

  /* 44/52.8, against the centred hero's larger display size — the copy shares
     the row with an image and has half the width to do it in. */
  .cgpt-hero--split .cgpt-hero__title {
    font-size: var(--wp--preset--font-size--display);
    line-height: var(--cgpt-lh-display);
  }

  .cgpt-hero--split .cgpt-hero__sub {
    font-size: var(--wp--preset--font-size--lead);
    line-height: 1.4;
  }
}

/*
 * The two split heroes are not the same shape. RAG API (17:7848) gives the
 * image 470 of a 1140 row; Data connectors (17:7312) gives it 661 of 1320 and
 * pads the section 60 rather than 150. Both are expressed as the content box
 * they centre, so each falls back to the plain gutter on narrow screens.
 */
@media (min-width: 900px) {
  .cgpt-hero--split-wide {
    grid-template-columns: 579fr 661fr;
    padding-inline: max(var(--cgpt-gutter), calc((100% - 1320px) / 2));
  }

  /* Customer Support AI (53:1539) and All Use Cases (53:3565): 510 of copy to
     a 550 image. Same 1140 row as narrow, so only the ratio changes. */
  .cgpt-hero--split-balanced { grid-template-columns: 510fr 550fr; }

  /* Website AI Chatbot (53:2919) hands the image most of the row — 614 to 446
     — because the panel it holds is a tall two-turn conversation. */
  .cgpt-hero--split-showcase { grid-template-columns: 446fr 614fr; }

  /* Live demo (60:11234): the copy takes 720 of a 1320 row and the agent
     panel 520 — the only split hero where the words get the larger share. */
  .cgpt-hero--split-copy {
    grid-template-columns: 720fr 520fr;
    padding-inline: max(var(--cgpt-gutter), calc((100% - 1320px) / 2));
  }
}

/* --- inner slot ---------------------------------------------------------- */

/*
 * Holds whatever a hero needs below its buttons and still on its own
 * background — the Security page's certification row. It collapses to nothing
 * when empty, so every other hero is unchanged.
 */
.cgpt-hero__extra {
  inline-size: 100%;
  max-inline-size: var(--cgpt-content);
}

/*
 * ACF always prints its own wrapper inside an InnerBlocks slot, even with
 * nothing in it, so :empty never matches on the slot itself. Left in the flow
 * the empty slot is still a grid item, and on the split hero it claimed the
 * image's column and pushed the showcase onto a second row. Hidden by looking
 * one level in, at the wrapper ACF actually leaves behind.
 */
.cgpt-hero__extra:has(> .acf-innerblocks-container:empty) { display: none; }

/* Figma 17:11097 gives the row 1140, not the hero's full 1320. */
.cgpt-hero__extra > * { max-inline-size: 1140px; margin-inline: auto; }

/*
 * The slot's contents stack, 20 apart (56:2629: the logo strip, then the
 * link under it). A long link label — "Ranked top 7 in GenAI — alongside the
 * biggest names" — is allowed to wrap here: buttons are nowrap everywhere
 * else, and at 375 that one ran straight off the side of the screen.
 */
.cgpt-hero__extra .acf-innerblocks-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* The certification row takes the slot's whole 1140, the width it gets in a
   section on every product page. The flex centring above otherwise shrinks the
   grid to its content — 651 on Security and Trust against the 1140 the same
   row draws on Verify Responses (Jose, 2026-09-24). */
.cgpt-hero__extra .cgpt-fcards--badge { inline-size: 100%; }

/* Bordered cards on the hero's wash take the copy's 840, not the 1140 the
   certification row uses (193:16310: two cards, 409 and 407, 24 apart). */
.cgpt-hero__extra .cgpt-fcards--panel {
  inline-size: 100%;
  max-inline-size: 840px;
}

/* 60 under the button, not the hero's usual 64, and 20 between each card's
   title and its copy (193:16310). */
.cgpt-hero__extra:has(.cgpt-fcards--panel) { margin-block-start: -4px; }
.cgpt-hero__extra .cgpt-fcards--panel .cgpt-fcards__text { gap: 20px; }

/* The card's copy is left-aligned (3086:17418). The hero's own centring is
   inherited otherwise, since a left-aligned card never sets text-align. */
.cgpt-hero__extra .cgpt-fcards--panel.cgpt-fcards--align-start .cgpt-fcards__item { text-align: start; }

.cgpt-hero__extra .cgpt-btn {
  white-space: normal;
  text-wrap: balance;
}


/* --- showcase live chat --------------------------------------------------
 * 60:11234 draws a 520 agent panel beside the demo hero's copy, which is the
 * width .cgpt-hero--split-copy already gives this column.
 *
 * The height is reserved rather than left to the script: embed.js appends a
 * fixed-size box, so without a floor the column is 0 tall until that lands and
 * the whole hero jumps. 650px is what the box actually measures — the agent's
 * own sharing settings carry a fixed height and it wins over the height
 * attribute on the tag, so the 600px the live site asks for is never used.
 */
.cgpt-hero__showcase--chat { margin-block-end: 0; }

.cgpt-hero__chat {
  min-block-size: 650px;
  border-radius: 24px;
  overflow: hidden;
}

/*
 * 100:27542 — the Member Associations hero sets its product panel full width
 * under the copy: a 1320x700 picture at radius 16, with the 846 agent card
 * centred 80 from the top and running off the panel's foot. The live agent
 * takes the card's place, so the panel grows to the agent's own height and
 * only the card's top corners show as rounded.
 */
.cgpt-hero__showcase--backdrop {
  padding: 80px var(--cgpt-gutter) 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cgpt-ink) var(--cgpt-chat-backdrop, none) center / cover no-repeat;
}

.cgpt-hero__showcase--backdrop .cgpt-hero__chat {
  inline-size: 100%;
  max-inline-size: 846px;
  margin-inline: auto;
  border-radius: 22px 22px 0 0;
}

/* The agent runs off the panel's foot, so its bottom is square. embed.js
   writes a 24px bottom radius into the iframe's style attribute, which only
   !important can outrank. */
.cgpt-hero__showcase--backdrop .cgpt-hero__chat iframe {
  /* stylelint-disable-next-line declaration-no-important */
  border-bottom-left-radius: 0 !important;
  /* stylelint-disable-next-line declaration-no-important */
  border-bottom-right-radius: 0 !important;
}

@media (max-width: 767.98px) {
  .cgpt-hero__showcase--backdrop {
    padding-block-start: 24px;
    padding-inline: 12px;
    border-radius: 12px;
  }

  .cgpt-hero__showcase--backdrop .cgpt-hero__chat { border-radius: 16px 16px 0 0; }
}

/* --- showcase example chat ------------------------------------------------
 * The membership use-case pages (customgpt.ai/industries/membership-
 * organizations/use-cases/…) put a sample exchange beside the copy: a white
 * card on a soft shadow, header with the agent's name and a context label, the
 * member's question in the brand purple, the answer in a bordered bubble with
 * its sources as chips, and a search field at the foot. No Figma frame; sized
 * from the live page.
 */
.cgpt-mockchat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cgpt-border);
  border-radius: 12px;
  background-color: var(--cgpt-surface);
  box-shadow: 0 16px 48px rgb(22 21 42 / 10%);
  text-align: start;
}

.cgpt-mockchat__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-block-end: 1px solid var(--cgpt-border);
  font-size: var(--wp--preset--font-size--small);
}

.cgpt-mockchat__avatar {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background-color: var(--cgpt-brand-500);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.cgpt-mockchat__title { font-weight: 600; color: var(--cgpt-ink); }

.cgpt-mockchat__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  color: var(--cgpt-fg-muted);
}

.cgpt-mockchat__status::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background-color: #22c55e;
}

.cgpt-mockchat__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 18px 24px;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}

.cgpt-mockchat__question {
  align-self: flex-end;
  max-inline-size: 85%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px 12px 4px;
  background-color: var(--cgpt-brand-500);
  color: #fff;
}

.cgpt-mockchat__answer {
  max-inline-size: 90%;
}

.cgpt-mockchat__answer p {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cgpt-border);
  border-radius: 12px 12px 12px 4px;
  color: var(--cgpt-ink);
}

.cgpt-mockchat__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.cgpt-mockchat__sources li {
  padding: 4px 10px;
  border: 1px solid var(--cgpt-border);
  border-radius: 6px;
  background-color: var(--cgpt-surface-soft);
  color: var(--cgpt-brand-500);
  font-size: 11px;
}

.cgpt-mockchat__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-block-start: 1px solid var(--cgpt-border);
  color: var(--cgpt-fg-muted);
  font-size: var(--wp--preset--font-size--small);
}

.cgpt-mockchat__send {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 8px;
  background-color: var(--cgpt-brand-500);
}

.cgpt-hero__showcase--mock { margin-block-end: 0; }

/* --- showcase code panel -------------------------------------------------
 * 1085:23392 — the API hero. Where other heroes export a picture of their
 * panel, this one is built as DOM: the whole point is that the code can be
 * selected and copied, and a screenshot of a command cannot be run.
 *
 * The palette is Tomorrow Night, which is what the current site's highlighter
 * uses, so the page reads the same after the swap — but several of its greys
 * were too dark against the panel to pass, so they are lifted here. Measured
 * against the ground: gutter 4.81, comment 6.47, and every other token between
 * 6.65 and 10.26. The gutter is the floor because line numbers are still text
 * on screen, aria-hidden or not.
 */
.cgpt-hero__showcase--code {
  --cgpt-code-bg: #1d1f21;
  --cgpt-code-fg: #c5c8c6;
  --cgpt-code-gutter: #868b91;
  --cgpt-code-comment: #9fa39f;
  --cgpt-code-string: #b5bd68;
  --cgpt-code-keyword: #c3a3ca;
  --cgpt-code-literal: #de935f;
  --cgpt-code-call: #8fb3d9;
  --cgpt-code-number: #de935f;
  --cgpt-code-param: #f0c674;

  display: flex;
  flex-direction: column;
  gap: var(--cgpt-space-2);
  padding: var(--cgpt-space-2);
  background: var(--cgpt-accent-subtle);
  border: 2px solid var(--cgpt-accent);
  border-radius: 22px;
  box-shadow: 0 0 10px rgb(81 58 236 / 25%);
  margin-block-end: 0;
}

.cgpt-code {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--cgpt-code-bg);
  border-radius: 12px;
}

.cgpt-code__pre {
  display: flex;
  gap: var(--cgpt-space-4);
  margin: 0;
  padding: var(--cgpt-space-5);

  /* The panel is a fixed-width medium: it scrolls rather than reflowing, so a
     copied line is the line the developer read. */
  overflow-x: auto;
  font-family: var(--cgpt-font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--cgpt-code-fg);
  tab-size: 4;
}

/* Its own element, aria-hidden, and never selectable — so the numbers stay out
   of the selection and out of the clipboard. */
.cgpt-code__gutter {
  flex: none;
  text-align: right;
  white-space: pre;
  color: var(--cgpt-code-gutter);
  user-select: none;
}

.cgpt-code__code {
  display: block;
  white-space: pre;
  font: inherit;
  color: inherit;
}

.cgpt-tok--comment { color: var(--cgpt-code-comment); }
.cgpt-tok--string { color: var(--cgpt-code-string); }
.cgpt-tok--keyword { color: var(--cgpt-code-keyword); }
.cgpt-tok--literal { color: var(--cgpt-code-literal); }
.cgpt-tok--number { color: var(--cgpt-code-number); }
.cgpt-tok--call { color: var(--cgpt-code-call); }
.cgpt-tok--param { color: var(--cgpt-code-param); }

/* Added by script, so it only exists where it can actually work. */
.cgpt-code__copy {
  position: absolute;
  inset-block-start: var(--cgpt-space-3);
  inset-inline-end: var(--cgpt-space-3);
  padding: 6px 12px;
  font-family: var(--cgpt-font);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--cgpt-code-fg);
  cursor: pointer;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--cgpt-radius-sm);
  transition: background var(--cgpt-duration-fast) var(--cgpt-ease);
}

.cgpt-code__copy:hover {
  background: rgb(255 255 255 / 18%);
}

.cgpt-code__copy:focus-visible {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: var(--cgpt-focus-offset);
}

.cgpt-code__copy.is-done {
  color: var(--cgpt-code-string);
  border-color: currentcolor;
}

@media (prefers-reduced-motion: reduce) {
  .cgpt-code__copy { transition: none; }
}

/* --- heading beside copy ------------------------------------------------
   Figma 100:27532 (Member Associations). A 54 heading in the left half of the
   1140 row, the standfirst paragraphs and buttons in the right half, 40 apart,
   and the product panel full 1320 below, 100 under the row. The panel ends
   where the section does: no overhang, no bottom padding. */
.cgpt-hero--headline { --cgpt-hero-overhang: 0px; }

.cgpt-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 14px;
  inline-size: 100%;
}

@media (min-width: 900px) {
  .cgpt-hero--headline {
    gap: 100px;
    padding-block-end: 0;
    text-align: start;
  }

  .cgpt-hero--headline .cgpt-hero__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 40px;
    max-inline-size: 1140px;
  }

  .cgpt-hero--headline .cgpt-hero__copy,
  .cgpt-hero--headline .cgpt-hero__aside { align-items: flex-start; }

  .cgpt-hero--headline .cgpt-hero__title {
    font-size: var(--wp--preset--font-size--display-lg);
    text-wrap: pretty;
  }

  .cgpt-hero--headline .cgpt-hero__sub { max-inline-size: none; }

  .cgpt-hero--headline .cgpt-hero__cta-group {
    align-items: flex-start;
    margin-block-start: 50px;
  }

  .cgpt-hero--headline .cgpt-hero__actions { justify-content: flex-start; }
}

@media (max-width: 899.98px) {
  .cgpt-hero--headline .cgpt-hero__inner { gap: 32px; }
  .cgpt-hero--headline .cgpt-hero__copy { gap: 0; }
}

/* 100:27147 stacks the two buttons on a phone, one over the other. */
@media (max-width: 767.98px) {
  .cgpt-hero--headline .cgpt-hero__aside { gap: 12px; }
  .cgpt-hero--headline .cgpt-hero__actions {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
  }
  .cgpt-hero--headline .cgpt-hero__actions .cgpt-btn { inline-size: 100%; }
  .cgpt-hero--headline .cgpt-hero__cta-group { margin-block-start: 20px; }
  .cgpt-hero--headline .cgpt-hero__showcase-img { border-radius: 12px; }
}

@media (max-width: 767.98px) {
  /* Both shrink to content in the centred layout, so each has to claim the
     column before the buttons can fill it. */
  .cgpt-hero--stack .cgpt-hero__cta-group,
  .cgpt-hero--stack .cgpt-hero__actions {
    inline-size: 100%;
  }

  .cgpt-hero--stack .cgpt-hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .cgpt-hero--stack .cgpt-hero__actions .cgpt-btn { inline-size: 100%; }

  /* The grid items are the cgpt-cta wrappers, not the buttons inside them. */
  .cgpt-hero--stack-cta-last .cgpt-hero__actions > :has(.cgpt-btn--secondary) { order: 1; }
  .cgpt-hero--stack-cta-first .cgpt-hero__actions > :has(.cgpt-btn--secondary) { order: -1; }
}

/* Tight below (193:15025): the split hero pads 40 under its row where the
   logo band follows. Desktop only; phones keep their own spacing. */
@media (min-width: 900px) {
  .cgpt-hero--split.cgpt-hero--tight { padding-block-end: 40px; }
}

/* The homepage headline runs the full 1140 of the new design (277:21550:
   64/77 over two lines), where every other hero keeps its 840 measure. */
.home .cgpt-hero--centered .cgpt-hero__inner { max-inline-size: 1140px; }

/*
 * Words picked out in the title, written `**like this**` — the Claude
 * benchmark hero (293:34346). Figma runs one gradient across the whole title
 * and shows it only through the marked phrases, so the earlier phrase reads
 * blue and the later one plum. The background lives on the title and the
 * marked runs are the window onto it; everything else keeps the ink fill.
 */
.cgpt-hero__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-hero__title .cgpt-em {
  color: transparent;
  -webkit-text-fill-color: transparent;
}