/* The shared site header (People and Business), split out of business-v2.css 2026-10-07.
   Everything is under .lmh. On the Business page the header inherits the page's
   tokens (light and dark); .lmh-own gives it the same light tokens on other pages. */

/* Inter, carried by the header itself: the same two self-hosted faces as
   landing-globals.css and business-v2.css. Pages that load neither (the
   hospitality page) drew the bar in the system font, so the switch and
   the button were a different shape there than everywhere else. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal-v1.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-ext-wght-normal-v1.woff2")
    format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Pages outside /business wrap the header in a .lmh-own div for the light
   tokens. The wrapper draws no box of its own, so the phone bar can ride
   along the whole page instead of only its own 60px (tokens still reach
   the header: custom properties inherit through display: contents). */
.lmh-own:not(.lmh):has(> .lmh) {
  display: contents;
}
.lmh-own {
  --bg: #ffffff;
  --bg-rgb: 255, 255, 255;
  --ink: #0a0a0a;
  --ink2: #2b2b2a;
  --mute: #5f5f5c;
  --mute2: #6b6b68;
  --mute3: #8a8a87;
  --panel: #f7f7f5;
  --panel2: #f2f2f0;
  --panel3: #e8e8e6;
  --panel4: #d6d6d3;
  --line: rgba(0, 0, 0, 0.07);
  --line2: rgba(0, 0, 0, 0.12);
  --line3: rgba(0, 0, 0, 0.3);
}
/* the same wrapper on a dark page (the site's default theme): the
   /business dark tokens */
.skt[data-theme="dark"] .lmh-own {
  --bg: #19191b;
  --bg-rgb: 25, 25, 27;
  --ink: #f2f2f0;
  --ink2: #d6d6d2;
  --mute: #a3a39e;
  --mute2: #8f8f8a;
  --mute3: #7c7c77;
  --panel: #212123;
  --panel2: #28282b;
  --panel3: #303034;
  --panel4: #39393e;
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);
  --line3: rgba(255, 255, 255, 0.32);
}
.lmh {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lmh * {
  box-sizing: border-box;
}
.lmh a {
  color: var(--ink);
  text-decoration: none;
}
.lmh a:hover {
  color: var(--ink);
}
.lmh p {
  margin: 0;
}
.lmh :where(img, svg) {
  display: revert;
  vertical-align: revert;
  max-width: revert;
  height: revert;
}
.lmh .hdr-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lmh .hdr-logo img {
  height: 20px;
  width: auto;
  display: block;
}

.lmh.hdr {
  position: relative;
  background: transparent;
}
.lmh .themebtn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  border: 1px solid var(--line2);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}
.lmh .themebtn:hover {
  color: var(--ink);
  background: var(--panel2);
  border-color: var(--line3);
}
.lmh .themebtn:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
.lmh .themebtn svg {
  width: 16px;
  height: 16px;
}
.lmh .ico-moon,
:is(.bz2, .skt)[data-theme="dark"] .lmh .ico-sun {
  display: none;
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .ico-moon {
  display: block;
}
.lmh .lg-d,
:is(.bz2, .skt)[data-theme="dark"] .lmh .lg-l {
  display: none !important;
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .lg-d {
  display: block !important;
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .mside-dark {
  background: #1e1e22;
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .mega-card {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.lmh .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.lmh .btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.lmh .btn-primary:hover {
  color: var(--bg);
  background: var(--ink2);
  transform: translateY(-1px);
}
.lmh .btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 0 12px;
}
.lmh .btn-ghost:hover {
  color: var(--ink);
}
.lmh .arrow svg {
  transition: transform 0.2s ease;
}
.lmh .arrow:hover svg {
  transform: translateX(4px);
}
.lmh .navlinks {
  display: flex;
  gap: 28px;
  align-items: center;
}
.lmh .navlinks a {
  font-size: 14px;
  font-weight: 400;
  color: var(--mute);
}
.lmh .navlinks a:hover {
  color: var(--ink);
}
/* the desktop menus live from 1181px; below, the phone menu holds them
   (the Business bar's six menus do not fit narrower, see DESKTOP BAR FIT) */
@media (max-width: 1180px) {
  .lmh .navlinks {
    display: none;
  }
}
@media (max-width: 1180px) {
  .lmh .hide-m {
    display: none;
  }
}
.lmh .navlinks {
  gap: 2px;
}
.lmh .navitem {
  position: static;
}
.lmh .navitem > a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  transition:
    background 0.18s cubic-bezier(0.23, 1, 0.32, 1),
    color 0.18s;
}
.lmh .navitem > a .chev {
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0.7;
}
.lmh .navitem:hover > a,
.lmh .navitem:focus-within > a,
.lmh .navitem[data-open] > a {
  background: rgba(var(--bg-rgb), 0.75);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.lmh .navitem:hover > a .chev,
.lmh .navitem[data-open] > a .chev {
  transform: rotate(180deg);
}
/* the label of the page the visitor is on */
.lmh .navitem > a[aria-current="page"] {
  background: rgba(var(--bg-rgb), 0.75);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.lmh .mega {
  position: absolute;
  left: 50%;
  top: 100%;
  padding-top: 10px;
  transform: translate(-50%, 8px) scale(0.985);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.18s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 0.18s;
  z-index: 60;
  max-width: calc(100vw - 32px);
}
/* open on hover, or when DesktopNav marks it open (a click, Enter or
   ArrowDown on the label). Focus alone never opens it, so Tab walks the
   labels past the shut menus. */
.lmh .navitem:hover .mega,
.lmh .navitem[data-open] .mega {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}
/* shut with Escape (DesktopNav): stays shut while the pointer is still on
   it */
.lmh .navitem[data-closed]:hover .mega {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px) scale(0.985);
}
.lmh .navitem[data-closed]:hover > a .chev {
  transform: none;
}
.lmh .mega-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-shadow:
    0 16px 40px rgba(26, 44, 68, 0.14),
    inset 0 1px 0 var(--line);
  text-align: left;
}
.lmh .mcols {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.lmh .mcol {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 6px 4px;
}
.lmh .mh {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--mute2);
  font-weight: 400;
}
.lmh .mgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}
.lmh .mitem {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background 0.15s ease;
  color: var(--ink);
}
.lmh .mitem:hover {
  background: var(--panel2);
  color: var(--ink);
}
.lmh .mi {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #2f6fe8;
}
.lmh .mpf {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--line);
}
.lmh .mt {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.lmh .md {
  display: block;
  font-size: 12.5px;
  color: var(--mute2);
  line-height: 1.4;
  margin-top: 2px;
  font-weight: 400;
}
.lmh .mside {
  width: 300px;
  flex: none;
  background: var(--panel2);
  border-radius: 16px;
  padding: 14px 10px 8px;
  display: flex;
  flex-direction: column;
}
.lmh .mside .mh {
  padding: 0 10px;
}
.lmh .mside-dark {
  background: #0a0a0a;
  padding: 18px 18px 18px;
  border-radius: 16px;
}
.lmh .mside-dark .mh {
  padding: 0;
}
.lmh .mfoot {
  display: flex;
  gap: 28px;
  margin-top: 14px;
  padding: 14px 10px 0;
  border-top: 1px solid var(--line);
}
.lmh .mfoot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.lmh .mfoot a:hover {
  color: #2f6fe8;
}
/* the switch is liquid glass (Kedem 2026-10-29: "make this liquid
   glass"): the ground blurs and saturates through it, a lit top edge and
   a soft gloss sit on it, and the chosen side is a bright glass lens. The
   pages that put the header on colour keep setting its tint. */
.lmh .aud {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 8px 24px -12px rgba(12, 12, 30, 0.32);
}
.lmh .aud::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.08) 48%,
    rgba(255, 255, 255, 0) 56%,
    rgba(255, 255, 255, 0.12) 100%
  );
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .aud::after {
  opacity: 0.3;
}
/* each tab is a 44px tall touch target (the menu button's size) that
   still sits in the switch as a 28px pill: the link reaches 8px above and
   below it (the negative margins keep the switch its size) and the pill
   is drawn by ::before. The pills paint in the switch's own layer, under
   every label, so the chosen one can slide across its neighbours
   (SiteHeader.tsx, slidePill) without covering their words. */
.lmh .aud-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin: -8px 0;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--mute);
  text-decoration: none;
  transition: color 0.2s ease;
}
.lmh .aud-tab::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  z-index: -1;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}
.lmh .aud-tab:hover {
  color: var(--ink);
}
.lmh .aud-tab.on {
  color: var(--ink);
}
.lmh .aud-tab.on::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.86) 100%
  );
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 1px rgba(0, 0, 0, 0.06),
    0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 4px 12px -4px rgba(0, 0, 0, 0.24);
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .aud-tab.on::before {
  background: var(--bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 0 0 1px var(--line);
}
/* over a colour hero the active tab keeps its white pill in both themes:
   the hero rules give it ink words (SiteKit.tsx VIVID_CSS,
   agencies-page.css, pricing-footer.css) */
body:has(.sk-vivid) .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .aud-tab.on::before,
.bz2.agx3 .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .aud-tab.on::before,
.pricing-page.pz-vivid
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .aud-tab.on::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.86) 100%
  );
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 4px 12px -4px rgba(0, 0, 0, 0.24);
}
.lmh .aud-tab:focus-visible {
  outline: none;
}
.lmh .aud-tab:focus-visible::before {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
.lmh .hdr-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lmh .hdr-l {
  display: flex;
  align-items: center;
  gap: 24px;
}
.lmh .hdr-r {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* DESKTOP BAR FIT (2026-10-07). The Business bar carries the three side
   tabs, six menus (Product, Solutions, Customers, Enterprise, Resources,
   Pricing), the light/dark icon, Log in and Book a demo: 1164px with the
   tight spacing above. From 1280px the bar has 1184px inside its gutters
   (20px to spare). 1181 to 1279px: 32px gutters and no chevrons (the
   menus still open on hover, click, Enter and ArrowDown). Below 1181px the phone menu
   takes over, on every side alike so the logo stays in one spot. */
/* a plain link with a short label (Creator marketplace) shows it below
   1440px, where the full one would push the bar off the screen */
.lmh .navitem .nl-short {
  display: none;
}
@media (max-width: 1439px) {
  .lmh .navitem .nl-full {
    display: none;
  }
  .lmh .navitem .nl-short {
    display: inline;
  }
}
/* a wide link (AI Course on the Business bar) only fits from 1440px: there
   the bar grows to 1424px with 40px gutters and the marketplace link keeps
   its short label (1317px of bar in 1344px). Below that it waits in the
   Resources menu and the phone menu. Every side takes the same 1424px bar
   (Kedem 2026-11-02: switching sides "shifts the entire nav bar"; the
   Business bar alone was wider, so the logo and the switch jumped 80px). */
.lmh .navitem.nav-wide {
  display: none;
}
@media (min-width: 1440px) {
  .lmh .navitem.nav-wide {
    display: block;
  }
  .lmh .hdr-in {
    max-width: 1424px;
    padding: 0 40px;
  }
  .lmh .hdr-in:has(.nav-wide) .navitem .nl-full {
    display: none;
  }
  .lmh .hdr-in:has(.nav-wide) .navitem .nl-short {
    display: inline;
  }
}
@media (min-width: 1181px) and (max-width: 1279px) {
  .lmh .hdr-in {
    padding: 0 32px;
  }
  .lmh .navitem > a .chev {
    display: none;
  }
  .lmh .navitem > a {
    padding: 8px;
  }
}
@media (max-width: 1180px) {
  .lmh .hdr-in {
    padding: 0 16px;
    gap: 10px;
  }
}
@media (max-width: 1180px) {
  .lmh .hdr-l {
    gap: 12px;
  }
}
@media (max-width: 560px) {
  .lmh .themebtn {
    display: none;
  }
}
@media (max-width: 560px) {
  .lmh .btn-primary {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }
}
@media (max-width: 560px) {
  .lmh .aud-tab {
    padding: 0 10px;
    font-size: 12.5px;
  }
}
@media (max-width: 360px) {
  .lmh .hdr-l > a img {
    height: 17px !important;
  }
}

/* SKIP LINK. The first stop for keyboard users; hidden until it has focus. */
.lmh .lmh-skip {
  position: absolute;
  left: 16px;
  top: 10px;
  z-index: 70;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lmh .lmh-skip:focus {
  width: auto;
  height: 40px;
  overflow: visible;
  clip-path: none;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
/* the skip link's target takes focus, but it is not a control: no ring
   around the whole page after the jump */
.lmh ~ main[tabindex="-1"]:focus,
.lmh ~ * main[tabindex="-1"]:focus {
  outline: none;
}

/* PHONE MENU BUTTON. Two lines that cross into an X while the menu is open.
   The box is a 44px touch target; the negative margin lines the glyph up
   with the 16px page gutter instead of the box. */
.lmh .mbtn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.lmh .mbtn:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: -2px;
}
.lmh .mbtn-l {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 1.75px;
  margin-top: -0.875px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
.lmh .mbtn-l:first-child {
  transform: translateY(-4px);
}
.lmh .mbtn-l:last-child {
  transform: translateY(4px);
}
.lmh .mbtn[aria-expanded="true"] .mbtn-l:first-child {
  transform: rotate(45deg);
}
.lmh .mbtn[aria-expanded="true"] .mbtn-l:last-child {
  transform: rotate(-45deg);
}
@media (max-width: 1180px) {
  .lmh .mbtn {
    display: inline-flex;
  }
}

/* PHONE MENU PANEL. Opens under the header and fills the rest of the
   screen in the page colour; the page behind is scroll locked (SiteHeader),
   so a long menu scrolls inside the panel. */
.lmh .mpanel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border-top: 1px solid var(--line);
  animation: lmh-panel-in 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
.lmh .mpanel[hidden] {
  display: none;
}
@keyframes lmh-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lmh .mpanel-in {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
}
.lmh .mpanel-h {
  margin: 0 0 6px;
  padding: 0 10px;
}
.lmh .mpanel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
@media (min-width: 640px) {
  .lmh .mpanel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
  }
}
.lmh .mpanel .mitem {
  align-items: center;
}
.lmh .mrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.15s ease;
}
.lmh .mrow svg {
  color: var(--mute3);
}
.lmh .mrow:hover,
.lmh .mitem:focus-visible,
.lmh .mrow:focus-visible {
  background: var(--panel2);
  color: var(--ink);
}
.lmh .mitem:focus-visible,
.lmh .mrow:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: -2px;
}
.lmh .mpanel-cta {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.lmh .mpanel-cta .btn {
  width: 100%;
  height: 48px;
  padding: 0 18px;
  font-size: 15px;
}
.lmh .btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--line2);
}
.lmh .btn-line:hover {
  color: var(--ink);
  background: var(--panel2);
}
.lmh .btn:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .mpanel .btn-primary:hover {
  color: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  .lmh .mpanel {
    animation: none;
  }
  .lmh .mbtn-l {
    transition: none;
  }
}

/* PHONE BAR RIDES ALONG (under 1181px, where the menu lives behind the
   button). SiteHeader sets the state from the scroll direction: at the top
   the bar is see-through over the page's ground as before; scrolled, it
   sits on the page colour with a hairline; scrolling down it tucks away
   above the screen, scrolling up it slides back. Tucked, nothing of it
   touches the top edge, so Safari tints its bars from the page; shown, it
   is opaque, so Safari takes its colour. */
@media (max-width: 1180px) {
  .lmh.hdr {
    position: sticky;
    top: 0;
    transition:
      transform 0.28s cubic-bezier(0.23, 1, 0.32, 1),
      background-color 0.2s ease,
      box-shadow 0.2s ease;
  }
  .lmh.hdr.lmh-stuck {
    background: var(--bg);
    box-shadow: 0 1px 0 var(--line);
  }
  .lmh.hdr.lmh-tuck {
    transform: translateY(-100%);
    box-shadow: none;
  }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  .lmh.hdr {
    transition: none;
  }
}

/* LIGHT / DARK ROW (Business page, phone menu): the bar has no room for
   the icon under 561px, so the switch lives here at every phone width. */
.lmh .mtheme {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.lmh .mtheme:hover,
.lmh .mtheme:focus-visible {
  background: var(--panel2);
}
.lmh .mtheme:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: -2px;
}
.lmh .mtheme-sw {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--panel3);
  border: 1px solid var(--line2);
  transition: background 0.2s ease;
}
.lmh .mtheme-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.lmh .mtheme[aria-pressed="true"] .mtheme-sw {
  background: #2f6fe8;
  border-color: transparent;
}
.lmh .mtheme[aria-pressed="true"] .mtheme-knob {
  transform: translateX(16px);
}
@media (prefers-reduced-motion: reduce) {
  .lmh .mtheme-sw,
  .lmh .mtheme-knob {
    transition: none;
  }
}

/* COMPACT BAR. On phones the bar holds the logo, the People | Business |
   Agencies switch and the menu button; from 480px up the main button rides
   in the bar too. Under 480px the three tabs and the button do not fit
   together (measured 2026-10-07: 55px short at 390px, 62px at 360px), so
   the button leaves the bar there; it is always at the bottom of the menu
   panel. */
@media (max-width: 420px) {
  .lmh .hdr-in {
    gap: 8px;
  }
  .lmh .hdr-l {
    gap: 10px;
  }
  .lmh .hdr-r {
    gap: 2px;
  }
  .lmh .hdr-logo img {
    height: 18px;
  }
  .lmh .aud-tab {
    padding: 0 9px;
  }
}
@media (max-width: 374px) {
  .lmh .hdr-l {
    gap: 8px;
  }
  .lmh .aud-tab {
    padding: 0 8px;
    font-size: 12px;
  }
}
@media (max-width: 479px) {
  .lmh .hdr-cta {
    display: none;
  }
}
/* the narrowest phones (320px): the tabs give 2px a side more. The logo
   keeps the 10px it has at 390px from the switch (6px read as touching);
   at 320px that still leaves 10px between the switch and the menu button
   (measured 2026-10-15, Chromium and WebKit alike). */
@media (max-width: 340px) {
  .lmh .hdr-in {
    gap: 10px;
  }
  .lmh .aud-tab {
    padding: 0 6px;
  }
}
/* the side switch centred on the bar, not tucked after the logo (Kedem
   2026-10-29: "this is not centered"). Below 1181px the logo, the switch
   and the right group sit on a 1fr auto 1fr grid; each side column keeps
   at least its own width, so on the narrowest phones the switch gives a
   few px off centre instead of touching the logo or the menu button. */
@media (max-width: 1180px) {
  .lmh .hdr-in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .lmh .hdr-l {
    display: contents;
  }
  .lmh .hdr-logo {
    grid-column: 1;
    justify-self: start;
  }
  .lmh .aud {
    grid-column: 2;
  }
  .lmh .hdr-r {
    grid-column: 3;
    justify-self: end;
  }
}

/* MEGA MENU PARTS (2026-10-07, the tryprofound-style menus: every item
   opens its own page). Groups stack inside a column; a column's items run
   one or two across. */
.lmh .mgroup + .mgroup {
  margin-top: 14px;
}
.lmh .mgrid.one {
  grid-template-columns: minmax(0, 1fr);
}
.lmh .mtx {
  min-width: 0;
}
.lmh .mitem[aria-current="page"] {
  background: var(--panel2);
}
.lmh .mitem:focus-visible,
.lmh .mfoot a:focus-visible,
.lmh .navitem > a:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: -2px;
}
/* the arrow after a link to another site */
.lmh .mext {
  display: inline-block;
  margin-left: 4px;
  vertical-align: 0;
  opacity: 0.55;
}

/* THE FEATURED CARD: an ink island at the right of a mega menu, one link */
.lmh .mcard {
  width: 290px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: #0a0a0a;
  color: #ffffff;
  overflow: hidden;
  transition: background 0.2s ease;
}
.lmh .mcard:hover {
  background: #17171a;
  color: #ffffff;
}
.lmh .mcard:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .mcard {
  background: #1e1e22;
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .mcard:hover {
  background: #26262b;
}
.lmh .mcard-l {
  font-size: 12px;
  color: #8a8a86;
}
.lmh .mcard-t {
  margin-top: 4px;
  text-wrap: balance;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #ffffff;
}
.lmh .mcard-d {
  font-size: 13px;
  line-height: 1.5;
  color: #b8b8b4;
}
.lmh .mcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: #ffffff;
}
.lmh .mcard-cta svg {
  transition: transform 0.2s ease;
}
.lmh .mcard:hover .mcard-cta svg {
  transform: translateX(3px);
}
.lmh .mcard-btn .mcard-cta {
  align-self: flex-start;
  height: 38px;
  margin-top: auto;
  padding: 0 16px;
  border-radius: 999px;
  background: #ffffff;
  color: #0a0a0a;
}
.lmh .mcard-btn {
  gap: 8px;
}
.lmh .mcard-btn .mcard-d {
  margin-bottom: 8px;
}
/* card pictures */
.lmh .mart-tools {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.lmh .mart-tools + .mcard-cta {
  margin-top: 0;
  padding-top: 14px;
}
.lmh .mart-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #1e1e22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8fb3ff;
}
.lmh .mcard:hover .mart-tile {
  border-color: rgba(255, 255, 255, 0.14);
}
.lmh .mart-press {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 8px;
  font-size: 12px;
  color: #8a8a86;
}
.lmh .mart-press img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lmh .mart-groups {
  display: flex;
  margin: 6px 0 8px;
}
.lmh .mart-groups img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0a0a0a;
  background: #1e1e22;
}
.lmh .mart-groups img + img {
  margin-left: -8px;
}
:is(.bz2, .skt)[data-theme="dark"] .lmh .mart-groups img {
  border-color: #1e1e22;
}

/* PHONE MENU SECTIONS: each menu is an accordion row; one opens at a
   time. Plain menus (Pricing, FAQ) are rows in the same list. */
.lmh .macc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lmh .macc + .macc {
  border-top: 1px solid var(--line);
}
.lmh .macc-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.lmh .macc > .mrow {
  min-height: 52px;
}
.lmh .macc-btn:hover,
.lmh .macc-btn:focus-visible {
  background: var(--panel2);
}
.lmh .macc-btn:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: -2px;
}
.lmh .macc-chev {
  color: var(--mute3);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.lmh .macc-btn[aria-expanded="true"] .macc-chev {
  transform: rotate(180deg);
}
.lmh .macc-panel {
  padding: 0 0 12px;
}
.lmh .macc-panel[hidden] {
  display: none;
}
.lmh .macc-panel > .mrow {
  min-height: 44px;
  font-size: 14px;
  color: var(--ink);
}
.lmh .macc-group {
  margin-top: 10px;
}
.lmh .macc-extra {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.lmh .macc-extra .mrow {
  min-height: 44px;
  font-size: 14px;
}
.lmh .mrow-t {
  display: inline-flex;
  align-items: center;
}
.lmh .mrow[aria-current="page"] {
  background: var(--panel2);
}
@media (prefers-reduced-motion: reduce) {
  .lmh .macc-chev,
  .lmh .mcard-cta svg {
    transition: none;
  }
}

/* ==== OVER A DARK HERO (start) ====
   2026-10-14, the People home only: SiteHeader overDark sets .lmh-ondark
   while the bar sits over the full bleed hero footage. The bar draws light
   on dark there: the white logo, the side switch as smoked glass with the
   white pill, white menu labels and Log in, the main button turned white.
   The mega menus and the phone panel keep their own light cards. With the
   phone menu open the bar is its normal self on the page colour; riding
   along over the hero it sits on near black so it reads as part of the
   footage. Past the hero the class goes and nothing here applies. */
/* the base swap (.lmh .lg-d) is !important, so the flip has to be too */
.lmh.lmh-ondark:not(.lmh-open) .lg-l {
  display: none !important;
}
.lmh.lmh-ondark:not(.lmh-open) .lg-d {
  display: block !important;
}
.lmh.lmh-ondark:not(.lmh-open) .aud {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.lmh.lmh-ondark:not(.lmh-open) .aud-tab {
  color: rgba(255, 255, 255, 0.78);
}
.lmh.lmh-ondark:not(.lmh-open) .aud-tab:hover {
  color: #ffffff;
}
.lmh.lmh-ondark:not(.lmh-open) .aud-tab.on {
  color: #0a0a0a;
}
.lmh.lmh-ondark:not(.lmh-open) .aud-tab.on::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.86) 100%
  );
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 1px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 4px 12px -4px rgba(0, 0, 0, 0.3);
}
.lmh.lmh-ondark:not(.lmh-open) .navitem > a {
  color: #ffffff;
}
.lmh.lmh-ondark:not(.lmh-open)
  .navitem:is(:hover, :focus-within, [data-open])
  > a,
.lmh.lmh-ondark:not(.lmh-open) .navitem > a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
}
.lmh.lmh-ondark:not(.lmh-open) .btn-ghost,
.lmh.lmh-ondark:not(.lmh-open) .btn-ghost:hover {
  color: #ffffff;
}
.lmh.lmh-ondark:not(.lmh-open) .btn-primary {
  background: #ffffff;
  color: #0a0a0a;
}
.lmh.lmh-ondark:not(.lmh-open) .btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  color: #0a0a0a;
}
.lmh.lmh-ondark:not(.lmh-open) .mbtn {
  color: #ffffff;
}
.lmh.lmh-ondark:not(.lmh-open) .lmh-skip:focus {
  background: #ffffff;
  color: #0a0a0a;
}
@media (max-width: 1180px) {
  .lmh.hdr.lmh-ondark.lmh-stuck:not(.lmh-open) {
    background: #0b0b0e;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .lmh.hdr.lmh-ondark.lmh-open {
    background: var(--bg);
  }
}
/* ==== OVER A DARK HERO (end) ==== */

/* PHONE TAP TARGETS (mobile pass, 2026-10-15). Below 981px only, so the
   desktop bar is untouched. The logo link was as tall as its 17 to 20px
   image; 12px of padding above and below, taken back by the same negative
   margin, gives it a 41 to 44px tap row without moving anything. The
   light/dark button (561 to 980px, Business side) becomes a 44px button
   that still shows the same 36px circle: 4px of padding, taken back by
   the same negative margin, so the bar does not move; its fill is clipped
   to the inner circle (!important because the /business hero's hover
   rule sets the whole background shorthand) and its ring is drawn by
   ::before in the button's own border colour, so every state, including
   the white-on-hero look business-v2.css gives it, reads as before. */
@media (max-width: 980px) {
  .lmh .hdr-logo {
    padding-block: 12px;
    margin-block: -12px;
  }
  .lmh .themebtn {
    position: relative;
    isolation: isolate;
    width: 44px;
    height: 44px;
    margin: -4px;
    padding: 4px;
    border-width: 0;
    background-clip: content-box !important;
  }
  .lmh .themebtn::before {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -1;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
  }
  .lmh .themebtn:focus-visible {
    outline: none;
  }
  .lmh .themebtn:focus-visible::before {
    outline: 2px solid #2f6fe8;
    outline-offset: 2px;
  }
}

/* site-dark:start */
/* GENERATED by scripts/generate-site-dark.mjs: do not edit by hand,
   run the script again.

   The dark theme of the site kit pages (Kedem 2026-10-30: dark is the
   default on every page). A page root with class .skt and
   data-theme="dark" (landing/theme/siteTheme.ts) turns each neutral
   colour class its pages use into its /business dark twin. Brand
   colours are kept. */

.skt[data-theme="dark"] {
  color-scheme: dark;
  color: #f2f2f0;
}
/* the body under a dark page: an overscroll or a short page never shows
   white. Outranks the pages' own body { background: #fff !important } */
body:has(.skt[data-theme="dark"]) {
  background: #19191b !important;
}
.skt.theming,
.skt.theming * {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}
/* the black Linkme wordmark (footer, page heads) turns white */
.skt[data-theme="dark"] img[src$="39708c363ec03760ba7914f2ac1b974c.svg"] {
  filter: invert(1);
}
.skt[data-theme="dark"] [class~="!text-[#5f5f5c]"] {
  color: #a3a39e !important;
}
.skt[data-theme="dark"]
  [class~="aria-pressed:bg-[#0a0a0a]"][aria-pressed="true"] {
  background-color: #2a2a2d;
}
.skt[data-theme="dark"]
  [class~="aria-pressed:border-[#0a0a0a]"][aria-pressed="true"] {
  border-color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="bg-[#0a0a0a]"] {
  background-color: #2a2a2d;
}
.skt[data-theme="dark"] [class~="bg-[#18181b]"] {
  background-color: #2a2a2d;
}
.skt[data-theme="dark"] [class~="bg-[#1a1a1a]"] {
  background-color: #2a2a2d;
}
.skt[data-theme="dark"] [class~="bg-[#6b6b68]"] {
  background-color: #444448;
}
.skt[data-theme="dark"] [class~="bg-[#e4e4e7]"] {
  background-color: #303034;
}
.skt[data-theme="dark"] [class~="bg-[#e8f5ec]"] {
  background-color: #28282b;
}
.skt[data-theme="dark"] [class~="bg-[#f2f2f0]"] {
  background-color: #28282b;
}
.skt[data-theme="dark"] [class~="bg-[#f4f4f3]"] {
  background-color: #212123;
}
.skt[data-theme="dark"] [class~="bg-[#f5f4f1]"] {
  background-color: #212123;
}
.skt[data-theme="dark"] [class~="bg-[#f6f6f4]"] {
  background-color: #212123;
}
.skt[data-theme="dark"] [class~="bg-[#f7f7f5]"] {
  background-color: #212123;
}
.skt[data-theme="dark"] [class~="bg-[#fafafa]"] {
  background-color: #1f1f21;
}
.skt[data-theme="dark"] [class~="bg-[#fbfbfa]"] {
  background-color: #1f1f21;
}
.skt[data-theme="dark"] [class~="bg-[rgba(10,10,14,0.015)]"] {
  background-color: rgba(255, 255, 255, 0.017);
}
.skt[data-theme="dark"] [class~="bg-[rgba(10,10,14,0.03)]"] {
  background-color: rgba(255, 255, 255, 0.034);
}
.skt[data-theme="dark"] [class~="bg-[rgba(10,10,14,0.04)]"] {
  background-color: rgba(255, 255, 255, 0.046);
}
.skt[data-theme="dark"] [class~="bg-[rgba(10,10,14,0.08)]"] {
  background-color: rgba(255, 255, 255, 0.092);
}
.skt[data-theme="dark"] [class~="bg-black/[0.03]"] {
  background-color: rgba(255, 255, 255, 0.034);
}
.skt[data-theme="dark"] [class~="bg-black/[0.04]"] {
  background-color: rgba(255, 255, 255, 0.046);
}
.skt[data-theme="dark"] [class~="bg-black/[0.05]"] {
  background-color: rgba(255, 255, 255, 0.057);
}
.skt[data-theme="dark"] [class~="bg-black/[0.06]"] {
  background-color: rgba(255, 255, 255, 0.069);
}
.skt[data-theme="dark"] [class~="bg-black/[0.07]"] {
  background-color: rgba(255, 255, 255, 0.081);
}
.skt[data-theme="dark"] [class~="bg-white"] {
  background-color: #222224;
}
.skt[data-theme="dark"][class~="bg-white"] {
  background-color: #19191b;
}
.skt[data-theme="dark"] [class~="border-[#0a0a0a]"] {
  border-color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="border-[#efeff1]"] {
  border-color: rgba(255, 255, 255, 0.08);
}
.skt[data-theme="dark"] [class~="border-[rgba(10,10,10,0.08)]"] {
  border-color: rgba(255, 255, 255, 0.092);
}
.skt[data-theme="dark"] [class~="border-[rgba(10,10,10,0.3)]"] {
  border-color: rgba(255, 255, 255, 0.345);
}
.skt[data-theme="dark"] [class~="border-[rgba(10,10,14,0.06)]"] {
  border-color: rgba(255, 255, 255, 0.069);
}
.skt[data-theme="dark"] [class~="border-[rgba(10,10,14,0.08)]"] {
  border-color: rgba(255, 255, 255, 0.092);
}
.skt[data-theme="dark"] [class~="border-[rgba(10,10,14,0.10)]"] {
  border-color: rgba(255, 255, 255, 0.115);
}
.skt[data-theme="dark"] [class~="border-[rgba(10,10,14,0.14)]"] {
  border-color: rgba(255, 255, 255, 0.161);
}
.skt[data-theme="dark"] [class~="border-[rgba(10,10,14,0.24)]"] {
  border-color: rgba(255, 255, 255, 0.276);
}
.skt[data-theme="dark"] [class~="border-black/[0.05]"] {
  border-color: rgba(255, 255, 255, 0.057);
}
.skt[data-theme="dark"] [class~="border-black/[0.06]"] {
  border-color: rgba(255, 255, 255, 0.069);
}
.skt[data-theme="dark"] [class~="border-black/[0.07]"] {
  border-color: rgba(255, 255, 255, 0.081);
}
.skt[data-theme="dark"] [class~="border-black/[0.08]"] {
  border-color: rgba(255, 255, 255, 0.092);
}
.skt[data-theme="dark"] [class~="border-black/[0.12]"] {
  border-color: rgba(255, 255, 255, 0.138);
}
.skt[data-theme="dark"] [class~="border-black/[0.1]"] {
  border-color: rgba(255, 255, 255, 0.115);
}
.skt[data-theme="dark"] [class~="decoration-black/20"] {
  text-decoration-color: rgba(255, 255, 255, 0.23);
}
.skt[data-theme="dark"] [class~="decoration-black/25"] {
  text-decoration-color: rgba(255, 255, 255, 0.287);
}
.skt[data-theme="dark"] [class~="decoration-black/30"] {
  text-decoration-color: rgba(255, 255, 255, 0.345);
}
.skt[data-theme="dark"] [class~="disabled:bg-[#5f5f5c]"]:disabled {
  background-color: #444448;
}
.skt[data-theme="dark"]
  [class~="divide-black/[0.07]"]
  > :not([hidden])
  ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.081);
}
.skt[data-theme="dark"] [class~="focus-visible:bg-[#f7f7f5]"]:focus-visible {
  background-color: #212123;
}
.skt[data-theme="dark"]
  [class~="focus-visible:outline-[#0a0a0a]"]:focus-visible {
  outline-color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="focus-within:border-black/25"]:focus-within {
  border-color: rgba(255, 255, 255, 0.287);
}
.skt[data-theme="dark"] [class~="focus:bg-white"]:focus {
  background-color: #222224;
}
.skt[data-theme="dark"] [class~="focus:border-[#0a0a0a]"]:focus {
  border-color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="focus:border-black/30"]:focus {
  border-color: rgba(255, 255, 255, 0.345);
}
.skt[data-theme="dark"] [class~="focus:border-black/40"]:focus {
  border-color: rgba(255, 255, 255, 0.46);
}
.skt[data-theme="dark"] [class~="focus:text-black"]:focus {
  color: #f2f2f0;
}
.skt[data-theme="dark"] .group:hover [class~="group-hover:bg-[#0a0a0a]"] {
  background-color: #2a2a2d;
}
.skt[data-theme="dark"] .group:hover [class~="group-hover:border-black/30"] {
  border-color: rgba(255, 255, 255, 0.345);
}
.skt[data-theme="dark"]
  .group:hover
  [class~="group-hover:decoration-[#0a0a0a]"] {
  text-decoration-color: #f2f2f0;
}
.skt[data-theme="dark"]
  .group:hover
  [class~="group-hover:decoration-black/25"] {
  text-decoration-color: rgba(255, 255, 255, 0.287);
}
.skt[data-theme="dark"] .group:hover [class~="group-hover:text-[#0a0a0a]"] {
  color: #f2f2f0;
}
.skt[data-theme="dark"] .group:hover [class~="group-hover:text-[#0a0a0e]"] {
  color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="hover:!text-[#0a0a0a]"]:hover {
  color: #f2f2f0 !important;
}
.skt[data-theme="dark"] [class~="hover:bg-[#ececeb]"]:hover {
  background-color: #28282b;
}
.skt[data-theme="dark"] [class~="hover:bg-[#f2f2f0]"]:hover {
  background-color: #28282b;
}
.skt[data-theme="dark"] [class~="hover:bg-[#f4f4f2]"]:hover {
  background-color: #212123;
}
.skt[data-theme="dark"] [class~="hover:bg-[#f7f7f5]"]:hover {
  background-color: #212123;
}
.skt[data-theme="dark"] [class~="hover:bg-[#fbfbfa]"]:hover {
  background-color: #1f1f21;
}
.skt[data-theme="dark"] [class~="hover:bg-[rgba(10,10,14,0.03)]"]:hover {
  background-color: rgba(255, 255, 255, 0.034);
}
.skt[data-theme="dark"] [class~="hover:bg-[rgba(10,10,14,0.05)]"]:hover {
  background-color: rgba(255, 255, 255, 0.057);
}
.skt[data-theme="dark"] [class~="hover:bg-black/[0.04]"]:hover {
  background-color: rgba(255, 255, 255, 0.046);
}
.skt[data-theme="dark"] [class~="hover:bg-black/[0.05]"]:hover {
  background-color: rgba(255, 255, 255, 0.057);
}
.skt[data-theme="dark"] [class~="hover:bg-white"]:hover {
  background-color: #222224;
}
.skt[data-theme="dark"] [class~="hover:border-[rgba(10,10,14,0.14)]"]:hover {
  border-color: rgba(255, 255, 255, 0.161);
}
.skt[data-theme="dark"] [class~="hover:border-black/20"]:hover {
  border-color: rgba(255, 255, 255, 0.23);
}
.skt[data-theme="dark"] [class~="hover:border-black/25"]:hover {
  border-color: rgba(255, 255, 255, 0.287);
}
.skt[data-theme="dark"] [class~="hover:border-black/30"]:hover {
  border-color: rgba(255, 255, 255, 0.345);
}
.skt[data-theme="dark"] [class~="hover:border-black/[0.12]"]:hover {
  border-color: rgba(255, 255, 255, 0.138);
}
.skt[data-theme="dark"] [class~="hover:border-black/[0.14]"]:hover {
  border-color: rgba(255, 255, 255, 0.161);
}
.skt[data-theme="dark"] [class~="hover:decoration-[#0a0a0a]"]:hover {
  text-decoration-color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="hover:decoration-black/60"]:hover {
  text-decoration-color: rgba(255, 255, 255, 0.69);
}
.skt[data-theme="dark"] [class~="hover:text-[#0a0a0a]"]:hover {
  color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="hover:text-[#0a0a0e]"]:hover {
  color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="placeholder:text-[#6b6b68]"]::placeholder {
  color: #8f8f8a;
}
.skt[data-theme="dark"] [class~="placeholder:text-[#8a8a87]"]::placeholder {
  color: #7c7c77;
}
.skt[data-theme="dark"] [class~="ring-black/[0.06]"] {
  --tw-ring-color: rgba(255, 255, 255, 0.069);
}
.skt[data-theme="dark"] [class~="ring-black/[0.07]"] {
  --tw-ring-color: rgba(255, 255, 255, 0.081);
}
.skt[data-theme="dark"] [class~="ring-white"] {
  --tw-ring-color: #19191b;
}
.skt[data-theme="dark"] [class~="text-[#0a0a0a]"] {
  color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="text-[#0a0a0e]"] {
  color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="text-[#151515]"] {
  color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="text-[#18181b]"] {
  color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="text-[#26262c]"] {
  color: #d6d6d2;
}
.skt[data-theme="dark"] [class~="text-[#27272a]"] {
  color: #d6d6d2;
}
.skt[data-theme="dark"] [class~="text-[#2b2b2a]"] {
  color: #d6d6d2;
}
.skt[data-theme="dark"] [class~="text-[#3a3a38]"] {
  color: #d6d6d2;
}
.skt[data-theme="dark"] [class~="text-[#3d3d3a]"] {
  color: #d6d6d2;
}
.skt[data-theme="dark"] [class~="text-[#3f3f46]"] {
  color: #d6d6d2;
}
.skt[data-theme="dark"] [class~="text-[#52525b]"] {
  color: #a3a39e;
}
.skt[data-theme="dark"] [class~="text-[#5f5f5c]"] {
  color: #a3a39e;
}
.skt[data-theme="dark"] [class~="text-[#5f5f66]"] {
  color: #a3a39e;
}
.skt[data-theme="dark"] [class~="text-[#6b6b68]"] {
  color: #8f8f8a;
}
.skt[data-theme="dark"] [class~="text-[#6b6b74]"] {
  color: #8f8f8a;
}
.skt[data-theme="dark"] [class~="text-[#71717a]"] {
  color: #8f8f8a;
}
.skt[data-theme="dark"] [class~="text-[#85858e]"] {
  color: #7c7c77;
}
.skt[data-theme="dark"] [class~="text-[#8a8a86]"] {
  color: #7c7c77;
}
.skt[data-theme="dark"] [class~="text-[#8a8a87]"] {
  color: #7c7c77;
}
.skt[data-theme="dark"] [class~="text-[#a1a1aa]"] {
  color: #7c7c77;
}
.skt[data-theme="dark"] [class~="text-[#a3a3a0]"] {
  color: #7c7c77;
}
.skt[data-theme="dark"] [class~="text-[#a3a3ab]"] {
  color: #7c7c77;
}
.skt[data-theme="dark"] [class~="text-[#b5b5b2]"] {
  color: #5f5f5c;
}
.skt[data-theme="dark"] [class~="text-[#c9c9ce]"] {
  color: #5f5f5c;
}
.skt[data-theme="dark"] [class~="text-[rgba(10,10,14,0.76)]"] {
  color: rgba(255, 255, 255, 0.96);
}
.skt[data-theme="dark"] [class~="text-black"] {
  color: #f2f2f0;
}
.skt[data-theme="dark"] [class~="text-black/35"] {
  color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 981px) {
  .skt[data-theme="dark"] [class~="min-[981px]:border-black/[0.07]"] {
    border-color: rgba(255, 255, 255, 0.081);
  }
  .skt[data-theme="dark"] [class~="min-[981px]:border-black/[0.14]"] {
    border-color: rgba(255, 255, 255, 0.161);
  }
}

/* ink buttons and pills: a light pill with ink words, as /business draws
   .btn-primary in its dark theme */
.skt[data-theme="dark"]
  [class~="bg-[#0a0a0a]"][class~="text-white"]:not(:has(h2, h3)),
.skt[data-theme="dark"]
  [class~="bg-[#0a0a0a]"][class~="text-white"]:not(:has(h2, h3))
  [class~="text-white"],
.skt[data-theme="dark"]
  [class~="bg-[#0a0a0a]"][class~="text-white"]:not(
    :has(h2, h3)
  )[class~="hover:text-white"]:hover {
  background-color: #f2f2f0;
  color: #0a0a0a;
}
.skt[data-theme="dark"]
  [class~="bg-[#0a0a0a]"][class~="text-white"]:not(:has(h2, h3))
  [class~="text-white"] {
  background-color: transparent;
}
.skt[data-theme="dark"]
  [class~="bg-[#0a0a0a]"][class~="text-white"]:not(
    :has(h2, h3)
  )[class~="hover:bg-[#2b2b2a]"]:hover {
  background-color: #d6d6d2;
}
.skt[data-theme="dark"] .group:hover [class~="group-hover:bg-[#0a0a0a]"] {
  background-color: #f2f2f0;
}
.skt[data-theme="dark"]
  .group:hover
  [class~="group-hover:bg-[#0a0a0a]"][class~="group-hover:text-white"] {
  color: #0a0a0a;
}
.skt[data-theme="dark"]
  [class~="aria-pressed:bg-[#0a0a0a]"][aria-pressed="true"] {
  background-color: #f2f2f0;
}
.skt[data-theme="dark"]
  [class~="aria-pressed:text-white"][aria-pressed="true"] {
  color: #0a0a0a;
}
/* site-dark:end */

/* dark ground: the tinted status tags (Live, Growing, Unread, Open...)
   keep their hue but take its light shade, so they read on dark cards */
.skt[data-theme="dark"]
  span[class~="text-[#166534]"]:not([class~="bg-[#dcfce7]"]) {
  color: #4ade80;
}
.skt[data-theme="dark"] span[class~="text-[#1f57c8]"] {
  color: #8fb4ff;
}
.skt[data-theme="dark"] span[class~="text-[#be123c]"] {
  color: #fb7185;
}
.skt[data-theme="dark"] span[class~="text-[#92400e]"] {
  color: #fbbf24;
}