/* Homepage chapters. Load after the existing landing and brand styles. */

/* 1. Warm section rules and a consistent reading rhythm. */
:is(#pricing, #features, #how, #developers, #landing-assets-motion, #built-by, #faq) {
  --mz-editorial-space: clamp(56px, 6.1vw, 88px);
  --mz-editorial-line: #d4bdaa26;
  border-block-start: 1px solid var(--mz-editorial-line);
}
:is(#pricing, #features, #how, #developers, #built-by) > .mx-auto {
  padding-block: var(--mz-editorial-space);
}
#landing-assets-motion {
  padding-block: var(--mz-editorial-space);
}
#faq > .mx-auto {
  padding-block-start: var(--mz-editorial-space);
}
/* FAQ and the closing invitation share a landscape; keep their overlap intact. */
#email-updates > .mx-auto {
  padding-block: clamp(56px, 6.1vw, 88px);
}

/* 2. Medium, tightly set editorial headings with quiet red section marks. */
:is(#pricing, #features, #how, #developers, #landing-assets-motion, #built-by, #faq, #email-updates) h2 {
  color: #f3ede5;
  font-size: clamp(32px, 3.65vw, 58px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.055em;
  text-wrap: balance;
}
:is(#pricing, #how, #landing-assets-motion) h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-block-end: 22px;
  background: #b34a40;
}
#landing-assets-motion h2 {
  max-width: 20ch;
}
#pricing .mz-model-note,
#features .mz-reference-note {
  color: #b4aba3;
  line-height: 1.7;
}

/* 3. Four numbered steps, presented as restrained dark panels. */
#how .landing-step-card {
  border: 1px solid #d4bdaa26;
  border-radius: 10px;
  background: #121212;
  box-shadow: none;
}
#how :is(.landing-step-rim, .landing-step-arc) {
  display: none;
}
#how .landing-step-card > div:last-child {
  border-block-start: 1px solid #d4bdaa1f;
  padding: 24px;
}
#how .landing-step-title {
  color: #f0e8df;
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.035em;
}
#how .landing-step-copy {
  color: #b4aba3;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0;
}

/* 4. Flat, softly squared marketing actions; preserve existing button hooks. */
#pricing .challenge-card :is(a, button),
:is(#developers, #email-updates) a.fp-gradient-pill,
#landing-assets-motion a[href="/markets/"] {
  min-height: 46px;
  border: 1px solid #d4bdaa3b;
  border-radius: 7px;
  background: #1a1817;
  color: #f3ede5;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
}
#pricing .challenge-card a.fp-gradient-pill,
:is(#developers, #email-updates) a.fp-gradient-pill {
  padding: 0;
  border-color: #a33b32;
  background: #982f28;
}
:is(#pricing, #developers, #email-updates) a.fp-gradient-pill .fp-gradient-pill__face {
  min-height: 44px;
  background: transparent;
  color: #fff2e7;
  box-shadow: none;
  font-size: 14px;
  letter-spacing: -.01em;
}
#pricing .challenge-card :is(a, button):hover,
#landing-assets-motion a[href="/markets/"]:hover {
  border-color: #d4bdaa66;
  background: #24201e;
  box-shadow: none;
}
#pricing .challenge-card a.fp-gradient-pill:hover,
:is(#developers, #email-updates) a.fp-gradient-pill:hover {
  background: #ad3c32;
  border-color: #c16654;
  box-shadow: none;
  filter: none;
}
#pricing .challenge-card :is(a, button):focus-visible,
:is(#developers, #email-updates) a.fp-gradient-pill:focus-visible,
#landing-assets-motion a[href="/markets/"]:focus-visible {
  outline: 2px solid #eab69a;
  outline-offset: 3px;
}

/* 5. Programme surfaces share the same warm, fine borders. */
#pricing .challenge-card {
  border: 1px solid #d4bdaa26;
  border-radius: 10px;
}
#developers :is(.landing-agent-card, .landing-agent-code) {
  border-color: #d4bdaa2e;
  border-radius: 10px;
  background: #131211;
  box-shadow: none;
}
#developers .landing-agent-code-bar {
  background: #191715;
  border-block-end-color: #d4bdaa2e;
}
#developers .mz-rulebook-code {
  color: #d9cfc4;
  line-height: 1.85;
}

/* 6. Questions read as an open, ruled list rather than raised controls. */
#faq [data-slot="accordion-item"] {
  border-color: #d4bdaa33;
}
#faq [data-slot="accordion-trigger"] {
  min-height: 64px;
  padding-block: 20px;
  border-radius: 7px;
  color: #eee7de;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.02em;
}
#faq [data-slot="accordion-content"] {
  color: #b4aba3;
  font-size: 15px;
  line-height: 1.7;
}
#faq .mz-faq-link,
#email-updates .mz-secondary-link {
  color: #d6b9a5;
  text-decoration-color: #d6b9a566;
  text-underline-offset: 5px;
}
