/* Scheme 2 application-market presentation. Scoped to the market page. */
.market-chapter {
  --chapter-surface: #f4f7f5;
  --chapter-text: var(--ink);
  --chapter-muted: var(--muted);
  position: relative;
  isolation: isolate;
  color: var(--chapter-text);
  background: var(--chapter-surface);
}

/* Scope anchor clearance without overriding the carbon chapter's color tokens. */
section.market-chapter { scroll-margin-top: 74px; }

/* Let the page-level market statement settle before the first material chapter. */
.markets-hero + .market-chapter {
  margin-top: clamp(64px, 7vw, 96px);
}

.market-stage {
  position: relative;
  min-height: 440px;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 72px max(22px, calc((100vw - var(--max)) / 2)) 134px;
}

.market-stage-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.market-stage-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.market-chapter--hydrogen .market-stage-vignette {
  background: linear-gradient(100deg, rgba(218, 235, 226, .97) 0%, rgba(231, 241, 236, .84) 40%, rgba(215, 232, 225, .2) 74%);
}

.market-chapter--carbon {
  --chapter-surface: #101312;
  --chapter-text: #f1f4f2;
  --chapter-muted: #a9b1ac;
}

.market-chapter--carbon .market-stage-vignette {
  background: linear-gradient(90deg, rgba(16, 19, 18, .98) 0%, rgba(16, 19, 18, .82) 40%, rgba(16, 19, 18, .10) 74%);
}

.market-stage-copy {
  position: relative;
  z-index: 1;
  width: min(900px, 76%);
}

.market-stage-copy h2 {
  margin: 0 0 34px;
  color: var(--green-deep);
  font-size: clamp(24px, 2.45vw, 33.6px);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.04;
  white-space: nowrap;
}

.market-chapter--carbon .market-stage-copy h2 { color: #54c77a; }

.market-stage-copy p {
  max-width: 60ch;
  margin: 0;
  color: var(--chapter-muted);
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.8;
}

.market-element-symbol {
  position: absolute;
  top: 18%;
  right: clamp(28px, 8vw, 136px);
  z-index: 0;
  display: grid;
  place-items: center;
  font-size: clamp(130px, 20vw, 300px);
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .82;
  user-select: none;
}

.material-glyph {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
}

.market-element-symbol--carbon .material-glyph--base {
  color: rgba(208, 212, 210, .18);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.market-application-grid {
  --grid-overlap: clamp(88px, 8vw, 110px);
  position: relative;
  z-index: 2;
  width: min(100%, calc(var(--max) + 128px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 5vw, 80px) clamp(28px, 4vw, 64px);
  margin: calc(var(--grid-overlap) * -1) auto 0;
  padding: 0 64px clamp(64px, 6vw, 88px);
  background: linear-gradient(
    to bottom,
    transparent 0 var(--grid-overlap),
    var(--chapter-surface) var(--grid-overlap) 100%
  );
}

.market-application-grid article { min-width: 0; }

.market-application-grid article > img {
  width: 100%;
  height: clamp(240px, 24vw, 320px);
  object-fit: cover;
  border-radius: 16px;
  background: #e7ece9;
}

.market-chapter--carbon .market-application-grid article > img {
  background: #242927;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.market-application-grid article > div { padding-top: clamp(24px, 3vw, 38px); }

.market-application-grid h3 {
  margin: 0;
  color: var(--chapter-text);
  font-size: clamp(18px, 1.4vw, 20px);
  font-weight: 580;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.market-application-grid p {
  max-width: 38em;
  margin: 14px 0 0;
  color: var(--chapter-muted);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.75;
}

.market-phase-transition {
  min-height: clamp(56px, 8dvh, 96px);
  background: #f4f7f5;
}

@media (max-width: 760px) {
  section.market-chapter { scroll-margin-top: 68px; }

  .markets-hero + .market-chapter { margin-top: 48px; }

  .market-stage {
    min-height: 410px;
    align-items: end;
    padding: 92px 20px 72px;
  }

  .market-chapter--hydrogen .market-stage-vignette {
    background: linear-gradient(to top, rgba(218, 235, 226, .98) 0%, rgba(229, 241, 235, .9) 46%, rgba(215, 232, 225, .12) 84%);
  }

  .market-chapter--carbon .market-stage-vignette {
    background: linear-gradient(to top, rgba(16, 19, 18, .98) 0%, rgba(16, 19, 18, .86) 46%, rgba(16, 19, 18, .08) 84%);
  }

  .market-stage-art { object-position: 66% center; }
  .market-chapter--carbon .market-stage-art { object-position: 68% center; }
  .market-stage-copy { width: 100%; }

  .market-stage-copy h2 {
    margin-bottom: 24px;
  }

  .market-stage-copy p { font-size: 16px; line-height: 1.75; }
  .market-element-symbol { top: 20%; right: 12px; font-size: 142px; }

  .market-application-grid {
    --grid-overlap: 42px;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: calc(var(--grid-overlap) * -1);
    padding: 0 18px 72px;
  }

  .market-application-grid article > img { height: 220px; }
  .market-application-grid article > div { padding-top: 22px; }
  .market-application-grid p { font-size: 14px; line-height: 1.65; }
  .market-phase-transition { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .market-chapter *, .market-chapter *::before, .market-chapter *::after { transition: none !important; }
}