.cmp-page .cmp-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cmp-page .cmp-list li {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--on-surface-variant) !important;
  padding: 9px 0 9px 18px !important;
  margin: 0 !important;
  border-top: 1px solid
    color-mix(in srgb, var(--on-surface-variant) 15%, transparent) !important;
  position: relative !important;
}

.cmp-page .cmp-list li:first-child {
  border-top: none !important;
}

.cmp-page .cmp-list li::before {
  content: '' !important;
  position: absolute !important;
  left: 2px !important;
  top: 16px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
}

.cmp-page .action-card .cmp-list {
  margin-top: 4px !important;
}

.cmp-page .collapse-content-inner p {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--on-surface-variant) !important;
  margin: 0 0 12px !important;
  max-width: 74ch !important;
}

.cmp-page .collapse-content-inner p:last-child {
  margin-bottom: 0 !important;
}

.cmp-page .collapse-header-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.cmp-page .action-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.cmp-page .action-card-description {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  line-height: 1.6 !important;
}

.cmp-page .data-table-wrap {
  overflow-x: auto !important;
}

.cmp-page .status-badge {
  white-space: nowrap !important;
}

.cmp-page .action-card-grid > *,
.cmp-page [class$='__grid'] > *,
.cmp-page .cmp-shots > * {
  min-width: 0 !important;
}

.cmp-page img {
  max-width: 100% !important;
  height: auto !important;
}

.cmp-page > section {
  position: relative !important;
  padding-top: clamp(32px, 4vw, 56px) !important;
  padding-bottom: clamp(32px, 4vw, 56px) !important;
}

.cmp-page > header:first-child {
  padding-top: clamp(32px, 5vw, 72px) !important;
}

.cmp-page > section + section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: clamp(18px, 4vw, 48px) !important;
  right: clamp(18px, 4vw, 48px) !important;
  height: 1px !important;
  background: color-mix(
    in srgb,
    var(--on-surface-variant) 16%,
    transparent
  ) !important;
}

.cmp-page > section.cmp-band {
  background: color-mix(
    in srgb,
    var(--on-surface) 3%,
    var(--surface-bright)
  ) !important;
  border-radius: 26px !important;
  padding-left: clamp(20px, 4vw, 52px) !important;
  padding-right: clamp(20px, 4vw, 52px) !important;
  margin-top: clamp(10px, 1.4vw, 16px) !important;
  margin-bottom: clamp(10px, 1.4vw, 16px) !important;
}

.cmp-page > section.cmp-band + section::before,
.cmp-page > section.cmp-band::before {
  display: none !important;
}

.cmp-page .cgx-section-head,
.cmp-page .qz-head,
.cmp-page .sd-head {
  margin-bottom: clamp(18px, 2.4vw, 28px) !important;
}

.cmp-loo {
  display: flex !important;
  align-items: flex-end !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
  margin: clamp(22px, 3vw, 34px) 0 0 !important;
  max-width: 640px !important;
}

.cmp-loo--right {
  margin-left: auto !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
}

.cmp-loo--left {
  margin-right: auto !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
}

.cmp-loo__art {
  flex: 0 0 auto !important;
  width: clamp(72px, 8vw, 108px) !important;
  height: auto !important;
  filter: drop-shadow(
    0 12px 22px color-mix(in srgb, var(--on-surface) 20%, transparent)
  ) !important;
}

.cmp-loo__bubble {
  position: relative !important;
  background: var(--surface-bright) !important;
  border: 1px solid
    color-mix(in srgb, var(--on-surface-variant) 20%, transparent) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--on-surface) !important;
  box-shadow: 0 10px 26px -18px
    color-mix(in srgb, var(--on-surface) 45%, transparent) !important;
  max-width: 46ch !important;
}

.cmp-loo__bubble strong {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.cmp-loo__bubble::after,
.cmp-loo__bubble::before {
  content: '' !important;
  position: absolute !important;
  bottom: 16px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
}

.cmp-loo--right .cmp-loo__bubble::before {
  right: -10px !important;
  border-left: 10px solid
    color-mix(in srgb, var(--on-surface-variant) 20%, transparent) !important;
}

.cmp-loo--right .cmp-loo__bubble::after {
  right: -8px !important;
  border-left: 10px solid var(--surface-bright) !important;
}

.cmp-loo--left .cmp-loo__bubble::before {
  left: -10px !important;
  border-right: 10px solid
    color-mix(in srgb, var(--on-surface-variant) 20%, transparent) !important;
}

.cmp-loo--left .cmp-loo__bubble::after {
  left: -8px !important;
  border-right: 10px solid var(--surface-bright) !important;
}

@media (max-width: 640px) {
  .cmp-loo,
  .cmp-loo--left,
  .cmp-loo--right {
    flex-direction: row !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }

  .cmp-loo__bubble {
    font-size: 14px !important;
  }

  .cmp-loo__bubble::before,
  .cmp-loo__bubble::after {
    display: none !important;
  }
}

.cmp-page h1 {
  max-width: 20ch !important;
  text-wrap: balance !important;
}

@media (min-width: 900px) {
  .cmp-page h1 {
    max-width: 24ch !important;
  }
}

.cmp-page .cmp-loo--feature {
  max-width: 780px !important;
  align-items: center !important;
  margin-top: clamp(18px, 2.6vw, 28px) !important;
}

.cmp-page .cmp-loo--feature .cmp-loo__art {
  width: clamp(84px, 9vw, 118px) !important;
}

.cmp-page .cmp-loo--feature .cmp-loo__bubble {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(15px, 1.35vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.008em !important;
  padding: 16px 20px !important;
  border-radius: 20px !important;
  max-width: 34ch !important;
}

.cmp-page .cmp-loo--feature .cmp-loo__bubble strong {
  color: var(--primary) !important;
  font-weight: 800 !important;
}

.cmp-page .cmp-loo--feature .cmp-loo__bubble::before,
.cmp-page .cmp-loo--feature .cmp-loo__bubble::after {
  bottom: auto !important;
  top: 50% !important;
  margin-top: -9px !important;
}

.cmp-page .action-card.cmp-highlight {
  background: color-mix(
    in srgb,
    var(--primary) 8%,
    var(--surface-bright)
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
  box-shadow: 0 20px 44px -30px
    color-mix(in srgb, var(--primary) 65%, transparent) !important;
}

.cmp-page .action-card.cmp-highlight .action-card-title {
  color: var(--primary) !important;
}

.cmp-page .action-card.cmp-highlight .cmp-list li {
  border-top-color: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  ) !important;
}

.cmp-page .action-card.cmp-highlight {
  background: color-mix(
    in srgb,
    var(--primary) 8%,
    var(--surface-bright)
  ) !important;
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
  box-shadow: 0 20px 44px -30px
    color-mix(in srgb, var(--primary) 65%, transparent) !important;
}

.cmp-page .action-card.cmp-highlight .action-card-title {
  color: var(--primary) !important;
}

.cmp-page .action-card.cmp-highlight .cmp-list li {
  border-top-color: color-mix(
    in srgb,
    var(--primary) 22%,
    transparent
  ) !important;
}

.cmp-page .cmp-freshness {
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: 13px !important;
}

.cmp-page .cta-box .cta-actions {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, 1.4vw, 16px) !important;
}

.cmp-page .cta-box .btn-cta--ghost {
  background: color-mix(in srgb, #1a0a10 34%, transparent) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 34%, transparent) !important;
}

.cmp-page .cta-box .btn-cta--ghost:hover {
  background: color-mix(in srgb, #1a0a10 46%, transparent) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 52%, transparent) !important;
}

.cmp-page > section.cta-section,
body.theme-dark .cmp-page > section.cta-section {
  background: none !important;
}

.cmp-page > section.faq-section,
body.theme-dark .cmp-page > section.faq-section {
  padding-top: 128px !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
  background: none !important;
}

.cmp-page > section.faq-section::before {
  display: none !important;
}

@media (max-width: 767px) {
  .cmp-page > section.faq-section {
    padding-top: 88px !important;
    padding-bottom: 36px !important;
  }
}