/* =========================================================================
 * sell.rycolston.com — page-local layout glue.
 *
 * Tokens + components do the heavy lifting; this file only adds:
 *   - hero composition (centered, narrow, single-CTA focused)
 *   - long-form prose rhythm (h2 + body + list)
 *   - minimal footer variant
 * ========================================================================= */

/* -------- HERO -------- */
.page-hero {
  padding-top: var(--s-space-2xl);
  padding-bottom: var(--s-space-2xl);
}
.page-hero__title {
  margin: 0 0 var(--s-space-md);
}
.page-hero__title em {
  font-style: italic;
  color: var(--s-text-brand);
}
.page-hero__lede {
  font-size: var(--p-text-19);
  line-height: var(--p-lh-body);
  color: var(--s-text-muted);
  margin: 0 0 var(--s-space-xl);
}
.page-hero__cta { margin-bottom: var(--s-space-xs); }
.page-hero__meta {
  font-size: var(--p-text-14);
  color: var(--s-text-muted);
  margin: 0;
}

/* Long-form prose lives in the LongForm component now
 * (data-platforms/design-system/components/LongForm.md). Use
 * `<section class="section long-form">` and the system applies
 * the heading + paragraph + list rhythm automatically. */

/* -------- MINIMAL FOOTER OVERRIDE -------- */
/* The shipped Footer component is a 4-column band built for marketing pages.
 * For this focused conversion page we use the .footer surface but reset its
 * grid expectations and keep it short. */
.footer--minimal {
  padding-top: var(--s-space-lg);
  padding-bottom: var(--s-space-lg);
}
.footer--minimal p {
  font-size: var(--p-text-13);
  color: var(--s-text-muted);
  margin: 0 0 var(--s-space-xs);
}
.footer--minimal a { color: var(--s-text-muted); }
.footer--minimal a:hover { color: var(--s-text-brand); }
.footer__disclaimer {
  color: var(--s-text-soft);
}