.yes-energy-storage-page {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--yes-color-bg-light) 88%, var(--yes-color-brand) 3%) 0%,
      color-mix(in srgb, var(--yes-color-surface-muted) 94%, white 6%) 100%
    );
  color: var(--yes-color-text-primary);
}

:is(html.dark, body.dark) .yes-energy-storage-page {
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--yes-color-brand) 18%, transparent), transparent 24%),
    linear-gradient(
      180deg,
      var(--yes-color-bg-page) 0%,
      color-mix(in srgb, var(--yes-color-bg-page) 78%, black 22%) 100%
    );
  color: var(--yes-color-text-primary);
}

@media (prefers-color-scheme: dark) {
  .yes-energy-storage-page {
    background:
      radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--yes-color-brand) 18%, transparent), transparent 24%),
      linear-gradient(
        180deg,
        var(--yes-color-bg-page) 0%,
        color-mix(in srgb, var(--yes-color-bg-page) 78%, black 22%) 100%
      );
    color: var(--yes-color-text-primary);
  }
}

.yes-energy-storage-source {
	display: none;
}

.yes-energy-storage-page.is-structured .yes-energy-storage-source {
	display: none;
}

.yes-energy-storage-page .yes-energy-storage-metrics {
	margin-top: var(--yes-space-xl, 48px);
}

.yes-energy-storage-page .yes-energy-storage-title,
.yes-energy-storage-page .yes-energy-storage-structured h2,
.yes-energy-storage-page .yes-energy-storage-structured h3,
.yes-energy-storage-page .yes-energy-storage-structured th,
.yes-energy-storage-page .yes-energy-storage-structured td {
  color: var(--yes-color-text-primary);
}

.yes-energy-storage-page .yes-energy-storage-lede,
.yes-energy-storage-page .yes-energy-storage-structured p,
.yes-energy-storage-page .yes-energy-storage-structured li {
  color: var(--yes-color-text-secondary);
}

/* Hero subtitle: keep it to 1-2 lines within the content column */
.yes-energy-storage-page .yes-hero__content > h2 {
  max-width: min(100%, 30ch);
  font-size: clamp(2rem, 2.6vw, 2.9rem);
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: keep-all;
}

.yes-energy-storage-page .yes-hero__content > h3,
.yes-energy-storage-page .yes-hero__content > h3.wp-block-heading {
  max-width: min(100%, 30ch);
  font-size: clamp(2rem, 2.6vw, 2.9rem);
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: keep-all;
}

.yes-energy-storage-page .yes-energy-storage-nav {
  margin-bottom: 0;
}

.yes-energy-storage-page .yes-energy-storage-structured {
  padding-bottom: clamp(88px, 10vw, 132px);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-page-system {
  background: transparent;
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-section {
  background: color-mix(in srgb, var(--yes-color-surface-elevated) 96%, white 4%);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-section--muted {
  background: color-mix(in srgb, var(--yes-color-surface-muted) 94%, white 6%);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-section--dark {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--yes-color-bg-page) 94%, transparent) 0%,
      color-mix(in srgb, var(--yes-color-bg-page) 98%, black 2%) 100%
    );
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-section--dark h2,
.yes-energy-storage-page .yes-energy-storage-structured .yes-section--dark h3,
.yes-energy-storage-page .yes-energy-storage-structured .yes-section--dark th,
.yes-energy-storage-page .yes-energy-storage-structured .yes-section--dark td {
  color: var(--yes-color-text-primary);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-section--dark p,
.yes-energy-storage-page .yes-energy-storage-structured .yes-section--dark li {
  color: var(--yes-color-text-secondary);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-metric-strip {
	margin-top: 0;
}

/* Metrics normalization: 2-up desktop/tablet, 1-up mobile, no broken numeric wraps */
.yes-energy-storage-page .yes-energy-storage-metrics,
.yes-energy-storage-page .yes-energy-storage-structured .yes-metric-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--yes-space-md, 24px);
  align-items: stretch;
}

.yes-energy-storage-page .yes-energy-storage-metrics .yes-metric strong,
.yes-energy-storage-page .yes-energy-storage-structured .yes-metric strong {
  font-size: clamp(2rem, 2vw, 2.85rem);
  line-height: 1;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.yes-energy-storage-page .yes-energy-storage-metrics .yes-metric span,
.yes-energy-storage-page .yes-energy-storage-structured .yes-metric span {
  font-size: clamp(1rem, 0.9vw, 1.18rem);
  line-height: 1.42;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.yes-energy-storage-page .yes-energy-storage-metrics .yes-metric,
.yes-energy-storage-page .yes-energy-storage-structured .yes-metric {
  min-height: clamp(220px, 24vw, 320px);
  padding: clamp(28px, 2.4vw, 36px);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-card,
.yes-energy-storage-page .yes-energy-storage-structured .yes-metric,
.yes-energy-storage-page .yes-energy-storage-structured .yes-table-wrap {
  border-color: var(--yes-system-line);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--yes-color-surface-elevated) 96%, white 4%) 0%,
      color-mix(in srgb, var(--yes-color-surface) 98%, white 2%) 100%
    );
  box-shadow: var(--yes-shadow-card);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-table-wrap {
	margin-top: var(--yes-space-lg, 32px);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-table-wrap table {
  width: 100%;
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-table-wrap tr:nth-child(even) td {
  background: color-mix(in srgb, var(--yes-color-brand) 4%, transparent);
}

.yes-energy-storage-page .yes-energy-storage-structured .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--yes-space-md, 24px);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-card a {
	color: inherit;
	text-decoration: none;
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-card a:hover,
.yes-energy-storage-page .yes-energy-storage-structured .yes-card a:focus-visible {
	color: var(--yes-color-accent);
}

.yes-energy-storage-page .yes-energy-storage-structured .yes-cluster {
	row-gap: var(--yes-space-sm, 16px);
}

:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-nav {
  border-color: rgba(73, 197, 177, 0.18);
  background: rgba(18, 22, 23, 0.94);
}

:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-nav a {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--yes-color-text-secondary);
}

:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-nav a:hover,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-nav a:focus-visible {
  color: var(--yes-color-brand);
  border-color: var(--yes-color-brand);
}

:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-title,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured h2,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured h3,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured strong,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured th,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured td {
  color: var(--yes-color-text-primary);
}

:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-lede,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured p,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured li,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured span {
  color: var(--yes-color-text-secondary);
}

:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured .yes-section,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured .yes-section--muted,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured .yes-section--dark,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured .yes-card,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured .yes-metric,
:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured .yes-table-wrap {
  border-color: rgba(73, 197, 177, 0.14);
  background:
    linear-gradient(
      180deg,
      rgba(20, 24, 25, 0.96) 0%,
      rgba(16, 19, 20, 0.98) 100%
    );
}

:is(html.dark, body.dark) .yes-energy-storage-page .yes-energy-storage-structured .yes-table-wrap tr:nth-child(even) td {
  background: rgba(73, 197, 177, 0.03);
}

@media (prefers-color-scheme: dark) {
  .yes-energy-storage-page .yes-energy-storage-nav {
    border-color: rgba(73, 197, 177, 0.18);
    background: rgba(18, 22, 23, 0.94);
  }

  .yes-energy-storage-page .yes-energy-storage-nav a {
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--yes-color-text-secondary);
  }

  .yes-energy-storage-page .yes-energy-storage-nav a:hover,
  .yes-energy-storage-page .yes-energy-storage-nav a:focus-visible {
    color: var(--yes-color-brand);
    border-color: var(--yes-color-brand);
  }

  .yes-energy-storage-page .yes-energy-storage-title,
  .yes-energy-storage-page .yes-energy-storage-structured h2,
  .yes-energy-storage-page .yes-energy-storage-structured h3,
  .yes-energy-storage-page .yes-energy-storage-structured strong,
  .yes-energy-storage-page .yes-energy-storage-structured th,
  .yes-energy-storage-page .yes-energy-storage-structured td {
    color: var(--yes-color-text-primary);
  }

  .yes-energy-storage-page .yes-energy-storage-lede,
  .yes-energy-storage-page .yes-energy-storage-structured p,
  .yes-energy-storage-page .yes-energy-storage-structured li,
  .yes-energy-storage-page .yes-energy-storage-structured span {
    color: var(--yes-color-text-secondary);
  }

  .yes-energy-storage-page .yes-energy-storage-structured .yes-section,
  .yes-energy-storage-page .yes-energy-storage-structured .yes-section--muted,
  .yes-energy-storage-page .yes-energy-storage-structured .yes-section--dark,
  .yes-energy-storage-page .yes-energy-storage-structured .yes-card,
  .yes-energy-storage-page .yes-energy-storage-structured .yes-metric,
  .yes-energy-storage-page .yes-energy-storage-structured .yes-table-wrap {
    border-color: rgba(73, 197, 177, 0.14);
    background:
      linear-gradient(
        180deg,
        rgba(20, 24, 25, 0.96) 0%,
        rgba(16, 19, 20, 0.98) 100%
      );
  }

  .yes-energy-storage-page .yes-energy-storage-structured .yes-table-wrap tr:nth-child(even) td {
    background: rgba(73, 197, 177, 0.03);
  }
}

@media (max-width: 1100px) {
  .yes-energy-storage-page .yes-energy-storage-metrics,
  .yes-energy-storage-page .yes-energy-storage-structured .yes-metric-strip {
    gap: var(--yes-space-sm, 16px);
  }

  .yes-energy-storage-page .yes-energy-storage-metrics .yes-metric,
  .yes-energy-storage-page .yes-energy-storage-structured .yes-metric {
    min-height: clamp(200px, 24vw, 280px);
    padding: clamp(24px, 2vw, 32px);
  }
}

@media (max-width: 700px) {
  .yes-energy-storage-page .yes-energy-storage-metrics,
  .yes-energy-storage-page .yes-energy-storage-structured .yes-metric-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}