/**
 * Stili pagina template: Graphpid (page-graphpid.php).
 *
 * Implementazione fedele a "Pagina GraphPID desktop+mobile.xd" (1920px desktop / 393px mobile).
 *
 * @package GDS-Fullcreative
 */

.gds-page--graphpid {
  --gds-gp-red-dark: #b80011;
  --gds-gp-red-pill: #c72a29;
  --gds-gp-slate: #2a2f3a;
  --gds-gp-dark: #1f232c;
  --gds-gp-navy: #0a1729;
  --gds-gp-black: #0f1115;
  --gds-gp-light-bg: #e5e2e4;
  --gds-gp-muted: #868686;
  --gds-gp-card-placeholder: #f0f0f0;
  --gds-gp-content-w: 1396px;
  background-color: #ffffff;
  color: var(--gds-gp-dark);
  font-family: var(--font-primary);
  overflow-x: clip;
}

body:has(.gds-page--graphpid) {
  overflow-x: hidden;
}

.gds-graphpid-section {
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

.gds-graphpid-container {
  box-sizing: border-box;
  width: min(100% - 48px, var(--gds-gp-content-w));
  max-width: var(--gds-gp-content-w);
  margin-inline: auto;
}

/* =========================================================
   COMPONENTI CONDIVISI (BOTTONI, CERCHI FRECCIA, NODI, TITOLI)
   ========================================================= */
.gds-graphpid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 205px;
  height: 50px;
  padding: 0 24px;
  border-radius: 50px;
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.gds-graphpid-btn--wide {
  min-width: 266px;
}

.gds-graphpid-btn--red {
  border: 1px solid var(--gds-gp-red-pill);
  background-color: transparent;
  color: var(--gds-gp-red-pill);
}

.gds-graphpid-btn--red:hover,
.gds-graphpid-btn--red:focus-visible {
  background-color: var(--gds-gp-red-pill);
  color: #ffffff;
}

.gds-graphpid-btn--white {
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
}

.gds-graphpid-btn--white:hover,
.gds-graphpid-btn--white:focus-visible {
  background-color: #ffffff;
  color: var(--gds-gp-red-dark);
}

.gds-graphpid-arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  flex-shrink: 0;
  line-height: 0;
}

.gds-graphpid-arrow-circle svg {
  display: block;
  width: 31px;
  height: 31px;
}

.gds-graphpid-node-dot {
  display: block;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--gds-gp-red-dark);
  border: 1px solid #ffffff;
  pointer-events: none;
}

.gds-graphpid-section__header {
  text-align: center;
  margin-inline: auto;
}

.gds-graphpid-section__title {
  margin: 0 0 18px;
  font-family: var(--font-primary);
  font-size: clamp(32px, 2.2vw, 42px);
  font-weight: 300;
  line-height: 1.19;
  letter-spacing: 0;
}

.gds-graphpid-section__title--light {
  color: #ffffff;
}

.gds-graphpid-section__title--dark {
  color: var(--gds-gp-navy);
}

.gds-graphpid-section__lead {
  margin: 0 auto;
  font-family: var(--font-primary);
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.03em;
}

.gds-graphpid-section__lead--light {
  color: #e5e2e4;
}

.gds-graphpid-section__lead--dark {
  color: var(--gds-gp-dark);
}

/* Dots caroselli (nascosti su desktop) */
.gds-graphpid-slider__dots {
  display: none;
}

/* =========================================================
   SEZIONE 1: HERO
   ========================================================= */
.gds-graphpid-hero {
  background-color: #ffffff;
  padding: 96px 0 72px;
}

.gds-graphpid-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gds-graphpid-hero__title {
  margin: 0 0 22px;
  max-width: 1396px;
  color: var(--gds-gp-navy);
  font-family: var(--font-primary);
  font-size: clamp(32px, 2.2vw, 42px);
  font-weight: 300;
  line-height: 1.19;
  letter-spacing: 0;
}

.gds-graphpid-hero__lead {
  margin: 0 0 56px;
  max-width: 972px;
  color: var(--gds-gp-navy);
  font-family: var(--font-primary);
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.03em;
}

.gds-graphpid-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* =========================================================
   SEZIONE 2: THE CHALLENGE / THE GRAPHPID SOLUTION
   ========================================================= */
.gds-graphpid-compare {
  background-color: var(--gds-gp-red-dark);
  color: #ffffff;
  min-height: 885px;
  padding: 78px 0 82px;
  overflow: hidden;
}

/* Linea verticale centrale divisoria (Desktop) */
.gds-graphpid-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: #ffffff;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

/* Linea orizzontale bianca che attraversa le 2 card bianche in basso */
.gds-graphpid-compare__visual-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 215px;
  height: 1px;
  background-color: #ffffff;
  z-index: 1;
  pointer-events: none;
}

.gds-graphpid-compare__line-dot-left {
  position: absolute;
  left: max(20px, calc(50% - 698px));
  top: 50%;
  transform: translate(-50%, -50%);
}

.gds-graphpid-compare__viewport {
  position: relative;
  z-index: 3;
  width: 100%;
}

.gds-graphpid-compare__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.gds-graphpid-compare__col {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
}

.gds-graphpid-compare__col-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 612px;
  box-sizing: border-box;
}

.gds-graphpid-compare__col--challenge {
  align-items: flex-end;
  text-align: right;
}

.gds-graphpid-compare__col--challenge .gds-graphpid-compare__col-inner {
  align-items: flex-end;
  padding-right: 86px;
  padding-left: 24px;
}

.gds-graphpid-compare__col--solution {
  align-items: flex-start;
  text-align: left;
}

.gds-graphpid-compare__col--solution .gds-graphpid-compare__col-inner {
  align-items: flex-start;
  padding-left: 86px;
  padding-right: 24px;
}

.gds-graphpid-compare__badge-wrap {
  margin-bottom: 44px;
}

.gds-graphpid-compare__col--challenge .gds-graphpid-compare__badge-wrap {
  margin-right: -26px;
}

.gds-graphpid-compare__col--solution .gds-graphpid-compare__badge-wrap {
  margin-left: -21px;
}

.gds-graphpid-compare__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 198px;
  height: 47px;
  margin: 0;
  padding: 0 24px;
  border-radius: 50px;
  background-color: #ffffff;
  color: var(--gds-gp-dark);
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.gds-graphpid-compare__badge--solution {
  min-width: 275px;
}

.gds-graphpid-compare__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 0 58px;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 526px;
}

.gds-graphpid-compare__item {
  position: relative;
  margin: 0;
}

.gds-graphpid-compare__item-title {
  margin: 0 0 2px;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.03em;
}

.gds-graphpid-compare__item-text {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 0.03em;
}

/* Frecce circolari centrate esattamente sulla linea verticale a x=50% */
.gds-graphpid-compare__item-arrow {
  position: absolute;
  right: -86px;
  top: 50%;
  transform: translate(50%, -50%);
  z-index: 4;
}

/* Visual cards 456×268 in basso */
.gds-graphpid-compare__visual-wrap {
  position: relative;
  width: 100%;
  max-width: 456px;
  margin-top: auto;
}

.gds-graphpid-compare__visual-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 268px;
  padding: 32px 44px;
  border-radius: 2px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.gds-graphpid-compare__visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gds-graphpid-compare__visual-placeholder {
  margin: 0;
  max-width: 294px;
  color: #868686;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.gds-graphpid-compare__visual-placeholder--right {
  text-align: right;
  margin-left: auto;
}

.gds-graphpid-compare__visual-placeholder--left {
  text-align: left;
  margin-right: auto;
}

/* Pallini rossi sui bordi delle card (a 134px dal fondo card = allineati con visual-line) */
.gds-graphpid-compare__card-dot {
  position: absolute;
  bottom: 133px;
  transform: translateY(50%);
  z-index: 4;
}

.gds-graphpid-compare__card-dot--left {
  display: none;
  left: -12.5px;
}

.gds-graphpid-compare__card-dot--right {
  right: -12.5px;
}

.gds-graphpid-compare__mobile-nav {
  display: none;
}

/* =========================================================
   SEZIONE 3: FROM ENGINEERING DRAWINGS TO OPERATIONAL INSIGHT
   ========================================================= */
.gds-graphpid-insight {
  background-color: var(--gds-gp-slate);
  color: #ffffff;
  min-height: 890px;
  padding: 83px 0 96px;
}

.gds-graphpid-insight__header {
  margin-bottom: 84px;
}

.gds-graphpid-insight__lead {
  max-width: 1243px;
}

.gds-graphpid-insight__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  position: relative;
}

.gds-graphpid-insight__col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  padding: 0 36px;
  min-height: 500px;
}

/* Linee verticali bianche 2px tra le 3 colonne (height 500.5px nell'XD) */
.gds-graphpid-insight__col:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  right: -1px;
  width: 2px;
  height: 500px;
  background-color: #ffffff;
  pointer-events: none;
}

.gds-graphpid-insight__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 211px;
  margin-bottom: 31px;
}

.gds-graphpid-insight__icon {
  display: block;
  max-width: 211px;
  max-height: 211px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gds-graphpid-insight__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 154px;
  height: 38px;
  padding: 0 22px;
  margin-bottom: 20px;
  border-radius: 50px;
  background-color: var(--gds-gp-red-pill);
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}

.gds-graphpid-insight__col-title {
  margin: 0 0 24px;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.03em;
}

.gds-graphpid-insight__col-text {
  margin: 0;
  max-width: 357px;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 0.03em;
}

/* =========================================================
   SEZIONE 4: 9-STEP AI DIGITIZATION PIPELINE
   ========================================================= */
.gds-graphpid-pipeline {
  background-color: var(--gds-gp-light-bg);
  color: var(--gds-gp-dark);
  padding: 67px 0 88px;
}

.gds-graphpid-pipeline__header {
  margin-bottom: 68px;
}

.gds-graphpid-pipeline__lead {
  max-width: 1120px;
}

.gds-graphpid-pipeline__phases {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.gds-graphpid-phase {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 640px);
  justify-content: space-between;
  align-items: start;
  column-gap: 48px;
}

.gds-graphpid-phase__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gds-graphpid-phase__eyebrow {
  margin: 0 0 6px;
  padding-left: 70px;
  color: var(--gds-gp-muted);
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.gds-graphpid-phase__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 337px;
  max-width: 100%;
  height: 38px;
  padding: 0 24px 0 70px;
  margin-bottom: 18px;
  border-radius: 50px;
  background-color: var(--gds-gp-red-pill);
}

.gds-graphpid-phase__pill-arrow {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.gds-graphpid-phase__pill-title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.gds-graphpid-phase__intro {
  margin: 0 0 28px;
  padding-left: 70px;
  color: var(--gds-gp-dark);
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 300;
  line-height: 30px;
}

.gds-graphpid-phase__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0 0 0 24px;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}

/* Linea rossa verticale che collega i cerchi numerati degli step */
.gds-graphpid-phase__steps::before {
  content: "";
  position: absolute;
  left: 39px;
  top: 15px;
  bottom: 24px;
  width: 1px;
  background-color: var(--gds-gp-red-pill);
  z-index: 1;
}

.gds-graphpid-step {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 0;
}

.gds-graphpid-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 31px;
  height: 31px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--gds-gp-red-pill);
  background-color: var(--gds-gp-light-bg);
  color: var(--gds-gp-dark);
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.gds-graphpid-step__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
}

.gds-graphpid-step__title {
  margin: 0 0 2px;
  color: var(--gds-gp-red-dark);
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

.gds-graphpid-step__desc {
  margin: 0;
  color: var(--gds-gp-dark);
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 300;
  line-height: 28px;
}

/* Colonna destra: Griglia card step (311×199 px) */
.gds-graphpid-phase__media {
  padding-top: 64px;
}

.gds-graphpid-phase__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 311px));
  justify-content: end;
  gap: 17px 18px;
}

.gds-graphpid-phase__card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 199px;
  margin: 0;
  border-radius: 2px;
  background-color: var(--gds-gp-card-placeholder);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.gds-graphpid-phase__card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--gds-gp-red-dark);
  border: 1px solid #ffffff;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.gds-graphpid-phase__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   SEZIONE 5: SEE GRAPHPID IN ACTION (RED BANNER)
   ========================================================= */
.gds-graphpid-action {
  background-color: var(--gds-gp-red-dark);
  color: #ffffff;
  min-height: 292px;
  display: flex;
  align-items: center;
  padding: 44px 0 50px;
}

.gds-graphpid-action__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gds-graphpid-action__title {
  margin: 0 0 14px;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: clamp(32px, 2.2vw, 42px);
  font-weight: 300;
  line-height: 1.19;
}

.gds-graphpid-action__lead {
  margin: 0 0 34px;
  max-width: 1243px;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.03em;
}

/* =========================================================
   SEZIONE 6: WHY GRAPHPID?
   ========================================================= */
.gds-graphpid-why {
  background-color: var(--gds-gp-slate);
  color: #ffffff;
  min-height: 784px;
  padding: 96px 0 110px;
}

.gds-graphpid-why__header {
  margin-bottom: 64px;
}

.gds-graphpid-why__lead {
  max-width: 1243px;
}

.gds-graphpid-why__cards-area {
  position: relative;
  width: 100%;
}

/* Linea bianca orizzontale full-bleed all'altezza del bordo header/body (102px) */
.gds-graphpid-why__connector-line {
  position: absolute;
  top: 102px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #ffffff;
  z-index: 1;
  pointer-events: none;
}

.gds-graphpid-why__slider {
  position: relative;
  z-index: 2;
}

.gds-graphpid-why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 308px));
  justify-content: space-between;
  gap: 24px;
}

.gds-graphpid-why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-height: 283px;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.gds-graphpid-why-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 102px;
  padding: 16px 20px;
  border-radius: 15px 15px 0 0;
  background-color: var(--gds-gp-red-dark);
  text-align: center;
}

.gds-graphpid-why-card__title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0;
}

.gds-graphpid-why-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 22px 28px 24px;
  border-radius: 0 0 15px 15px;
  background-color: #ffffff;
  text-align: center;
}

.gds-graphpid-why-card__text {
  margin: 0;
  max-width: 236px;
  color: var(--gds-gp-dark);
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.02em;
}

/* Pallini rossi 25×25 sui bordi delle card a top: 102px */
.gds-graphpid-why-card__dot {
  position: absolute;
  top: 102px;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
}

.gds-graphpid-why-card__dot.is-desktop-visible {
  display: block;
}

.gds-graphpid-why-card__dot--left {
  left: -12.5px;
}

.gds-graphpid-why-card__dot--right {
  right: -12.5px;
}

/* =========================================================
   SEZIONE 7: FINAL CTA
   ========================================================= */
.gds-graphpid-cta {
  background-color: #ffffff;
  min-height: 373px;
  display: flex;
  align-items: center;
  padding: 78px 0 65px;
}

.gds-graphpid-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gds-graphpid-cta__title {
  margin: 0 0 24px;
  color: var(--gds-gp-black);
  font-family: var(--font-primary);
  font-size: clamp(32px, 2.35vw, 45px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0;
}

.gds-graphpid-cta__subtitle {
  margin: 0 0 42px;
  max-width: 1053px;
  color: var(--gds-gp-slate);
  font-family: var(--font-primary);
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: 0.03em;
}

/* =========================================================
   RESPONSIVE MOBILE / TABLET (<= 1280px — Artboard XD 393px)
   ========================================================= */
@media (max-width: 1280px) {
  .gds-graphpid-container {
    width: 100%;
    max-width: none;
    padding-inline: var(--gds-home-pad-x, 36px);
  }

  .gds-graphpid-btn {
    height: 39px;
    min-width: 155px;
    padding: 0 20px;
    font-size: 16px;
  }

  .gds-graphpid-btn--secondary {
    min-width: 179px;
  }

  .gds-graphpid-btn--wide {
    min-width: 199px;
  }

  .gds-graphpid-section__header {
    text-align: left;
  }

  .gds-graphpid-section__title {
    font-size: 38px;
    line-height: 42px;
    margin-bottom: 22px;
  }

  .gds-graphpid-section__lead {
    font-size: 22px;
    line-height: 27px;
    margin-inline: 0;
  }

  .gds-graphpid-section__lead br {
    display: none;
  }

  /* Slider generico mobile */
  .gds-graphpid-slider__viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
    touch-action: pan-y;
  }

  .gds-graphpid-slider__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100%;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .gds-graphpid-slider.is-dragging .gds-graphpid-slider__track {
    transition: none;
  }

  .gds-graphpid-slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
  }

  .gds-graphpid-slider__dots[hidden] {
    display: none !important;
  }

  .gds-graphpid-slider__dot {
    display: block;
    box-sizing: border-box;
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #707070;
    background-color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .gds-graphpid-slider__dot[aria-selected="true"] {
    background-color: #ffffff;
    border-color: #707070;
    transform: scale(1.15);
  }

  /* Sezione 1: Hero Mobile */
  .gds-graphpid-hero {
    padding: 28px 0 36px;
  }

  .gds-graphpid-hero__inner {
    align-items: flex-start;
    text-align: left;
  }

  .gds-graphpid-hero__title {
    font-size: 32px;
    line-height: 35px;
    margin-bottom: 24px;
  }

  .gds-graphpid-hero__lead {
    font-size: 22px;
    line-height: 27px;
    margin-bottom: 34px;
  }

  .gds-graphpid-hero__lead br {
    display: none;
  }

  .gds-graphpid-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }

  /* Sezione 2: Compare Mobile (Slider 2 slide + bottone freccia Raggruppa 3476) */
  .gds-graphpid-compare {
    min-height: 802px;
    padding: 48px 0 32px;
  }

  .gds-graphpid-compare__divider,
  .gds-graphpid-compare__item-arrow,
  .gds-graphpid-compare__line-dot-left {
    display: none;
  }

  .gds-graphpid-compare__visual-line {
    bottom: 196px;
  }

  .gds-graphpid-compare__viewport {
    overflow: hidden;
    touch-action: pan-y;
  }

  .gds-graphpid-compare__track {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .gds-graphpid-compare.is-dragging .gds-graphpid-compare__track {
    transition: none;
  }

  .gds-graphpid-compare__col {
    flex: 0 0 100%;
    width: 100%;
  }

  .gds-graphpid-compare__col--challenge .gds-graphpid-compare__col-inner,
  .gds-graphpid-compare__col--solution .gds-graphpid-compare__col-inner {
    max-width: none;
    padding-inline: var(--gds-home-pad-x, 36px);
  }

  .gds-graphpid-compare__col--challenge .gds-graphpid-compare__badge-wrap,
  .gds-graphpid-compare__col--solution .gds-graphpid-compare__badge-wrap {
    margin-inline: 0;
    margin-bottom: 28px;
  }

  .gds-graphpid-compare__list {
    gap: 24px;
    margin-bottom: 36px;
    max-width: none;
  }

  .gds-graphpid-compare__item-title,
  .gds-graphpid-compare__item-text {
    font-size: 22px;
    line-height: 27px;
  }

  .gds-graphpid-compare__item-text br {
    display: none;
  }

  .gds-graphpid-compare__visual-wrap {
    max-width: 319px;
    margin-inline: auto;
  }

  .gds-graphpid-compare__visual-card {
    height: 219px;
    padding: 24px 28px;
  }

  .gds-graphpid-compare__card-dot {
    bottom: 109.5px;
  }

  .gds-graphpid-compare__card-dot--left,
  .gds-graphpid-compare__card-dot--right {
    display: block;
  }

  .gds-graphpid-compare__mobile-nav {
    display: flex;
    justify-content: center;
    margin-top: 22px;
    position: relative;
    z-index: 4;
  }

  .gds-graphpid-compare__mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.25s ease;
  }

  .gds-graphpid-compare[data-gds-compare-slide="1"] .gds-graphpid-compare__mobile-toggle {
    transform: rotate(180deg);
  }

  /* Sezione 3: Operational Insight Mobile */
  .gds-graphpid-insight {
    min-height: 0;
    padding: 36px 0 48px;
  }

  .gds-graphpid-insight__header {
    margin-bottom: 42px;
  }

  .gds-graphpid-insight__col {
    flex: 0 0 100%;
    width: 100%;
    min-height: 0;
    padding: 0 12px;
  }

  .gds-graphpid-insight__col::after {
    display: none !important;
  }

  /* Sezione 4: 9-Step Pipeline Mobile */
  .gds-graphpid-pipeline {
    padding: 44px 0 56px;
  }

  .gds-graphpid-pipeline__header {
    margin-bottom: 42px;
  }

  .gds-graphpid-pipeline__phases {
    gap: 52px;
  }

  .gds-graphpid-phase {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .gds-graphpid-phase__content {
    width: 100%;
  }

  .gds-graphpid-phase__eyebrow {
    padding-left: 46px;
  }

  .gds-graphpid-phase__pill {
    width: 100%;
    max-width: 319px;
    padding-left: 46px;
    margin-bottom: 12px;
  }

  .gds-graphpid-phase__intro {
    padding-left: 46px;
    line-height: 27px;
    margin-bottom: 24px;
  }

  .gds-graphpid-phase__steps {
    padding-left: 0;
    gap: 24px;
  }

  .gds-graphpid-phase__steps::before {
    left: 15px;
  }

  .gds-graphpid-step__title,
  .gds-graphpid-step__desc {
    line-height: 27px;
  }

  .gds-graphpid-step__desc br {
    display: none;
  }

  .gds-graphpid-phase__media {
    width: 100%;
    max-width: 319px;
    padding-top: 4px;
  }

  .gds-graphpid-phase__card {
    flex: 0 0 100%;
    width: 100%;
  }

  /* Sezione 5: Action Banner Mobile */
  .gds-graphpid-action {
    min-height: 400px;
    padding: 44px 0;
  }

  .gds-graphpid-action__inner {
    align-items: flex-start;
    text-align: left;
  }

  .gds-graphpid-action__title {
    font-size: 38px;
    line-height: 40px;
    margin-bottom: 18px;
  }

  .gds-graphpid-action__lead {
    font-size: 22px;
    line-height: 27px;
    margin-bottom: 32px;
  }

  .gds-graphpid-action__lead br {
    display: none;
  }

  /* Sezione 6: Why GraphPID Mobile */
  .gds-graphpid-why {
    min-height: 663px;
    padding: 50px 0 48px;
  }

  .gds-graphpid-why__header {
    margin-bottom: 38px;
  }

  .gds-graphpid-why__viewport {
    padding-inline: 14px;
    margin-inline: -14px;
    width: calc(100% + 28px);
    box-sizing: border-box;
  }

  .gds-graphpid-why-card {
    flex: 0 0 100%;
    width: 100%;
  }

  .gds-graphpid-why-card__dot--left,
  .gds-graphpid-why-card__dot--right {
    display: block;
  }

  /* Sezione 7: Final CTA Mobile (centrata come da XD mobile) */
  .gds-graphpid-cta {
    min-height: 467px;
    padding: 54px 0 60px;
  }

  .gds-graphpid-cta__title {
    font-size: 38px;
    line-height: 40px;
    margin-bottom: 24px;
  }

  .gds-graphpid-cta__subtitle {
    font-size: 22px;
    line-height: 27px;
    margin-bottom: 38px;
  }

  .gds-graphpid-cta__subtitle br {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gds-graphpid-slider__track,
  .gds-graphpid-compare__track {
    transition: none !important;
  }
}