/* Shared public homepage explainer. */
.homepage-how {
  width: 100%;
  margin-block: var(--space-8);
  padding: var(--space-6);
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
}
.homepage-how h2 {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--text-primary);
}
.homepage-how__list {
  display: grid;
  gap: var(--space-5);
  padding-left: var(--space-5);
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  line-height: 1.65;
}
.homepage-how__list strong { color: var(--text-primary); }
.homepage-how__list li::marker { color: var(--accent-tertiary); }
.homepage-how__payment {
  padding: var(--space-3);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}
.homepage-how__payment strong {
  display: block;
  color: var(--accent-tertiary);
}
.homepage-payment-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
@media (max-width: 600px) {
  .homepage-how { padding: var(--space-4); }
}

.homepage-benchmark p {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.65;
}
/* Public homepage card and entry typography. */
.wants-hero .start-hero__chip { gap: var(--space-2); }
.wants-hero .start-hero__chip iconify-icon { font-size: var(--text-base); }
.wants-hero .start-hero__headline { line-height: 1.2; }
.wants-hero .start-hero__line { text-transform: none; }
.wants-hero .start-hero__sub { line-height: 1.6; }
.wants-hero .start-hero__entry { margin-top: var(--space-6); }
.wants-hero .start-hero__form [data-want-examples] {
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);
  min-height: var(--size-12);
  height: var(--size-12);
  font-size: var(--text-lg);
  line-height: 1.5;
}
.wants-hero .start-why-card {
  width: 100%;
  margin-top: var(--space-5);
  border: 0;
  border-top: 1px solid var(--border-default);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wants-hero .start-why-card__summary {
  padding: var(--space-4) 0;
  font-size: var(--text-base);
  line-height: 1.6;
}
.wants-hero .start-why-card__body { padding: 0 0 var(--space-4); }
.homepage-benchmark {
  background: var(--accent-tertiary);
  border-color: var(--accent-tertiary);
  color: var(--color-white);
  padding: var(--space-8);
}
.homepage-benchmark h2 { color: inherit; }
.homepage-benchmark .start-hero__btn {
  background: var(--color-white);
  color: var(--color-purple-700);
}
.homepage-chart > h2 {
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: 1.25;
}
.homepage-chart__intro {
  margin: 0 0 var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .homepage-benchmark { padding: var(--space-5); }
}
/* Give the public homepage its full scrollable canvas and contained columns. */
body.start-home:has(.wants-hero) { height: auto; min-height: 100dvh; }
body.start-home:has(.wants-hero) .start-home__page { height: auto; min-width: 0; overflow: visible; }
.wants-page .wants-hero { grid-template-columns: minmax(0, 1fr); }
.wants-hero .start-hero__entry,
.wants-hero .start-card__compact-face,
.wants-hero .start-hero__form { width: 100%; min-width: 0; }
.wants-hero .start-hero__actions { flex-wrap: wrap; }
@media (max-width: 767px) {
  body.start-home:has(.wants-hero) { grid-template-columns: minmax(0, 1fr); }
  body.start-home:has(.wants-hero) > .start-home__rail { display: none; }
  .wants-page .wants-hero { width: 100%; max-width: 100%; padding: var(--space-6) var(--space-4); }
  .wants-hero .start-hero__headline { font-size: var(--text-3xl); }
  .wants-hero .start-hero__sub { font-size: var(--text-lg); }
}

/* Book of Houses has its own community explanation card. */
.homepage-benchmark.homepage-about-boh {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--color-black);
}
.homepage-about-boh .start-hero__btn { color: var(--color-black); }
.boh-community-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.boh-community-brand > span:last-child { min-width: 0; }
.boh-community-glyph { display: inline-flex; flex: none; width: 1em; height: 1em; }
.boh-community-glyph svg { width: 100%; height: 100%; }
.boh-community-glyph--inline { vertical-align: -0.1em; }
.wants-hero .start-hero__btn--future:hover,
.wants-hero .start-hero__btn--future:focus-visible,
.homepage-how .start-hero__btn--future:hover,
.homepage-how .start-hero__btn--future:focus-visible {
  background: var(--accent-primary);
  color: var(--color-black);
  border-color: var(--color-black);
}