/* Home page assembly: CTA block and footer. Hero and bands keep their own stylesheets. */

/* CTA. The band above already ends with 128px of canvas, which serves as this block's top gap. */
.cta { padding: 0 0 128px; }
.cta-stack { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-panel); background: var(--paper); }
.cta-mark svg, .cta-mark .mark { display: block; }
.cta-stack h2 { margin-top: 32px; color: var(--ink); }
.cta-line { max-width: 720px; margin-top: 24px; }
.cta-stack .btn { margin-top: 40px; }

/* Footer */
.footer { border-top: 1px solid var(--hairline-on-white); padding: 64px 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px 64px; align-items: start; }
.footer-brand .caption { margin-top: 12px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-size: 16px; line-height: 1.4; color: var(--ink); }
.footer-updated { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .wrap { width: calc(100% - 32px); }
  .cta { padding-bottom: 80px; }
  .cta-mark { display: none; }
  .cta-stack h2 { margin-top: 0; }
  .cta-line { margin-top: 16px; }
  .cta-stack .btn { margin-top: 28px; width: 100%; max-width: 320px; }
  .footer { padding: 32px 0 24px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .footer-brand .caption { margin-top: 4px; }
  .footer-links { gap: 0; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; }
  .footer-brand .wordmark { min-height: 44px; }
}