/**
 * CP · Feature Cards — self-contained styles (token-driven, brand-agnostic).
 * Scoped under .cp-feature-cards. Ported from the `.different*` rules in the
 * approved services pages, which use this component on every spoke.
 */
.cp-feature-cards {
  --fc-fg: var(--wp--preset--color--text);
  --fc-primary: var(--wp--preset--color--primary);
  --fc-white: var(--wp--preset--color--white);
  --fc-boulder: #767676;
  --fc-display: var(--wp--preset--font-family--barlow-condensed);
  --fc-body: var(--wp--preset--font-family--roboto);
  --fc-cream: #FFF9F0;
  --fc-firefly: #0D1B2A;
  --fc-body-fg: #444444;
  /* The same navy as the homepage's pills (cp-icon-card-grid --icg-pill-bg), per the
     client: the pale green read as a different design. */
  /* --cloud-burst is the homepage pills' navy (homepage.css :root, #1E2C44). The
     accent preset is close (#1F2937) but not the same colour, so it is only the
     fallback for a brand that does not define --cloud-burst. */
  --fc-pill: var(--cloud-burst, var(--wp--preset--color--accent));
  --fc-pill-fg: var(--wp--preset--color--white);
  --fc-max: 1100px;
  padding: var(--cp-section-py, 80px) clamp(24px, 5vw, 80px);
}
.cp-feature-cards.is-surface-white { background: var(--fc-white); }
.cp-feature-cards.is-surface-cream { background: var(--fc-cream); }

.cp-feature-cards .head { max-width: var(--fc-max); margin: 0 auto; }
.cp-feature-cards .eyebrow {
  font-family: var(--fc-body); font-weight: 600; font-size: 11px; line-height: 24px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--fc-fg); margin: 0;
}
.cp-feature-cards .head h2 {
  font-family: var(--fc-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1; letter-spacing: -0.005em; color: var(--fc-fg); margin: 11px 0 0;
}
.cp-feature-cards .head h2 em { font-style: normal; color: var(--fc-primary); }

.cp-feature-cards .different__intro { max-width: var(--fc-max); margin: 16px auto 0; }
.cp-feature-cards .different__intro p {
  font-family: var(--fc-body); font-size: 16px; line-height: 27.2px;
  color: var(--fc-fg); max-width: none; margin: 0;
}
.cp-feature-cards .different__grid {
  max-width: var(--fc-max); margin: 29px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px;
}
.cp-feature-cards .different-card {
  background: transparent; padding: 0; display: flex; flex-direction: column; gap: 7px;
}
.cp-feature-cards .different-card__num {
  font-family: var(--fc-display); font-weight: 300; font-size: 28px; line-height: 1.1;
  color: var(--fc-fg); margin: 0;
}
.cp-feature-cards .different-card__title {
  font-family: var(--fc-display); font-weight: 700; font-size: 14px; line-height: 18.2px;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--fc-fg); margin: 0;
}
.cp-feature-cards .different-card__body {
  font-family: var(--fc-body); font-size: 14px; line-height: 23.1px; color: var(--fc-fg); margin: 0;
}
.cp-feature-cards .different-card__pill {
  background: var(--fc-pill); padding: 12px 20px; margin: auto 0 0;
  font-family: var(--fc-body); font-weight: 600; font-size: 11px; line-height: 20px;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--fc-pill-fg); align-self: stretch;
}
/* Pillar cards (the ones with a proof bar) are the Playbooks' .why-card: 15px
   body on 24px in both brands, hub and city alike (re-audit SA8). */
.cp-feature-cards .different-card:has(.different-card__pill) .different-card__body { font-size: 15px; line-height: 24px; max-width: 360px; }

/* The closing line under the cards, with its link to the hub (city pages). */
.cp-feature-cards .different__more {
  font-family: var(--fc-body); font-size: 15px; line-height: 25.5px; color: var(--fc-fg);
  max-width: var(--fc-max); margin: 32px auto 0;
}
.cp-feature-cards .different__more a { color: var(--fc-primary); font-weight: 700; }

/* Icons variant (A Canter Brand): the Playbook's value-prop cards. */
.cp-feature-cards .different-card__icon { width: 64px; height: 64px; color: var(--fc-primary); }
.cp-feature-cards .different-card__icon svg { width: 100%; height: 100%; display: block; }
/* Cards still to be supplied (is-placeholder-cards): the Playbook's dashed
   placeholder tiles (client audit SV2). */
.cp-feature-cards.is-placeholder-cards .different-card {
  border: 1px dashed var(--fc-boulder); border-radius: 4px; padding: 16px;
}
.cp-feature-cards.is-placeholder-cards .different-card__title { color: var(--fc-body-fg); }
/* Title-case pillars (is-titles-case): a brand's spoke cards read as bold
   headings, not the hub's uppercase labels (client audit W3). */
.cp-feature-cards.is-titles-case .different-card__title { font-size: 19px; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.cp-feature-cards.is-variant-icons .different-card { gap: 14px; }
.cp-feature-cards.is-variant-icons .different-card__title {
  font-size: 21px; line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--fc-firefly);
}
.cp-feature-cards.is-variant-icons .different-card__body { font-size: 15px; line-height: 24px; color: var(--fc-body-fg); max-width: 360px; }

.cp-feature-cards .different__grid.is-pair { grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 980px) { .cp-feature-cards .different__grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 980px) { .cp-feature-cards .different__grid.is-pair { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px) { .cp-feature-cards .different__grid { grid-template-columns: 1fr; gap: 32px; } }
/* is-stack-980: the pages whose Playbook grid goes two columns below 1100px
   and one below 980px (Services, Products; client audit TB3). The seed sets it
   where the brand page's own CSS does; others keep the breakpoints above. */
@media (max-width: 1100px) { .cp-feature-cards.is-stack-980 .different__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) { .cp-feature-cards.is-stack-980 .different__grid { grid-template-columns: 1fr; gap: 24px; } }