/* cgpt/feature-cards — Figma "Features Container".
   badge  1400:5370 · 381×314 cards, 160 badge, 32/32/40 pad, 1px #DFDFDF
   icon   1149:23967 · 231w, 32 icon, gap 24, title→desc 12
   number 982:19263 · 364w, ordinal 18/26 in accent, gap 16 */

.cgpt-fcards {
  display: grid;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .cgpt-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .cgpt-fcards {
    grid-template-columns: repeat(var(--cgpt-fcards-count, 3), minmax(0, 1fr));
  }
}

.cgpt-fcards__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-inline-size: 0;
}

.cgpt-fcards__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-inline-size: 0;
}

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

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

/* Inline links in the copy are coloured, not underlined (3119:18579). */
.cgpt-fcards__desc a { text-decoration: none; }
.cgpt-fcards__desc a:hover { text-decoration: underline; }

/* Scoped past the zero-specificity image default in base.css. */
.cgpt-fcards .cgpt-fcards__media {
  display: block;
  inline-size: 32px;
  block-size: 32px;
  object-fit: contain;
}

/* Lucide is stroke-based at 24x24; size and colour come from here. */
.cgpt-fcards__icon {
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  color: var(--cgpt-accent);
}

/* ---- centred variant ---------------------------------------------------- */

.cgpt-fcards--align-center .cgpt-fcards__item { align-items: center; text-align: center; }
.cgpt-fcards--align-center .cgpt-fcards__text { align-items: center; }

/*
 * Tighter columns for the centred icon row. Centred text wraps far more
 * visibly than left-aligned text does, and at the 40px default each of the
 * three columns came to 353px against the 356px that "Every response has a
 * link directly to its source." needs — a three-pixel shortfall that broke it
 * onto a second line. 24 gives 364, and matches the item's own icon-to-text
 * gap. Row gap stays at 40 for when the cards wrap.
 */
.cgpt-fcards--icon.cgpt-fcards--align-center { column-gap: 24px; }

/* 178:11546 — the centred icon row under the security badges ("Data Use &
   Responsibility") sets a 24/32 title, 16 above its line; it was 18 and 12. */
.cgpt-fcards--icon.cgpt-fcards--align-center .cgpt-fcards__title {
  font-size: var(--wp--preset--font-size--heading);
  line-height: 32px;
}

.cgpt-fcards--icon.cgpt-fcards--align-center .cgpt-fcards__text { gap: 16px; }

/* ---- panel -------------------------------------------------------------- */

/*
 * Figma's "TitleDescGroup" card: 1px #DFDFDF, radius 12, 28 padding, 40 between
 * the icon and the text. Used for the benefit grids on Anti-hallucination, RAG
 * API and Security.
 *
 * A separate style rather than a border added to Small icon, because the design
 * genuinely has both: the same page that borders these leaves "Docs / SDK /
 * Cookbooks" (Figma "Feature Text Container", 353 wide, no stroke) bare, as does
 * the homepage row. Bordering every icon card would have broken those.
 */
.cgpt-fcards--panel { gap: 24px; }

/* 24 between the icon and the text, not 40: the 40 on Figma's TitleDescGroup
   never applies, because that frame holds a single child. The gap that governs
   is on the container inside it (17:7867, 17:6885), and it is 24 on every page
   that uses this card. */
.cgpt-fcards--panel .cgpt-fcards__item {
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--cgpt-rule);
  border-radius: 12px;
  /* The card is always the opposite ground to the section it sits on, so it
     reads as a panel either way: soft on white, white on soft. */
  background-color: var(--cgpt-surface-soft);
}

.cgpt-section--ground-soft .cgpt-fcards--panel .cgpt-fcards__item,
.cgpt-section--ground-tinted .cgpt-fcards--panel .cgpt-fcards__item {
  background-color: var(--cgpt-surface);
}

/* Stated rather than derived. After the two rules above, so it wins on source
   order at equal specificity — the ground selectors are more specific, hence
   the extra class on these. */
.cgpt-fcards--panel.cgpt-fcards--fill-surface .cgpt-fcards__item,
.cgpt-section--ground-soft .cgpt-fcards--panel.cgpt-fcards--fill-surface .cgpt-fcards__item {
  background-color: var(--cgpt-surface);
}

.cgpt-fcards--panel.cgpt-fcards--fill-soft .cgpt-fcards__item,
.cgpt-section--ground-soft .cgpt-fcards--panel.cgpt-fcards--fill-soft .cgpt-fcards__item {
  background-color: var(--cgpt-surface-soft);
}

/* 3:188 */
.cgpt-fcards--panel.cgpt-fcards--text-lg .cgpt-fcards__title {
  font-size: 1.5rem;      /* 24/29 */
  line-height: 1.2;
}

.cgpt-fcards--panel.cgpt-fcards--text-lg .cgpt-fcards__desc {
  font-size: 1.125rem;    /* 18/26 */
  line-height: 1.44;
}

@media (max-width: 599.98px) {
  .cgpt-fcards--panel .cgpt-fcards__item { gap: 24px; padding: 20px; }
}

/*
 * The soft-filled large panels of the Sep-17 designs — End User IdP Login's
 * use cases (193:18874), GenAI's findings (193:20111), the integration pages'
 * use cases (193:15096) — sit 16 apart, with 20 between title and line on
 * desktop (12 on a phone, 193:15512).
 */
.cgpt-fcards--panel.cgpt-fcards--text-lg.cgpt-fcards--fill-soft { gap: 16px; }

@media (min-width: 600px) {
  .cgpt-fcards--panel.cgpt-fcards--text-lg.cgpt-fcards--fill-soft .cgpt-fcards__text { gap: 20px; }
}

/* An odd card out sits under the first column, not centred (Enterprise's
   benefits, 227:34566). IdP, GenAI and the integration pages fill every row. */
@media (min-width: 900px) {
  .cgpt-fcards--panel.cgpt-fcards--text-lg.cgpt-fcards--fill-soft { justify-content: flex-start; }

  /* Columns split for the 16 gap, not the 24 the other panels use: 562 each
     across 1140 (227:34566, 193:15096). */
  .cgpt-fcards--panel.cgpt-fcards--text-lg.cgpt-fcards--fill-soft > .cgpt-fcards__item {
    flex-basis: calc((100% - (var(--cgpt-fcards-count, 3) - 1) * 16px) / var(--cgpt-fcards-count, 3));
  }
}

/* A 24/32 title, as IdP, GenAI and Enterprise draw it; phones keep 20/28. */
@media (min-width: 600px) {
  .cgpt-fcards--panel.cgpt-fcards--text-lg.cgpt-fcards--fill-soft .cgpt-fcards__title { line-height: 32px; }

  /* Figma draws the hairline inside the card; 27 plus the 1px border keeps
     the 506 text column it sets (227:34566), so a one-line description
     stays on one line. */
  .cgpt-fcards--panel.cgpt-fcards--text-lg.cgpt-fcards--fill-soft .cgpt-fcards__item { padding: 27px; }
}

/* An underlined link on a panel (193:15103) closes the card, so the copy
   stays under the icon and the link takes up the slack — a card without one
   keeps its copy at the top too, as drawn. */
.cgpt-fcards--panel.cgpt-fcards--textlink .cgpt-fcards__text { flex: 1; }

/* 24 over the link: the copy's own 12 gap plus 12 (plus 4 over its 20). */
.cgpt-fcards--panel.cgpt-fcards--textlink .cgpt-fcards__cta {
  /* Flex, so the 14/20 link sets the row's height, not the 16/24 line box. */
  display: flex;
  margin-block-start: auto;
  padding-block-start: 12px;
}

@media (min-width: 600px) {
  .cgpt-fcards--panel.cgpt-fcards--text-lg.cgpt-fcards--fill-soft.cgpt-fcards--textlink .cgpt-fcards__cta { padding-block-start: 4px; }
}

/*
 * A centred card with a title and no description — "What to measure"
 * (193:16400): 172 tall with the icon and title centred in it, where a card
 * with copy keeps the icon and text at the top. Keyed on the
 * missing description so the compliance pages' centred cards, which carry
 * copy, are untouched.
 */
.cgpt-fcards--panel.cgpt-fcards--align-center .cgpt-fcards__item:not(:has(.cgpt-fcards__desc, .cgpt-fcards__list)) {
  justify-content: center;
  min-block-size: 172px;
}

/* Two to a row on a phone where the block asks for it — Member Value's "What
   to measure" (193:16472): 163x114, 16 apart, the icon 16 over a 16/24 title.
   Title-only centred cards otherwise stay one to a row: Customers' seven steps
   (193:17210) are 343x142 there, with a 20/28 title. */
@media (max-width: 599.98px) {
  .cgpt-fcards--panel.cgpt-fcards--phone-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* Matching the centred title-only rule's :not(:has()) so this outranks its
     172 minimum rather than losing to it. */
  .cgpt-fcards--panel.cgpt-fcards--phone-2 .cgpt-fcards__item:not(:has(.cgpt-fcards__desc, .cgpt-fcards__list)) {
    gap: 16px;
    min-block-size: 0;
    padding: 20px;
  }

  .cgpt-fcards--panel.cgpt-fcards--phone-2 .cgpt-fcards__item:not(:has(.cgpt-fcards__desc, .cgpt-fcards__list)) .cgpt-fcards__title {
    font-size: var(--wp--preset--font-size--body);
    line-height: var(--cgpt-lh-body);
  }

  .cgpt-fcards--panel.cgpt-fcards--align-center.cgpt-fcards--text-lg:not(.cgpt-fcards--phone-2) .cgpt-fcards__item:not(:has(.cgpt-fcards__desc, .cgpt-fcards__list)) {
    min-block-size: 142px;
  }

  .cgpt-fcards--panel.cgpt-fcards--align-center.cgpt-fcards--text-lg:not(.cgpt-fcards--phone-2) .cgpt-fcards__item:not(:has(.cgpt-fcards__desc, .cgpt-fcards__list)) .cgpt-fcards__title {
    font-size: 1.25rem;
    line-height: 28px;
  }
}

/*
 * One card set apart from its neighbour on the soft brand wash, with no border
 * (193:16310, "The AI opportunity"). The wash is baked onto white at the 18%
 * the design lays it in, so the card needs no overlay of its own.
 */
.cgpt-fcards--panel .cgpt-fcards__item--wash {
  border-color: transparent;
  background-color: var(--cgpt-surface);
  background-image: url("../../../assets/membership/card-wash.webp");
  background-size: cover;
  background-position: center;
}

/*
 * A shorter title where the full one would crowd a two-up card on a phone
 * (193:16433). The full title stays in the accessibility tree at every width;
 * below 600 it is hidden visually rather than with display:none, so a screen
 * reader still reads it, and the short one — aria-hidden — takes its place.
 */
.cgpt-fcards__title-short { display: none; }

@media (max-width: 599.98px) {
  .cgpt-fcards__title-full:has(+ .cgpt-fcards__title-short) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cgpt-fcards__title-short { display: inline; }
}

/* ---- large badge -------------------------------------------------------- */

/* The design butts these cards together so adjacent 1px borders read as one
   line. `gap` cannot be negative, so the separators are the container's own
   background showing through a 1px gap — the same trick as the logo grid, and
   it stays correct however many cards wrap onto a second row. */
.cgpt-fcards--badge {
  gap: 1px;
  background-color: var(--cgpt-rule);
  border: 1px solid var(--cgpt-rule);
}

/* 178:11546 — the badge sits 20 above its text (was 24). */
.cgpt-fcards--badge .cgpt-fcards__item {
  gap: 20px;
  align-items: center;
  padding: 32px 32px 40px;
  background-color: var(--cgpt-surface);
  text-align: center;
}

/* The text fills the card so "Learn more" can sit on one line across all three,
   however many lines each description runs to — card 1 wraps to two and its
   link still lines up with the others (178:11546). At least 20 below the
   description: the text gap supplies 8 and the padding the rest. */
.cgpt-fcards--badge .cgpt-fcards__text {
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
}

.cgpt-fcards--badge .cgpt-fcards__cta {
  margin-block-start: auto;
  padding-block-start: 12px;
  /* The link's own 20, not the inherited 25.6 line box, which made each card
     6px taller than Figma's 374. */
  line-height: 20px;
}

.cgpt-fcards--badge .cgpt-fcards__media {
  inline-size: 160px;
  block-size: 160px;
}

.cgpt-fcards__item--link { position: relative; }

/* The title is the real link; the pseudo-element only extends its hit area over
   the card, so the accessible name stays the title. */
.cgpt-fcards__link {
  color: inherit;
  text-decoration: none;
}

.cgpt-fcards__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cgpt-fcards__item--link:hover .cgpt-fcards__link { text-decoration: underline; }

.cgpt-fcards__item--link:has(.cgpt-fcards__link:focus-visible) {
  outline: var(--cgpt-focus-width) solid var(--cgpt-focus-color);
  outline-offset: -2px;
}

.cgpt-fcards__item--link:has(.cgpt-fcards__link:focus-visible) .cgpt-fcards__link {
  outline: none;
}

/* ---- numbered ----------------------------------------------------------- */

.cgpt-fcards--number { gap: 40px 32px; }

.cgpt-fcards--number .cgpt-fcards__item {
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

.cgpt-fcards--number .cgpt-fcards__num {
  flex: none;
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: var(--cgpt-lh-body-lg);
  color: var(--cgpt-accent);
  font-variant-numeric: tabular-nums;
}

.cgpt-fcards--number .cgpt-fcards__text { gap: 16px; }

/* ---- editor placeholder ------------------------------------------------- */

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

/* --- numbered card ------------------------------------------------------- */

/*
 * Figma 17:6947 — the "how to build a hallucination-proof AI agent" row. The
 * same bordered card as the panel style, but 364 wide in a three-up, centred,
 * and led by a 44px figure rather than an icon.
 *
 * The figure is painted with a gradient (#3A7EEC to #641859) via
 * background-clip, so the fallback is the ink colour underneath rather than an
 * invisible numeral where the clip is unsupported.
 */
.cgpt-fcards--step { gap: 24px; }

.cgpt-fcards--step .cgpt-fcards__item {
  gap: 32px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--cgpt-rule);
  border-radius: 12px;
  background-color: var(--cgpt-surface);
  text-align: center;
}

/* The section behind this row is the soft ground, so the card is white; the
   same inversion the panel style makes, stated the same way. */
.cgpt-section--ground-soft .cgpt-fcards--step .cgpt-fcards__item,
.cgpt-section--ground-tinted .cgpt-fcards--step .cgpt-fcards__item {
  background-color: var(--cgpt-surface);
}

.cgpt-fcards--step.cgpt-fcards--fill-soft .cgpt-fcards__item {
  background-color: var(--cgpt-surface-soft);
}

/* Centred with the rest of the card. The Figma text node reports its own
   alignment as LEFT, but the node is only as wide as the glyph and its parent
   card is counterAxisAlignItems=CENTER, so the figure sits in the middle —
   align-self:flex-start read the inner property and pinned it to the edge. */
.cgpt-fcards--step .cgpt-fcards__num {
  font-size: 2.75rem;   /* 44 */
  font-weight: 400;
  line-height: 1.1;
  color: var(--cgpt-ink);
  background-image: linear-gradient(160deg, #3A7EEC 0%, #641859 100%);
  background-clip: text;
}

/* Only go transparent where the clip actually works, so the fallback is a
   readable ink numeral rather than an invisible one. No vendor prefix: the
   theme builds for es2020-era browsers, where this is unprefixed, and the
   stylelint config rejects prefixes. */
@supports (background-clip: text) {
  .cgpt-fcards--step .cgpt-fcards__num { color: transparent; }
}

.cgpt-fcards--step .cgpt-fcards__text {
  gap: 16px;
  align-items: center;
  text-align: center;
}

/* Every other numbered card ships centred, so this is opt-in. */
.cgpt-fcards--step.cgpt-fcards--stepalign-start .cgpt-fcards__item,
.cgpt-fcards--step.cgpt-fcards--stepalign-start .cgpt-fcards__text {
  align-items: flex-start;
  text-align: start;
}

.cgpt-fcards--step.cgpt-fcards--stepalign-start .cgpt-fcards__text { flex: 1; }
.cgpt-fcards--step.cgpt-fcards--stepalign-start .cgpt-fcards__cta { margin-top: auto; }

.cgpt-fcards__textlink {
  font-size: 0.875rem;   /* 14/20 */
  line-height: 1.43;
  color: var(--cgpt-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/*
 * The integration pages' steps (193:15055) end on a 16/24 line with a 20px
 * arrow after it, no underline, set in a 40px row like a button's.
 */
.cgpt-fcards--arrowlink .cgpt-fcards__textlink {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding-block: 8px;
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.5;
  text-decoration: none;
}

.cgpt-fcards--arrowlink .cgpt-fcards__cta { margin-block-start: 0; }

.cgpt-fcards--number.cgpt-fcards--arrowlink .cgpt-fcards__text { align-self: stretch; }
.cgpt-fcards--number.cgpt-fcards--arrowlink .cgpt-fcards__cta { margin-block-start: auto; }

.cgpt-fcards__textlink-icon {
  flex: none;
  width: 20px;
  height: 20px;
}


.cgpt-fcards--step .cgpt-fcards__title {
  font-size: 1.5rem;    /* 24/28.8 */
  font-weight: 500;
  line-height: 1.2;
}

.cgpt-fcards--step .cgpt-fcards__desc {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
}

/*
 * The AEO category cards (3612:27020) — the bordered card with a code in place
 * of the count. The compound selector is deliberate: it holds the 28 padding
 * against the counted card's phone rule, which pulls in to 20.
 */
.cgpt-fcards--step.cgpt-fcards--figure-label .cgpt-fcards__item {
  gap: 24px;
  padding: 28px;
}

.cgpt-fcards--step.cgpt-fcards--figure-label .cgpt-fcards__num {
  font-size: var(--wp--preset--font-size--display-sm);   /* 32/40 */
  font-weight: 500;
  line-height: 1.25;
}

.cgpt-fcards--step.cgpt-fcards--figure-label .cgpt-fcards__title { line-height: 1.333; }

/* Figma leaves the short last row against the left edge (C10, C11), where the
   counted card centres it. */
@media (min-width: 900px) {
  .cgpt-fcards--step.cgpt-fcards--figure-label { justify-content: flex-start; }
}

/* Figma's phone frame (17:9808) keeps the card at 343x200 with 20 of padding
   and 24 between the figure and the text — the figure does not shrink. */
@media (max-width: 599.98px) {
  .cgpt-fcards--step .cgpt-fcards__item { gap: 24px; padding: 20px; }
}

/*
 * The tighter numbered card — Figma 53:2717, the enterprise-search row. Three
 * 424x214 cards across a 1320 band, where the Anti-hallucination row has the
 * same component at 12-radius with a 24 title and more air in it.
 */
.cgpt-fcards--step.cgpt-fcards--compact .cgpt-fcards__item {
  gap: 20px;
  border-radius: 8px;
}

.cgpt-fcards--step.cgpt-fcards--compact .cgpt-fcards__title {
  font-size: 1.25rem;   /* 20/24 */
  line-height: 1.2;
}

/* The membership benefits row (56:3401) is the same bordered card at an
   8-radius. Only the corner changes; the padding and the 24 gap do not. */
.cgpt-fcards--panel.cgpt-fcards--compact .cgpt-fcards__item { border-radius: 8px; }

/* --- ruled list ---------------------------------------------------------- */

/*
 * Figma 57:7818 — six rows in a 540 column, each a 32 icon 24 to the left of a
 * 20/24 title over an 18/26 line, with a #DFDFDF rule between rows and 24 of
 * air either side of it.
 */
.cgpt-fcards--divided { gap: 0; }

.cgpt-fcards--divided .cgpt-fcards__item {
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  padding-block: 24px;
  text-align: start;
}

.cgpt-fcards--divided .cgpt-fcards__item:first-child { padding-block-start: 0; }
.cgpt-fcards--divided .cgpt-fcards__item:last-child { padding-block-end: 0; }
.cgpt-fcards--divided .cgpt-fcards__item + .cgpt-fcards__item { border-block-start: 1px solid var(--cgpt-rule); }

.cgpt-fcards--divided .cgpt-fcards__text { gap: 8px; align-items: flex-start; }

.cgpt-fcards--divided .cgpt-fcards__title {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.2;
}

.cgpt-fcards--divided .cgpt-fcards__desc {
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.444;
}

/*
 * A short last row centres rather than sitting left with a hole beside it —
 * Figma 57:7671 lays five bordered cards out as three and two, the two centred.
 * Desktop only, and flex rather than grid so the row can centre; the basis
 * reproduces the grid's column width exactly, so a full row looks the same as
 * before.
 */
@media (min-width: 900px) {
  /* The numbered card too: Non-dues revenue's five questions are three and
     two, the two centred (193:17081). Every numbered row already published is
     a full row of three, which this lays out exactly as the grid did. */
  .cgpt-fcards--panel,
  .cgpt-fcards--step {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .cgpt-fcards--panel > .cgpt-fcards__item,
  .cgpt-fcards--step > .cgpt-fcards__item {
    flex: 0 0 calc((100% - (var(--cgpt-fcards-count, 3) - 1) * 24px) / var(--cgpt-fcards-count, 3));
    min-inline-size: 0;
  }
}

/* --- subtitle, list and button ----------------------------------------- */

/* 60:10928 — a 16/24 line in #565656 between the title and the list. */
.cgpt-fcards__sub {
  margin: 0;
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
  color: var(--cgpt-ink-soft);
}

/* 60:10929 — one capability per line, 18/26 in ink, no bullets drawn. */
.cgpt-fcards__list {
  margin: 4px 0 0 12px;
  padding: 0;
  list-style: disc;
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.444;
  color: var(--cgpt-ink);
}

/* A card's own button sits under its copy (60:11319). */
.cgpt-fcards__cta { margin-block-start: 8px; }
.cgpt-fcards--align-center .cgpt-fcards__cta { align-self: center; }

/* The ruled numbered list — "What we actually do" (60:10922): each item
   closed by a #DFDFDF rule, 24 under its copy. */
.cgpt-fcards--number.cgpt-fcards--divided { gap: 24px; }

.cgpt-fcards--number.cgpt-fcards--divided .cgpt-fcards__item {
  padding-block: 0 24px;
  border-block-end: 1px solid var(--cgpt-rule);
}

.cgpt-fcards--number.cgpt-fcards--divided .cgpt-fcards__item + .cgpt-fcards__item { border-block-start: 0; }
.cgpt-fcards--number.cgpt-fcards--divided .cgpt-fcards__item:first-child { padding-block-start: 0; }
.cgpt-fcards--number.cgpt-fcards--divided .cgpt-fcards__item:last-child { padding-block-end: 24px; }
.cgpt-fcards--number.cgpt-fcards--divided .cgpt-fcards__text { gap: 16px; }
.cgpt-fcards--number.cgpt-fcards--divided .cgpt-fcards__title { font-size: 1.5rem; line-height: 1.2; }

/* ---- plain, ruled between columns ---------------------------------------
   Figma 100:27720 (Member Associations, Four outcomes): four 269 columns with
   a 1px #DFDFDF rule 40 from each, 20/500 titles over 16/24 copy, and a text
   link 4px in, pinned to the foot so the four line up. The links are Figma's
   borderless button, the ghost style. On a phone (100:27187) the columns
   stack with the rule between them, 24 each side. */
.cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__title {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.2;
}

.cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__item { align-items: stretch; }
.cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__text { flex: 1; gap: 16px; }
.cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__desc {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--cgpt-lh-body);
}

.cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__cta {
  margin-block-start: auto;
  padding-block-start: 24px;
}

.cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__cta .cgpt-btn { padding-inline: 4px; }

@media (min-width: 900px) {
  .cgpt-fcards--plain.cgpt-fcards--divided { gap: 0; }

  .cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__item {
    padding-block: 0;
    padding-inline: 40px;
  }

  .cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__item:first-child { padding-inline-start: 0; }
  .cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__item:last-child { padding-inline-end: 0; }

  .cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__item + .cgpt-fcards__item {
    border-block-start: 0;
    border-inline-start: 1px solid var(--cgpt-rule);
  }
}

@media (max-width: 899.98px) {
  .cgpt-fcards--plain.cgpt-fcards--divided { grid-template-columns: minmax(0, 1fr); }
  .cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__item { padding-block: 24px; }
  .cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__item:first-child { padding-block-start: 0; }
  .cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__item:last-child { padding-block-end: 0; }
  .cgpt-fcards--plain.cgpt-fcards--divided .cgpt-fcards__cta { padding-block-start: 16px; }
}

/* A numbered list at the larger size — Retention's lifecycle (193:16051): a
   24/29 title over the usual 16/24 line, stepping back to 18/26 on a phone. */
@media (min-width: 600px) {
  .cgpt-fcards--number.cgpt-fcards--text-lg .cgpt-fcards__title {
    font-size: var(--wp--preset--font-size--heading);
    line-height: 1.2;
  }
}

/*
 * Medium — a 20/28 title with nothing under it (Member Portal, 193:16623).
 * On a bordered card the title is a question a member asks, so it keeps the
 * regular weight the design gives it; the cards are 16 apart, 840 across. On
 * the centred small-icon row it is a label, at 500, 20 under its icon.
 */
.cgpt-fcards--panel.cgpt-fcards--text-md { gap: 16px; }

/* 1.25rem, not the lead token: that one steps down to 18 on phones, and the
   design keeps these at 20 there too. */
.cgpt-fcards--panel.cgpt-fcards--text-md .cgpt-fcards__title {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 28px;
}

/* With a line under it the medium title is a heading again, at 500, and
   the cards keep the usual 24 between them: For Teams' access cards, a 20/28
   title over a 16/24 line (206:25140). */
.cgpt-fcards--panel.cgpt-fcards--text-md:has(.cgpt-fcards__desc) { gap: 24px; }

.cgpt-fcards--panel.cgpt-fcards--text-md .cgpt-fcards__text:has(.cgpt-fcards__desc) .cgpt-fcards__title { font-weight: 500; }

.cgpt-fcards--icon.cgpt-fcards--align-center.cgpt-fcards--text-md { column-gap: 40px; }
.cgpt-fcards--icon.cgpt-fcards--text-md .cgpt-fcards__item { gap: 20px; }

.cgpt-fcards--icon.cgpt-fcards--align-center.cgpt-fcards--text-md .cgpt-fcards__title {
  font-size: 1.25rem;
  line-height: 28px;
}

/* Medium on the numbered card: a 20/28 title under the figure, at the card's
   usual 500 (Non-dues revenue's questions, 193:17081). */
.cgpt-fcards--step.cgpt-fcards--text-md .cgpt-fcards__title {
  font-size: 1.25rem;
  line-height: 28px;
}

/* On a phone those questions step down to 18/26 and the card keeps its 28
   padding, 343x182 (193:16944 at 375). */
@media (max-width: 599.98px) {
  .cgpt-fcards--step.cgpt-fcards--text-md .cgpt-fcards__item { padding: 28px; }

  .cgpt-fcards--step.cgpt-fcards--text-md .cgpt-fcards__title {
    font-size: var(--wp--preset--font-size--body-lg);
    line-height: 26px;
  }
}

/* The large card title steps to 20 on a phone: Member Value (193:16433) and
   GenAI (193:20111) both draw it so at 375. */
@media (max-width: 599.98px) {
  .cgpt-fcards--panel.cgpt-fcards--text-lg .cgpt-fcards__title { font-size: 1.25rem; }
}

/* Medium on the left-aligned small-icon row: a 20/28 title at the regular
   weight over a 16/24 line (End User IdP Login's features, 193:18905). */
.cgpt-fcards--icon.cgpt-fcards--align-start.cgpt-fcards--text-md .cgpt-fcards__title {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 28px;
}

/* On a phone that row sets each icon beside its text rather than over it:
   the title starts 56 in, the 32 mark and 24 between (193:18820 at 375). */
@media (max-width: 599.98px) {
  .cgpt-fcards--icon.cgpt-fcards--align-start.cgpt-fcards--text-md .cgpt-fcards__item {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
}

@media (max-width: 599.98px) {
  .cgpt-fcards--icon.cgpt-fcards--phone-center {
    gap: 32px;
    margin-block-start: -8px;
  }

  .cgpt-fcards--icon.cgpt-fcards--phone-center .cgpt-fcards__item {
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  .cgpt-fcards--icon.cgpt-fcards--phone-center .cgpt-fcards__text { align-items: center; }

  .cgpt-fcards--icon.cgpt-fcards--phone-center .cgpt-fcards__title {
    font-size: 1.25rem;
    line-height: 28px;
  }

  .cgpt-fcards--icon.cgpt-fcards--phone-center .cgpt-fcards__cta { display: none; }
}

/*
 * Rule above (193:15055): a hairline across the row, 40 over the items. Once
 * the row stacks (193:15482) the rule moves between the items, 20 each side.
 */
/* 40 from the heading, not the section's usual 60 (32, not 40, on a phone). */
.cgpt-fcards--ruled-row {
  gap: 0;
  margin-block-start: -8px;
}

@media (min-width: 768px) {
  .cgpt-fcards--ruled-row { margin-block-start: -20px; }
}

@media (max-width: 899.98px) {
  .cgpt-fcards--ruled-row { grid-template-columns: minmax(0, 1fr); }
}

.cgpt-fcards--ruled-row .cgpt-fcards__item + .cgpt-fcards__item {
  margin-block-start: 20px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--cgpt-rule);
}

@media (min-width: 900px) {
  .cgpt-fcards--ruled-row {
    column-gap: 24px;
    padding-block-start: 40px;
    border-block-start: 1px solid var(--cgpt-rule);
  }

  .cgpt-fcards--ruled-row .cgpt-fcards__item + .cgpt-fcards__item {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: 0;
  }
}

/* The compact numbered card at the medium size keeps its 20/28 title on a
   phone (For Teams, 206:25494), where the regular one steps to 18. */
@media (max-width: 599.98px) {
  .cgpt-fcards--step.cgpt-fcards--compact.cgpt-fcards--text-md .cgpt-fcards__title {
    font-size: 1.25rem;
    line-height: 28px;
  }
}

/* ---------------------------------------------------------------------------
   A numbered list inside a card — the Claude benchmark's question lists
   (293:34516): a #DFDFDF rule under the title, then 18/26 rows 24 apart, each
   opening with its count in the brand indigo. No bullet is drawn.
--------------------------------------------------------------------------- */

.cgpt-fcards__list--numbered {
  display: grid;
  gap: 24px;
  margin: 24px 0 0;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--cgpt-rule);
  list-style: none;
  counter-reset: cgpt-fcards-count;
  color: var(--cgpt-ink-soft);
}

.cgpt-fcards__list--numbered li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  counter-increment: cgpt-fcards-count;
}

.cgpt-fcards__list--numbered li::before {
  content: counter(cgpt-fcards-count, decimal-leading-zero);
  color: var(--cgpt-accent);
  font-variant-numeric: tabular-nums;
}

/* Cards side by side share a title row, so a title that wraps in one card
   does not push its rule and list below the other's. */
@media (min-width: 600px) {
  .cgpt-fcards--panel:has(.cgpt-fcards__list--numbered) { display: grid; }

  .cgpt-fcards--panel:has(.cgpt-fcards__list--numbered) > .cgpt-fcards__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 12px;
  }

  .cgpt-fcards--panel:has(.cgpt-fcards__list--numbered) .cgpt-fcards__text { display: contents; }
}

/* ---------------------------------------------------------------------------
   A checked list inside a card — the platform pages' audience cards
   (305:37766): a rule under the title, then 20/28 lines 20 apart, each against
   a 32px green disc.
--------------------------------------------------------------------------- */

/* 305:37766 draws these cards at radius 16 with 28 inside, and sets the lines
   at 20/28 — a step up from the panel card's usual. */
.cgpt-fcards--panel:has(.cgpt-fcards__list--checks) .cgpt-fcards__item {
  padding: 28px;
  /* The container draws the tint alone, with no hairline around it. */
  border: 0;
  border-radius: 16px;
}

.cgpt-fcards__list--checks {
  display: grid;
  gap: 20px;
  margin: 8px 0 0;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--cgpt-rule);
  list-style: none;
  font-size: var(--wp--preset--font-size--lead);
  line-height: 28px;
  color: var(--cgpt-ink);
}

.cgpt-fcards__list--checks li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.cgpt-fcards__tick {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 999px;
  background-color: #5D9A46;
  color: var(--cgpt-surface);
}

.cgpt-fcards__tick svg {
  inline-size: 16px;
  block-size: 16px;
  stroke-width: 3;
}