/* R8 overrides for the two dark pages (ugc.html, ai-labs.html), whose page CSS is inline.
   Link it as the LAST stylesheet of <head> on both pages (after the inline <style> blocks):
   <link rel="stylesheet" href="r8-dark.css" />
   Tokens (--hero-top, --hero-eb-gap, --sec-*) and the eyebrow chip live in brand.css. */

/* ================= page start ================= */
/* ugc: the copy used to sit in the vertical middle of a 100svh grid, so its eyebrow moved with the window height */
.hero-grid { padding-top: var(--hero-top); }
@media (min-width: 1024px) { .hero-grid { padding-top: var(--hero-top); align-items: start; min-height: 0; } }
@media (min-width: 1024px) { .hero[data-hero] { min-height: 0; } }

/* ai-labs: same start; the hero kicker becomes the brand chip (cool ring, the AI line's palette) */
.hero > .wrap.items-center { align-items: start; }
section.hero[aria-labelledby="h-hero"] { padding-top: var(--hero-top); }
.kick:has(+ h1) {
  --eb-fg: rgba(238, 234, 226, .9);
  --eb-fill: rgba(238, 234, 226, .05);
  --eb-ring: linear-gradient(100deg, rgba(127, 189, 242, .65), rgba(143, 168, 255, .5) 34%, rgba(180, 156, 242, .55) 66%, rgba(168, 226, 204, .6));
  position: relative; display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0; vertical-align: top;
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; line-height: 1.2; text-transform: none; text-wrap: balance;
  color: var(--eb-fg); background: var(--eb-fill); box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 10px 26px -16px rgba(127, 189, 242, .45);
}
.kick:has(+ h1)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--eb-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.kick:has(+ h1) > .rec { display: none; }
.kick:has(+ h1) + h1 { margin-top: var(--hero-eb-gap); }
@media (max-width: 639px) { .kick:has(+ h1) { font-size: 13px; padding: 6px 12px; } }

/* ai-labs section kickers ("01 Who judges your model"): the same quiet label as the light pages, the step number kept in mono */
.kick { font-size: 14px; font-weight: 500; letter-spacing: -.003em; line-height: 1.3; text-transform: none; color: var(--dim); gap: 10px; }
.kick b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--bone-2); }
@media (max-width: 1023px) { .hero-copy > h1 { margin-top: calc(var(--hero-eb-gap) - .04em); } } /* ugc phones: grid item, the line mask margin does not collapse */

/* ================= hover: motion only on real links and buttons ================= */
/* channel cards (both pages) are not links: no aura swell, photo zoom or cursor-follow shift */
@media (hover: hover) and (pointer: fine) {
  .cw-c:hover .cw-aura { transform: none; opacity: .6; }
  .cw[data-awake] .cw-c:hover .cw-aura { animation: cw-breathe 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.85s); }
  .cw-c:hover .cw-img img { scale: none; }
  .cw-c .cw-img img { translate: none; }
  /* ai-labs task cards are not links: the border stays put (the small demo inside each card still plays) */
  .job:hover { border-color: var(--hair); }
}

/* ================= section rhythm (brand.css --sec-* tokens; gaps measured content to content) ================= */
/* ugc (its hero carries [data-hero]): Tailwind py-24 md:py-32 on each section */
main:has(> .hero[data-hero]) > section[id]:not(.hero):not(#call) { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
main:has(> .hero[data-hero]) > section#faq[id]:not(.hero):not(#call) { padding-bottom: var(--sec-pad-tight); }
main:has(> .hero[data-hero]) > section#call { padding-top: var(--sec-pad-tight); } /* its bottom edge before the footer is unchanged */
.hero[data-hero] .hero-grid { padding-bottom: var(--hero-pb); }
/* ai-labs (its hero is labelled by #h-hero): .sec / .sec.pt-0; #scope is the closing CTA card */
main > section.hero[aria-labelledby="h-hero"] { padding-bottom: var(--hero-pb); }
main:has(> .hero[aria-labelledby="h-hero"]) > .sec { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
main:has(> .hero[aria-labelledby="h-hero"]) > #proof.sec { padding-bottom: var(--sec-pad-tight); }
main:has(> .hero[aria-labelledby="h-hero"]) > #scope.sec { padding-top: var(--sec-pad-tight); }