.yes-page-system {
  --yes-system-teal: var(--yes-color-brand, #49c5b1);
  --yes-system-teal-soft: #d8f5ef;
  --yes-system-ink: var(--yes-color-text-primary, #111213);
  --yes-system-graphite: var(--yes-color-secondary-dark, #2a2b2d);
  --yes-system-muted: var(--yes-color-text-secondary, #4e555e);
  --yes-system-line: var(--yes-color-border-subtle, rgba(78, 85, 94, 0.18));
  --yes-system-panel: var(--yes-color-surface-light, #ffffff);
  --yes-system-wash: var(--yes-color-surface-soft, #f8f9fa);
  --yes-system-dark-panel: var(--yes-color-surface-dark, #17191a);
  --yes-system-band-muted: linear-gradient(180deg, #f8f9fa 0%, #eef3f3 100%);
  --yes-system-band-contrast: linear-gradient(180deg, #f4f8f7 0%, #e7f4f1 100%);
  --yes-system-band-contrast-text: var(--yes-system-ink);
  --yes-system-band-contrast-muted: var(--yes-system-muted);
  --yes-system-band-contrast-panel: var(--yes-system-panel);
  --yes-system-band-contrast-line: var(--yes-system-line);
  color: var(--yes-system-ink);
  font-family: var(--yes-font-body, "Roboto", Arial, sans-serif);
  font-size: var(--yes-text-body);
  line-height: var(--yes-leading-body, 1.6);
}

html.dark .yes-page-system {
  --yes-system-band-muted: linear-gradient(180deg, #101415 0%, #15191b 100%);
  --yes-system-band-contrast: radial-gradient(circle at 72% 20%, rgba(73, 197, 177, 0.14), transparent 28%), #0d0f10;
  --yes-system-band-contrast-text: #fff;
  --yes-system-band-contrast-muted: rgba(255, 255, 255, 0.72);
  --yes-system-band-contrast-panel: rgba(255, 255, 255, 0.055);
  --yes-system-band-contrast-line: rgba(255, 255, 255, 0.16);
}

.yes-page-system *,
.yes-page-system *::before,
.yes-page-system *::after {
  box-sizing: border-box;
}

.yes-page-system :where(h1, h2, h3, h4, h5, h6),
.yes-page-system .wp-block-heading {
  font-family: var(--yes-font-heading, "Orbitron", "Roboto", Arial, sans-serif);
  font-weight: 800;
  letter-spacing: var(--yes-tracking-heading, 0);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin: 0 0 var(--yes-heading-space-md, 24px);
}

.yes-page-system :where(h1, h2, h3, h4, h5, h6).heading-display,
.yes-page-system :where(h1, h2, h3, h4, h5, h6).hero-title-display,
.yes-page-system .wp-block-heading.heading-display,
.yes-page-system .wp-block-heading.hero-title-display {
  font-size: var(--yes-text-display);
  line-height: 0.95;
  max-width: 11ch;
}

.yes-page-system :where(h1) {
  font-size: var(--yes-text-h1);
  line-height: var(--yes-leading-h1, 1);
  max-width: var(--yes-heading-max, 14ch);
  margin-bottom: var(--yes-heading-space-lg, 32px);
}

.yes-page-system :where(h2) {
  font-size: var(--yes-text-h2);
  line-height: var(--yes-leading-h2, 1.08);
  max-width: var(--yes-heading-max-wide, 18ch);
  margin-bottom: var(--yes-heading-space-lg, 32px);
}

.yes-page-system :where(h3) {
  font-size: var(--yes-text-h3);
  line-height: var(--yes-leading-h3, 1.14);
  max-width: 20ch;
}

.yes-page-system :where(h4) {
  font-size: var(--yes-text-h4);
  line-height: var(--yes-leading-h4, 1.22);
  max-width: 24ch;
}

.yes-page-system :where(h5) {
  font-size: var(--yes-text-h5);
  line-height: var(--yes-leading-h5, 1.26);
  max-width: 28ch;
}

.yes-page-system :where(h6) {
  font-size: var(--yes-text-h6);
  line-height: var(--yes-leading-h6, 1.3);
  max-width: 32ch;
}

.yes-page-system :where(h1, h2, h3, h4, h5, h6)[class*="uppercase"],
.yes-page-system .font-orbitron,
.yes-page-system .yes-kicker,
.yes-page-system .yes-eyebrow {
  letter-spacing: var(--yes-tracking-heading-uppercase, 0.03em);
}

.yes-page-system p,
.yes-page-system li {
  font-size: var(--yes-text-body);
  line-height: var(--yes-leading-body, 1.6);
}

.yes-page-system p {
  margin: 0 0 var(--yes-heading-space-md, 24px);
}

.yes-section {
  padding: var(--yes-section-padding-y, 96px) 0;
}

.yes-section--compact {
  padding: var(--yes-space-2xl, 64px) 0;
}

.yes-section--dark {
  background: var(--yes-system-band-contrast);
  color: var(--yes-system-band-contrast-text);
}

.yes-section--muted {
  background: var(--yes-system-band-muted);
}

.yes-container {
  width: min(100% - calc(var(--yes-page-padding-x, 20px) * 2), var(--yes-container-wide-max, 1320px));
  margin-inline: auto;
}

.yes-kicker,
.yes-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  color: var(--yes-system-teal);
  font-family: "Orbitron", "Roboto", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.yes-kicker::before,
.yes-eyebrow::before {
  content: "";
  align-self: center;
  width: 34px;
  height: 1px;
  background: currentColor;
}

.yes-page-system :is(.yes-kicker, .yes-eyebrow) + :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  margin-top: 0;
}

.yes-page-system .yes-stack > :is(.yes-kicker, .yes-eyebrow),
.yes-page-system .yes-stack > .wp-block-group__inner-container > :is(.yes-kicker, .yes-eyebrow) {
  margin-bottom: calc(16px - var(--yes-space-lg, 32px));
}

.yes-lede {
  color: var(--yes-system-muted);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.65;
  max-width: var(--yes-reading-max, 900px);
}

.yes-section--dark .yes-lede,
.yes-section--dark p {
  color: var(--yes-system-band-contrast-muted);
}

.yes-hero {
  min-height: min(900px, 100vh);
  display: grid;
  align-items: center;
  padding-block: var(--yes-hero-padding-top, 160px) clamp(72px, 8vw, 128px);
  padding-inline: 0;
  background: linear-gradient(120deg, #f8f9fa 0%, #ffffff 46%, #e7f4f1 100%);
  overflow: hidden;
  position: relative;
}

html.dark .yes-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(73, 197, 177, 0.14), transparent 26%),
    linear-gradient(120deg, #0d0f10 0%, #121617 48%, #17201f 100%);
}

.yes-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--yes-system-line);
}

.yes-hero .yes-container.yes-hero__grid,
.yes-hero__inner,
.yes-hero__grid {
  width: min(100% - calc(var(--yes-page-gutter, 48px) * 2), var(--yes-hero-container-max, 1440px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--yes-hero-column-gap, clamp(48px, 6vw, 96px));
  row-gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

.yes-hero__content,
.yes-hero__visual,
.yes-hero__grid > *,
.yes-hero__inner > * {
  min-width: 0;
}

.yes-hero__content {
  max-width: min(100%, var(--yes-hero-title-max, 760px));
}

.yes-hero__visual {
  display: flex;
  justify-content: flex-end;
}

.yes-hero__visual > :is(.yes-hero__media, .yes-media-frame, .yes-technical-snapshot, .yes-hero__card),
.yes-technical-snapshot,
.yes-hero__card {
  width: min(100%, var(--yes-hero-visual-max, 680px));
  max-width: 100%;
}

.yes-hero h1 {
  font-size: var(--yes-text-h1);
  line-height: var(--yes-leading-h1, 1);
  letter-spacing: var(--yes-tracking-heading-uppercase, 0.03em);
  margin: 0 0 var(--yes-heading-space-lg, 32px);
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.yes-hero h2 {
  color: var(--yes-system-teal);
  font-size: var(--yes-text-h2);
  line-height: var(--yes-leading-h2, 1.08);
  margin: 0 0 var(--yes-heading-space-md, 24px);
  max-width: 16ch;
}

.yes-hero__media,
.yes-media-frame {
  position: relative;
  min-height: 420px;
  border: 1px solid var(--yes-system-line);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 14px 14px 0 rgba(73, 197, 177, 0.16);
  overflow: hidden;
}

html.dark .yes-hero__media,
html.dark .yes-media-frame {
  background: rgba(18, 22, 23, 0.92);
  box-shadow: 14px 14px 0 rgba(73, 197, 177, 0.2);
}

.yes-hero__panel {
  padding: 40px;
}

.yes-hero__media img,
.yes-media-frame img,
.yes-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yes-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 48px);
  border: 1px solid var(--yes-system-line);
  background: var(--yes-system-line);
}

.yes-metric,
.yes-card,
.yes-bento-card {
  background: var(--yes-system-panel);
  border: 1px solid var(--yes-system-line);
  padding: 40px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.yes-metric:hover,
.yes-card:hover,
.yes-bento-card:hover {
  border-color: var(--yes-system-teal);
  box-shadow: 5px 5px 0 var(--yes-system-teal);
  transform: translate(-2px, -2px);
}

.yes-metric strong {
  display: block;
  color: var(--yes-system-ink);
  font-family: "Orbitron", "Roboto", Arial, sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.yes-metric span,
.yes-card p,
.yes-bento-card p {
  color: var(--yes-system-muted);
  font-size: 0.98rem;
  line-height: 1.68;
}

.yes-grid {
  display: grid;
  gap: var(--yes-space-lg, 32px);
}

.yes-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yes-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.yes-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.yes-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.yes-card h3,
.yes-bento-card h3 {
  color: var(--yes-system-ink);
  font-size: var(--yes-text-h4);
  line-height: var(--yes-leading-h4, 1.22);
  margin: 0 0 var(--yes-space-sm, 16px);
  max-width: none;
}

.yes-page-system .yes-stack > .yes-grid,
.yes-page-system .yes-stack > .wp-block-columns.yes-grid {
  margin-top: var(--yes-space-2xl, 64px);
}

.yes-page-system .yes-stack > .wp-block-group__inner-container {
  display: grid;
  gap: inherit;
}

.yes-page-system .yes-stack > .wp-block-group__inner-container > .yes-grid,
.yes-page-system .yes-stack > .wp-block-group__inner-container > .wp-block-columns.yes-grid,
.yes-page-system .yes-lede + .yes-grid,
.yes-page-system .yes-lede + .wp-block-columns.yes-grid {
  margin-top: var(--yes-space-2xl, 64px);
}

.yes-page-system .wp-block-columns.yes-grid {
  display: grid !important;
  gap: var(--yes-space-lg, 32px) !important;
  margin-bottom: 0;
}

.yes-page-system .wp-block-columns.yes-grid > .wp-block-column {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-basis: auto !important;
  flex-grow: 0 !important;
}

.yes-page-system .wp-block-columns.yes-grid > .wp-block-column > * {
  width: 100%;
}

.yes-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(73, 197, 177, 0.48);
  color: var(--yes-system-teal);
}

.yes-icon svg {
  width: 21px;
  height: 21px;
}

.yes-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
}

.yes-split--reverse {
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 0.95fr);
}

.yes-bento {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.85fr;
  grid-auto-rows: minmax(180px, auto);
  gap: var(--yes-space-lg, 32px);
}

.yes-bento-card--large {
  grid-row: span 2;
}

.yes-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--yes-system-line);
  background: #fff;
}

html.dark .yes-table-wrap {
  background: var(--yes-system-panel);
}

.yes-table-wrap table,
.yes-page-system .wp-block-table table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.yes-table-wrap th,
.yes-table-wrap td,
.yes-page-system .wp-block-table th,
.yes-page-system .wp-block-table td {
  border-bottom: 1px solid var(--yes-system-line);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}

.yes-table-wrap th,
.yes-page-system .wp-block-table th {
  background: var(--yes-system-graphite);
  color: #fff;
  font-family: "Orbitron", "Roboto", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.yes-table-wrap td:first-child,
.yes-page-system .wp-block-table td:first-child {
  font-weight: 700;
}

.yes-anchor-nav {
  position: sticky;
  top: 96px;
  z-index: 20;
  border-block: 1px solid var(--yes-system-line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

html.dark .yes-anchor-nav {
  background: rgba(13, 15, 16, 0.9);
}

.yes-anchor-nav__inner {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0;
}

.yes-anchor-nav a,
.yes-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--yes-system-line);
  color: var(--yes-system-graphite);
  font-family: "Orbitron", "Roboto", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.yes-anchor-nav a:hover,
.yes-chip:hover {
  border-color: var(--yes-system-teal);
  color: var(--yes-system-teal);
}

.yes-cta {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, #111213 0%, #1b2021 58%, #49c5b1 170%);
  color: #fff;
  padding: clamp(34px, 5vw, 64px);
}

.yes-placeholder-media {
  min-height: 360px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(78, 85, 94, 0.32);
  background:
    linear-gradient(90deg, transparent 49%, rgba(73, 197, 177, 0.22) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(73, 197, 177, 0.22) 50%, transparent 51%),
    #f4f8f7;
  color: var(--yes-system-muted);
  font-family: "Orbitron", "Roboto", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.yes-page-system .wp-block-group,
.yes-page-system .wp-block-column {
  border-radius: 0;
}

.yes-section--dark .yes-card,
.yes-section--dark .yes-bento-card,
.yes-section--dark .yes-metric {
  background: var(--yes-system-band-contrast-panel);
  border-color: var(--yes-system-band-contrast-line);
  color: var(--yes-system-band-contrast-text);
}

.yes-section--dark .yes-card h3,
.yes-section--dark .yes-bento-card h3,
.yes-section--dark .yes-metric strong {
  color: var(--yes-system-band-contrast-text);
}

@media (max-width: 1180px) {
  .yes-hero .yes-container.yes-hero__grid,
  .yes-hero__grid,
  .yes-hero__inner,
  .yes-split,
  .yes-split--reverse {
    grid-template-columns: 1fr;
  }

  .yes-hero__visual {
    justify-content: flex-start;
  }

  .yes-grid,
  .yes-page-system .wp-block-columns.yes-grid,
  .yes-bento {
    gap: var(--yes-space-md, 24px);
  }

  .yes-page-system .yes-stack > :is(.yes-kicker, .yes-eyebrow),
  .yes-page-system .yes-stack > .wp-block-group__inner-container > :is(.yes-kicker, .yes-eyebrow) {
    margin-bottom: calc(16px - var(--yes-space-md, 24px));
  }

  .yes-metric,
  .yes-card,
  .yes-bento-card {
    padding: 32px;
  }

  .yes-grid--4,
  .yes-grid--5,
  .yes-metric-strip,
  .yes-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yes-bento-card--large {
    grid-row: span 1;
  }
}

@media (max-width: 720px) {
  .yes-container {
    width: min(100% - calc(var(--yes-page-padding-x, 20px) * 2), var(--yes-container-wide-max, 1320px));
  }

  .yes-hero {
    min-height: auto;
    padding-block: var(--yes-hero-padding-top, 126px) 72px;
    padding-inline: 0;
  }

  .yes-hero h1 {
    max-width: 100%;
  }

  .yes-hero__media,
  .yes-media-frame,
  .yes-placeholder-media {
    min-height: 280px;
  }

  .yes-hero__panel {
    padding: 24px;
  }

  .yes-grid--2,
  .yes-grid--3,
  .yes-grid--4,
  .yes-grid--5,
  .yes-metric-strip,
  .yes-bento {
    grid-template-columns: 1fr;
  }

  .yes-page-system .yes-stack > .yes-grid,
  .yes-page-system .yes-stack > .wp-block-columns.yes-grid,
  .yes-page-system .yes-stack > .wp-block-group__inner-container > .yes-grid,
  .yes-page-system .yes-stack > .wp-block-group__inner-container > .wp-block-columns.yes-grid,
  .yes-page-system .yes-lede + .yes-grid,
  .yes-page-system .yes-lede + .wp-block-columns.yes-grid {
    margin-top: var(--yes-space-xl, 48px);
  }

  .yes-grid,
  .yes-page-system .wp-block-columns.yes-grid,
  .yes-bento {
    gap: var(--yes-space-md, 24px);
  }

  .yes-metric,
  .yes-card,
  .yes-bento-card {
    padding: 24px;
  }

  .yes-lede {
    max-width: 100%;
  }

  .yes-page-system :where(h1, h2, h3, h4, h5, h6),
  .yes-page-system .wp-block-heading,
  .yes-hero h2 {
    max-width: 100%;
  }

  .yes-anchor-nav {
    top: 70px;
  }
}