/* Landing page only (site/). Brand tokens, fonts and shared components
   come from styles.css, a byte-identical copy of public/styles.css that
   tests/site.test.ts keeps in step. */

/* Out-specifies ".site-nav > a:not(.brand)", which would otherwise paint
   the label in --fg on the --accent fill. */
.site-nav > a.sign-in { margin-left: auto; padding: 0.55rem 1.2rem; background: var(--accent); color: #fff; }
.site-nav > a.sign-in:hover { background: var(--color-primary-hover); }

.features .feature { display: flex; flex-direction: column; margin: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; }
.features h3 { margin: 0; font-size: 1.05rem; }
.features p { margin: 0; color: var(--muted); }

.join { margin-top: 2.75rem; padding: 1.75rem 2rem; border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--card); }
.join h2 { margin-top: 0; }
.join p { max-width: 40rem; }

.foot { justify-content: space-between; align-items: baseline; }

/* styles.css gives the brand its own row on phones to fit four links;
   here there is only one, so keep it beside the brand. */
@media (max-width: 44rem) {
  .site-nav .brand { flex-basis: auto; }
}