.m-feature-block {
  position: relative;
  isolation: isolate;
  background: var(--m-bg, var(--color-bg));
  color: var(--m-fg, var(--color-text));
  padding-block: var(--m-pad-y, var(--space-section-md));
  --btn-fill: var(--m-fg, var(--color-text));
  --btn-ink: var(--m-solid, var(--color-bg));
  --btn-line: var(--m-fg, var(--color-text));
  --path-muted: var(--resource-muted);
  --path-current: var(--palette-accent);
}

.m-feature-block[data-section-theme="dark"] {
  --m-aside-bg: var(--palette-white);
  --m-aside-fg: var(--palette-black);
}

.m-feature-block[data-section-theme="light"] {
  --m-aside-bg: var(--palette-black);
  --m-aside-fg: var(--palette-white);
}

.m-feature-block[data-section-theme="brand"] {
  --m-aside-bg: var(--palette-white);
  --m-aside-fg: var(--palette-accent);
  --path-muted: var(--palette-white);
  --path-current: var(--palette-white);
}

/* Wider steps than the shared --space-section-* scale, which differed by only 16-32px and read as no change.
   Regular stays --space-section-md so published sections keep their spacing. Phone 375 to desktop 1440:
   Compact 20-32, Regular 36-64, Spacious 64-112, Extra spacious 88-160. */
.m-feature-block--none { --m-pad-y: 0px; }
.m-feature-block--sm { --m-pad-y: clamp(1.25rem, 0.986rem + 1.127vw, 2rem); }
.m-feature-block--md { --m-pad-y: var(--space-section-md); }
.m-feature-block--lg { --m-pad-y: clamp(4rem, 2.944rem + 4.507vw, 7rem); }
.m-feature-block--xl { --m-pad-y: clamp(5.5rem, 3.915rem + 6.761vw, 10rem); }

.m-feature-block--clear {
  padding-top: calc(var(--header-clear) + var(--m-pad-y, var(--space-section-md)));
}

/* Two columns from desktop: the text is centered beside the media, which already
   clears the header. Adding the room again would push the title too low.
   Between 1024 and ~1500 the media is shorter than the text plus the header, so the
   centered text slid under the navbar: the room moves into the text column, as a fixed
   spacer on top and a matching one below that shrinks first. Centered when there is
   space, never higher than the header. */
@media (min-width: 1024px) {
  .m-feature-block--clear.m-feature-block--has-media.m-feature-block--layout-left,
  .m-feature-block--clear.m-feature-block--has-media.m-feature-block--layout-right {
    padding-top: var(--m-pad-y, var(--space-section-md));
  }

  .m-feature-block--clear.m-feature-block--has-media.m-feature-block--layout-left .m-feature-block__copy,
  .m-feature-block--clear.m-feature-block--has-media.m-feature-block--layout-right .m-feature-block__copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .m-feature-block--clear.m-feature-block--has-media.m-feature-block--layout-left .m-feature-block__copy::before,
  .m-feature-block--clear.m-feature-block--has-media.m-feature-block--layout-right .m-feature-block__copy::before {
    content: '';
    flex: none;
    height: calc(var(--header-clear) - var(--space-sm));
  }

  .m-feature-block--clear.m-feature-block--has-media.m-feature-block--layout-left .m-feature-block__copy::after,
  .m-feature-block--clear.m-feature-block--has-media.m-feature-block--layout-right .m-feature-block__copy::after {
    content: '';
    flex: 1 1 0;
    max-height: calc(var(--header-clear) - var(--space-sm));
  }
}

/* One screen is the shared t-screen (utilities/_section-height.css). The scrolling text stays at the bottom;
   Picture on the bottom edge keeps touching it, so the content sits low instead of centered. */
@media (min-width: 1024px) {
  .t-screen.m-feature-block--media-flush > .m-feature-block__inner {
    margin-bottom: 0;
  }

  /* Figma "Tempo guadagnato": more room under the title and before the button than between eyebrow and title. */
  .m-feature-block__copy > .m-feature-block__title + .m-feature-block__lead {
    margin-top: var(--space-2xs);
  }

  .m-feature-block__copy > .m-feature-block__cta {
    margin-top: var(--space-sm);
  }
}

.m-feature-block__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-lg);
  width: min(100% - 2 * var(--gutter), var(--container-max));
  max-width: var(--container-max);
  margin-inline: auto;
}

.m-feature-block--width-narrow .m-feature-block__inner {
  width: min(100% - 2 * var(--gutter), var(--measure-wide));
}

.m-feature-block--width-full .m-feature-block__inner {
  width: min(100% - 2 * var(--gutter), var(--container-max));
}

.m-feature-block__grid {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

.m-feature-block__copy {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
}

.m-feature-block--layout-center {
  text-align: center;
}

.m-feature-block--layout-center .m-feature-block__copy {
  justify-items: center;
}

.m-feature-block--layout-center .m-feature-block__lead {
  max-width: var(--measure-heading);
}

.m-feature-block--has-ticker {
  padding-bottom: 0;
}

.m-feature-block--media-flush .m-feature-block__media {
  align-self: end;
}

/* The section keeps its bottom padding, so text taller than the picture still has room below;
   the picture alone reaches into it. Cards or the ticker below keep it in its row. */
.m-feature-block--media-flush:not(.m-feature-block--has-ticker) .m-feature-block__grid:last-child .m-feature-block__media {
  margin-bottom: calc(-1 * var(--m-pad-y, var(--space-section-md)));
}

.m-feature-block__title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

.m-feature-block h1.m-feature-block__title {
  font-size: var(--text-h1);
  font-weight: var(--fw-h1);
  line-height: var(--leading-h1);
}

.m-feature-block h2.m-feature-block__title {
  font-size: var(--text-h2);
  font-weight: var(--fw-h2);
  line-height: var(--leading-h2);
}

.m-feature-block h3.m-feature-block__title {
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: var(--leading-h3);
}

.m-feature-block__lead {
  margin: 0;
  color: var(--m-muted, inherit);
  font-size: var(--text-body);
  font-weight: var(--fw-body);
  line-height: var(--leading-body);
  max-width: var(--measure-lead);
}

/* Custom typography: the size steps from the body text (0) to the H2 (1), so every step follows both tokens on every screen. */
.m-feature-block__lead--custom {
  --m-lead-step: 0;
  font-size: calc(var(--text-body) + (var(--text-h2) - var(--text-body)) * var(--m-lead-step));
  line-height: calc(var(--leading-body) + (var(--leading-h2) - var(--leading-body)) * var(--m-lead-step));
}

.m-feature-block__lead--size-md { --m-lead-step: 0.25; }
.m-feature-block__lead--size-lg { --m-lead-step: 0.5; }
.m-feature-block__lead--size-xl { --m-lead-step: 0.75; }
.m-feature-block__lead--size-h2 { --m-lead-step: 1; letter-spacing: var(--tracking-heading); }

.m-feature-block__lead--w-light { font-weight: 300; }
.m-feature-block__lead--w-regular { font-weight: var(--fw-body); }
.m-feature-block__lead--w-medium { font-weight: var(--fw-body-medium); }
.m-feature-block__lead--w-semibold { font-weight: var(--fw-display-semibold); }
.m-feature-block__lead--w-bold { font-weight: var(--fw-bold); }

.m-feature-block__lead--lh-tight { line-height: var(--leading-heading); }
.m-feature-block__lead--lh-regular { line-height: var(--leading-body); }
.m-feature-block__lead--lh-open { line-height: var(--leading-body-lg); }

.m-feature-block__ink--black { color: var(--palette-black); }
.m-feature-block__ink--white { color: var(--palette-white); }
.m-feature-block__ink--brand { color: var(--m-brand-ink, var(--palette-accent)); }
.m-feature-block__ink--grey { color: var(--palette-grey-500); }
.m-feature-block__ink--custom { color: var(--m-ink); }

.m-feature-block .m-feature-block__lead--max-narrow { max-width: var(--measure-lead); }
.m-feature-block .m-feature-block__lead--max-medium { max-width: var(--measure-wide); }
.m-feature-block .m-feature-block__lead--max-wide { max-width: var(--measure-heading); }
.m-feature-block .m-feature-block__lead--max-full { max-width: none; }

.m-feature-block__lead--caps { text-transform: uppercase; }

.m-feature-block__cta-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--m-logo-h, 40px);
  object-fit: contain;
}

.m-feature-block__media {
  position: relative;
  --m-media-space: 0px;
}

.m-feature-block--media-space-sm .m-feature-block__media { --m-media-space: var(--space-xs); }
.m-feature-block--media-space-md .m-feature-block__media { --m-media-space: var(--space-md); }
.m-feature-block--media-space-lg .m-feature-block__media { --m-media-space: var(--space-lg); }
.m-feature-block--media-space-xl .m-feature-block__media { --m-media-space: var(--space-xl); }

@media (min-width: 768px) {
  .m-feature-block--media-space-sm .m-feature-block__media { --m-media-space: var(--space-md); }
  .m-feature-block--media-space-md .m-feature-block__media { --m-media-space: var(--space-xl); }
  .m-feature-block--media-space-lg .m-feature-block__media { --m-media-space: var(--space-2xl); }
  .m-feature-block--media-space-xl .m-feature-block__media { --m-media-space: var(--space-3xl); }
}

.m-feature-block--media-space .m-feature-block__media {
  margin: var(--m-media-space);
}

.m-feature-block--media-space.m-feature-block--media-flush .m-feature-block__media {
  margin-bottom: 0;
}

.m-feature-block__title,
.m-feature-block__lead,
.m-feature-block__card-title,
.m-feature-block__card-text,
.m-feature-block__aside-title,
.m-feature-block__aside-text,
.m-feature-block__aside-over,
.m-feature-block__pic-over,
.m-feature-block__pic-caption,
.m-feature-block__bento-title,
.m-feature-block__bento-text {
  white-space: pre-line;
}

.m-feature-block .t-path {
  margin: 0;
}

/* Stesso stacco di titolo → paragrafo: 24px, 32px da 1024. */
@media (min-width: 1024px) {
  .m-feature-block .t-path {
    margin-bottom: var(--space-2xs);
  }
}

.m-feature-block--layout-center .t-path__list {
  justify-content: center;
}

.m-feature-block__kicker {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--fw-body-medium);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.m-feature-block__eyebrow {
  justify-self: start;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--palette-accent);
  color: var(--palette-white);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.m-feature-block__author {
  display: grid;
  gap: 0.25rem;
  margin: 0;
}

.m-feature-block__author-name {
  font-size: var(--text-body);
  font-weight: var(--fw-body);
}

.m-feature-block__author-role {
  color: var(--m-muted, inherit);
  font-size: var(--text-xs);
}

.m-feature-block__media--testimonial {
  overflow: hidden;
  border-radius: var(--radius-card);
}

.m-feature-block__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 2px solid var(--palette-white);
  border-radius: var(--radius-full);
  background: var(--overlay-play);
  color: var(--palette-white);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-fast) var(--ease-standard);
  --color-focus: var(--palette-white);
}

.m-feature-block__play-icon {
  grid-area: 1 / 1;
  width: 2rem;
  height: 2rem;
}

.m-feature-block__play-icon--pause,
.m-feature-block__play.is-playing .m-feature-block__play-icon--play {
  display: none;
}

.m-feature-block__play.is-playing .m-feature-block__play-icon--pause {
  display: block;
}

.m-feature-block__media--testimonial.is-idle .m-feature-block__play {
  opacity: 0;
  pointer-events: none;
}

.m-feature-block__frame--video {
  aspect-ratio: 16 / 9;
  background: var(--palette-black);
}

@media (prefers-reduced-motion: reduce) {
  .m-feature-block__play {
    transition: none;
  }
}

.m-feature-block__media > .m-feature-block__cta {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: var(--space-lg);
  max-width: calc(100% - (var(--space-md) * 2));
  transform: translateX(-50%);
}

.m-feature-block__img,
.m-feature-block__video,
.m-feature-block__card-img,
.m-feature-block__aside-img {
  display: block;
  width: 100%;
  height: auto;
}

.m-feature-block__card-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-feature-block__card-bg--top { object-position: center top; }
.m-feature-block__card-bg--bottom { object-position: center bottom; }
.m-feature-block__card-bg--left { object-position: left center; }
.m-feature-block__card-bg--right { object-position: right center; }

.m-feature-block__card-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.m-feature-block__card-scrim--light { background: var(--scrim-light); }
.m-feature-block__card-scrim--dark { background: var(--scrim-dark); }

.m-feature-block__cards--imgr-sm .m-feature-block__card-img { border-radius: var(--radius-sm); }
.m-feature-block__cards--imgr-md .m-feature-block__card-img { border-radius: var(--radius-md); }
.m-feature-block__cards--imgr-card .m-feature-block__card-img { border-radius: var(--radius-card); }

.m-feature-block__cards--cta-fit .m-feature-block__card .m-feature-block__cta {
  justify-self: start;
}

.m-feature-block__cards {
  display: grid;
  gap: 0.9375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-feature-block__card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  margin: 0;
  padding: var(--space-sm);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--m-card-bg, var(--palette-white));
  color: var(--m-card-fg, var(--palette-black));
  --color-bg: var(--m-card-bg, var(--palette-white));
  --color-text: var(--m-card-fg, var(--palette-black));
  --color-focus: var(--color-text);
  --btn-fill: var(--color-text);
  --btn-ink: var(--color-bg);
  --btn-line: var(--color-text);
}

.m-feature-block__cards--square .m-feature-block__card {
  align-content: center;
  min-height: 15rem;
}

.m-feature-block__cards--gapphone-xs { --m-cards-gap-phone: 0.5rem; }
.m-feature-block__cards--gapphone-sm { --m-cards-gap-phone: 1.25rem; }
.m-feature-block__cards--gapphone-md { --m-cards-gap-phone: 1.75rem; }
.m-feature-block__cards--gapphone-lg { --m-cards-gap-phone: 2.25rem; }
.m-feature-block__cards--gapphone-xl { --m-cards-gap-phone: 3rem; }

@media (max-width: 767px) {
  .m-feature-block__cards--phone-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-cards-gap-phone, var(--space-xs));
  }

  .m-feature-block__cards--phone-2col.m-feature-block__cards--square .m-feature-block__card:not(.m-feature-block__card--has-img) {
    aspect-ratio: 1;
    min-height: 0;
  }

  .m-feature-block__cards--phone-carousel {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: var(--m-cards-gap-phone, 1.25rem);
    margin-inline: calc(50% - 50vw);
    /* la card attiva resta centrata: padding = metà dello spazio che avanza intorno a lei */
    padding-inline: calc((100vw - min(22.5rem, 80vw)) / 2);
    /* spazio verticale per la card che si ingrandisce all'hover/focus, altrimenti lo scroll orizzontale la ritaglia in alto e in basso */
    padding-block: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .m-feature-block__cards--phone-carousel::-webkit-scrollbar {
    display: none;
  }

  .m-feature-block__cards--phone-carousel .m-feature-block__card {
    flex: 0 0 min(22.5rem, 80vw);
    scroll-snap-align: center;
  }

  .m-feature-block__cards--phone-carousel.m-feature-block__cards--square .m-feature-block__card {
    aspect-ratio: auto;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .m-feature-block__cards--phone-carousel {
    scroll-behavior: auto;
  }
}

.m-feature-block__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-heading);
}

.m-feature-block__card-text {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--fw-body);
  line-height: var(--leading-body);
}

.m-feature-block--aside-sm { --m-aside-card: 12rem; }
.m-feature-block--aside-md { --m-aside-card: 16rem; }
.m-feature-block--aside-lg { --m-aside-card: 20rem; }

.m-feature-block--aside-xl .m-feature-block__aside {
  width: 100%;
  justify-self: stretch;
}

.m-feature-block__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  justify-self: end;
}

.m-feature-block--aside-sm .m-feature-block__aside,
.m-feature-block--aside-md .m-feature-block__aside,
.m-feature-block--aside-lg .m-feature-block__aside {
  width: min(100%, var(--m-aside-card));
}

.m-feature-block--layout-right .m-feature-block__aside {
  justify-self: start;
}

.m-feature-block--layout-center .m-feature-block__aside {
  justify-self: center;
}

.m-feature-block__aside-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: center;
  margin: 0;
  padding: var(--space-sm) var(--space-xs);
  container-type: inline-size;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--m-card-bg, var(--m-aside-bg, var(--palette-white)));
  color: var(--m-card-fg, var(--m-aside-fg, var(--palette-black)));
  text-align: center;
  --color-focus: var(--m-card-fg, var(--m-aside-fg, var(--palette-black)));
  --btn-fill: var(--m-card-fg, var(--m-aside-fg, var(--palette-black)));
  --btn-ink: var(--m-card-bg, var(--m-aside-bg, var(--palette-white)));
  --btn-line: var(--btn-fill);
}

.m-feature-block__aside-card--photo {
  aspect-ratio: 1;
}

.m-feature-block__aside-card--bleed {
  padding-top: 0;
}

.m-feature-block__aside-pic {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
}

.m-feature-block__aside-pic--bare {
  flex: 0 0 auto;
}

.m-feature-block__aside-card--photo .m-feature-block__aside-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--m-aside-x, center) var(--m-aside-y, center);
}

.m-feature-block__aside-over {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: var(--fw-display);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  text-align: center;
}

.m-feature-block__aside-pic:not(.m-feature-block__aside-pic--bare) .m-feature-block__aside-over {
  position: absolute;
  inset: auto 0;
  top: var(--m-over-y, 50%);
  display: block;
  translate: 0 -50%;
}

.m-feature-block__aside-over--higher { --m-over-y: 28%; }
.m-feature-block__aside-over--high { --m-over-y: 39%; }
.m-feature-block__aside-over--center { --m-over-y: 50%; }
.m-feature-block__aside-over--low { --m-over-y: 61%; }
.m-feature-block__aside-over--lower { --m-over-y: 72%; }

.m-feature-block__aside-img--x-left { --m-aside-x: left; }
.m-feature-block__aside-img--x-center { --m-aside-x: center; }
.m-feature-block__aside-img--x-right { --m-aside-x: right; }
.m-feature-block__aside-img--y-top { --m-aside-y: top; }
.m-feature-block__aside-img--y-center { --m-aside-y: center; }
.m-feature-block__aside-img--y-bottom { --m-aside-y: bottom; }

.m-feature-block__aside-text {
  flex-shrink: 0;
  margin: 0;
  font-size: clamp(1rem, 7.2cqw, 1.375rem);
  font-weight: var(--fw-body);
  line-height: 1.3;
}

.m-feature-block__aside-card--rich {
  container-type: inline-size;
  aspect-ratio: 344 / 310;
  padding: 0;
  overflow: visible;
  align-items: stretch;
  text-align: start;
}

.m-feature-block__aside-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.5rem, 4.65cqw, 1rem);
  min-width: 0;
  padding: clamp(0.75rem, 8.14cqw, 1.75rem);
}

.m-feature-block__aside-card--rich .m-feature-block__aside-text {
  margin-bottom: clamp(0.5rem, 4.65cqw, 1rem);
  font-size: clamp(0.8125rem, 5.23cqw, 1.125rem);
  line-height: var(--leading-body);
}

.m-feature-block__aside-title {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 10.47cqw, 2.25rem);
  font-weight: var(--fw-body-medium);
  line-height: var(--leading-article);
  letter-spacing: var(--tracking-heading);
}

.m-feature-block__aside-cta {
  flex-shrink: 0;
  max-width: 100%;
  min-height: clamp(1.625rem, 8.72cqw, 1.875rem);
  margin-top: auto;
  padding-inline: clamp(0.75rem, 6.1cqw, 1.3125rem);
  overflow: hidden;
  font-size: clamp(0.8125rem, 4.65cqw, 1rem);
  font-weight: var(--fw-body-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m-feature-block__tone--dark {
  --m-card-bg: var(--palette-black);
  --m-card-fg: var(--palette-white);
  --btn-fill: var(--palette-white);
  --btn-ink: var(--palette-black);
  --btn-line: var(--palette-white);
}

.m-feature-block__tone--light {
  --m-card-bg: var(--palette-white);
  --m-card-fg: var(--palette-black);
  --btn-fill: var(--palette-black);
  --btn-ink: var(--palette-white);
  --btn-line: var(--palette-black);
}

.m-feature-block__tone--brand {
  --m-card-bg: var(--palette-accent);
  --m-card-fg: var(--palette-black);
  --btn-fill: var(--palette-black);
  --btn-ink: var(--palette-white);
  --btn-line: var(--palette-black);
}

.m-feature-block .t-btn {
  background: var(--btn-fill);
  color: var(--btn-ink);
  border-color: transparent;
}

.m-feature-block .t-btn--solid:hover,
.m-feature-block .t-btn--solid:focus-visible {
  background: transparent;
  color: var(--btn-line);
  border-color: var(--btn-line);
}

.m-feature-block .t-btn--outline {
  background: transparent;
  color: var(--btn-line);
  border-color: var(--btn-line);
}

.m-feature-block .t-btn--outline:hover,
.m-feature-block .t-btn--outline:focus-visible {
  background: var(--btn-fill);
  color: var(--btn-ink);
  border-color: var(--btn-fill);
}

.m-feature-block .t-btn--text {
  background: transparent;
  color: var(--btn-line);
  border-color: transparent;
  padding-inline: 0;
  border-radius: 0;
}

.m-feature-block .t-btn--text:hover,
.m-feature-block .t-btn--text:focus-visible {
  background: transparent;
  color: var(--btn-line);
  border-color: transparent;
}

.m-feature-block a.m-feature-block__cta,
.m-feature-block a.m-feature-block__cta:hover,
.m-feature-block a.m-feature-block__cta:focus-visible,
.m-feature-block a.m-feature-block__cta:active {
  text-decoration: none;
}

@media (min-width: 768px) {
  /* Text only (no media, no side cards): keep the copy on one column, same share as Text column. */
  .m-feature-block--layout-left:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-25 .m-feature-block__copy {
    max-width: 25%;
  }

  .m-feature-block--layout-left:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-40 .m-feature-block__copy {
    max-width: 40%;
  }

  .m-feature-block--layout-left:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-50 .m-feature-block__copy {
    max-width: 50%;
  }

  .m-feature-block--layout-left:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-60 .m-feature-block__copy {
    max-width: 60%;
  }

  .m-feature-block--layout-left:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-75 .m-feature-block__copy {
    max-width: 75%;
  }

  .m-feature-block--layout-right:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-25 .m-feature-block__copy {
    max-width: 25%;
    justify-self: end;
  }

  .m-feature-block--layout-right:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-40 .m-feature-block__copy {
    max-width: 40%;
    justify-self: end;
  }

  .m-feature-block--layout-right:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-50 .m-feature-block__copy {
    max-width: 50%;
    justify-self: end;
  }

  .m-feature-block--layout-right:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-60 .m-feature-block__copy {
    max-width: 60%;
    justify-self: end;
  }

  .m-feature-block--layout-right:not(.m-feature-block--has-media):not(.m-feature-block--has-aside).m-feature-block--col-75 .m-feature-block__copy {
    max-width: 75%;
    justify-self: end;
  }

  .m-feature-block--layout-left.m-feature-block--has-media.m-feature-block--col-25 .m-feature-block__grid,
  .m-feature-block--layout-left.m-feature-block--has-aside.m-feature-block--col-25 .m-feature-block__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }

  .m-feature-block--layout-left.m-feature-block--has-media.m-feature-block--col-40 .m-feature-block__grid,
  .m-feature-block--layout-left.m-feature-block--has-aside.m-feature-block--col-40 .m-feature-block__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr);
  }

  .m-feature-block--layout-left.m-feature-block--has-media.m-feature-block--col-50 .m-feature-block__grid,
  .m-feature-block--layout-left.m-feature-block--has-aside.m-feature-block--col-50 .m-feature-block__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .m-feature-block--layout-left.m-feature-block--has-media.m-feature-block--col-60 .m-feature-block__grid,
  .m-feature-block--layout-left.m-feature-block--has-aside.m-feature-block--col-60 .m-feature-block__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .m-feature-block--layout-left.m-feature-block--has-media.m-feature-block--col-75 .m-feature-block__grid,
  .m-feature-block--layout-left.m-feature-block--has-aside.m-feature-block--col-75 .m-feature-block__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }

  .m-feature-block--layout-right.m-feature-block--has-media.m-feature-block--col-25 .m-feature-block__grid,
  .m-feature-block--layout-right.m-feature-block--has-aside.m-feature-block--col-25 .m-feature-block__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }

  .m-feature-block--layout-right.m-feature-block--has-media.m-feature-block--col-40 .m-feature-block__grid,
  .m-feature-block--layout-right.m-feature-block--has-aside.m-feature-block--col-40 .m-feature-block__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .m-feature-block--layout-right.m-feature-block--has-media.m-feature-block--col-50 .m-feature-block__grid,
  .m-feature-block--layout-right.m-feature-block--has-aside.m-feature-block--col-50 .m-feature-block__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .m-feature-block--layout-right.m-feature-block--has-media.m-feature-block--col-60 .m-feature-block__grid,
  .m-feature-block--layout-right.m-feature-block--has-aside.m-feature-block--col-60 .m-feature-block__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .m-feature-block--layout-right.m-feature-block--has-media.m-feature-block--col-75 .m-feature-block__grid,
  .m-feature-block--layout-right.m-feature-block--has-aside.m-feature-block--col-75 .m-feature-block__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }

  .m-feature-block--layout-right.m-feature-block--has-media .m-feature-block__media,
  .m-feature-block--layout-right.m-feature-block--has-aside .m-feature-block__aside {
    order: -1;
  }

  .m-feature-block__aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .m-feature-block--aside-sm .m-feature-block__aside,
  .m-feature-block--aside-md .m-feature-block__aside,
  .m-feature-block--aside-lg .m-feature-block__aside {
    width: min(100%, calc(var(--m-aside-card) * 2 + var(--space-xs)));
  }

  .m-feature-block__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }

  /* Il quadrato forzato vale solo per le card di solo testo: con un'immagine, titolo, testo e bottone insieme il riquadro 1:1 è spesso troppo basso e il bottone resta tagliato dall'overflow:hidden della card, specie a 4 colonne. */
  .m-feature-block__cards--square .m-feature-block__card:not(.m-feature-block__card--has-img) {
    aspect-ratio: 1;
    min-height: 0;
    container-type: inline-size;
  }

  /* Nel quadrato l'altezza non cresce col testo: titolo e testo scendono con la larghezza della card (cqi) fino alla misura normale, altrimenti tra 768 e 1280 il testo lungo esce dal riquadro. */
  .m-feature-block__cards--square .m-feature-block__card:not(.m-feature-block__card--has-img) .m-feature-block__card-title {
    font-size: min(var(--text-h3), 8.1cqi);
  }

  .m-feature-block__cards--square .m-feature-block__card:not(.m-feature-block__card--has-img) .m-feature-block__card-text {
    font-size: min(var(--text-body), 5.4cqi);
  }
}

@media (min-width: 768px) and (max-width: 1365px) {
  .m-feature-block__cards--square .m-feature-block__card:not(.m-feature-block__card--has-img) {
    gap: var(--space-xs);
    padding: var(--space-xs);
  }
}

@media (min-width: 1024px) {
  .m-feature-block--layout-center .m-feature-block__media {
    width: calc(min(100%, var(--measure-wide)) - var(--m-media-space) * 2);
    justify-self: center;
  }

  .m-feature-block--layout-center.m-feature-block--media-full .m-feature-block__media {
    width: calc(100% - var(--m-media-space) * 2);
  }

  .m-feature-block__cards--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .m-feature-block__cards--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Meno card delle colonne: griglia a colonne doppie, ogni card ne occupa due e la prima parte da metà del vuoto, così restano centrate con la stessa larghezza di una riga piena. */
  .m-feature-block__cards--cols-3.m-feature-block__cards--few {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .m-feature-block__cards--cols-4.m-feature-block__cards--few {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .m-feature-block__cards--few .m-feature-block__card {
    grid-column: span 2;
  }

  .m-feature-block__cards--few .m-feature-block__card:first-child {
    grid-column: var(--m-cards-start) / span 2;
  }

  .m-feature-block--cards-gap-xs .m-feature-block__cards { gap: var(--space-xs); }
  .m-feature-block--cards-gap-md .m-feature-block__cards { gap: var(--space-md); }
  .m-feature-block--cards-gap-lg .m-feature-block__cards { gap: var(--space-lg); }
  .m-feature-block--cards-gap-xl .m-feature-block__cards { gap: 5rem; }

  .m-feature-block__card {
    gap: 2.5rem;
    padding-inline: var(--space-md);
  }

  .m-feature-block--parallax .t-bg__media {
    position: relative;
    top: -10%;
    height: 120%;
    width: 100%;
  }
}

.m-feature-block__pics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-feature-block__pic {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  margin: 0;
}

.m-feature-block__pic-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--palette-black);
  color: var(--palette-white);
}

.m-feature-block__pic-frame--bare {
  min-height: 12rem;
}

.m-feature-block__pics--short { --m-pic-ratio: 16 / 10; }
.m-feature-block__pics--standard { --m-pic-ratio: 4 / 3; }
.m-feature-block__pics--tall { --m-pic-ratio: 1 / 1; }

.m-feature-block__pic-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--m-pic-ratio, 4 / 3);
  object-fit: cover;
}

.m-feature-block__pic-over {
  position: absolute;
  inset: var(--space-md) var(--space-xs) auto;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: var(--fw-display);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
}

.m-feature-block__pic-frame--bare .m-feature-block__pic-over {
  position: static;
  padding: var(--space-md) var(--space-xs);
}

.m-feature-block__pic-caption {
  margin: 0;
  padding-inline: var(--space-xs);
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--fw-body-medium);
  line-height: var(--leading-body);
}

@media (min-width: 500px) {
  .m-feature-block__pics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .m-feature-block__pics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

.m-feature-block__bento {
  --m-bento-h: 16rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(var(--m-bento-h), auto);
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.m-feature-block__bento--align-center {
  --m-bento-self: center;
  text-align: center;
}

.m-feature-block__bento--gap-sm { --m-bento-gap: var(--space-xs); }
.m-feature-block__bento--gap-md { --m-bento-gap: var(--space-md); }
.m-feature-block__bento--gap-lg { --m-bento-gap: var(--space-lg); }

.m-feature-block__bento-card {
  --b-bg: var(--palette-black);
  --b-fg: var(--palette-white);
  --b-tag-bg: var(--palette-accent);
  --b-tag-fg: var(--palette-white);
  --b-btn-bg: var(--palette-white);
  --b-btn-fg: var(--palette-black);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-sm);
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--b-bg);
  color: var(--b-fg);
  --color-focus: var(--b-fg);
  --btn-fill: var(--b-btn-bg);
  --btn-ink: var(--b-btn-fg);
  --btn-line: var(--b-btn-bg);
}

.m-feature-block__bento-card--light {
  --b-bg: var(--palette-white);
  --b-fg: var(--palette-black);
  --b-btn-bg: var(--palette-black);
  --b-btn-fg: var(--palette-white);
}

.m-feature-block__bento-card--brand {
  --b-bg: var(--palette-accent);
  --b-fg: var(--palette-black);
  --b-tag-bg: var(--palette-white);
  --b-tag-fg: var(--palette-accent);
  --b-btn-bg: var(--palette-black);
  --b-btn-fg: var(--palette-white);
}

.m-feature-block__bento-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-feature-block__bento-img--top { object-position: center top; }
.m-feature-block__bento-img--bottom { object-position: center bottom; }
.m-feature-block__bento-img--left { object-position: left center; }
.m-feature-block__bento-img--right { object-position: right center; }

.m-feature-block__bento-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.m-feature-block__bento-scrim--light { background: var(--scrim-light); }
.m-feature-block__bento-scrim--dark { background: var(--scrim-dark); }

.m-feature-block__bento-label {
  align-self: var(--m-bento-self, flex-start);
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-cta);
  background: var(--b-tag-bg);
  color: var(--b-tag-fg);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.m-feature-block__bento-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-display);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-heading);
}

.m-feature-block__bento-text {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--fw-body);
  line-height: var(--leading-body);
}

.m-feature-block__bento-cta {
  align-self: var(--m-bento-self, flex-start);
  margin-top: auto;
}

@media (min-width: 768px) {
  .m-feature-block__bento-card {
    padding: var(--space-sm);
    border-radius: var(--radius-card);
  }

  .m-feature-block__bento-card--has-label .m-feature-block__bento-label {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
  }

  .m-feature-block__bento-card--has-label .m-feature-block__bento-title {
    padding-inline-end: 6rem;
  }

  .m-feature-block__bento--align-center .m-feature-block__bento-card--has-label .m-feature-block__bento-title {
    padding-inline: 6rem;
  }
}

@media (min-width: 1024px) {
  .m-feature-block__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-bento-gap, var(--space-lg));
  }

  .m-feature-block__bento--h-short { --m-bento-h: 10.5rem; }
  .m-feature-block__bento--h-standard { --m-bento-h: 12.5rem; }
  .m-feature-block__bento--h-tall { --m-bento-h: 16rem; }

  .m-feature-block__bento--row.m-feature-block__bento--n-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    column-gap: var(--m-bento-gap, var(--space-lg));
  }

  .m-feature-block__bento--row.m-feature-block__bento--n-3 .m-feature-block__bento-card {
    min-height: calc(var(--m-bento-h) * 1.5);
  }

  .m-feature-block__bento--right.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(1) { grid-area: 1 / 1; }
  .m-feature-block__bento--right.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(2) { grid-area: 2 / 1; }
  .m-feature-block__bento--right.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(3) { grid-area: 1 / 2 / span 2; }

  .m-feature-block__bento--left.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(1) { grid-area: 1 / 1 / span 2; }
  .m-feature-block__bento--left.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(2) { grid-area: 1 / 2; }
  .m-feature-block__bento--left.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(3) { grid-area: 2 / 2; }

  .m-feature-block__bento--right.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(3),
  .m-feature-block__bento--left.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(1) {
    justify-content: center;
  }

  .m-feature-block__bento--right.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(3) .m-feature-block__bento-cta,
  .m-feature-block__bento--left.m-feature-block__bento--n-3 .m-feature-block__bento-card:nth-child(1) .m-feature-block__bento-cta {
    margin-top: var(--space-xs);
  }
}

/* A lone card spans the row: title on the left, text and button on the right, so the line stays readable. Centered content stays stacked. */
@media (min-width: 1024px) {
  .m-feature-block__bento--n-1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .m-feature-block__bento--n-1:not(.m-feature-block__bento--align-center) .m-feature-block__bento-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--space-lg);
    row-gap: var(--space-xs);
    align-content: center;
    align-items: start;
  }

  .m-feature-block__bento--n-1:not(.m-feature-block__bento--align-center) .m-feature-block__bento-label {
    position: absolute;
    top: var(--space-sm);
    right: auto;
    left: var(--space-sm);
  }

  .m-feature-block__bento--n-1:not(.m-feature-block__bento--align-center) .m-feature-block__bento-card--has-label {
    padding-block: calc(var(--space-sm) + 2.5rem);
  }

  .m-feature-block__bento--n-1:not(.m-feature-block__bento--align-center) .m-feature-block__bento-title {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    padding-inline: 0;
  }

  .m-feature-block__bento--n-1:not(.m-feature-block__bento--align-center) .m-feature-block__bento-text {
    grid-column: 2;
    grid-row: 1;
    max-width: 60ch;
  }

  .m-feature-block__bento--n-1:not(.m-feature-block__bento--align-center) .m-feature-block__bento-cta {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 0;
  }
}

@media (min-width: 1280px) {
  .m-feature-block__bento--n-1:not(.m-feature-block__bento--align-center) .m-feature-block__bento-card {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 3fr);
  }
}

@media (min-width: 1440px) {
  .m-feature-block__bento--n-1:not(.m-feature-block__bento--align-center) .m-feature-block__bento-card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .m-feature-block__cards--grow .m-feature-block__card {
    transition: transform var(--dur-gentle) var(--ease-standard);
  }

  .m-feature-block__cards--grow .m-feature-block__card:hover,
  .m-feature-block__cards--grow .m-feature-block__card:focus-within {
    z-index: 1;
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-feature-block__card {
    transition: none;
    transform: none;
  }

  .m-feature-block--parallax .t-bg__media {
    top: 0;
    height: 100%;
    transform: none;
  }
}

@media (max-width: 767px) {
  .m-feature-block--has-aside .m-feature-block__aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8125rem;
    width: 100%;
    justify-self: stretch;
  }

  .m-feature-block--aside-first .m-feature-block__aside {
    order: -1;
  }

  .m-feature-block--has-aside .m-feature-block__copy {
    justify-items: center;
    text-align: center;
  }

  .m-feature-block--has-aside .t-path__list {
    justify-content: center;
  }

  .m-feature-block__aside-card {
    padding: 0.75rem 0.5rem;
    border-radius: 1.6875rem;
  }

  /* The shorthand above would put the top spacing back. Picture to the top edge still removes it. */
  .m-feature-block__aside-card--bleed {
    padding-top: 0;
  }

  .m-feature-block__aside-card--photo {
    aspect-ratio: 184 / 166;
  }

  .m-feature-block__aside-card--photo .m-feature-block__aside-text {
    font-size: clamp(0.875rem, 6.4cqw, 1.25rem);
  }

  .m-feature-block__aside-card--rich {
    padding: 0;
  }
}

.m-feature-block[data-section-theme="brand"] {
  --m-brand-ink: var(--palette-white);
}

.m-feature-block__ticker {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  margin-top: var(--space-lg);
  color: var(--m-ticker-color, var(--m-brand-ink, var(--palette-accent)));
  font-family: var(--font-display);
  font-weight: 100;
  line-height: 0.8;
  letter-spacing: 0;
  --m-ticker-size: clamp(5rem, 14vw, 12.5rem);
  --m-ticker-gap: var(--space-lg);
  --m-ticker-speed: 120;
}

.m-feature-block__ticker--size-sm { --m-ticker-size: clamp(2rem, 6vw, 3.5rem); }
.m-feature-block__ticker--size-md { --m-ticker-size: clamp(3rem, 9vw, 6rem); }
.m-feature-block__ticker--size-lg { --m-ticker-size: clamp(4rem, 12vw, 9rem); }
.m-feature-block__ticker--size-xl { --m-ticker-size: clamp(5rem, 14vw, 12.5rem); }
.m-feature-block__ticker--size-xxl { --m-ticker-size: clamp(6rem, 20vw, 20rem); }

.m-feature-block__ticker--w-thin { font-weight: 100; }
.m-feature-block__ticker--w-extralight { font-weight: 200; }
.m-feature-block__ticker--w-light { font-weight: 300; }
.m-feature-block__ticker--w-regular { font-weight: 400; }
.m-feature-block__ticker--w-bold { font-weight: 700; }

.m-feature-block__ticker--color-text { color: var(--m-fg, var(--color-text)); }
.m-feature-block__ticker--color-brand { color: var(--m-brand-ink, var(--palette-accent)); }
.m-feature-block__ticker--color-custom { color: var(--m-ticker-color, var(--palette-accent)); }

.m-feature-block__ticker--speed-slow { --m-ticker-speed: 60; }
.m-feature-block__ticker--speed-md { --m-ticker-speed: 120; }
.m-feature-block__ticker--speed-fast { --m-ticker-speed: 220; }

.m-feature-block__ticker--gap-sm { --m-ticker-gap: var(--space-md); }
.m-feature-block__ticker--gap-md { --m-ticker-gap: var(--space-lg); }
.m-feature-block__ticker--gap-lg { --m-ticker-gap: var(--space-xl); }

.m-feature-block__ticker--caps { text-transform: uppercase; }
.m-feature-block__ticker:not(.m-feature-block__ticker--caps) { line-height: 1.05; }
.m-feature-block__ticker.m-feature-block__ticker--pos-spaced { line-height: 1.5; }

.m-feature-block__ticker-track {
  display: flex;
  width: max-content;
  gap: var(--m-ticker-gap);
}

.m-feature-block__ticker-set {
  display: flex;
  flex: 0 0 auto;
  gap: var(--m-ticker-gap);
  margin: 0;
  font-size: var(--m-ticker-size);
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.m-feature-block__ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--m-ticker-gap);
  line-height: inherit;
}

.m-feature-block__ticker--sep-dot .m-feature-block__ticker-item::after { content: "\2022"; }
.m-feature-block__ticker--sep-slash .m-feature-block__ticker-item::after { content: "/"; }
.m-feature-block__ticker--sep-dash .m-feature-block__ticker-item::after { content: "\2014"; }

@media (prefers-reduced-motion: no-preference) {
  .m-feature-block__ticker-track {
    animation: m-feature-ticker var(--m-ticker-dur, 30s) linear infinite;
  }

  .m-feature-block__ticker--dir-right .m-feature-block__ticker-track {
    animation-direction: reverse;
  }

  .m-feature-block.is-paused .m-feature-block__ticker-track,
  .m-feature-block.is-offscreen .m-feature-block__ticker-track {
    animation-play-state: paused;
  }
}

@keyframes m-feature-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - (var(--m-ticker-gap) / 2)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .m-feature-block__ticker-track,
  .m-feature-block__ticker-set {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .m-feature-block [data-ticker-clone],
  .m-feature-block [data-ticker-extra] {
    display: none;
  }
}

.m-feature-block__media--embed {
  align-self: center;
}

.m-feature-block__embed {
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--m-card-bg, var(--palette-white));
  color: var(--m-card-fg, var(--palette-black));
  --color-focus: var(--m-card-fg, var(--palette-black));
}

.m-feature-block__frame {
  display: block;
  width: 100%;
  border: 0;
}

.m-feature-block__frame--form {
  min-height: 40rem;
}

.m-feature-block__frame--meeting {
  width: 100%;
  min-height: 43rem;
}

.m-feature-block__frame--meeting iframe {
  display: block;
  width: 100%;
  border: 0;
}

.m-feature-block__embed--bare {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  --color-focus: unset;
}

/* Section logo. Width from the theme, height from the file's proportions. Figma 9174:891: 284px wide at 1440, top right.
   Above the title it is smaller, so it does not outweigh the heading. */
.m-feature-block__logo {
  --m-section-logo-w: 10rem;
  line-height: 0;
}

.m-feature-block__logo-img {
  display: block;
  width: calc(var(--m-section-logo-w) * var(--m-section-logo-scale, 1));
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .m-feature-block__logo { --m-section-logo-w: 12rem; }
}

@media (min-width: 1024px) {
  .m-feature-block__logo--right { --m-section-logo-w: 17.75rem; }

  /* Top right of the content box (__inner), level with the first line of the copy. */
  .m-feature-block__logo--right {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 30%;
  }
}

/* Card lists (Text cards). One marker for the whole list; the list stays left-aligned whatever the card alignment. */
.m-feature-block__card-list {
  --m-marker-col: 2em;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: var(--text-body);
  font-weight: var(--fw-body);
  line-height: var(--leading-body);
}

.m-feature-block__card-item {
  display: grid;
  grid-template-columns: var(--m-marker-col) minmax(0, 1fr);
  align-items: start;
  padding-block: var(--space-xs);
}

.m-feature-block__card-item:first-child { padding-top: 0; }
.m-feature-block__card-item:last-child { padding-bottom: 0; }

.m-feature-block__cards--lines .m-feature-block__card-item + .m-feature-block__card-item {
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.m-feature-block__card-item-text {
  white-space: pre-line;
}

.m-feature-block__card-list--ink-brand { --m-marker: var(--palette-accent); }
.m-feature-block__card-list--ink-text { --m-marker: currentColor; }
.m-feature-block__card-list--ink-custom { --m-marker: var(--m-marker-ink); }
.m-feature-block__tone--brand .m-feature-block__card-list--ink-brand { --m-marker: currentColor; }

/* Chevron 11x24 next to 20px text in the Figma: 1.2em tall, centered on the first line (line box 1.5em). */
.m-feature-block__marker {
  display: block;
  width: auto;
  height: 1.2em;
  margin-top: 0.15em;
  color: var(--m-marker, currentColor);
}

.m-feature-block__marker--bullet {
  width: 0.4em;
  height: 0.4em;
  margin-top: 0.55em;
  border-radius: 50%;
  background: currentColor;
}

.m-feature-block__marker--img {
  max-width: calc(var(--m-marker-col) - 0.5em);
  object-fit: contain;
  object-position: left center;
}

.m-feature-block__card-title--brand { color: var(--palette-accent); }
.m-feature-block__tone--brand .m-feature-block__card-title--brand { color: inherit; }
.m-feature-block__card-title--custom { color: var(--m-title-ink); }

/* Card content alignment. Without a choice the card follows the section layout, as before. */
.m-feature-block__cards--align-left .m-feature-block__card { text-align: left; }
.m-feature-block__cards--align-center .m-feature-block__card { text-align: center; }
.m-feature-block__cards--align-center.m-feature-block__cards--cta-fit .m-feature-block__card .m-feature-block__cta { justify-self: center; }

/* Large cards: bigger padding, corner and spacing than the regular Text cards, same type sizes as the rest of the theme
   (title --text-h3, list --text-body). Until 2026-11-09 they followed the Figma (42px title, 20px list, 547:654 ratio)
   and on a real page they read far bigger than the section heading. Height follows the content. */
.m-feature-block__cards--large .m-feature-block__card {
  align-content: start;
  gap: 0;
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-testimonial);
}

.m-feature-block__cards--large .m-feature-block__card > * + * {
  margin-top: var(--space-xs);
}

.m-feature-block__cards--large .m-feature-block__card > .m-feature-block__card-title + .m-feature-block__card-list {
  margin-top: var(--space-md);
}

.m-feature-block__cards--large .m-feature-block__card-list {
  --m-marker-col: 2em;
}

.m-feature-block__cards--large .m-feature-block__card-item {
  padding-block: var(--space-xs);
}

.m-feature-block__cards--large .m-feature-block__card-item:first-child { padding-top: 0; }
.m-feature-block__cards--large .m-feature-block__card-item:last-child { padding-bottom: 0; }

@media (min-width: 768px) {
  .m-feature-block__cards--large .m-feature-block__card {
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
  }

  .m-feature-block__cards--large .m-feature-block__card > .m-feature-block__card-title + .m-feature-block__card-list {
    margin-top: var(--space-lg);
  }

  .m-feature-block__cards--large .m-feature-block__card-list {
    --m-marker-col: 2.5em;
  }

  .m-feature-block__cards--large .m-feature-block__card-item {
    padding-block: var(--space-sm);
  }

  /* Portrait like the Figma (547:654), not a fixed size: the height follows the width,
     and overflow clip (not hidden) lets a longer text grow the card instead of cutting it. */
  .m-feature-block__cards--large .m-feature-block__card {
    aspect-ratio: 547 / 654;
    overflow: clip;
  }

  /* A grid item with an aspect ratio is not stretched across its column (justify-self normal acts as start):
     its width came from the stretched height and, from 768 to ~1000px, pushed the card out of the screen. */
  .m-feature-block__cards--large .m-feature-block__card {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
  }

  /* Cards on one row share the height of the tallest. */
  .m-feature-block__cards--large {
    align-items: stretch;
  }

  .m-feature-block__cards--large .m-feature-block__card {
    align-self: stretch;
  }
}

@media (min-width: 1024px) {
  .m-feature-block__cards--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .m-feature-block__cards--cols-2.m-feature-block__cards--few {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Two large cards stay a narrow pair (960px at 1440): wider, the portrait ratio made them taller than their content. */
  .m-feature-block__cards--large.m-feature-block__cards--cols-2 {
    width: 100%;
    max-width: 60rem;
    justify-self: center;
  }
}

/* Points under the paragraph (Figma "Dal probabilistico al deterministico"): marker and bold title, a line, then the text.
   Figma 42px bold title, 20px text, 16px around the line, about 45px between points. */
.m-feature-block__points {
  display: grid;
  gap: var(--space-lg);
  justify-self: stretch;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.m-feature-block__point {
  display: grid;
  gap: var(--space-xs);
}

.m-feature-block__point-head {
  display: flex;
  align-items: center;
  gap: 0.22em;
  font-size: var(--text-h2);
}

.m-feature-block__points--lines .m-feature-block__point-head {
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid currentColor;
}

.m-feature-block__point-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: var(--fw-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.m-feature-block__point-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body-md);
  white-space: pre-line;
}

/* Chevron 11x24 beside the 42px title: 0.57em tall, a little under the middle of the line as in the Figma. */
.m-feature-block__point-marker {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 0.57em;
  translate: 0 0.08em;
  color: var(--m-marker, currentColor);
}

.m-feature-block__point-marker--bullet {
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: currentColor;
}

.m-feature-block__point-marker--img {
  height: 0.8em;
  max-width: 1.5em;
  translate: none;
  object-fit: contain;
}

.m-feature-block__points--ink-brand { --m-marker: var(--palette-accent); }
.m-feature-block__points--ink-text { --m-marker: currentColor; }
.m-feature-block__points--ink-custom { --m-marker: var(--m-marker-ink); }
.m-feature-block--brand .m-feature-block__points--ink-brand { --m-marker: currentColor; }

/* Stacked cards beside the text: one per row, number on the left. The number column is shared (subgrid),
   so titles line up even when numbers differ in width. Figma: 44px corners, number 64 semibold, gap 24. */
.m-feature-block--steps .m-feature-block__grid {
  align-items: start;
}

/* Figma: text and cards on two equal halves of 626px, 124px apart at 1440. A share of the row (9%),
   so the gap shrinks with the screen. */
@media (min-width: 768px) {
  .m-feature-block--steps:not(.m-feature-block--layout-center) .m-feature-block__grid {
    column-gap: 9%;
  }
}

.m-feature-block--steps .m-feature-block__steps {
  --m-step-bg: var(--palette-white);
  --m-step-fg: var(--palette-black);
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm) var(--space-xs);
  width: 100%;
  justify-self: stretch;
}

.m-feature-block--steps[data-section-theme="light"] .m-feature-block__steps:not(.m-feature-block__steps--toned) {
  --m-step-bg: var(--palette-black);
  --m-step-fg: var(--palette-white);
}

.m-feature-block__step {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: start;
  margin: 0;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-sm);
  border-radius: var(--radius-testimonial);
  background: var(--m-card-bg, var(--m-step-bg));
  color: var(--m-card-fg, var(--m-step-fg));
  text-align: start;
}

@supports not (grid-template-columns: subgrid) {
  .m-feature-block__step {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.m-feature-block__step--bare .m-feature-block__step-body {
  grid-column: 1 / -1;
}

.m-feature-block__step-num {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: var(--fw-display-semibold);
  line-height: 1;
  color: var(--m-step-num-ink, currentColor);
}

.m-feature-block__steps--num-brand { --m-step-num-ink: var(--palette-accent); }
.m-feature-block__steps--num-text { --m-step-num-ink: currentColor; }
.m-feature-block__steps--num-custom { --m-step-num-ink: var(--m-step-num); }
.m-feature-block__tone--brand.m-feature-block__steps--num-brand { --m-step-num-ink: currentColor; }

.m-feature-block__step-body {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.m-feature-block__step-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-body);
  line-height: var(--leading-article);
  letter-spacing: var(--tracking-heading);
}

.m-feature-block__step-text {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body-md);
  white-space: pre-line;
}

@media (max-width: 767px) {
  .m-feature-block--steps .m-feature-block__steps {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs) var(--space-xs);
  }

  .m-feature-block__step {
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xs);
    border-radius: var(--radius-card);
  }

  /* The side cards center the text on a phone; with points and stacked cards it stays aligned like on desktop. */
  .m-feature-block--steps:not(.m-feature-block--layout-center) .m-feature-block__copy {
    justify-items: start;
    text-align: start;
  }

  .m-feature-block--steps:not(.m-feature-block--layout-center) .t-path__list {
    justify-content: flex-start;
  }
}

/* Centered layout: points and stacked cards keep a readable width under the centered text. */
.m-feature-block--layout-center .m-feature-block__points,
.m-feature-block--layout-center.m-feature-block--steps .m-feature-block__steps {
  width: min(100%, var(--measure-wide));
  justify-self: center;
}