.yes-button,
.yes-page .wp-block-button__link,
.yes-page-system .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--yes-button-height);
  padding: var(--yes-button-padding-y) var(--yes-button-padding-x);
  border: var(--yes-button-border-width) solid var(--yes-color-primary);
  border-radius: var(--yes-button-radius);
  background: var(--yes-color-primary);
  color: var(--yes-color-primary-text);
  font-family: var(--yes-font-technical);
  font-size: var(--yes-button-font-size);
  font-weight: var(--yes-button-font-weight);
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--yes-button-transition),
    color var(--yes-button-transition),
    border-color var(--yes-button-transition),
    transform var(--yes-button-transition),
    box-shadow var(--yes-button-transition),
    opacity var(--yes-button-transition);
}

.yes-button:focus-visible,
.yes-page .wp-block-button__link:focus-visible,
.yes-page-system .wp-block-button__link:focus-visible {
  outline: 2px solid var(--yes-color-primary);
  outline-offset: 3px;
}

.yes-button--primary {
  background: var(--yes-color-primary);
  color: var(--yes-color-primary-text);
}

.yes-button:not(.yes-button--secondary):not(.yes-button--disabled):hover,
.yes-button:not(.yes-button--secondary):not(.yes-button--disabled):focus-visible,
.yes-page .wp-block-button:not(.yes-button--secondary):not(.yes-button--disabled) .wp-block-button__link:hover,
.yes-page .wp-block-button:not(.yes-button--secondary):not(.yes-button--disabled) .wp-block-button__link:focus-visible,
.yes-page-system .wp-block-button:not(.yes-button--secondary):not(.yes-button--disabled) .wp-block-button__link:hover,
.yes-page-system .wp-block-button:not(.yes-button--secondary):not(.yes-button--disabled) .wp-block-button__link:focus-visible,
.yes-button:not(.yes-button--secondary):not(.yes-button--disabled):active,
.yes-page .wp-block-button:not(.yes-button--secondary):not(.yes-button--disabled) .wp-block-button__link:active,
.yes-page-system .wp-block-button:not(.yes-button--secondary):not(.yes-button--disabled) .wp-block-button__link:active,
.yes-button--primary:hover,
.yes-button--primary:focus-visible,
.yes-page .wp-block-button.yes-button--primary .wp-block-button__link:hover,
.yes-page .wp-block-button.yes-button--primary .wp-block-button__link:focus-visible,
.yes-page-system .wp-block-button.yes-button--primary .wp-block-button__link:hover,
.yes-page-system .wp-block-button.yes-button--primary .wp-block-button__link:focus-visible,
.yes-button--primary:active,
.yes-page .wp-block-button.yes-button--primary .wp-block-button__link:active,
.yes-page-system .wp-block-button.yes-button--primary .wp-block-button__link:active {
  background: var(--yes-color-primary-hover);
  border-color: var(--yes-color-primary-hover);
  color: var(--yes-color-primary-text);
}

.yes-button--secondary {
  background: transparent;
  color: var(--yes-color-secondary-text);
  border-color: var(--yes-color-secondary-border);
}

.yes-button--secondary:hover,
.yes-button--secondary:focus-visible,
.yes-page .wp-block-button.yes-button--secondary .wp-block-button__link:hover,
.yes-page .wp-block-button.yes-button--secondary .wp-block-button__link:focus-visible,
.yes-page-system .wp-block-button.yes-button--secondary .wp-block-button__link:hover,
.yes-page-system .wp-block-button.yes-button--secondary .wp-block-button__link:focus-visible {
  background: rgba(73, 197, 177, 0.12);
  color: var(--yes-color-secondary-text);
  border-color: var(--yes-color-secondary-border);
}

.yes-button--secondary:active,
.yes-page .wp-block-button.yes-button--secondary .wp-block-button__link:active,
.yes-page-system .wp-block-button.yes-button--secondary .wp-block-button__link:active {
  background: rgba(73, 197, 177, 0.18);
  color: var(--yes-color-secondary-text);
  border-color: var(--yes-color-secondary-border);
}

.yes-button--disabled,
.yes-button:disabled,
.yes-button[aria-disabled="true"],
.yes-page .wp-block-button.yes-button--disabled .wp-block-button__link,
.yes-page .wp-block-button .wp-block-button__link[aria-disabled="true"],
.yes-page-system .wp-block-button.yes-button--disabled .wp-block-button__link,
.yes-page-system .wp-block-button .wp-block-button__link[aria-disabled="true"] {
  background: var(--yes-color-disabled-bg);
  color: var(--yes-color-disabled-text);
  border-color: var(--yes-color-disabled-bg);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
  pointer-events: none;
  transform: none;
}

.yes-page .wp-block-button.yes-button--primary .wp-block-button__link,
.yes-page-system .wp-block-button.yes-button--primary .wp-block-button__link {
  background: var(--yes-color-primary);
  color: var(--yes-color-primary-text);
  border-color: var(--yes-color-primary);
}

.yes-page .wp-block-button.yes-button--secondary .wp-block-button__link,
.yes-page-system .wp-block-button.yes-button--secondary .wp-block-button__link {
  background: transparent;
  color: var(--yes-color-secondary-text);
  border-color: var(--yes-color-secondary-border);
}

.yes-page .wp-block-button.yes-button--disabled .wp-block-button__link,
.yes-page-system .wp-block-button.yes-button--disabled .wp-block-button__link {
  background: var(--yes-color-disabled-bg);
  color: var(--yes-color-disabled-text);
  border-color: var(--yes-color-disabled-bg);
}

.yes-card,
.yes-card--product,
.yes-card--service,
.yes-card--technical,
.yes-card--metric,
.yes-page-system .yes-card,
.yes-page-system .yes-bento-card,
.yes-page-system .yes-metric {
  background: var(--yes-color-surface-light);
  border: 1px solid var(--yes-color-border-subtle);
  box-shadow: var(--yes-shadow-card);
  border-radius: 0;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.yes-card--dark {
  background: var(--yes-color-surface-dark);
  color: var(--yes-color-text-primary);
}

.yes-card:hover,
.yes-card:focus-within,
.yes-card--product:hover,
.yes-card--product:focus-within,
.yes-card--service:hover,
.yes-card--service:focus-within,
.yes-card--technical:hover,
.yes-card--technical:focus-within,
.yes-card--metric:hover,
.yes-card--metric:focus-within,
.yes-page-system .yes-card:hover,
.yes-page-system .yes-card:focus-within,
.yes-page-system .yes-bento-card:hover,
.yes-page-system .yes-bento-card:focus-within,
.yes-page-system .yes-metric:hover,
.yes-page-system .yes-metric:focus-within {
  border-color: var(--yes-color-brand);
  box-shadow: 0 16px 28px rgba(17, 18, 19, 0.14), 6px 6px 0 0 var(--yes-color-brand);
  transform: translateY(-8px);
}

.yes-card:hover .yes-icon,
.yes-card:focus-within .yes-icon,
.yes-card--product:hover .yes-icon,
.yes-card--service:hover .yes-icon,
.yes-card--technical:hover .yes-icon,
.yes-card--metric:hover .yes-icon,
.yes-page-system .yes-card:hover .yes-icon,
.yes-page-system .yes-bento-card:hover .yes-icon,
.yes-page-system .yes-metric:hover .yes-icon {
  transform: scale(1.1);
}

.icon,
.yes-icon,
.yes-home-bess__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--yes-icon-size-24);
  height: var(--yes-icon-size-24);
  color: var(--yes-icon-color);
  fill: none;
  flex-shrink: 0;
  vertical-align: middle;
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease;
}

.icon svg,
.yes-icon svg,
.yes-home-bess__icon svg,
svg.icon,
svg.yes-icon,
svg.yes-home-bess__icon {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--yes-icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.icon-16 {
  width: var(--yes-icon-size-16);
  height: var(--yes-icon-size-16);
}

.icon-24 {
  width: var(--yes-icon-size-24);
  height: var(--yes-icon-size-24);
}

.icon-32 {
  width: var(--yes-icon-size-32);
  height: var(--yes-icon-size-32);
}

.icon-40 {
  width: var(--yes-icon-size-40);
  height: var(--yes-icon-size-40);
}

.icon-48,
.yes-icon {
  width: var(--yes-icon-size-48);
  height: var(--yes-icon-size-48);
}

.icon-56 {
  width: var(--yes-icon-size-56);
  height: var(--yes-icon-size-56);
}

.icon-64,
.yes-home-bess__icon {
  width: var(--yes-icon-size-64);
  height: var(--yes-icon-size-64);
}

.icon-72 {
  width: var(--yes-icon-size-72);
  height: var(--yes-icon-size-72);
}

.icon--accent,
.yes-icon--accent {
  color: var(--yes-icon-color);
}

.icon--muted {
  color: var(--yes-color-text-muted);
}

.icon--current {
  color: currentColor;
}

.icon [fill]:not([fill="none"]),
.yes-icon [fill]:not([fill="none"]),
.yes-home-bess__icon [fill]:not([fill="none"]) {
  fill: none !important;
}

.icon [stroke],
.yes-icon [stroke],
.yes-home-bess__icon [stroke] {
  stroke: currentColor !important;
}

html.dark .icon,
html.dark .yes-icon,
html.dark .yes-home-bess__icon {
  color: var(--yes-icon-color);
}

.yes-hero__media,
.yes-media-frame,
.yes-image-frame,
.yes-card--media,
.yes-interactive-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--yes-color-border-subtle);
  border-radius: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.yes-hero__media:hover,
.yes-hero__media:focus-within,
.yes-media-frame:hover,
.yes-media-frame:focus-within,
.yes-image-frame:hover,
.yes-image-frame:focus-within,
.yes-card--media:hover,
.yes-card--media:focus-within,
.yes-interactive-media:hover,
.yes-interactive-media:focus-within {
  border-color: var(--yes-color-brand);
  box-shadow: 0 22px 40px rgba(17, 18, 19, 0.18), 8px 8px 0 0 var(--yes-color-brand);
  transform: translateY(-8px);
}

.yes-hero__media img,
.yes-media-frame img,
.yes-image-frame img,
.yes-card--media img,
.yes-interactive-media img {
  transition: transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.yes-hero__media:hover img,
.yes-hero__media:focus-within img,
.yes-media-frame:hover img,
.yes-media-frame:focus-within img,
.yes-image-frame:hover img,
.yes-image-frame:focus-within img,
.yes-card--media:hover img,
.yes-card--media:focus-within img,
.yes-interactive-media:hover img,
.yes-interactive-media:focus-within img {
  transform: scale(1.08);
}

html.dark .yes-card,
html.dark .yes-card--product,
html.dark .yes-card--service,
html.dark .yes-card--technical,
html.dark .yes-card--metric,
html.dark .yes-page-system .yes-card,
html.dark .yes-page-system .yes-bento-card,
html.dark .yes-page-system .yes-metric {
  background: var(--yes-color-surface-dark);
  border-color: var(--yes-color-border-subtle);
}

html.dark .yes-card:hover,
html.dark .yes-card:focus-within,
html.dark .yes-card--product:hover,
html.dark .yes-card--product:focus-within,
html.dark .yes-card--service:hover,
html.dark .yes-card--service:focus-within,
html.dark .yes-card--technical:hover,
html.dark .yes-card--technical:focus-within,
html.dark .yes-card--metric:hover,
html.dark .yes-card--metric:focus-within,
html.dark .yes-page-system .yes-card:hover,
html.dark .yes-page-system .yes-card:focus-within,
html.dark .yes-page-system .yes-bento-card:hover,
html.dark .yes-page-system .yes-bento-card:focus-within,
html.dark .yes-page-system .yes-metric:hover,
html.dark .yes-page-system .yes-metric:focus-within {
  box-shadow: 0 22px 36px rgba(0, 0, 0, 0.34), 6px 6px 0 0 var(--yes-color-brand);
}

html.dark .yes-hero__media:hover,
html.dark .yes-hero__media:focus-within,
html.dark .yes-media-frame:hover,
html.dark .yes-media-frame:focus-within,
html.dark .yes-image-frame:hover,
html.dark .yes-image-frame:focus-within,
html.dark .yes-card--media:hover,
html.dark .yes-card--media:focus-within,
html.dark .yes-interactive-media:hover,
html.dark .yes-interactive-media:focus-within {
  box-shadow: 0 28px 44px rgba(0, 0, 0, 0.38), 8px 8px 0 0 var(--yes-color-brand);
}

.yes-tabs {
  display: grid;
  gap: 18px;
}

@media (max-width: 1024px) {
  .yes-card,
  .yes-card--product,
  .yes-card--service,
  .yes-card--technical,
  .yes-card--metric,
  .yes-page-system .yes-card,
  .yes-page-system .yes-bento-card,
  .yes-page-system .yes-metric {
    padding: 32px;
  }
}

@media (max-width: 782px) {
  .yes-card,
  .yes-card--product,
  .yes-card--service,
  .yes-card--technical,
  .yes-card--metric,
  .yes-page-system .yes-card,
  .yes-page-system .yes-bento-card,
  .yes-page-system .yes-metric {
    padding: 24px;
  }
}

.yes-tabs__list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.yes-tabs__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--yes-color-border-subtle);
  background: transparent;
  color: var(--yes-color-secondary-dark);
  font-family: var(--yes-font-technical);
  font-size: var(--yes-text-label);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.yes-tabs__trigger[aria-selected="true"],
.yes-tabs__trigger.is-active {
  background: var(--yes-color-brand);
  color: var(--yes-color-text-primary);
  border-color: var(--yes-color-brand);
}

html.dark .yes-tabs__trigger {
  color: var(--yes-color-text-primary);
}

.yes-banner {
  border: 1px solid var(--yes-color-border-subtle);
  padding: clamp(28px, 4vw, 48px);
}

.yes-banner--dark,
.yes-cta {
  background: linear-gradient(180deg, #f4f8f7 0%, #e7f4f1 100%);
  color: var(--yes-color-text-primary);
}

.yes-banner--light {
  background: linear-gradient(180deg, #f8f9fa 0%, #eef3f3 100%);
}

html.dark .yes-banner--dark,
html.dark .yes-cta {
  background: linear-gradient(135deg, #111213 0%, #1b2021 58%, #49c5b1 170%);
  color: #fff;
}

.yes-spec-table,
.yes-comparison-table,
.yes-page-system .yes-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--yes-color-border-subtle);
  background: var(--yes-color-surface-light);
}

html.dark .yes-spec-table,
html.dark .yes-comparison-table,
html.dark .yes-page-system .yes-table-wrap {
  background: var(--yes-color-surface-dark);
}

.yes-spec-table table,
.yes-comparison-table table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.yes-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--yes-color-border-subtle);
  color: var(--yes-color-secondary-dark);
  font-family: var(--yes-font-technical);
  font-size: var(--yes-text-label);
  font-weight: 800;
  padding: 8px 12px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

html.dark .yes-chip {
  color: var(--yes-color-text-primary);
}