:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
  * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-base-0).
  * @prop --color-border - Border color of the component. Defaults to var(--nano-color-neutral-200).
  * @prop --outer-spacing - Horizontal padding of the component. Defaults to var(--nano-spacing-l1-default).
  */
}
:host .collapsible-comparison {
  background-color: var(--color-bg);
  color: var(--nano-color-neutral-1400);
  padding: var(--outer-spacing) 0;
  container-type: inline-size;
}
:host .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--nano-spacing-xl);
}
:host .headings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nano-spacing-xl);
}
:host nano-icon-button {
  display: none;
}
@container (max-width: 400px) {
  :host nano-cta {
    display: none;
  }
  :host nano-icon-button {
    --color: var(--nano-color-primary-1100);
    display: block;
    margin-inline-start: auto;
    font-size: var(--nano-font-size-xl);
    transition: 0.3s ease transform;
  }
  :host nano-icon-button.open {
    transform: rotate(180deg);
  }
}