@layer blocks {
  .color-summary {
    background-color: var(--color-summary-bg, transparent);
    color: var(--theme-text-primary);
    padding: 4rem 0;
  }
  @media (min-width: 1024px) {
    .color-summary {
      padding: 6.5rem 0;
    }
  }
  .color-summary__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  @media (min-width: 1024px) {
    .color-summary__inner {
      padding-bottom: 0;
    }
  }
  .color-summary__headline-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-bottom: 4rem;
  }
  @media (min-width: 1024px) {
    .color-summary__headline-wrapper {
      margin-bottom: 6.5rem;
    }
  }
  .color-summary__columns {
    row-gap: 3rem;
  }
  @media (min-width: 768px) {
    .color-summary__columns {
      row-gap: 4rem;
    }
  }
  @media (min-width: 1024px) {
    .color-summary__columns {
      row-gap: 0;
    }
  }
  .color-summary__col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .color-summary__col--why {
    margin-bottom: 4rem;
  }
  .color-summary__col--why .accordion__title {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .color-summary__col--why .accordion__body-inner {
    padding-bottom: 0;
  }
  @media (min-width: 1024px) {
    .color-summary__col--why {
      margin-bottom: 0;
    }
  }
  @media (min-width: 1024px) {
    .color-summary__col--features {
      grid-column: 1/4;
    }
    .color-summary__col--info {
      grid-column: 5/8;
    }
    .color-summary__col--why {
      grid-column: 9/12;
    }
  }
  .color-summary__features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 1024px) {
    .color-summary__features-list {
      gap: 0.75rem;
    }
  }
  .color-summary__feature-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .color-summary__icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 1.5rem;
    height: 1.5rem;
  }
  .color-summary__feature-icon {
    flex-shrink: 0;
  }
  .color-summary__feature-label {
    flex: 1;
  }
  .color-summary__data {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 1024px) {
    .color-summary__data {
      gap: 0.75rem;
    }
  }
  .color-summary__data-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  .color-summary__data-row--rgb {
    gap: 0.75rem;
  }
  .color-summary__cta {
    display: flex;
    justify-content: flex-start;
  }
  @media (min-width: 1024px) {
    .color-summary__cta {
      margin-top: 4rem;
    }
  }
  .color-summary__disclaimer-heading {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .color-summary__disclaimer--desktop {
    display: none;
  }
  @media (min-width: 1024px) {
    .color-summary__disclaimer--desktop {
      display: block;
      margin-top: 2rem;
    }
  }
  .color-summary__disclaimer--desktop .tooltip__label,
  .color-summary__disclaimer--desktop .tooltip__body-label {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .color-summary__disclaimer--desktop .color-summary__disclaimer-copy {
    flex: 1;
  }
  .color-summary__disclaimer--mobile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 4rem;
  }
  @media (min-width: 1024px) {
    .color-summary__disclaimer--mobile {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .color-summary * {
      transition: none !important;
      animation: none !important;
    }
  }
}