@layer components {
  /* Page shell */
  .wrap { max-width: 144rem; margin: 0 auto; padding: 1.2rem 2.4rem 8rem; }
  .stack > * + * { margin-top: 1.6rem; }
  .stack > .section-title { margin-top: 4.4rem; }
  /* Sticks to the top, so New flow and the account menu stay in reach down a long page. */
  .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin: -1.2rem -2.4rem 4rem; padding: 2rem 2.4rem 1.4rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
  /* The rule under a header is the four screen kinds, the same order the bricks on a flow card run in. */
  .site-header::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--spectrum); }
  @media (max-width: 600px) { .site-header { margin-inline: -1.6rem; padding-inline: 1.6rem; } }
  .site-header nav { display: flex; gap: .4rem; align-items: center; }
  .nav-link { padding: .6rem 1.1rem; border-radius: var(--r-control); color: var(--ink-2); font-weight: 550; text-decoration: none; }
  .nav-link:hover { background: var(--surface); color: var(--ink); }
  .wordmark { display: inline-flex; align-items: center; gap: 1rem; color: var(--ink); font-weight: 700; font-size: 2.2rem; font-stretch: 92%; letter-spacing: -.035em; line-height: 1; text-decoration: none; }
  .wordmark .mark { width: 3.4rem; height: 3.4rem; margin: -.2rem 0; }
  .mark { display: block; flex: none; width: 22px; height: 22px; }
  .mark-arms { transform-box: view-box; transform-origin: center; }
  /* The home mark turns while Turbo is busy; the delay keeps a quick visit from twitching it. */
  .is-spinning > .mark .mark-arms, html[aria-busy="true"] :is(.wordmark, .island-home) .mark-arms { animation: mark-spin 1.2s cubic-bezier(.45, .05, .55, .95) infinite; }
  html[aria-busy="true"] :is(.wordmark, .island-home) .mark-arms { animation-delay: .4s; }
  @keyframes mark-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .mark-arms { animation: none !important; } }
}