/* Changes on top of the website build's site.css. Loaded after it on every page.
   Kept outside assets/site/ so scripts/site-import/convert.py does not overwrite it. */

/* Homepage hero eyebrow: black text on a brand-orange block, readable over the light hero.
   The rules either side stay orange and sit outside the block (20px gap + 24px rule each side). */
:where(.pt-home) .hero-eyebrow {
  gap: 20px;
  padding: 5px 0;
  color: #09090b;
  font-weight: 600;
  background: linear-gradient(var(--orange), var(--orange)) center / calc(100% - 72px) 100% no-repeat;
}
:where(.pt-home) .hero-eyebrow::before,
:where(.pt-home) .hero-eyebrow::after {
  background: var(--orange);
  opacity: 1;
}

/* Homepage and pricing ghost buttons. The build colours .btn-ghost-l text with var(--ink-0),
   which is white in the dark theme, on a white button; and .btn-ghost-d text is always white,
   but every pt-home section is light in the light theme. Both came out white on white. */
:where(.pt-home) .btn-ghost-l {
  color: #09090b;
}
html[data-theme="light"]:where(.pt-home) .btn-ghost-d {
  background: rgba(9, 9, 11, 0.04);
  color: #09090b;
  border-color: var(--line-l);
}
html[data-theme="light"]:where(.pt-home) .btn-ghost-d:hover {
  background: rgba(9, 9, 11, 0.08);
  border-color: var(--ink-3);
}

/* "Free extension" card: the card stays dark in both themes, but a light-theme rule turned
   its link dark orange. Keep the bright orange the dark theme uses. */
html[data-theme] .fb-ext.fb-ext em {
  color: var(--orange-2);
}