/* Grayish background wrapper, full-width, padded for breathing room.
     Sits at the bottom of /home content. */
  .home-footer.svelte-8r0ylc {
    margin-top: 1.5rem;
    padding: 0.875rem 1rem;
    background-color: rgb(243 244 246); /* gray-100 */
    color: rgb(75 85 99);                /* gray-600 */
    border-top: 1px solid rgb(229 231 235); /* gray-200 */
  }

  /* The single rendered line. Flex-wrap is what makes the line reflow at
     bullets on narrow viewports: each segment AND each bullet is its own
     flex item, so wrapping only happens between items (i.e. at bullets),
     never inside a segment. `justify-content: center` keeps every wrapped
     row centred. `gap` provides the spacing on either side of each bullet
     in one shorthand (no manual margins to maintain). */
  .home-footer-row.svelte-8r0ylc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.25rem 0.5rem;       /* 4px row gap, 8px column gap */
    font-size: 12px;            /* min readable at 320px */
    line-height: 1.5;
    text-align: center;
  }

  /* Each text segment is an atom that must never split mid-word. */
  .home-footer-segment.svelte-8r0ylc {
    white-space: nowrap;
  }

  .home-footer-bullet.svelte-8r0ylc {
    /* Bullet is intentionally NOT nowrap-locked to a neighbour — it lives
       in its own flex item, which is what allows the row to break at the
       bullet position. user-select:none keeps copy-paste of the line clean. */
    user-select: none;
    color: rgb(156 163 175); /* gray-400 — slightly de-emphasised */
  }

  .home-footer-link.svelte-8r0ylc {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .home-footer-link.svelte-8r0ylc:hover,
  .home-footer-link.svelte-8r0ylc:focus-visible {
    color: rgb(31 41 55); /* gray-800 */
  }

  /* Dark-mode parity with the rest of /home (matches the gray-on-near-black
     scheme used by the prefetch sync chip / HomeLoadingIndicator). */
  html.dark .home-footer.svelte-8r0ylc {
    background-color: rgb(31 41 55 / 0.6); /* gray-800/60 */
    color: rgb(209 213 219);               /* gray-300 */
    border-top-color: rgb(55 65 81);       /* gray-700 */
  }
  html.dark .home-footer-bullet.svelte-8r0ylc {
    color: rgb(107 114 128); /* gray-500 */
  }
  html.dark .home-footer-link.svelte-8r0ylc:hover,
  html.dark .home-footer-link.svelte-8r0ylc:focus-visible {
    color: rgb(243 244 246); /* gray-100 */
  }