/* Eyebrow — owns its own typography, carries no margin. The section it sits
   in decides the spacing (gap) and the tone (--vt-fg-subtle). */
.vt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--vt-eyebrow-size, 12px);
  font-weight: var(--vt-eyebrow-weight, var(--fw-bold));
  letter-spacing: var(--vt-eyebrow-tracking, 0.18em);
  text-transform: uppercase;
  line-height: var(--lh-snug);
  color: var(--vt-eyebrow-color, var(--vt-fg-subtle, var(--color-text-subtle)));
}
/* The dot is the section's call too: the front-page hero wears electric blue
   with a halo, every other hero wears light purple bare (mockup styles/hero.css
   vs styles/home.css). Defaults are the front-page values, so saved content
   that carries neither variable renders exactly as before. */
.vt-eyebrow__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--vt-eyebrow-dot, var(--color-electric-blue));
  box-shadow: 0 0 0 var(--vt-eyebrow-dot-ring, 4px)
    color-mix(in srgb, var(--vt-eyebrow-dot, var(--color-electric-blue)) 22%, transparent);
}

/* Large — the mockup's product-hero kicker (styles/product.css
   `.uhero--product .uhero__kicker`): the PRODUCT NAME above the headline, not a
   label about the section. It states its own size, weight and case rather than
   reading the section's, for the same reason `vt-text--small` does — the point
   of it is to be a different KIND of line, and a container that had set the
   label scale would otherwise flatten it back.

   The case is the substantive part: uppercase with wide tracking is what makes a
   label read as a label, and "LUXBEAM® LLS1000" is a name. So `text-transform`
   goes to none and the tracking drops to the mockup's 0.01em.

   The COLOUR is deliberately left to the section (--vt-eyebrow-color), which is
   what keeps this usable on a dark hero: the page scale already resolves it to
   dark purple on light and to --vt-fg on dark. The mockup hard-codes dark purple
   because its only copy sits on a white band. */
.vt-eyebrow--large {
  font-size: clamp(16px, 1.7cqi, 20px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Pill — the mockup's .pill--outline (components.css) in its flagship--light
   tuning (styles/lithography.css): a status badge, "New · Available 2026",
   drawn as a rounded outline around the label.

   The border is currentColor at 30% rather than a named token, and that is the
   whole trick: the eyebrow's colour already follows the section
   (--vt-eyebrow-color → dark purple on light bands, near-white on dark), so one
   declaration lands on the mockup's BOTH values — --color-border-strong on
   white (.flagship--light), rgba(255,255,255,.25) on dark (.pill--outline) —
   and any future tone for free.

   The dot ring drops to 2px, the mockup's own note: "smaller ring so the
   bullet doesn't crowd the pill". Set on the element itself, so it beats the
   ring width a section hands down (a declaration wins over an inherited one). */
.vt-eyebrow--pill {
  gap: 9px;
  /* the mockup's "text optically centred" padding */
  padding: 8px 16px 6px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  line-height: 1;
}
.vt-eyebrow--pill .vt-eyebrow__dot {
  width: 6px;
  height: 6px;
  --vt-eyebrow-dot-ring: 2px;
}