/* Public content pages: FAQ, testimonials, about, static pages (legal,
   support …), waitlist, 404 and the coming-soon splash.
   ECOSYSTEM_REDESIGN.md §8.4. Hero, section head, card, disclaimer, empty
   state and CTA band come from components.css; this file only lays them out. */
@layer page {

.content-section { padding-block: 0 var(--section-y); }
.content-narrow { max-width: 52rem; }

/* ---------- FAQ (no reveal on items, §8.4) ---------- */
.qa-group + .qa-group { margin-top: var(--space-12); }
.qa-group-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  line-height: var(--leading-heading);
  color: var(--ink);
}
.qa-item { border-bottom: 1px solid var(--border); }
.qa-group-title + .qa-item { border-top: 1px solid var(--border); }
.qa-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary::after {
  content: "+";
  flex: none;
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  line-height: var(--leading-none);
  color: var(--ink-3);
}
.qa-item[open] summary::after { content: "−"; }
.qa-item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.qa-answer {
  padding-bottom: var(--space-4);
  max-width: 68ch;
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}
.qa-answer p { margin: 0 0 var(--space-3); }
.qa-answer p:last-child { margin-bottom: 0; }

/* ---------- testimonials ---------- */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4);
}
.voice-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-6);
}
.voice-quote {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink);
}
.voice-by { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.voice-name { font-weight: var(--weight-semi); color: var(--ink); }
.voice-title { color: var(--ink-3); }
.voice-disclaimer { max-width: 52rem; margin: var(--space-5) auto 0; }

/* ---------- static pages and the About body: plain readable prose ---------- */
.doc-page { padding-block: var(--space-16) var(--section-y); }
.doc-column { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.doc-head {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.doc-title {
  margin: 0;
  font-size: var(--text-h1);
  font-weight: var(--weight-semi);
  line-height: var(--leading-heading);
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.doc-prose {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}
.doc-prose h2 { margin-top: var(--space-10); }
.doc-prose h2:first-child { margin-top: 0; }

/* ---------- about ---------- */
.story-figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-4);
  align-items: center;
}
.story-figure {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: var(--space-12);
  align-items: start;
}
.story-facts { display: grid; gap: var(--space-4); }
.story-fact p:not(.sec-head-eyebrow) {
  margin: 0;
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}

/* ---------- waitlist page ---------- */
.join-page { padding-block: var(--space-16) var(--section-y); }
.join-card {
  max-width: 32rem;
  margin-inline: auto;
  padding: var(--space-8);
}
.join-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-h1);
  font-weight: var(--weight-semi);
  line-height: var(--leading-heading);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.join-lede {
  margin: 0 0 var(--space-6);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}

/* ---------- 404 ---------- */
.lost-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  padding-bottom: var(--section-y);
  font-size: var(--text-md);
}
.lost-links a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.lost-links a:hover { color: var(--ink); }

/* ---------- coming soon (common/coming_soon.html, own layout) ---------- */
.soon {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-12) var(--gutter);
  background: radial-gradient(60% 50% at 50% 0%, var(--brand-soft), transparent 70%);
}
.soon-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 40rem;
  text-align: center;
}
.soon-logo { margin-bottom: var(--space-8); }
.soon-logo .logo-mark { height: 40px; }
.soon-title {
  margin: var(--space-5) 0 var(--space-4);
  font-size: var(--text-display);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.soon-lead {
  margin: 0 0 var(--space-10);
  max-width: 52ch;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
}
.soon-flow {
  width: 100%;
  margin: 0;
  text-align: left;
}
.soon-flow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.soon-flow-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink);
}
.soon-payload {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--code-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.soon-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-md);
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
@media (max-width: 640px) {
  .story-figures { grid-template-columns: minmax(0, 1fr); }
  .doc-page, .join-page { padding-top: var(--space-10); }
  .join-card { padding: var(--space-6); }
}

} /* @layer page */