/* generated from lib/site by `npm run footer:sync`; do not edit. Source: lib/site/footer.css */
/* The site footer's styles: the one stylesheet for every footer on the site.

   Markup: lib/site/footerHtml.ts. Loaded by
   - the SPA, through src/library/library.css;
   - native pages, through components/site/SiteFooter.tsx;
   - every public/landing/*.html page, as public/landing/sv-footer.css, a copy this file is synced
     to by scripts/sync-landing-footer.mjs (`npm run footer:check` fails when they differ).

   Everything is scoped under .sv-welcome-footer and sets its own margins, padding, fonts and
   colours, because the footer lands on pages with their own resets and element rules
   (`footer {…}`, `nav {position: sticky}`, `a {color: inherit}`, `* {margin: 0}`).

   Colours are custom properties on the footer root. data-surface picks the palette:
   "app" follows the SPA's theme, "page" (landing) and "dark" (native pages) are always dark.

   Layout: six columns per row on desktop, three under 1100px, and under 640px every group
   becomes a disclosure (<details>) with its links in two columns. The same breakpoints apply
   against the nearest container too, because the SPA mounts this footer in scroll roots that a
   side panel can narrow while the viewport stays wide. */

.sv-welcome-footer {
  --svf-link: #b7b7be;
  --svf-strong: #f2f2f5;
  --svf-head: #8a8a93;
  --svf-muted: rgba(255, 255, 255, 0.52);
  --svf-base: #7d7d86;
  --svf-line: rgba(255, 255, 255, 0.08);
  --svf-chip: rgba(255, 255, 255, 0.08);
  --svf-chip-hover: rgba(255, 255, 255, 0.18);
  --svf-icon: #dfe3ee;
  --svf-focus: #8b5cf6;
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  margin: 48px 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--svf-line);
  background: none;
  color: var(--svf-link);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.sv-welcome-footer *,
.sv-welcome-footer *::before,
.sv-welcome-footer *::after {
  box-sizing: border-box;
}

/* Native pages: always dark, on a band of its own, whatever the page's theme. */
.sv-welcome-footer[data-surface="dark"] {
  margin-top: 0;
  background: #07060c;
}

/* The SPA's light theme. Only the in-app footer follows it: html[data-theme] is also set on native
   pages, whose footer stays dark. Its colours are the page's own tokens (.library-page sets them
   for each theme), so it reads like the page it sits on, including a destination that keeps its
   dark tokens in the light theme (/features: src/library/css/destinations/ai-tools.css). */
[data-theme="light"] .sv-welcome-footer[data-surface="app"] {
  --svf-link: var(--text-2, #3d4452);
  --svf-strong: var(--text, #1a1c23);
  --svf-head: var(--text-3, #5a6272);
  --svf-muted: var(--text-2, #3d4452);
  --svf-base: var(--text-3, #5a6272);
  --svf-line: var(--border, #d5dae4);
  --svf-chip: var(--surface-3, #e6e9f1);
  --svf-chip-hover: var(--surface-hover, #dce1eb);
  --svf-icon: var(--text-2, #3d4452);
}
/* Black wordmark on light. JS normally swaps the src (updateBrandLogos); this keeps it readable
   if the swap lags. */
[data-theme="light"] .sv-welcome-footer[data-surface="app"] img.brand-horizontal[src*="soundverse_horizontal_colour"] {
  filter: brightness(0);
}
/* /features stays a dark page in the light theme, so its footer keeps the light wordmark, whichever
   one updateBrandLogos has set. A workspace's own logo (.brand-custom-logo) is shown as it is. */
[data-theme="light"] .dest-aitools .sv-welcome-footer[data-surface="app"] img.brand-horizontal:not(.brand-custom-logo) {
  content: url("/assets/soundverse_horizontal_colour.svg");
  filter: none;
}

.sv-welcome-footer .sv-welcome-foot-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 28px 18px;
}

/* ── Brand band ─────────────────────────────────────────────────────── */
.sv-welcome-footer .sv-foot-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.sv-welcome-footer .sv-foot-brand img {
  display: block;
  width: auto;
  max-width: 180px;
  height: 22px;
  margin: 0;
  opacity: 0.95;
}
.sv-welcome-footer .sv-foot-brand p {
  max-width: 560px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--svf-muted);
}

/* ── Rows and columns ───────────────────────────────────────────────── */
.sv-welcome-footer .sv-foot-row {
  position: static;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 0;
  margin: 0;
  padding: 30px 0 6px;
  border: 0;
  background: none;
}
.sv-welcome-footer .sv-foot-row.second {
  margin-top: 22px;
  padding-top: 30px;
  border-top: 1px solid var(--svf-line);
}
/* Each group spans two of its row's grid rows, heading and links, through subgrid: every column's
   links then start at the same height even when a heading wraps ("Controlled generation"). */
.sv-welcome-footer .sv-foot-col {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.sv-welcome-footer .sv-foot-h {
  margin: 0 0 12px;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--svf-head);
}
.sv-welcome-footer .sv-foot-acc {
  display: none;
}
.sv-welcome-footer .sv-foot-links {
  display: block;
  margin: 0;
  padding: 0;
}
.sv-welcome-footer .sv-foot-links a {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 5px 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--svf-link);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.15s ease;
}
.sv-welcome-footer .sv-foot-links a:hover {
  color: var(--svf-strong);
}
.sv-welcome-footer a:focus-visible,
.sv-welcome-footer summary:focus-visible {
  outline: 2px solid var(--svf-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Base line: copyright and socials ───────────────────────────────── */
.sv-welcome-footer .sv-foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 30px 0 0;
  padding: 20px 0 6px;
  border: 0;
  border-top: 1px solid var(--svf-line);
}
.sv-welcome-footer .sv-foot-copy {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--svf-base);
}
.sv-welcome-footer .sv-foot-icons {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.sv-welcome-footer .sv-foot-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--svf-chip);
  color: var(--svf-icon);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.sv-welcome-footer .sv-foot-icons a:hover {
  background: var(--svf-chip-hover);
  color: var(--svf-strong);
}
.sv-welcome-footer .sv-foot-icons svg {
  display: block;
  flex: none;
}

/* ── Wiring audit (SPA, opt-in: window.svWelcomeFooterDebug()) ─────────
   GREEN: the link resolves to a real destination. RED: it has none. */
.sv-welcome-footer.wf-debug .sv-foot-links a.wf-wired,
.sv-welcome-footer.wf-debug .sv-foot-links a.wf-wired:hover {
  color: #24c072 !important;
}
.sv-welcome-footer.wf-debug .sv-foot-links a.wf-unwired,
.sv-welcome-footer.wf-debug .sv-foot-links a.wf-unwired:hover {
  color: #ff5461 !important;
}

/* ── Tablet: three columns ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sv-welcome-footer .sv-foot-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sv-welcome-footer .sv-foot-col:nth-child(n + 4) .sv-foot-h {
    margin-top: 26px;
  }
}
@container (max-width: 1100px) {
  .sv-welcome-footer .sv-foot-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sv-welcome-footer .sv-foot-col:nth-child(n + 4) .sv-foot-h {
    margin-top: 26px;
  }
}

/* ── Phone: one disclosure per group ────────────────────────────────── */
@media (max-width: 639px) {
  .sv-welcome-footer .sv-welcome-foot-inner {
    padding: 28px 16px 14px;
  }
  .sv-welcome-footer .sv-foot-brand {
    margin-bottom: 18px;
  }
  .sv-welcome-footer .sv-foot-row,
  .sv-welcome-footer .sv-foot-row.second {
    display: block;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .sv-welcome-footer .sv-foot-col {
    display: block;
    border-top: 1px solid var(--svf-line);
  }
  .sv-welcome-footer .sv-foot-h {
    display: none;
  }
  .sv-welcome-footer .sv-foot-acc {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .sv-welcome-footer .sv-foot-acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin: 0;
    padding: 0 2px;
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--svf-strong);
    -webkit-tap-highlight-color: transparent;
  }
  .sv-welcome-footer .sv-foot-acc > summary::-webkit-details-marker {
    display: none;
  }
  .sv-welcome-footer .sv-foot-acc > summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0 4px 0 12px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.7;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .sv-welcome-footer .sv-foot-acc[open] > summary::after {
    transform: translateY(2px) rotate(-135deg);
  }
  .sv-welcome-footer .sv-foot-acc:not([open]) ~ .sv-foot-links {
    display: none;
  }
  .sv-welcome-footer .sv-foot-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    padding: 0 2px 14px;
  }
  .sv-welcome-footer .sv-foot-links a {
    padding: 9px 0;
    font-size: 14px;
  }
  .sv-welcome-footer .sv-foot-base {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-top: 0;
    padding-top: 20px;
  }
}
@container (max-width: 639px) {
  .sv-welcome-footer .sv-welcome-foot-inner {
    padding: 28px 16px 14px;
  }
  .sv-welcome-footer .sv-foot-brand {
    margin-bottom: 18px;
  }
  .sv-welcome-footer .sv-foot-row,
  .sv-welcome-footer .sv-foot-row.second {
    display: block;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .sv-welcome-footer .sv-foot-col {
    display: block;
    border-top: 1px solid var(--svf-line);
  }
  .sv-welcome-footer .sv-foot-h {
    display: none;
  }
  .sv-welcome-footer .sv-foot-acc {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .sv-welcome-footer .sv-foot-acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin: 0;
    padding: 0 2px;
    list-style: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--svf-strong);
    -webkit-tap-highlight-color: transparent;
  }
  .sv-welcome-footer .sv-foot-acc > summary::-webkit-details-marker {
    display: none;
  }
  .sv-welcome-footer .sv-foot-acc > summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0 4px 0 12px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.7;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .sv-welcome-footer .sv-foot-acc[open] > summary::after {
    transform: translateY(2px) rotate(-135deg);
  }
  .sv-welcome-footer .sv-foot-acc:not([open]) ~ .sv-foot-links {
    display: none;
  }
  .sv-welcome-footer .sv-foot-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    padding: 0 2px 14px;
  }
  .sv-welcome-footer .sv-foot-links a {
    padding: 9px 0;
    font-size: 14px;
  }
  .sv-welcome-footer .sv-foot-base {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-top: 0;
    padding-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-welcome-footer *,
  .sv-welcome-footer *::after {
    transition: none !important;
  }
}