/* ==========================================================================
   CityFoundry AG — Product pages
   `people-process-programme` · `hr-power-package` · `adminally` ·
   `leadership-companion`

   Read from the client's Figma frames of the same names. Like the pillar
   pages, these are four distinct layouts, not one template — only hero,
   offers and CTA recur, and those already live in pillar.css, which these
   pages also load.

   This file holds only the patterns that first appear on a product page.
   Every value comes from tokens.css. See Ai/REMAINING-PAGES-PLAN.md Group A.

   Requires: tokens.css, base.css, components.css, pillar.css
   ========================================================================== */

/* ==========================================================================
   VERTICAL PROCESS LIST
   `people-process-programme > vorgehen-section` (5 steps, 800px column).
   A numbered rail rather than cards: the steps are sequential, and a grid
   would let the eye jump.
   ========================================================================== */

/* Figma `steps-container`: no cards. A 48px disc, the copy beside it, and a
   2px connector line under the disc joining one step to the next. The white
   bordered cards were ours. */

.cf-steplist {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 24px;
  align-items: start;
}

/* Figma `line-wrapper` is 40px tall and sits between the steps, so the space
   belongs to the step above rather than to a flex gap. */
.cf-step:not(:last-child) { padding-bottom: 40px; }

.cf-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 23px;
  top: 48px;
  width: 2px;
  height: 40px;
  background: var(--cf-line-border-40);
}

.cf-step__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--cf-r-round);
  background: var(--cf-teal);
  color: var(--cf-white);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  line-height: 1;
}

.cf-step__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-step__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  /* Figma 18/27 - the h5 token is 1.65 now, which is a body measure. */
  line-height: 1.5;
  color: var(--cf-ink);
}


/* ==========================================================================
   TAG GRID
   `people-process-programme > intervention-section` — six intervention types
   as a set, with the closing line underneath. Not links, so not chips.
   ========================================================================== */

.cf-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

/* Figma `tags-wrapper`: cream pills, no border, fully rounded, 12/24 pad. */
.cf-tags li {
  padding: 12px 24px;
  border-radius: var(--cf-r-round);
  background: var(--cf-cream);
  font-family: var(--cf-font-body);
  font-weight: 600;
  font-size: var(--cf-fs-body);
  line-height: 1.3;
  color: var(--cf-ink);
}



/* ==========================================================================
   FEATURE GRID
   Five-up on `hr-power-package > funktionslogik` and `adminally > benefits`.
   auto-fit rather than a fixed five columns: five equal columns are too
   narrow for German at this width, and the last row centring itself is the
   better failure mode.
   ========================================================================== */

.cf-pfeatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--cf-gap-4col);
}

/* `leadership-companion > situation-grid`: five 220px cards, gap 16, and the
   row is centred inside the 1280 shell (Figma starts it at x=138). */
.cf-pfeatures--5 {
  grid-template-columns: repeat(5, minmax(0, 220px));
  gap: 16px;
  justify-content: center;
}

.cf-pfeature {
  display: flex;
  flex-direction: column;
  /* `Mitarbeitergespräch`, `Gehaltsentscheidung`, `Deeskalationsstrategien` -
     single German compounds with no break opportunity - were running out of
     the 220px cards. Both properties inherit, so the title and the body are
     covered by this one rule. lang="de-CH" is what makes the dictionary
     hyphenation work. */
  hyphens: auto;
  overflow-wrap: break-word;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
}

.cf-pfeature__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  line-height: var(--cf-lh-h5);
  color: var(--cf-ink);
}

/* A feature grid sitting on white steps to cream so cards stay separable. */
.cf-psec--white .cf-pfeature { background: var(--cf-cream); }

/* ==========================================================================
   BIG NUMBERED ARGUMENTS
   `hr-power-package > vorteile-section` — the numeral is the graphic here
   (Figma sets it at 48px), so it leads instead of sitting in a badge.
   ========================================================================== */

.cf-args {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cf-gap-2col);
}

.cf-arg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
}

.cf-arg__num {
  /* Client asked for 24px under the numeral (2026-09-01). The card's own gap
     contributes 12, so this adds the remaining 12 - Figma's `vorteil-card`
     gap is 24 too. */
  margin-bottom: 12px;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, var(--cf-fs-h1-cta));
  line-height: 1;
  color: var(--cf-cyan);
}

.cf-arg__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h4);
  line-height: var(--cf-lh-h4);
  color: var(--cf-ink);
}

/* ==========================================================================
   HORIZONTAL FLOW
   `hr-power-package > beispiel` (5 stages) and `adminally > synergy`
   (3 stages). Scrolls inside itself on narrow screens rather than wrapping —
   a wrapped sequence stops reading as a sequence.
   ========================================================================== */

/* Figma `flow-row`: five 216px cards. Each wrapper is 216 + 24 gap + a 16px
   chevron, so card-to-card is 40 and the chevron lives in that gap instead of
   in the markup. */
.cf-flow {
  display: flex;
  align-items: stretch;
  gap: 40px;
  /* Figma spaces flow-row and highlight-quote 64 apart (the section's own
     item spacing), not 28. */
  margin: 0 0 64px;
  padding: 4px 0;
  list-style: none;
  overflow-x: auto;
  /* Without these the row grows to its content width and takes the page
     with it — the same flexbox min-width:auto trap as the chip scroller. */
  flex: 1 1 0;
  min-width: 0;
}

.cf-flow__item {
  position: relative;
  flex: 1 1 0;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  /* Figma `flow-card`: cream ground, 40% hairline, r=12, padding 24, gap 12. */
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--cf-line-border-40);
  border-radius: var(--cf-r-inner);
  background: var(--cf-cream);
}

/* Figma `arrow-right`: a 9px chevron in a 16px frame, sitting in the gap
   between two cards. Drawn from borders so the colour stays in the token
   layer - a data-URI arrow would smuggle a hex literal into the CSS. */
.cf-flow__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -34px;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-top: 2px solid var(--cf-teal);
  border-right: 2px solid var(--cf-teal);
  transform: rotate(45deg);
}

/* Figma `step-badge`: 28px dark disc, numeral in white at Poppins 12. */
.cf-flow__num {
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--cf-r-round);
  background: var(--cf-teal);
  color: var(--cf-white);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-eyebrow);
  line-height: 1;
}

.cf-flow__label {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-label);
  line-height: var(--cf-lh-label);
  color: var(--cf-ink);
}

/* Figma `highlight-quote`: 1280 wide, crystal ground, a 4px rule on the left
   only, r=8, padding 24, Poppins 18/27. It was plain text here. */
.cf-flow__close {
  margin: 0;
  padding: 24px;
  border-left: 4px solid var(--cf-teal);
  border-radius: var(--cf-r-btn);
  background: var(--cf-crystal);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  line-height: 1.5;
  color: var(--cf-ink);
}

/* ==========================================================================
   BEFORE / AFTER COMPARISON
   `adminally > problem-section`. Two stacks side by side; the "before" list
   is the pain, so it is the muted one and the "after" carries the accent.
   ========================================================================== */

.cf-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cf-gap-2col);
}

.cf-compare__col {
  display: flex;
  flex-direction: column;
  /* Figma `card-vorher` / `card-nachher`: padding 40, title-to-list gap 32. */
  gap: 32px;
  padding: 40px;
  /* Figma draws this hairline at 40% like the other cards on the page. */
  border: 1px solid var(--cf-line-border-40);
  border-radius: var(--cf-r-card);
  background: var(--cf-cream);
}

.cf-compare__col--after {
  background: var(--cf-crystal);
  border-color: var(--cf-teal);
}

/* Figma puts a 10px status dot in front of each column title - red on the
   manual side, green on the AdminAlly side. */
.cf-compare__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.3;
  color: var(--cf-ink);
}

.cf-compare__title::before {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--cf-r-round);
  background: var(--cf-error);
}

.cf-compare__col--after .cf-compare__title::before { background: var(--cf-success); }

.cf-compare__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cf-c;
}

.cf-compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  counter-increment: cf-c;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-body-sm);
  line-height: var(--cf-lh-body-sm);
  color: var(--cf-teal);
}

/* Figma `num-badge`: 24x24 disc, the manual side on #EB5757 at 10% with the
   numeral in #EB5757. */
.cf-compare__list li::before {
  content: counter(cf-c);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--cf-r-round);
  background: rgb(var(--cf-error-rgb) / .10);
  color: var(--cf-error);
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

/* Figma puts each manual step in a 24px row with the disc and the line
   centred against each other. The AdminAlly side keeps flex-start, because
   there the disc belongs to the title line, not to the whole block. */
.cf-compare__col:not(.cf-compare__col--after) .cf-compare__list li { align-items: center; }

/* The AdminAlly side is the solid dark disc with the numeral in white. */
.cf-compare__col--after .cf-compare__list li::before {
  background: var(--cf-teal);
  color: var(--cf-white);
}

/* Figma: the steps on this side are spaced 24 apart, not 16 - each one is a
   title plus a paragraph, so they need the extra air. */
.cf-compare__col--after .cf-compare__list { gap: 24px; }

/* The "after" side pairs each step with an explanation. */
.cf-compare__step {
  display: flex;
  flex-direction: column;
  /* Figma: 8 between the step title and its paragraph. */
  gap: 8px;
}

.cf-compare__step-title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-body);
  line-height: 1.3;
  color: var(--cf-ink);
}

/* ==========================================================================
   PENDING SECTION
   The client's Figma names two Leadership-Companion sections
   `platzhalter-*` and fills them with bracketed notes to themselves. The
   structure is built so nothing has to be inserted later, but the brackets
   are not shown to a visitor — this reads as "in progress", not as a bug.
   ========================================================================== */

/* ==========================================================================
   DRAFT BLOCK + FEATURE CARDS
   `leadership-companion > platzhalter-*`. Both are plain white cards in the
   Figma - 1px #BCD8DA@30, r=16. The dashed border, the "In Arbeit" tag and
   the cream media slot were ours; the client asked for the Figma exactly,
   and that cream fill was the beige they wanted gone.
   ========================================================================== */

/* Figma `modular-draft-block`: 1120x205, padding 48, gap 24, centred. */
.cf-draft {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
  text-align: center;
}

.cf-draft__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: var(--cf-ink);
}

.cf-draft__text {
  margin: 0;
  max-width: var(--cf-shell-text);
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-body);
  line-height: 1.625;
  color: var(--cf-teal);
}

/* Figma `features-placeholder-grid`: three 411x206 cards, gap 24. */
.cf-fcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cf-gap-4col);
}

.cf-fcard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
}

.cf-fcard__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  /* 20px is both the Figma value and the client's number. */
  font-size: var(--cf-fs-h4);
  line-height: 1.5;
  color: var(--cf-ink);
}

.cf-fcard__text {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 400;
  /* Client asked for 16px; the Figma node is 15. */
  font-size: var(--cf-fs-body);
  line-height: 1.625;
  color: var(--cf-teal);
}


/* ==========================================================================
   PRODUCT MEDIA
   AdminAlly is the one page that legitimately carries screenshots: they are
   the product, not decoration. Nine of them come from the Figma file.
   ========================================================================== */

/* AdminAlly's Figma set is 180x180 illustration icons. Rendered at 56px they
   stay crisp and do not turn the card into a picture. */
/* Card illustrations. 150px per the client (2026-08-31); the Figma node is
   180x180, so this is the one place we sit under the Figma on purpose. */
.cf-ico {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  margin-bottom: 4px;
}

.cf-shot {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-inner);
  background: var(--cf-white);
}

/* Figma crops this to 700x350 (2:1). The source file is 1419x1250, so without
   an explicit ratio + cover the hero grows to 1250px tall. */
.cf-hero__shot {
  width: 100%;
  max-width: 700px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  border-radius: var(--cf-r-card);
}

/* The Figma places this illustration in a 700x350 box with scaleMode=FIT —
   the whole drawing, letterboxed, not a 2:1 crop of it. `cover` was cutting
   the top and bottom off and made the hero read as a wide photo. */
.cf-hero__shot--fit {
  object-fit: contain;
  object-position: center;
}

/* `hr-power-package`: that frame's box is 600x300, also FIT, and it carries
   no corner radius - the rounded 700px crop read as a photo. */
.cf-hero__shot--plain {
  max-width: 600px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}

/* ==========================================================================
   CROSSLINK BAND
   `leadership-companion > crosslink-section` — narrow, centred, one link out.
   ========================================================================== */

.cf-crosslink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: var(--cf-shell-text);
  margin: 0 auto;
  text-align: center;
}

/* Figma: Poppins 32/48 - between the h2 (40) and h3 (28) steps, so it is set
   here rather than added to the type scale for one use. */
.cf-crosslink__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.5;
  color: var(--cf-ink);
}

/* `hr-power-package > ergebnis-section` sets its content-block gap to 32. */
.cf-crosslink--airy { gap: 32px; }

/* Figma `link-wrapper`: 299x44, 1px #004045, r=8, pad 12/24, label 15px. */
.cf-crosslink .cf-btn {
  height: 44px;
  padding: 0 24px;
  font-size: var(--cf-fs-body-sm);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199px) {
  .cf-args,
  .cf-compare { grid-template-columns: 1fr; }
  /* Five fixed 220px columns stop fitting once the gutter narrows. */
  .cf-pfeatures--5 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--cf-gap-4col);
  }
  .cf-fcards { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .cf-arg,
  .cf-pfeature,
  .cf-compare__col,
  .cf-draft { padding: 28px 20px; }
  .cf-fcard { padding: 28px; }

  /* The disc shrinks, so the column, the connector's offset and its height
     all move with it - otherwise the rule stops lining up under the disc. */
  .cf-step { grid-template-columns: 40px 1fr; column-gap: 16px; }
  .cf-step__num { width: 40px; height: 40px; font-size: var(--cf-fs-body); }
  .cf-step:not(:last-child) { padding-bottom: 28px; }
  .cf-step:not(:last-child)::after { left: 19px; top: 40px; height: 28px; }
  .cf-tags li { padding: 10px 16px; font-size: var(--cf-fs-body-sm); }
  .cf-flow__item { min-width: 150px; padding: 16px; }
}

/* ==========================================================================
   TWO-NODE DIAGRAM
   `people-process-programme > visual-diagram`: a 400x400 card holding a
   dashed 300px ring inset 50, People at the top and Process at the bottom
   (both centred on the ring), and a 40px connector disc in the middle.
   Same family as the homepage's three-node diagram, one node fewer.

   The ring keeps rotating: the client asked for the motion explicitly.
   base.css stops it under prefers-reduced-motion.
   ========================================================================== */

.cf-duo {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  padding: 40px;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: 24px;
  background: var(--cf-teal);
}

.cf-duo__ring {
  position: absolute;
  /* 50/400 - the ring is inset from the card edge, not from its padding. */
  inset: 12.5%;
  width: 75%;
  height: 75%;
  color: var(--cf-sky);
  animation: cf-spin 48s linear infinite;
}

.cf-duo__node {
  position: absolute;
  /* 130x72 at (135, 28) and (135, 314) of 400. */
  left: 33.75%;
  width: 32.5%;
  min-height: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 1.5px solid var(--cf-sky);
  border-radius: 14px;
  background: var(--cf-teal);
  color: var(--cf-white);
}

.cf-duo__node--1 { top: 7%; }
.cf-duo__node--2 { top: 78.5%; }

.cf-duo__label {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-eyebrow);
  line-height: 1.3;
  color: var(--cf-white);
}

/* The disc masks the ring behind it, which is why it carries the card's own
   ground colour rather than being a bare dot. */
.cf-duo__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cf-r-round);
  background: var(--cf-teal);
}

.cf-duo__core::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: var(--cf-r-round);
  background: var(--cf-cyan);
}


/* product.css is loaded without home.css, so the shared keyframes live here
   too. Duplicate names resolve to the same animation. */
@keyframes cf-spin  { to { transform: rotate(360deg); } }
@keyframes cf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .cf-duo__ring,
  .cf-duo__node { animation: none; }
}


/* ==========================================================================
   Benefit tick — Figma `benefits-grid`: a 36x36 rounded plate with an 18px
   check. Colour comes from currentColor so the plate can move ground.
   ========================================================================== */

.cf-tick {
  flex: 0 0 auto;
  display: block;
  color: var(--cf-teal);
}

/* ==========================================================================
   UI SHOT — `Ein Blick auf die Oberfläche`
   The screenshot is the image; the bar under it is markup, so its label and
   button stay editable (and the button works).
   ========================================================================== */

.cf-uishot {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
  box-shadow: 0 24px 48px rgb(var(--cf-teal-rgb) / .10);
}

.cf-uishot__frame {
  border-radius: var(--cf-r-inner);
  overflow: hidden;
}

.cf-uishot__img {
  display: block;
  width: 100%;
  height: auto;
}

.cf-uishot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--cf-r-inner);
  background: var(--cf-cream);
}

/* On a phone a 1577px-wide screenshot shrinks to unreadable, so it scrolls
   inside its own frame instead — same rule the project uses for tables and
   diagrams. */
@media (max-width: 767px) {
  .cf-uishot { padding: 14px; }
  .cf-uishot__frame { overflow-x: auto; }
  .cf-uishot__img { width: auto; min-width: 720px; }
}

.cf-uishot__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-body);
  line-height: var(--cf-lh-label);
  color: var(--cf-ink);
}

/* ==========================================================================
   SYNERGY — Figma `synergy-section`: ROW gap=80, copy 600 + visual 600 with
   a 420x420 diagram card.
   ========================================================================== */

.cf-synergy {
  display: grid;
  /* 600 + 80 + 600 = the 1280 shell exactly. Fractions, not fixed pixels:
     the gutter shrinks below 1440px, and two hard 600s overflowed by 23px
     between 1200 and 1280. */
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.cf-synergy__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.cf-synergy__copy .cf-h2 { margin-bottom: 8px; }
.cf-synergy__copy .cf-btn { margin-top: 16px; }

.cf-synergy__visual {
  display: flex;
  justify-content: center;
}

.cf-synergy__diagram {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--cf-r-card);
}

@media (max-width: 1199px) {
  .cf-synergy { grid-template-columns: 1fr; gap: 40px; }
}


/* ==========================================================================
   TECH GRID
   `people-process-programme > tech-grid`: two 624x266 cards, gap 32, padding
   40, inner gap 24, title 22/33 and body 14/21 - one step tighter than the
   homepage's `.cf-ways__grid` pair, which is why it is its own grid.
   The Figma sets the card eyebrow in #BCD8DA; on a white card that is a
   1.5:1 contrast, so the darker `.cf-eyebrow-sm` colour stays.
   ========================================================================== */

.cf-techgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cf-gap-2col);
}

.cf-techgrid .cf-card {
  padding: 40px;
  gap: 24px;
}

.cf-techgrid .cf-h3 {
  font-size: 22px;
  line-height: 1.5;
}

.cf-techgrid .cf-body-sm {
  font-size: var(--cf-fs-body-xs);
  line-height: var(--cf-lh-body-xs);
}

@media (max-width: 991px) {
  .cf-techgrid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   EVENT CARDS + FUNCTION ICONS
   `hr-power-package > grid-row` and `> functions-grid`.
   ========================================================================== */

/* Figma: six 411px cards, three per row, gap 24 both ways. It was five in one
   row here, which is not a layout the frame ever had. */
.cf-events {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cf-gap-4col);
}

/* Figma `event-card`: cream ground, r=16, padding 32, gap 16, no border. */
.cf-event {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: var(--cf-r-card);
  background: var(--cf-cream);
}

/* Figma `badge`: 36x36, r=8, dark ground, numeral in white at Poppins 16. */
.cf-event__num {
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--cf-r-btn);
  background: var(--cf-teal);
  color: var(--cf-white);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-body);
  line-height: 1;
}

.cf-event__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  line-height: 1.5;
  color: var(--cf-ink);
}

/* Figma `icon-wrap`: 48x48 crystal tile, r=12, with a 20px line icon in
   #004045. The icon names in the frame are share, message-circle,
   chart-network, bell and chart-line - drawn inline, colour from here. */
.cf-ficon {
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--cf-r-inner);
  background: var(--cf-crystal);
  color: var(--cf-teal);
}

@media (max-width: 991px) {
  .cf-events { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  .cf-events { grid-template-columns: 1fr; }
  .cf-event { padding: 24px; }
}