/* ==========================================================================
   In Good Company — 37:1687 · 1512 x 760
   Flusso verticale: 80 + 600 (Container) + 80 = 760 (nessun delta).
   Base .section + .section--compact (padding-block 80, padding-inline 40,
   column, align-items center). gap dell'auto-layout = 0.
   ========================================================================== */

.igc {
  gap: 0;                                  /* gap dell'auto-layout 37:1687 */
  background: var(--color-white);          /* #ffffff, tinta piatta */
}

/* --- Container 37:1688 — 1432 x 600 ---------------------------------------
   Gradiente con angolo PROPRIO 95.3628319823323deg (non 90): token
   --gradient-igc. Clip content obbligatorio: il gruppo 42:2080 deborda di
   100px sotto il bordo inferiore e va tagliato (fa parte del design).
   space-between su due soli figli in flusso (Title e caption): il gruppo
   "100%" e assoluto e non partecipa. */
.igc__card {
  position: relative;
  width: var(--container-width);           /* 1432px */
  height: 600px;
  padding: var(--space-6) var(--space-6) var(--space-5);  /* 80 / 80 / 40 / 80 */
  border-radius: var(--radius-lg);         /* 16px */
  background: var(--gradient-igc);
  color: var(--text-on-dark);
  overflow: hidden;                        /* taglia il "100" a y = 600 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* --- Gruppo "100%" 42:2080 — 1127 x 436 -----------------------------------
   x 152.5, y 264 rispetto al Container: centrato sulla larghezza totale
   (152.5 + 1127/2 = 716 = 1432/2) e bottom a 700, cioe -100 rispetto ai 600
   del Container. Essendo assoluto NON contribuisce all'altezza.
   z-index 0 + z-index 1 sui testi: serve a riprodurre lo z-order Figma
   (42:2080 primo figlio => dietro), perche' in CSS un elemento assoluto
   dipingerebbe altrimenti SOPRA il testo in flusso.
   align-items: flex-start allinea i due box in alto: essendo entrambi
   cap-trimmed, l'allineamento e sulla CAP-HEIGHT, come in Figma. */
.igc__number {
  position: absolute;
  left: 50%;
  bottom: -100px;
  transform: translateX(-50%);
  z-index: 0;
  height: 436px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;                                  /* "%" attaccato al "100" */
  white-space: nowrap;
  pointer-events: none;
}

/* 42:2076 "100" — 600px, cap-trim -> box 436 (600 x 0.727), #fff @ .05.
   42:2078 "%"   — 120px, cap-trim -> box  87 (120 x 0.727), #fff @ .05.
   Il trim arriva da .cap-trim in base.css: NON reimplementato qui. */
.igc__number-value,
.igc__number-unit {
  color: var(--color-white);
  opacity: .05;                            /* unico valore != 1 della sezione */
  text-align: left;
  white-space: nowrap;
}

/* --- Title 42:2083 — 1272 x 131 (58 + 16 + 57) ---------------------------
   1272 = 1432 - 2*80 (padding del Container). */
.igc__title {
  position: relative;
  z-index: 1;                              /* sopra al numero */
  width: 1272px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                     /* 16px */
}

/* 37:1726 — 48/58, #ffffff, box 1272 x 58, 1 riga */
.igc__h2 {
  width: 1272px;
  color: var(--color-white);
  text-align: center;
}

/* 37:1727 — 16/19, #d2d2d2, box 1272 x 57 = 3 righe da hard break */
.igc__lead {
  width: 1272px;
  color: var(--text-on-dark-muted);        /* #d2d2d2 — Neutrals/300 */
  text-align: center;
}

/* --- Caption 42:2081 — 1272 x 19 -----------------------------------------
   Sta SOPRA al numero (terzo figlio in Figma): #d2d2d2 su fondo scuro +
   numero al 5% -> contrasto preservato. */
.igc__caption {
  position: relative;
  z-index: 1;
  width: 1272px;
  color: var(--text-on-dark-muted);
  text-align: center;
  text-transform: none;                    /* il maiuscolo e nel contenuto */
  letter-spacing: 0;                       /* NESSUN tracking, malgrado l'all-caps */
}