/**
 * 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.is-surface-grey { background: var(--wp--preset--color--on-surface); }

.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: var(--cp-h2, 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(--cp-em, 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;
}
/* A brand with an accent colour sets the order numbers in it, bold, as Generator
   One's Repair process (01 to 03; full-site re-audit SV10). Only Generator One
   seeds numbered feature cards. */
body.cp-has-accent .cp-feature-cards .different-card__num { font-weight: 700; color: var(--cp-accent); line-height: 1; }
.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;
}
/* Optional per-card link (product model grids): the Playbook's service-card link. */
.cp-feature-cards .different-card__link {
  align-self: flex-start; font-family: var(--fc-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--fc-primary); text-decoration: none;
}
.cp-feature-cards .different-card__link:hover { text-decoration: underline; }
/* 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; }
/* Generator One's A Canter Brand cards (.why-card): 48px icons in the accent,
   19px titles, 14/22px copy, a 44 x 40px grid (full-site re-audit SV12). */
body.cp-has-accent .cp-feature-cards.is-variant-icons .different-card { gap: 12px; }
body.cp-has-accent .cp-feature-cards.is-variant-icons .different-card__icon { width: 48px; height: 48px; color: var(--cp-accent); }
body.cp-has-accent .cp-feature-cards.is-variant-icons .different-card__title { font-size: 19px; }
body.cp-has-accent .cp-feature-cards.is-variant-icons .different-card__body { font-size: 14px; line-height: 22px; }
@media (min-width: 981px) { body.cp-has-accent .cp-feature-cards.is-variant-icons .different__grid { gap: 44px 40px; } }

.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; } }
/* is-cols-2: a two-column grid for any card count, the Playbook's 2 x 2
   "Why Choose the Midwest 12-Year Warranty" (#game-changer, client audit SV2):
   two 460px columns centred above 1100px, then the grid's own breakpoints
   (two columns to 980px with is-stack-980, else to 640px; then one). Nothing
   changes without the class; is-pair keeps its own rule. */
.cp-feature-cards.is-cols-2 .different__grid { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; gap: 48px 96px; }
@media (max-width: 1100px) { .cp-feature-cards.is-cols-2 .different__grid { grid-template-columns: 1fr 1fr; justify-content: normal; gap: 40px; } }
@media (max-width: 980px) { .cp-feature-cards.is-cols-2.is-stack-980 .different__grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 640px) { .cp-feature-cards.is-cols-2 .different__grid { grid-template-columns: 1fr; gap: 32px; } }
/* Generator One's 2 x 2 (.different__grid--two): two full-width columns on the
   base 40 x 48px gaps, one column below 980px (re-audit R7). */
body.cp-has-accent .cp-feature-cards.is-cols-2 .different__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: normal; gap: 40px 48px; }
@media (max-width: 980px) { body.cp-has-accent .cp-feature-cards.is-cols-2 .different__grid { grid-template-columns: 1fr; gap: 24px; } }

/* is-variant-plans: price cards (Generator One's Service Plans, the Playbook's
   .plan-card; staging audit SV2). The title, the pill as a large display price
   in the brand's display colour, the body's first paragraph as an uppercase
   meta line, then the copy, on a white card with a coloured top rule. */
.cp-feature-cards.is-variant-plans .different__grid { margin-top: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cp-feature-cards.is-variant-plans .different-card {
  background: var(--fc-white); border: 1px solid #E5E3DF; border-top: 3px solid var(--cp-em, var(--fc-primary));
  border-radius: 8px; padding: 26px 24px 24px; gap: 10px;
}
.cp-feature-cards.is-variant-plans .different-card__title { font-size: 22px; line-height: 1.15; letter-spacing: 0; text-transform: none; }
.cp-feature-cards.is-variant-plans .different-card__price {
  margin: 0; font-family: var(--fc-display); font-weight: 700; font-size: 36px; line-height: 1;
  color: var(--cp-em, var(--fc-primary));
}
.cp-feature-cards.is-variant-plans .different-card__meta {
  margin: 0; font-family: var(--fc-body); font-weight: 700; font-size: 12px; line-height: 18px;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--fc-body-fg);
}
.cp-feature-cards.is-variant-plans .different-card__body { font-size: 14px; line-height: 22px; color: var(--fc-body-fg); flex: 1; }
@media (max-width: 900px) { .cp-feature-cards.is-variant-plans .different__grid { grid-template-columns: 1fr; gap: 20px; } }
/* The plans' button is the next section (a cp-prose-section with only a
   button): it sits 28px under the cards, on the same surface. */
.cp-feature-cards.is-variant-plans:has(+ .cp-prose-section.is-cta-after) { padding-bottom: 0; }
.cp-feature-cards.is-variant-plans + .cp-prose-section.is-cta-after { padding-top: 28px; }
.cp-feature-cards.is-variant-plans + .cp-prose-section.is-cta-after .prose__ctas { margin-top: 0; }