.cgpt-section {
  /* Resolved here rather than read straight off the inline style, so the
     mobile rule below can change it — see the note in render.php. */
  --cgpt-section-pt: var(--cgpt-section-pt-lg, var(--cgpt-space-8));
  --cgpt-section-pb: var(--cgpt-section-pb-lg, var(--cgpt-space-8));

  padding-block: var(--cgpt-section-pt) var(--cgpt-section-pb);
  background-color: var(--cgpt-section-bg, transparent);
}

/*
 * Every section in Figma's mobile frames is 40 top and 40 bottom, whatever it
 * is on desktop — measured across the eight sections of `Home mobile`. The
 * authored desktop padding is far too much at 375: it left 176px of empty
 * space above the contact page's first heading.
 *
 * Overriding the variable rather than the padding means the first-section
 * header clearance in header.css, which adds to this same variable, follows
 * automatically.
 */
@media (max-width: 767.98px) {
  .cgpt-section {
    --cgpt-section-pt: 40px;
    --cgpt-section-pb: 40px;
  }

  .cgpt-section.cgpt-section--pt-0 { --cgpt-section-pt: 0px; }
  .cgpt-section.cgpt-section--pb-0 { --cgpt-section-pb: 0px; }
}

/* Paints nothing, so whatever the page sets shows through. */
.cgpt-section--ground-inherit  { --cgpt-section-bg: transparent; }

.cgpt-section--ground-surface  { --cgpt-section-bg: var(--cgpt-surface); }

/* #F8FAF9 — a half-step off white, and distinct from Tinted's #F1F1F1. The
   pricing page alternates it with white down the page, which is why it is a
   ground on the section rather than a setting on the page: no single page
   colour can express "soft, then white, then soft again". */
.cgpt-section--ground-soft     { --cgpt-section-bg: var(--cgpt-surface-soft); }
.cgpt-section--ground-tinted   { --cgpt-section-bg: var(--cgpt-surface-tinted); }
.cgpt-section--ground-invert   { --cgpt-section-bg: var(--wp--preset--color--surface-invert); }

/* Decorative brand wash. Text inside must use --cgpt-fg, never brand-pink,
   which fails contrast on light grounds. */
.cgpt-section--ground-brand {
  --cgpt-section-bg: linear-gradient(
    135deg,
    var(--cgpt-accent) 0%,
    var(--cgpt-magenta) 100%
  );
  background-image: var(--cgpt-section-bg);
}

.cgpt-section__bleed { width: 100%; }

/*
 * Named backdrops. Like `ground`, these are a fixed set rather than an image
 * upload — the artwork and its opacity come from the design, so an author
 * picks a backdrop by name and cannot arrive at an off-design combination.
 *
 * Figma lays the contact hero image in at 44% over the white. A background
 * image cannot carry its own opacity, so the ground goes over it at the
 * inverse 56%, which composites to the same result.
 */
/* Figma 17:7394 washes the connector grid at 32% — stronger than the other two,
   so a thinner veil over it. */
.cgpt-section--backdrop-connectors {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 68%),
      rgb(255 255 255 / 68%)
    ),
    url("../../../assets/hero/connectors-bg.webp");
  background-size: cover;
  background-position: center;
}

/* Figma 17:7983 lays this wash into the "Why CustomGPT.ai" band, also at 12%. */
.cgpt-section--backdrop-why {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 88%),
      rgb(255 255 255 / 88%)
    ),
    url("../../../assets/hero/why-customgpt-bg.webp");
  background-size: cover;
  background-position: center;
}

/* Figma 17:8603 lays this wash into the Integrations band at 12%. As with the
   contact backdrop the strength is a white veil over the artwork rather than an
   opacity on the section, so the copy above it stays at full contrast. */
.cgpt-section--backdrop-integrations {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 88%),
      rgb(255 255 255 / 88%)
    ),
    url("../../../assets/hero/integrations-bg.webp");
  background-size: cover;
  background-position: center;
}

/*
 * The pale pink-to-blue photograph Figma lays behind the Company pages' quieter
 * bands: the founder statement at full strength (57:7487), Program features at
 * 80% (57:7813, drawn here at full — the two are indistinguishable over this
 * artwork), and Partner stories at 44% (57:8187).
 */
.cgpt-section--backdrop-glow {
  background-image: url("../../../assets/hero/glow-bg.webp");
  background-size: cover;
  background-position: center;
}

.cgpt-section--backdrop-glow-soft {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 56%),
      rgb(255 255 255 / 56%)
    ),
    url("../../../assets/hero/glow-bg.webp");
  background-size: cover;
  background-position: center;
}

/* 57:7666 washes the Affiliate audience grid at 12%. */
.cgpt-section--backdrop-audience {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 88%),
      rgb(255 255 255 / 88%)
    ),
    url("../../../assets/hero/audience-bg.webp");
  background-size: cover;
  background-position: center;
}

/* 60:11304 — Live demo's "Why teams choose" band, its wash at 25%. */
.cgpt-section--backdrop-demo {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 75%),
      rgb(255 255 255 / 75%)
    ),
    url("../../../assets/hero/demo-why-bg.webp");
  background-size: cover;
  background-position: center;
}

.cgpt-section--backdrop-contact {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 56%),
      rgb(255 255 255 / 56%)
    ),
    url("../../../assets/hero/contact-bg.webp");
  background-size: cover;
  background-position: center;
}

.cgpt-section__grid {
  display: grid;
  /* 60 between blocks, which is Figma's Main Container itemSpacing; 40 on
     mobile. Neither is on the 8-based scale, so both are written out. */
  gap: 60px;
  align-items: start;
}

/*
 * ACF wraps InnerBlocks in a div of its own, so this grid had exactly one child
 * and its gap applied to nothing — every block inside a section sat flush
 * against the next. `display: contents` drops that wrapper out of the box tree
 * so the blocks become grid items themselves. Safe here because the wrapper is
 * a plain div carrying no role: removing its box removes nothing from the
 * accessibility tree.
 */
.cgpt-section__grid > .acf-innerblocks-container {
  display: contents;
}

@media (max-width: 767.98px) {
  .cgpt-section__grid { gap: 40px; }
}

/* A heading that is only a pill labels the group right after it, so it sits
   closer to that group than blocks sit to each other: 40, not 60 — "Data Use &
   Responsibility" over its row (178:11546). */
@media (min-width: 768px) {
  .cgpt-section__grid .cgpt-shead:not(:has(.cgpt-shead__title)) { margin-block-end: -20px; }
}

/* Single column stays single at every width. Multi-column stacks below the
   tablet breakpoint so nothing is squeezed below a readable measure. */
@media (min-width: 768px) {
  /* A short column against the middle of a taller one (238:9664). */
  .cgpt-section--align-center .cgpt-section__grid { align-items: center; }

  .cgpt-section--cols-2 .cgpt-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgpt-section--cols-3 .cgpt-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .cgpt-section--cols-4 .cgpt-section__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cgpt-section--cols-2 .cgpt-section__grid { gap: var(--cgpt-space-7); }
  .cgpt-section--cols-2.cgpt-section--split-even-60 .cgpt-section__grid { gap: 60px; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .cgpt-section--cols-4 .cgpt-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .cgpt-section--split-2-3 .cgpt-section__grid { grid-template-columns: 2fr 3fr; }
  .cgpt-section--split-3-2 .cgpt-section__grid { grid-template-columns: 3fr 2fr; }

  .cgpt-section--split-2-3 .cgpt-fcards,
  .cgpt-section--split-3-2 .cgpt-fcards { column-gap: 24px; }
}

/* Copy beside a fixed column of cards (For Teams, 206:25180 and 206:25214):
   60 apart, centred on each other, from the tablet up. */
@media (min-width: 900px) {
  .cgpt-section--split-aside-380 .cgpt-section__grid,
  .cgpt-section--split-aside-320 .cgpt-section__grid {
    column-gap: 60px;
    align-items: center;
  }

  .cgpt-section--split-aside-380 .cgpt-section__grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .cgpt-section--split-aside-320 .cgpt-section__grid { grid-template-columns: minmax(0, 1fr) 320px; }

  .cgpt-section--split-aside-380 .cgpt-fcards,
  .cgpt-section--split-aside-320 .cgpt-fcards { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 768px) and (max-width: 899.98px) {
  .cgpt-section--split-aside-380 .cgpt-section__grid,
  .cgpt-section--split-aside-320 .cgpt-section__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 900px) and (max-width: 1279.98px) {
  .cgpt-section--split-2-3 .cgpt-fcards,
  .cgpt-section--split-3-2 .cgpt-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cgpt-section--split-2-3 .cgpt-fcards--panel > .cgpt-fcards__item,
  .cgpt-section--split-3-2 .cgpt-fcards--panel > .cgpt-fcards__item {
    flex-basis: calc((100% - 24px) / 2);
  }
}

/* Visual order only — DOM order is preserved so the reading and tab order
   stay correct. Never use this to reorder anything meaningful. */
@media (min-width: 768px) {
  .cgpt-section--reverse .cgpt-section__grid { direction: rtl; }
  .cgpt-section--reverse .cgpt-section__grid > * { direction: ltr; }
}

/* A Group inside a multi-column section (ACF wraps the section's blocks in
   .acf-innerblocks-container on the front end) is one column holding several blocks
   — a heading over its copy beside a picture (Member Associations, 100:27629).
   20 between them, the heading's own spacing in Figma. */
.cgpt-section__grid > .wp-block-group,
.cgpt-section__grid > .acf-innerblocks-container > .wp-block-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-inline-size: 0;
}

/* WordPress's flow layout puts 24px above every block after the first in a
   Group; the gap above already spaces them. */
.cgpt-section__grid .wp-block-group > * { margin-block: 0; }

/* On a phone the heading in such a Group keeps to the left with its copy
   (100:27172), where a heading on its own centres. */
@media (max-width: 767.98px) {
  .cgpt-section__grid .wp-block-group .cgpt-shead__lead,
  .cgpt-section__grid .wp-block-group .cgpt-shead__desc {
    align-items: flex-start;
    text-align: start;
  }
}

/*
 * The contact page opens on this section rather than a hero, and Figma pads it
 * like one (115:29278): the badge 144 under the announcement bar, which is the
 * header clearance plus 40. The 128 the section carried on top of the clearance
 * put the heading 88px low. Phones already sit at their 40.
 */
@media (min-width: 768px) {
  .cgpt-main > .cgpt-section--backdrop-contact:first-child { --cgpt-section-pt: 40px; }
}

/* 153:12684 — the Testimonials page's GAI Insights band, its wash at 20%. */
.cgpt-section--backdrop-recognition {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 80%),
      rgb(255 255 255 / 80%)
    ),
    url("../../../assets/testimonials/gai-bg.webp");
  background-size: cover;
  background-position: center;
}

/* 1:264. Figma puts this wash on the testimonial; Ajdin moved it to Related
   compliance resources, 2026-09-17. */
.cgpt-section--backdrop-soc2 {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 75%),
      rgb(255 255 255 / 75%)
    ),
    url("../../../assets/hero/soc2-bg.webp");
  background-size: cover;
  background-position: center;
}

/* 193:16623 — the membership pages' blue wash, which their heroes lay in at
   15%, behind Member Portal's "What members ask" at 18%. */
.cgpt-section--backdrop-membership {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 82%),
      rgb(255 255 255 / 82%)
    ),
    url("../../../assets/membership/wash.webp");
  background-size: cover;
  background-position: center;
}

/* 2596:21844 — the GEMA story's blue wash at 24%; flat off-white on phones. */
.cgpt-section--backdrop-membership-24 {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 76%),
      rgb(255 255 255 / 76%)
    ),
    url("../../../assets/membership/wash.webp");
  background-size: cover;
  background-position: center;
}

@media (max-width: 767.98px) {
  .cgpt-section--backdrop-membership-24 {
    --cgpt-section-bg: var(--cgpt-surface-soft);
    background-image: none;
  }
}

/* 193:17081 — Non-dues revenue's "Five questions" on a lilac-rose wash at 24%. */
.cgpt-section--backdrop-membership-rose {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 76%),
      rgb(255 255 255 / 76%)
    ),
    url("../../../assets/membership/wash-rose.webp");
  background-size: cover;
  background-position: center;
}

/* 193:20495 — GenAI's founder quote on the same glow at 60%. */
.cgpt-section--backdrop-glow-mid {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 40%),
      rgb(255 255 255 / 40%)
    ),
    url("../../../assets/hero/glow-bg.webp");
  background-size: cover;
  background-position: center;
}

/* End User IdP Login (193:18821): the features band on its wash at 20%, and
   "Plans & pricing" on another at 18%. */
.cgpt-section--backdrop-idp-features {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 80%),
      rgb(255 255 255 / 80%)
    ),
    url("../../../assets/idp/wash-features.webp");
  background-size: cover;
  background-position: center;
}

.cgpt-section--backdrop-idp-plans {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 82%),
      rgb(255 255 255 / 82%)
    ),
    url("../../../assets/idp/wash-plans.webp");
  background-size: cover;
  background-position: center;
}

/* The integration pages' "How it works" (193:15055): a blue-to-coral wash at
   12% on white. */
.cgpt-section--backdrop-integration-steps {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 88%),
      rgb(255 255 255 / 88%)
    ),
    url("../../../assets/integrations/wash-steps.webp");
  background-size: cover;
  background-position: center;
}

/* For Teams (206:25133, 206:25213): the blue-to-coral wash at 12% on white. */
.cgpt-section--backdrop-teams {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 88%),
      rgb(255 255 255 / 88%)
    ),
    url("../../../assets/teams/wash.webp");
  background-size: cover;
  background-position: center;
}

/* Enterprise's customer story (227:34626, phone 227:35773): a pastel wash at
   84% on white, on phones too. */
.cgpt-section--backdrop-enterprise-story {
  background-image:
    linear-gradient(
      rgb(255 255 255 / 16%),
      rgb(255 255 255 / 16%)
    ),
    url("../../../assets/enterprise/story-wash.webp");
  background-size: cover;
  background-position: center;
}

/* Figma 3612:27020 lays this one in at full strength — the artwork is already
   a pale wash, so it takes no veil. */
.cgpt-section--backdrop-aeo-report {
  background-image: url("../../../assets/hero/aeo-report-bg.webp");
  background-size: cover;
  background-position: center;
}

/* The Claude benchmark's two washes (293:34492, 293:34554) — both are pale
   artwork already, so neither takes a veil. */
.cgpt-section--backdrop-benchmark-quotes {
  background-image:
    linear-gradient(rgb(255 255 255 / 88%), rgb(255 255 255 / 88%)),
    url("../../../assets/hero/benchmark-quotes-bg.webp");
  background-size: cover;
  background-position: center;
}

/* The secure-access container, which GPT-5.1 and Document Analyst both carry
   (305:41683, 305:42214 — one artwork, one imageRef). Figma lays it in at 12%,
   so the veil is the other 88%. */
.cgpt-section--backdrop-secure-access {
  background-image:
    linear-gradient(rgb(255 255 255 / 88%), rgb(255 255 255 / 88%)),
    url("../../../assets/hero/secure-access-bg.webp");
  background-size: cover;
  background-position: center;
}

.cgpt-section--backdrop-benchmark-raw {
  background-image:
    linear-gradient(rgb(255 255 255 / 95%), rgb(255 255 255 / 95%)),
    url("../../../assets/hero/benchmark-raw-bg.webp");
  background-size: cover;
  background-position: center;
}

/* The MIT quote band on the partner free trial (302:35892): the artwork is
   laid in at a quarter strength over white, so it takes a 75% veil. */
.cgpt-section--backdrop-mit-quote {
  background-image:
    linear-gradient(rgb(255 255 255 / 75%), rgb(255 255 255 / 75%)),
    url("../../../assets/hero/mit-quote-bg.webp");
  background-size: cover;
  background-position: center;
}