/* Site-specific layer on top of the LiftOff V2 stylesheet (main.css is kept as it was). */

/* Wordmark: the LiftOff mark + live text. "LiftOff" leads, "Media" is the quieter descriptor (same family as "LiftOff Energy") */
.brand-text { display: inline-flex; align-items: baseline; gap: .28em; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; transition: color .35s var(--ease); }
.brand-text .bt-sub { font-weight: 500; color: var(--stone); letter-spacing: -0.01em; transition: color .35s var(--ease); }
.site-header.is-dark .brand-text { color: var(--cream); }
.site-header.is-dark .brand-text .bt-sub { color: var(--on-dark-muted); }
.site-footer .brand-text { font-size: 21px; }

/* Hero: the three-step answer to "how", numbered */
.hero-facts { counter-reset: fact; }
.hero-facts li::before { content: none; }
.hero-facts .fact-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ink); font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; flex: none; }

/* Footer: no legal column yet (the pages don't exist for this site), so three columns */
.footer-top--lean { grid-template-columns: minmax(0, 1.9fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) { .footer-top--lean { grid-template-columns: 1fr 1fr; } .footer-top--lean .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-top--lean { grid-template-columns: 1fr 1fr; } .footer-top--lean .footer-col:nth-child(3) { order: 0; grid-column: auto; } }

/* Very narrow phones: keep the mark and "LiftOff", drop the descriptor so the header never crowds the buttons */
@media (max-width: 359px) { .site-header .brand-text .bt-sub { display: none; } }