:root {
  --space-3xl: 80px;
  --space-2xl: 64px;
  --space-xl: 56px;
  --space-lg: 48px;
  --space-md: 40px;
  --space-sm: 32px;
  --space-xs: 24px;
  --space-2xs: 16px;
  --space-3xs: 12px;
  --space-4xs: 8px;
  --space-5xs: 4px;

  --space-3xl-mobile: 48px;
  --space-2xl-mobile: 32px;
  --space-xl-mobile: 32px;
  --space-lg-mobile: 32px;
  --space-md-mobile: 32px;
  --space-sm-mobile: 24px;
  --space-xs-mobile: 24px;
  --space-2xs-mobile: 16px;
  --space-3xs-mobile: 12px;
  --space-4xs-mobile: 8px;
  --space-5xs-mobile: 4px;

  --display-lg-font-size: 52px;
  --display-md-font-size: 48px;
  --display-line-height: 1;

  --heading-xl-font-size: 40px;
  --heading-lg-font-size: 32px;
  --heading-md-font-size: 24px;
  --heading-sm-font-size: 20px;
  --heading-xs-font-size: 18px;
  --heading-2xs-font-size: 16px;
  --heading-line-height: 1.25;

  --text-2xl-font-size: 24px;
  --text-xl-font-size: 20px;
  --text-lg-font-size: 18px;
  --text-md-font-size: 16px;
  --text-sm-font-size: 14px;
  --text-line-height: 1.5;

  --display-lg-font-size-mobile: 40px;
  --display-md-font-size-mobile: 36px;

  --heading-xl-font-size-mobile: 32px;
  --heading-lg-font-size-mobile: 28px;
  --heading-md-font-size-mobile: 22px;
  --heading-sm-font-size-mobile: 18px;
  --heading-xs-font-size-mobile: 16px;

  --text-2xl-font-size-mobile: 20px;
  --text-xl-font-size-mobile: 18px;
  --text-lg-font-size-mobile: 16px;
  --text-md-font-size-mobile: 16px;
  --text-sm-font-size-mobile: 14px;

  --eyebrow-line-height: 1.25;

  --typography-font-weight-bold: 700;
  --typography-font-weight-semibold: 600;
  --typography-font-weight-medium: 500;
  --typography-font-weight-regular: 400;

  --btn-gap: var(--space-4xs);
  --btn-sm-padding-vertical: var(--space-3xs);
  --btn-sm-padding-horizontal: var(--space-2xs);
  --btn-md-padding-vertical: var(--space-2xs);
  --btn-md-padding-horizontal: var(--space-2xs);
  --btn-lg-padding-vertical: var(--space-2xs);
  --btn-lg-padding-horizontal: var(--space-xs);

  --btn-border-radius: var(--space-4xs);

  --btn-lg-font-size: var(--text-lg-font-size);
  --btn-md-font-size: var(--text-md-font-size);
  --btn-sm-font-size: var(--text-sm-font-size);
  --btn-font-weight: var(--typography-font-weight-semibold);

  --color-interactive-primary-default: #0073c0;
  --color-interactive-primary-hover: #015fa3;
  --color-interactive-primary-focus: #065186;
  --color-interactive-primary-active: var(--color-interactive-primary-default);
  --color-interactive-primary-disabled: #0073c088;

  --color-interactive-secondary-default: #c31371;
  --color-interactive-secondary-hover: #a70d5e;
  --color-interactive-secondary-focus: #8b1050;
  --color-interactive-secondary-active: var(--color-interactive-secondary-default);
  --color-interactive-secondary-disabled: #c3137188;

  --color-interactive-inverse-hover: #e5e6e8;

  --color-foreground-neutral-strongest: #131415;
  --color-foreground-neutral-muted: #aaafb6;
  --color-foreground-neutral-subtle: #E5E6E8;
  --color-background-alternate: #f5f5f5;
  --color-background-sunken: #f4f4f5;
  --color-background-brand-subtler: #E0F0FE;

  --color-red: #d92d20;
  --color-yellow: #f79009;
  --color-green: #12b76a;

  --bg-gradient-color: var(--color-background-sunken);
  --bg-gradient-size: 200px;
}

hr {
  width: 100%;
}

.bg-pri {
  background-color: var(--color-interactive-primary-default) !important;
  color: var(--color-white);
}
.bg-sec {
  background-color: var(--color-interactive-secondary-default) !important;
  color: var(--color-white);
}
.bg-white {
  background-color: var(--color-white) !important;
  color: var(--color-dark);
}
.bg-sunken {
  background-color: var(--color-background-sunken) !important;
  color: var(--color-dark);
}
.bg-strongest {
  background-color: var(--color-foreground-neutral-strongest) !important;
  color: var(--color-white);
}
.bg-subtler {
  background-color: var(--color-background-brand-subtler) !important;
  color: var(--color-dark);
}
.bg-gradient {
  background: linear-gradient(to top, var(--bg-gradient-color), white var(--bg-gradient-size));
}

.bg-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.bg-bottom {
  background-position: bottom;
}

.bg-overlay,
.bg-overlay > * {
  position: relative;
}
.bg-overlay:before {
  content: "";
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
  background: #0004;
  position: absolute;
}

/* override per i titoli, che altrimenti resterebbero scuri su sfondo scuro */
.invert h1,
.invert h2,
.invert h3 {
  color: var(--color-white);
}

[class^="vgap-"],
[class*=" vgap-"] {
  display: flex;
  flex-flow: column nowrap;
}

[class^="vgap-"] .img-responsive,
[class*=" vgap-"] .img-responsive {
  align-self: center;
}

.t-center [class^="vgap-"],
.t-center [class*=" vgap-"],
[class^="vgap-"].t-center,
[class*=" vgap-"].t-center {
  align-items: center;
}

.t-pri {
  color: var(--color-interactive-primary-default);
}
.t-sec {
  color: var(--color-interactive-secondary-default);
}

.vgap-3xl {
  gap: var(--space-3xl) !important;
}
.vgap-2xl {
  gap: var(--space-2xl) !important;
}
.vgap-xl {
  gap: var(--space-xl) !important;
}
.vgap-lg {
  gap: var(--space-lg) !important;
}
.vgap-md {
  gap: var(--space-md) !important;
}
.vgap-sm {
  gap: var(--space-sm) !important;
}
.vgap-xs {
  gap: var(--space-xs) !important;
}
.vgap-2xs {
  gap: var(--space-2xs) !important;
}
.vgap-3xs {
  gap: var(--space-3xs) !important;
}
.vgap-4xs {
  gap: var(--space-4xs) !important;
}

.section-body .contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xs);
  height: 100%;
  margin: 0;
}
.section-body .contents-body,
.section-body .contents-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  /* NO! align-items: flex-start; */
}
.section-body .contents-body .contents-image {
  display: flex;
  justify-content: center;
}

[class^="hgap-"],
[class*=" hgap-"] {
  display: flex;
  flex-flow: row wrap;
}
.hgap-3xl {
  gap: var(--space-3xl);
}
.hgap-2xl {
  gap: var(--space-2xl);
}
.hgap-xl {
  gap: var(--space-xl);
}
.hgap-lg {
  gap: var(--space-lg);
}
.hgap-md {
  gap: var(--space-md);
}
.hgap-sm {
  gap: var(--space-sm);
}
.hgap-xs {
  gap: var(--space-xs);
}
.hgap-2xs {
  gap: var(--space-2xs);
}
.hgap-3xs {
  gap: var(--space-3xs);
}
.hgap-4xs {
  gap: var(--space-4xs);
}

p {
  margin: 0;
}

[class^="t-"],
[class*=" t-"] {
  font-weight: var(--typography-font-weight-regular);
  line-height: var(--text-line-height);
  font-family: var(--site-font-family);
  margin: 0;
}
.t-sm {
  font-size: var(--text-sm-font-size);
}
.t-md {
  font-size: var(--text-md-font-size);
}
.t-lg {
  font-size: var(--text-lg-font-size);
}
.t-xl {
  font-size: var(--text-xl-font-size);
}
.t-2xl {
  font-size: var(--text-2xl-font-size);
}

.t-center {
  text-align: center;
}
.t-center [class^="hgap-"],
.t-center [class*=" hgap-"] {
  justify-content: center;
}
.t-center .img-responsive {
  margin: auto;
}
.t-ucase {
  text-transform: uppercase;
}

[class^="h-"],
[class*=" h-"] {
  font-weight: var(--typography-font-weight-bold);
  word-wrap: break-word;
  line-height: var(--heading-line-height);
  font-family: var(--site-font-family);
  margin: 0;
}
.h-xl {
  font-size: var(--heading-xl-font-size);
}
.h-lg {
  font-size: var(--heading-lg-font-size);
}
.h-md {
  font-size: var(--heading-md-font-size);
}
.h-sm {
  font-size: var(--heading-sm-font-size);
}
.h-xs {
  font-size: var(--heading-xs-font-size);
}
.h-2xs {
  font-size: var(--heading-2xs-font-size);
}

[class^="display-"],
[class*=" display-"] {
  font-weight: var(--typography-font-weight-bold);
  word-wrap: break-word;
  line-height: var(--display-line-height);
  font-family: var(--site-font-family);
}
.display-lg {
  font-size: var(--display-lg-font-size);
}
.display-md {
  font-size: var(--display-md-font-size);
}

[class^="eyebrow-"],
[class*=" eyebrow-"] {
  font-weight: var(--typography-font-weight-medium);
  line-height: var(--eyebrow-line-height);
  font-family: var(--site-font-family);
  text-transform: uppercase;
}
.eyebrow-lg {
  font-size: var(--text-lg-font-size);
}
.eyebrow-md {
  font-size: var(--text-md-font-size);
}
.eyebrow-sm {
  font-size: var(--text-sm-font-size);
}

.invert {
  color: var(--color-white);
}

/*
.bg-fondino {
  background-color: var(--color-fondino);
}
*/

/* FIX per FA versioni legacy */
[class^="link-"] > [class*="fa-"],
[class*=" link-"] > [class*="fa-"] {
  width: var(--fa-width, 1.25em);
  text-align: center;
}

[class^="link-"],
[class*=" link-"] {
  text-decoration: underline;
  font-weight: var(--typography-font-weight-medium);
  position: relative;
}
.link-pri {
  color: var(--color-interactive-primary-default);
}
.link-pri:hover {
  color: var(--color-interactive-primary-hover);
}
.link-pri:focus {
  color: var(--color-interactive-primary-focus);
}
.link-pri:active {
  color: var(--color-interactive-primary-active);
}

.link-sec {
  color: var(--color-interactive-secondary-default);
}
.link-sec:hover {
  color: var(--color-interactive-secondary-hover);
}
.link-sec:focus {
  color: var(--color-interactive-secondary-focus);
}
.link-sec:active {
  color: var(--color-interactive-secondary-active);
}

.invert [class^="link-"]:hover,
.invert [class^="link-"]:focus,
.invert [class^="link-"]:active,
.invert [class*=" link-"]:hover,
.invert [class*=" link-"]:focus,
.invert [class*=" link-"]:active {
  color: var(--color-white);
}

.link-lg {
  font-size: var(--text-xl-font-size);
}
.link-md {
  font-size: var(--text-lg-font-size);
}
.link-sm {
  font-size: var(--text-md-font-size);
}

[class^="btn-"],
[class*=" btn-"] {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  text-decoration: none;

  padding: var(--btn-md-padding-vertical) var(--btn-md-padding-horizontal);
  font-size: var(--btn-md-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-border-radius);
  border: solid 2px;
  text-transform: uppercase;
  transition: 150ms;
}
.btn-lg {
  padding: var(--btn-lg-padding-vertical) var(--btn-lg-padding-horizontal);
  font-size: var(--btn-lg-font-size);
}
.btn-sm {
  padding: var(--btn-sm-padding-vertical) var(--btn-sm-padding-horizontal);
  font-size: var(--btn-sm-font-size);
}

.btn-pri {
  background-color: var(--color-interactive-primary-default);
  color: var(--color-white);
  border-color: var(--color-interactive-primary-default);
}
.btn-pri:hover {
  background-color: var(--color-interactive-primary-hover);
  border-color: var(--color-interactive-primary-hover);
  color: var(--color-white);
}
.btn-pri:focus {
  background-color: var(--color-interactive-primary-focus);
  border-color: var(--color-interactive-primary-focus);
  color: var(--color-white);
}
.btn-pri:active {
  background-color: var(--color-interactive-primary-active);
  border-color: var(--color-interactive-primary-active);
  color: var(--color-white);
}
.btn-sec {
  background-color: var(--color-interactive-secondary-default);
  color: var(--color-white);
  border-color: var(--color-interactive-secondary-default);
}
.btn-sec:hover {
  background-color: var(--color-interactive-secondary-hover);
  border-color: var(--color-interactive-secondary-hover);
  color: var(--color-white);
}
.btn-sec:focus {
  background-color: var(--color-interactive-secondary-focus);
  border-color: var(--color-interactive-secondary-focus);
  color: var(--color-white);
}
.btn-sec:active {
  background-color: var(--color-interactive-secondary-active);
  border-color: var(--color-interactive-secondary-active);
  color: var(--color-white);
}

[class^="btn-"]:hover,
[class*=" btn-"]:hover {
  opacity: 1;
}
[class^="btn-"][disabled],
[class*=" btn-"][disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-out,
.btn-out:hover,
.btn-out:focus,
.btn-out:active {
  background-color: transparent;
}
.btn-pri.btn-out {
  color: var(--color-interactive-primary-default);
}
.btn-pri.btn-out:hover {
  color: var(--color-interactive-primary-hover);
}
.btn-pri.btn-out:focus {
  color: var(--color-interactive-primary-focus);
}
.btn-pri.btn-out:active {
  color: var(--color-interactive-primary-active);
}
.btn-sec.btn-out {
  color: var(--color-interactive-secondary-default);
}
.btn-sec.btn-out:hover {
  color: var(--color-interactive-secondary-hover);
}
.btn-sec.btn-out:focus {
  color: var(--color-interactive-secondary-focus);
}
.btn-sec.btn-out:active {
  color: var(--color-interactive-secondary-active);
}

.invert .btn-pri {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-interactive-primary-default);
}
.invert .btn-pri:hover {
  color: var(--color-interactive-primary-hover);
}
.invert .btn-pri:focus {
  color: var(--color-interactive-primary-focus);
}
.invert .btn-pri:active {
  color: var(--color-interactive-primary-active);
}
.invert .btn-sec {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-interactive-secondary-default);
}
.invert .btn-sec:hover {
  color: var(--color-interactive-secondary-hover);
}
.invert .btn-sec:focus {
  color: var(--color-interactive-secondary-focus);
}
.invert .btn-sec:active {
  color: var(--color-interactive-secondary-active);
}
.invert .btn-out,
.invert .btn-out:hover,
.invert .btn-out:focus,
.invert .btn-out:active {
  background-color: transparent;
  color: var(--color-white);
}

.pt-3xl,
.py-3xl,
.p-3xl {
  padding-top: var(--space-3xl) !important;
}
.pb-3xl,
.py-3xl,
.p-3xl {
  padding-bottom: var(--space-3xl) !important;
}
.pl-3xl,
.px-3xl,
.p-3xl {
  padding-left: var(--space-3xl) !important;
}
.pr-3xl,
.px-3xl,
.p-3xl {
  padding-right: var(--space-3xl) !important;
}
.pt-2xl,
.py-2xl,
.p-2xl {
  padding-top: var(--space-2xl) !important;
}
.pb-2xl,
.py-2xl,
.p-2xl {
  padding-bottom: var(--space-2xl) !important;
}
.pl-2xl,
.px-2xl,
.p-2xl {
  padding-left: var(--space-2xl) !important;
}
.pr-2xl,
.px-2xl,
.p-2xl {
  padding-right: var(--space-2xl) !important;
}
.pt-xl,
.py-xl,
.p-xl {
  padding-top: var(--space-xl) !important;
}
.pb-xl,
.py-xl,
.p-xl {
  padding-bottom: var(--space-xl) !important;
}
.pl-xl,
.px-xl,
.p-xl {
  padding-left: var(--space-xl) !important;
}
.pr-xl,
.px-xl,
.p-xl {
  padding-right: var(--space-xl) !important;
}
.pt-lg,
.py-lg,
.p-lg {
  padding-top: var(--space-lg) !important;
}
.pb-lg,
.py-lg,
.p-lg {
  padding-bottom: var(--space-lg) !important;
}
.pl-lg,
.px-lg,
.p-lg {
  padding-left: var(--space-lg) !important;
}
.pr-lg,
.px-lg,
.p-lg {
  padding-right: var(--space-lg) !important;
}
.pt-md,
.py-md,
.p-md {
  padding-top: var(--space-md) !important;
}
.pb-md,
.py-md,
.p-md {
  padding-bottom: var(--space-md) !important;
}
.pl-md,
.px-md,
.p-md {
  padding-left: var(--space-md) !important;
}
.pr-md,
.px-md,
.p-md {
  padding-right: var(--space-md) !important;
}
.pt-sm,
.py-sm,
.p-sm {
  padding-top: var(--space-sm) !important;
}
.pb-sm,
.py-sm,
.p-sm {
  padding-bottom: var(--space-sm) !important;
}
.pl-sm,
.px-sm,
.p-sm {
  padding-left: var(--space-sm) !important;
}
.pr-sm,
.px-sm,
.p-sm {
  padding-right: var(--space-sm) !important;
}
.pt-xs,
.py-xs,
.p-xs {
  padding-top: var(--space-xs) !important;
}
.pb-xs,
.py-xs,
.p-xs {
  padding-bottom: var(--space-xs) !important;
}
.pl-xs,
.px-xs,
.p-xs {
  padding-left: var(--space-xs) !important;
}
.pr-xs,
.px-xs,
.p-xs {
  padding-right: var(--space-xs) !important;
}
.pt-2xs,
.py-2xs,
.p-2xs {
  padding-top: var(--space-2xs) !important;
}
.pb-2xs,
.py-2xs,
.p-2xs {
  padding-bottom: var(--space-2xs) !important;
}
.pl-2xs,
.px-2xs,
.p-2xs {
  padding-left: var(--space-2xs) !important;
}
.pr-2xs,
.px-2xs,
.p-2xs {
  padding-right: var(--space-2xs) !important;
}
.pt-3xs,
.py-3xs,
.p-3xs {
  padding-top: var(--space-3xs) !important;
}
.pb-3xs,
.py-3xs,
.p-3xs {
  padding-bottom: var(--space-3xs) !important;
}
.pl-3xs,
.px-3xs,
.p-3xs {
  padding-left: var(--space-3xs) !important;
}
.pr-3xs,
.px-3xs,
.p-3xs {
  padding-right: var(--space-3xs) !important;
}
.pt-4xs,
.py-4xs,
.p-4xs {
  padding-top: var(--space-4xs) !important;
}
.pb-4xs,
.py-4xs,
.p-4xs {
  padding-bottom: var(--space-4xs) !important;
}
.pl-4xs,
.px-4xs,
.p-4xs {
  padding-left: var(--space-4xs) !important;
}
.pr-4xs,
.px-4xs,
.p-4xs {
  padding-right: var(--space-4xs) !important;
}

/* margin */
.m-auto {
  margin: auto;
}

.mt-3xl,
.my-3xl,
.m-3xl {
  margin-top: var(--space-3xl) !important;
}
.mb-3xl,
.my-3xl,
.m-3xl {
  margin-bottom: var(--space-3xl) !important;
}
.ml-3xl,
.mx-3xl,
.m-3xl {
  margin-left: var(--space-3xl) !important;
}
.mr-3xl,
.mx-3xl,
.m-3xl {
  margin-right: var(--space-3xl) !important;
}
.mt-2xl,
.my-2xl,
.m-2xl {
  margin-top: var(--space-2xl) !important;
}
.mb-2xl,
.my-2xl,
.m-2xl {
  margin-bottom: var(--space-2xl) !important;
}
.ml-2xl,
.mx-2xl,
.m-2xl {
  margin-left: var(--space-2xl) !important;
}
.mr-2xl,
.mx-2xl,
.m-2xl {
  margin-right: var(--space-2xl) !important;
}
.mt-xl,
.my-xl,
.m-xl {
  margin-top: var(--space-xl) !important;
}
.mb-xl,
.my-xl,
.m-xl {
  margin-bottom: var(--space-xl) !important;
}
.ml-xl,
.mx-xl,
.m-xl {
  margin-left: var(--space-xl) !important;
}
.mr-xl,
.mx-xl,
.m-xl {
  margin-right: var(--space-xl) !important;
}
.mt-lg,
.my-lg,
.m-lg {
  margin-top: var(--space-lg) !important;
}
.mb-lg,
.my-lg,
.m-lg {
  margin-bottom: var(--space-lg) !important;
}
.ml-lg,
.mx-lg,
.m-lg {
  margin-left: var(--space-lg) !important;
}
.mr-lg,
.mx-lg,
.m-lg {
  margin-right: var(--space-lg) !important;
}
.mt-md,
.my-md,
.m-md {
  margin-top: var(--space-md) !important;
}
.mb-md,
.my-md,
.m-md {
  margin-bottom: var(--space-md) !important;
}
.ml-md,
.mx-md,
.m-md {
  margin-left: var(--space-md) !important;
}
.mr-md,
.mx-md,
.m-md {
  margin-right: var(--space-md) !important;
}
.mt-sm,
.my-sm,
.m-sm {
  margin-top: var(--space-sm) !important;
}
.mb-sm,
.my-sm,
.m-sm {
  margin-bottom: var(--space-sm) !important;
}
.ml-sm,
.mx-sm,
.m-sm {
  margin-left: var(--space-sm) !important;
}
.mr-sm,
.mx-sm,
.m-sm {
  margin-right: var(--space-sm) !important;
}
.mt-xs,
.my-xs,
.m-xs {
  margin-top: var(--space-xs) !important;
}
.mb-xs,
.my-xs,
.m-xs {
  margin-bottom: var(--space-xs) !important;
}
.ml-xs,
.mx-xs,
.m-xs {
  margin-left: var(--space-xs) !important;
}
.mr-xs,
.mx-xs,
.m-xs {
  margin-right: var(--space-xs) !important;
}
.mt-2xs,
.my-2xs,
.m-2xs {
  margin-top: var(--space-2xs) !important;
}
.mb-2xs,
.my-2xs,
.m-2xs {
  margin-bottom: var(--space-2xs) !important;
}
.ml-2xs,
.mx-2xs,
.m-2xs {
  margin-left: var(--space-2xs) !important;
}
.mr-2xs,
.mx-2xs,
.m-2xs {
  margin-right: var(--space-2xs) !important;
}
.mt-3xs,
.my-3xs,
.m-3xs {
  margin-top: var(--space-3xs) !important;
}
.mb-3xs,
.my-3xs,
.m-3xs {
  margin-bottom: var(--space-3xs) !important;
}
.ml-3xs,
.mx-3xs,
.m-3xs {
  margin-left: var(--space-3xs) !important;
}
.mr-3xs,
.mx-3xs,
.m-3xs {
  margin-right: var(--space-3xs) !important;
}
.mt-4xs,
.my-4xs,
.m-4xs {
  margin-top: var(--space-4xs) !important;
}
.mb-4xs,
.my-4xs,
.m-4xs {
  margin-bottom: var(--space-4xs) !important;
}
.ml-4xs,
.mx-4xs,
.m-4xs {
  margin-left: var(--space-4xs) !important;
}
.mr-4xs,
.mx-4xs,
.m-4xs {
  margin-right: var(--space-4xs) !important;
}

.section-body .contents.mt-3xl,
.section-body .contents.mb-3xl {
  height: calc(100% - var(--space-3xl));
}
.section-body .contents.mt-2xl,
.section-body .contents.mb-2xl {
  height: calc(100% - var(--space-2xl));
}
.section-body .contents.mt-xl,
.section-body .contents.mb-xl {
  height: calc(100% - var(--space-xl));
}
.section-body .contents.mt-lg,
.section-body .contents.mb-lg {
  height: calc(100% - var(--space-lg));
}
.section-body .contents.mt-md,
.section-body .contents.mb-md {
  height: calc(100% - var(--space-md));
}
.section-body .contents.mt-sm,
.section-body .contents.mb-sm {
  height: calc(100% - var(--space-sm));
}
.section-body .contents.mt-xs,
.section-body .contents.mb-xs {
  height: calc(100% - var(--space-xs));
}
.section-body .contents.mt-2xs,
.section-body .contents.mb-2xs {
  height: calc(100% - var(--space-2xs));
}
.section-body .contents.mt-3xs,
.section-body .contents.mb-3xs {
  height: calc(100% - var(--space-3xs));
}
.section-body .contents.mt-4xs,
.section-body .contents.mb-4xs {
  height: calc(100% - var(--space-4xs));
}

[class^="rnd-"],
[class*=" rnd-"] {
  overflow: hidden;
}
.rnd-xs {
  border-radius: var(--space-xs);
}
.rnd-sm {
  border-radius: var(--space-sm);
}
.rnd-md {
  border-radius: var(--space-md);
}
.rnd-lg {
  border-radius: var(--space-lg);
}
.rnd-xl {
  border-radius: var(--space-xl);
}

.row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.row::before,
.row::after {
  content: none;
}

.border-pri {
  border-color: var(--color-interactive-primary-default);
}
.border-sec {
  border-color: var(--color-interactive-secondary-default);
}

[class^="vgap-"].v-center,
[class*=" vgap-"].v-center {
  display: flex;
  height: 100%;
  justify-content: center;
}

.price-card {
  border: 1px solid #aaafb6;
  padding: var(--space-lg) var(--space-2xs) var(--space-xs) !important;
  border-radius: var(--space-xs);
  overflow: hidden;
  height: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.price-card .block-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: var(--space-5xs);
  font-size: var(--text-sm-font-size);
  font-weight: var(--typography-font-weight-bold);
}

.items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xs);
  margin: 0;
}
ul.items-list {
  list-style: none;
  padding: 0;
}
.items-list.icon-check > *,
.items-list.icon-check-circle > *,
.items-list.icon-tag > *,
.items-list.icon-chevron-right > * {
  position: relative;
  padding-left: var(--space-xs);
}
.items-list > *:before {
  font-family: "FontAwesome";
  position: absolute;
  left: 0;
  top: 0;
}
.items-list.icon-pri > * > [class^="fa-"],
.items-list.icon-pri > * > [class*=" fa-"],
.items-list.icon-pri > *:before {
  color: var(--color-interactive-primary-default);
}
.items-list.icon-sec > * > [class^="fa-"],
.items-list.icon-sec > * > [class*=" fa-"],
.items-list.icon-sec > *:before {
  color: var(--color-interactive-secondary-default);
}
.items-list.icon-check > *:before {
  content: "\f00c";
}
.items-list.icon-check-circle > *:before {
  content: "\f058";
  font-weight: 400;
  /* 5 Pro x FIC, 7 Free x danea */
  font-family: "Font Awesome 5 Pro", "Font Awesome 7 Free";
}
.items-list.icon-chevron-right > *:before {
  content: "\f054";
  font-size: 80%;
  top: 0.15em;
  left: 0.3em;
}
.items-list.icon-tag > *:before {
  content: "\f02b";
}

.checks-pri [class^="fa-"],
.checks-pri [class*=" fa-"],
.checks-green [class^="fa-"],
.checks-green [class*=" fa-"] {
  color: var(--color-interactive-primary-default);
}

.t-new {
  font-weight: var(--typography-font-weight-medium);
  font-style: italic;
  color: var(--color-interactive-secondary-default);
}

[class^="card-"]:not([class*=" py-"]),
[class*=" card-"]:not([class*=" py-"]) {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
[class^="card-"]:not([class*=" px-"]),
[class*=" card-"]:not([class*=" px-"]) {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.card-rnd {
  border-radius: var(--space-xs);
}
.card-pri {
  background-color: var(--color-interactive-primary-default);
  color: var(--color-white);
}
.card-pri-out {
  border: 1px solid var(--color-interactive-primary-default);
}
.card-sec {
  background-color: var(--color-interactive-secondary-default);
  color: var(--color-white);
}
.card-sec-out {
  border: 1px solid var(--color-interactive-secondary-default);
}
.card-neutral {
  background-color: var(--color-foreground-neutral-muted);
}
.card-neutral-out {
  border: 1px solid var(--color-foreground-neutral-muted);
  color: var(--color-dark);
}
.card-white {
  background-color: var(--color-white);
  color: var(--color-dark);
}
.card-white-out {
  border: 1px solid var(--color-white);
}
.card-sunken {
  background-color: var(--color-background-sunken);
  color: var(--color-dark);
}
.card-sunken-out {
  border: 1px solid var(--color-background-sunken);
}
.card-subtler {
  background-color: var(--color-background-brand-subtler);
  color: var(--color-dark);
}
.card-subtler-out {
  border: 1px solid var(--color-background-brand-subtler);
}

.img-avatar {
  border-radius: 50%;
  overflow: hidden;
}

[class^="badge-"],
[class*=" badge-"] {
  display: inline-flex;
  padding: var(--space-4xs) var(--space-2xs);
  font-size: var(--text-sm-font-size);
  font-weight: var(--typography-font-weight-bold);
  border-radius: var(--space-3xl);
  gap: var(--space-5xs)
}
.badge-sm {
  font-size: var(--text-sm-font-size);
  padding: var(--space-5xs) var(--space-3xs);
}
.badge-lg {
  font-size: var(--text-md-font-size);
  padding: var(--space-3xs) var(--space-xs);
}

.badge-pri {
  background-color: var(--color-interactive-primary-default);
  color: var(--color-white);
}
.badge-sec {
  background-color: var(--color-interactive-secondary-default);
  color: var(--color-white);
}

.badge-red {
  background-color: var(--color-red);
  color: var(--color-white);
}
.badge-yellow {
  background-color: var(--color-yellow);
  color: var(--color-white);
}
.badge-green {
  background-color: var(--color-green);
  color: var(--color-white);
}

.badge-out {
  background-color: transparent;
  border: 1px solid var(--color-foreground-neutral-subtle);
  color: var(--color-dark);
}
.badge-out.badge-pri {
  border-color: var(--color-interactive-primary-default);
  color: var(--color-interactive-primary-default);
}
.badge-out.badge-sec {
  border-color: var(--color-interactive-secondary-default);
  color: var(--color-interactive-secondary-default);
}
.badge-out.badge-red {
  border-color: var(--color-red);
  color: var(--color-red);
}
.badge-out.badge-yellow {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}
.badge-out.badge-green {
  border-color: var(--color-green);
  color: var(--color-green);
}

.faq-item {
  border-top: 1px solid var(--color-foreground-neutral-subtle);
  padding: var(--space-2xs) var(--space-3xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.faq-item .faq-question {
  font-size: var(--heading-sm-font-size);
  font-weight: var(--typography-font-weight-bold);
  display: flex;
  justify-content: space-between;
  margin: 0;
  cursor: pointer;
  gap: var(--space-4xs);
  align-items: flex-start;
}
.faq-item .faq-question:after {
  content: "\f078";
  font-family: "Font Awesome 5 Pro", "FontAwesome";
  transition: transform 150ms;
  color: var(--color-interactive-primary-active);
  font-size: var(--text-md-font-size);
  font-weight: 400;
  min-width: var(--space-2xs);
  text-align: center;
}
.faq-item.open .faq-question:after {
  transform: rotate(180deg);
}
.faq-item .faq-answer {
  font-size: var(--text-md-font-size);
  display: none;
}

.bt-pri {
  border-top: 1px solid var(--color-interactive-primary-default);
}
.bt-sec {
  border-top: 1px solid var(--color-interactive-secondary-default);
}
.bt-strongest {
  border-top: 1px solid var(--color-foreground-neutral-strongest);
}
.bt-neutral {
  border-top: 1px solid var(--color-foreground-neutral-subtle);
}
.bt-sunken {
  border-top: 1px solid var(--color-background-sunken);
}
.bt-subtler {
  border-top: 1px solid var(--color-background-brand-subtler);
}

[class^="quote-"],
[class*=" quote-"] {
  border-left: 4px solid;
  padding-left: var(--space-2xs);
  padding-top: var(--space-3xs);
  padding-bottom: var(--space-3xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.quote-pri {
  border-color: var(--color-interactive-primary-default);
}
.quote-sec {
  border-color: var(--color-interactive-secondary-default);
}
.quote-strongest {
  border-color: var(--color-foreground-neutral-strongest);
}
.quote-neutral {
  border-color: var(--color-foreground-neutral-subtle);
}
.quote-sunken {
  border-color: var(--color-background-sunken);
}
.quote-subtler {
  border-color: var(--color-background-brand-subtler);
}

.d-block {
  display: block !important;
}

.mw-xl,
.mw-lg,
.mw-md,
.mw-sm,
.mw-xs,
.mw-2xs {
  margin: auto;
}
.mw-xl {
  max-width: 1140px;
}
.mw-lg {
  max-width: 994px;
}
.mw-md {
  max-width: 790px;
}
.mw-sm {
  max-width: 640px;
}
.mw-xs {
  max-width: 480px;
}
.mw-2xs {
  max-width: 358px;
}

[class^="ratio-"] > *:first-child,
[class*=" ratio-"] > *:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ratio-16_9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.ratio-4_3 {
  position: relative;
  width: 100%;
  padding-top: 75%;
}

.icon-expand {
  position: relative;
}
.icon-expand::after {
  content: "\f065";
  font-family: var(--fa-family-classic), "FontAwesome";
  position: absolute;
  bottom: var(--space-4xs);
  background: white;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-weight: var(--fa-style, 900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md-font-size);
  transition: font-size 150ms;
}
.icon-expand.left::after {
  left: var(--space-4xs);
}
.icon-expand.right::after {
  right: var(--space-4xs);
}
.icon-expand:hover::after {
  font-size: calc(var(--text-md-font-size) + 2px);
}

/* Sotto i 992px, gli space token con mobile != desktop scalano in modo fluido
   tra --space-*-mobile (min, a 320px) e il valore desktop (max, a 991px).
   Il bound massimo è ripetuto qui come valore letterale invece di var(--space-X):
   referenziare var(--space-X) dentro la ridefinizione di --space-X stesso creerebbe
   un riferimento ciclico (guaranteed-invalid value) sullo stesso elemento :root.
   Se il valore desktop in :root cambia, aggiornare anche il letterale qui sotto. */
@media screen and (max-width: 991px) {
  :root {
    --space-3xl: clamp(var(--space-3xl-mobile), calc(var(--space-3xl-mobile) + (80px - var(--space-3xl-mobile)) * ((100vw - 320px) / 671px)), 80px);
    --space-2xl: clamp(var(--space-2xl-mobile), calc(var(--space-2xl-mobile) + (64px - var(--space-2xl-mobile)) * ((100vw - 320px) / 671px)), 64px);
    --space-xl: clamp(var(--space-xl-mobile), calc(var(--space-xl-mobile) + (56px - var(--space-xl-mobile)) * ((100vw - 320px) / 671px)), 56px);
    --space-lg: clamp(var(--space-lg-mobile), calc(var(--space-lg-mobile) + (48px - var(--space-lg-mobile)) * ((100vw - 320px) / 671px)), 48px);
    --space-md: clamp(var(--space-md-mobile), calc(var(--space-md-mobile) + (40px - var(--space-md-mobile)) * ((100vw - 320px) / 671px)), 40px);
    --space-sm: clamp(var(--space-sm-mobile), calc(var(--space-sm-mobile) + (32px - var(--space-sm-mobile)) * ((100vw - 320px) / 671px)), 32px);

    /* Stesso pattern per i font-size con mobile != desktop (vedi ui-kit/01-design-tokens.md).
       --text-md-font-size e --text-sm-font-size non compaiono: mobile == desktop per entrambi. */
    --display-lg-font-size: clamp(var(--display-lg-font-size-mobile), calc(var(--display-lg-font-size-mobile) + (52px - var(--display-lg-font-size-mobile)) * ((100vw - 320px) / 671px)), 52px);
    --display-md-font-size: clamp(var(--display-md-font-size-mobile), calc(var(--display-md-font-size-mobile) + (48px - var(--display-md-font-size-mobile)) * ((100vw - 320px) / 671px)), 48px);

    --heading-xl-font-size: clamp(var(--heading-xl-font-size-mobile), calc(var(--heading-xl-font-size-mobile) + (40px - var(--heading-xl-font-size-mobile)) * ((100vw - 320px) / 671px)), 40px);
    --heading-lg-font-size: clamp(var(--heading-lg-font-size-mobile), calc(var(--heading-lg-font-size-mobile) + (32px - var(--heading-lg-font-size-mobile)) * ((100vw - 320px) / 671px)), 32px);
    --heading-md-font-size: clamp(var(--heading-md-font-size-mobile), calc(var(--heading-md-font-size-mobile) + (24px - var(--heading-md-font-size-mobile)) * ((100vw - 320px) / 671px)), 24px);
    --heading-sm-font-size: clamp(var(--heading-sm-font-size-mobile), calc(var(--heading-sm-font-size-mobile) + (20px - var(--heading-sm-font-size-mobile)) * ((100vw - 320px) / 671px)), 20px);
    --heading-xs-font-size: clamp(var(--heading-xs-font-size-mobile), calc(var(--heading-xs-font-size-mobile) + (18px - var(--heading-xs-font-size-mobile)) * ((100vw - 320px) / 671px)), 18px);

    --text-2xl-font-size: clamp(var(--text-2xl-font-size-mobile), calc(var(--text-2xl-font-size-mobile) + (24px - var(--text-2xl-font-size-mobile)) * ((100vw - 320px) / 671px)), 24px);
    --text-xl-font-size: clamp(var(--text-xl-font-size-mobile), calc(var(--text-xl-font-size-mobile) + (20px - var(--text-xl-font-size-mobile)) * ((100vw - 320px) / 671px)), 20px);
    --text-lg-font-size: clamp(var(--text-lg-font-size-mobile), calc(var(--text-lg-font-size-mobile) + (18px - var(--text-lg-font-size-mobile)) * ((100vw - 320px) / 671px)), 18px);
  }

  .d-lg-none {
    display: none !important;
  }

  .img-fill {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .sm-nowrap {
    flex-wrap: nowrap;
  }
}

@media screen and (min-width: 992px) {
  .row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }
  .mw-50 {
    max-width: 50%;
  }

  [class^="hgap-"] > .v-center,
  [class*=" hgap-"] > .v-center {
    align-self: center;
  }

  .md-nowrap {
    flex-wrap: nowrap;
  }
}
@media screen and (min-width: 1200px) {
  .lg-nowrap {
    flex-wrap: nowrap;
  }
}