/* WovLab live UI consistency fixes — 2026-05-18
   Purpose: remove stitched/legacy hero feel, normalize typography, section rhythm, and dark page background. */
html,
body,
#root {
  background: #050505 !important;
  color: #f7f7f5;
  min-height: 100%;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Defensive: if old injected overlay is cached somewhere, hide it. */
#wov-hero,
body > #wov-hero {
  display: none !important;
}

/* Landing rhythm: earlier bundle mixed huge decorative gaps with tight sections. */
main section {
  scroll-margin-top: 96px;
}

main section[class*="py-20"],
main section[class*="py-24"],
main section[class*="py-16"],
main section[class*="py-12"],
main section[class*="py-10"] {
  padding-top: clamp(48px, 6vw, 84px) !important;
  padding-bottom: clamp(48px, 6vw, 84px) !important;
}

/* Remove over-tall decorative/editorial sections that were reading as blank gaps. */
main section {
  min-height: 0 !important;
}

main section > div,
main section .container,
main section [class*="max-w-"] {
  row-gap: clamp(20px, 3vw, 42px);
}

/* Make the landing feel like one brand system instead of mixed templates. */
h1,
h2,
h3,
h4,
nav a,
nav button,
button {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.025em;
}

h1 {
  line-height: 0.92 !important;
}

h2 {
  line-height: 0.96 !important;
  margin-bottom: 0.35em;
}

p,
li {
  font-size: max(14px, 0.94rem) !important;
  line-height: 1.65 !important;
}

/* Tiny nav/buttons were hard to read on live page. */
header,
header nav,
header a,
header button,
[role="navigation"] a,
[role="navigation"] button {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

header nav,
[role="navigation"] ul {
  gap: clamp(14px, 2vw, 28px) !important;
}

/* Cards: unify internal spacing/readability. */
main a,
main button {
  min-height: 40px;
}

main [class*="border-white/"],
main [class*="bg-white/"] {
  backdrop-filter: saturate(120%) blur(10px);
}

main [class*="grid"] > *,
main [class*="flex"] > a,
main [class*="flex"] > button {
  transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

/* Horizontal sliders/card rows: keep controls usable and prevent clipped/tiny cards. */
button[aria-label*="Scroll"],
button[aria-label*="scroll"] {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
}

/* Footer/bottom white flash guard. */
footer,
footer * {
  color-scheme: dark;
}

footer {
  background: #020202 !important;
  margin-bottom: 0 !important;
}

/* Mobile/tablet rhythm. */
@media (max-width: 768px) {
  main section[class*="py-"] {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  h1 {
    font-size: clamp(2.4rem, 14vw, 4.6rem) !important;
  }

  h2 {
    font-size: clamp(2rem, 10vw, 3.4rem) !important;
  }

  p,
  li {
    font-size: 14px !important;
  }
}