/* /business, v2 (the Linkme for Business design canvas, converted 2026-10-06).
   Every rule is scoped under .bz2 so nothing reaches the rest of the site.
   Generated by convert.cjs from the canvas, then edited by hand. */
/* Inter, self-hosted: the same files landing-globals.css serves */
@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;
}
/* undo the app's Tailwind preflight for media inside the page; any rule of the design beats this one.
   Scene stages (.bzs-stage) keep preflight: the ported product scenes were built on it. */
.bz2 :where(img, svg, video):not(:where(.bzs-stage *)) {
  display: revert;
  vertical-align: revert;
  max-width: revert;
  height: revert;
}
.bz2 {
  min-height: 100vh;
}
/* the app's global sheets leak two rules into every page: a profile accordion
   ".panel{opacity:0;height:0}" (styles/profile/_profile.scss) and "*{user-select:none}" */
.bz2 .panel {
  opacity: 1;
  height: auto;
}
.bz2 :where(p, h1, h2, h3, h4, li, blockquote, td, th, span) {
  user-select: text;
}

.bz2 {
  --bg: #ffffff;
  --bg-rgb: 255, 255, 255;
  --ink: #0a0a0a;
  --ink2: #2b2b2a;
  --mute: #5f5f5c;
  --mute2: #6b6b68;
  --mute3: #8a8a87;
  /* the third grey for TEXT: #8a8a87 is 3.46:1 on white, so --mute3
     stays for borders and icons and small text uses this (5.35:1) */
  --mute3-text: #6b6b68;
  --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);
  color-scheme: light;
}
.bz2[data-theme="dark"] {
  --bg: #19191b;
  --bg-rgb: 25, 25, 27;
  --ink: #f2f2f0;
  --ink2: #d6d6d2;
  --mute: #a3a39e;
  --mute2: #8f8f8a;
  --mute3: #7c7c77;
  --mute3-text: #8f8f8a;
  --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);
  color-scheme: dark;
}

.bz2 .rebus {
  margin: 0 auto;
  max-width: 960px;
  text-align: center;
  font-size: 64px;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.bz2 .rb-l1,
.bz2 .rb-l2 {
  display: block;
}
.bz2 .rb-av {
  display: inline-block;
  width: 1.26em;
  height: 1.26em;
  vertical-align: -0.27em;
  margin: 0 0.04em 0 0;
}
.bz2 .rb-face {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.bz2 .rb-l2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}
.bz2 .rb-ph {
  grid-area: 1/1;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: rbp 14.4s infinite both;
  animation-delay: var(--rbd, 0s);
}
.bz2 .rb-ph:nth-child(2) {
  --rbd: 3.6s;
}
.bz2 .rb-ph:nth-child(3) {
  --rbd: 7.2s;
}
.bz2 .rb-ph:nth-child(4) {
  --rbd: 10.8s;
}
.bz2 .rb-ic {
  display: inline-block;
  vertical-align: -0.14em;
  margin-left: 0.16em;
}
.bz2 .rb-ic img {
  width: 1.1em;
  height: 1.1em;
  object-fit: contain;
  display: block;
  animation: rbi 14.4s infinite both;
  animation-delay: var(--rbd, 0s);
}
/* One phrase per 3.6 s (1/4 of the loop, calm pass round 1: four
   phrases, each readable for about 3 s). The whole phrase moves as one
   piece, so a frozen frame never shows half a phrase: it rises in and
   sharpens over 0.5 s, holds, then lifts out over 0.29 s and is gone
   just before the next phrase starts, so no frame shows two phrases at
   once and the line is never empty for more than a blink.
   All phrases share one grid cell, so line 2 never changes size. */
@keyframes rbp {
  0% {
    opacity: 0;
    translate: 0 0.28em;
    filter: blur(4px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  1.6% {
    opacity: 1;
  }
  3.5% {
    translate: 0 0;
    filter: blur(0);
  }
  23% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  25% {
    opacity: 0;
    translate: 0 -0.2em;
    filter: blur(3px);
  }
  100% {
    opacity: 0;
    translate: 0 -0.2em;
    filter: blur(3px);
  }
}
/* the icon lands with a small pop as its phrase rises in */
@keyframes rbi {
  0% {
    scale: 0.6;
    rotate: -10deg;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  3.9% {
    scale: 1;
    rotate: 0deg;
  }
  100% {
    scale: 1;
    rotate: 0deg;
  }
}
@media (max-width: 980px) {
  .bz2 .rebus {
    font-size: 30px;
    letter-spacing: -0.04em;
    line-height: 1.15;
  }
  .bz2 .rb-l1 {
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .rb-ph,
  .bz2 .rb-ic img {
    animation: none;
  }
  .bz2 .rb-ph:first-child {
    opacity: 1;
  }
}
/* ---- Stripe-style animated mesh gradient behind the hero ---- */
.bz2 .au-p {
  position: absolute;
  inset: 0;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.bz2 .au-p1 {
  transform: translate(calc(var(--mx, 0) * -46px), calc(var(--my, 0) * -30px));
}
.bz2 .au-p2 {
  transform: translate(calc(var(--mx, 0) * 38px), calc(var(--my, 0) * -24px));
}
.bz2 .au-p3 {
  transform: translate(calc(var(--mx, 0) * -26px), calc(var(--my, 0) * 34px));
}
.bz2 .au-p4 {
  transform: translate(calc(var(--mx, 0) * 52px), calc(var(--my, 0) * 28px));
}
.bz2 .au-p5 {
  transform: translate(calc(var(--mx, 0) * -60px), calc(var(--my, 0) * 22px));
}
.bz2 .au-p6 {
  transform: translate(calc(var(--mx, 0) * 30px), calc(var(--my, 0) * -40px));
}
.bz2 .au-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(150, 190, 255, 0.8) 30%,
    rgba(255, 255, 255, 0) 68%
  );
  filter: blur(24px);
  opacity: var(--co, 0);
  transform: translate(var(--cx, 50vw), var(--cy, 300px));
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.bz2[data-theme="dark"] .au-cursor {
  background: radial-gradient(
    circle,
    rgba(120, 170, 255, 0.55) 0%,
    rgba(124, 92, 255, 0.3) 36%,
    rgba(0, 0, 0, 0) 68%
  );
  mix-blend-mode: normal;
}
@media (hover: none) {
  .bz2 .au-cursor {
    display: none;
  }
  .bz2 .au-p {
    transform: none !important;
  }
}
.bz2 .aurora {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 900px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
.bz2 .aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--bg-rgb), 0.04) 0%,
    rgba(var(--bg-rgb), 0.36) 48%,
    rgba(var(--bg-rgb), 0.88) 82%,
    rgba(var(--bg-rgb), 1) 100%
  );
}
.bz2 .au-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.9;
  will-change: transform;
  transform: translateZ(0);
}
.bz2 .au1 {
  width: 62vw;
  height: 560px;
  left: -14vw;
  top: -260px;
  background: #79b0ff;
  animation: au-a 19s ease-in-out infinite alternate;
}
.bz2 .au2 {
  width: 54vw;
  height: 600px;
  right: -12vw;
  top: -220px;
  background: #b9a6ff;
  animation: au-b 23s ease-in-out infinite alternate;
}
.bz2 .au3 {
  width: 44vw;
  height: 520px;
  left: 28vw;
  top: -40px;
  background: #ffb3a3;
  animation: au-c 21s ease-in-out infinite alternate;
}
.bz2 .au4 {
  width: 46vw;
  height: 480px;
  right: 14vw;
  top: 220px;
  background: #8de2c4;
  animation: au-d 25s ease-in-out infinite alternate;
}
.bz2 .au5 {
  width: 40vw;
  height: 440px;
  left: 4vw;
  top: 300px;
  background: #ffdf8c;
  animation: au-e 27s ease-in-out infinite alternate;
}
.bz2 .au6 {
  width: 36vw;
  height: 420px;
  left: 44vw;
  top: 380px;
  background: #8fd0ff;
  animation: au-f 24s ease-in-out infinite alternate;
}
@keyframes au-a {
  to {
    transform: translate(18vw, 160px) scale(1.18);
  }
}
@keyframes au-b {
  to {
    transform: translate(-16vw, 200px) scale(0.9);
  }
}
@keyframes au-c {
  to {
    transform: translate(-14vw, 220px) scale(1.25);
  }
}
@keyframes au-d {
  to {
    transform: translate(-12vw, -180px) scale(1.12);
  }
}
@keyframes au-e {
  to {
    transform: translate(22vw, -140px) scale(0.92);
  }
}
@keyframes au-f {
  to {
    transform: translate(-20vw, -200px) scale(1.2);
  }
}
.bz2[data-theme="dark"] .au-blob {
  opacity: 0.42;
  filter: blur(90px);
}
.bz2[data-theme="dark"] .au1 {
  background: #2f6fe8;
}
.bz2[data-theme="dark"] .au2 {
  background: #7c5cff;
}
.bz2[data-theme="dark"] .au3 {
  background: #ff6a5c;
}
.bz2[data-theme="dark"] .au4 {
  background: #19c48a;
}
.bz2[data-theme="dark"] .au5 {
  background: #ffc53d;
}
.bz2[data-theme="dark"] .au6 {
  background: #38b6ff;
}
.bz2[data-theme="dark"] .aurora::after {
  background: linear-gradient(
    180deg,
    rgba(var(--bg-rgb), 0.25) 0%,
    rgba(var(--bg-rgb), 0.55) 48%,
    rgba(var(--bg-rgb), 0.92) 82%,
    rgba(var(--bg-rgb), 1) 100%
  );
}
@media (max-width: 980px) {
  .bz2 .aurora {
    height: 720px;
  }
  .bz2 .au-blob {
    filter: blur(56px);
  }
  .bz2 .au1,
  .bz2 .au2,
  .bz2 .au3,
  .bz2 .au4,
  .bz2 .au5,
  .bz2 .au6 {
    width: 120vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .au-blob {
    animation: none;
  }
}

.bz2 .cnt {
  position: relative;
  display: inline-block;
  min-width: 60px;
  text-align: right;
}

.bz2.theming,
.bz2.theming * {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}
/* the dark twins of the logo strip are styled in Hero.tsx (its CSS
   string), so the strip and the rule that swaps them always load together */
.bz2[data-theme="dark"] .tile-dark {
  background: transparent;
}

.bz2[data-theme="dark"] .tbrand img {
  filter: none;
  mix-blend-mode: screen;
}
/* one-ink marks (black or grey) flip to white; they have no colour to lose */
.bz2[data-theme="dark"] .tbrand.tb-mono img {
  filter: invert(1);
}
/* Triple Five's mall logos: the star keeps its colour, the one-ink
   American Dream mark turns white, West Edmonton Mall's type turns white
   while its W keeps its gold */
.bz2[data-theme="dark"] .tf-logo {
  mix-blend-mode: normal;
  filter: none;
}
.bz2[data-theme="dark"] .tf-ad {
  filter: invert(1);
  mix-blend-mode: screen;
}
.bz2[data-theme="dark"] .tf-wem {
  filter: invert(1) hue-rotate(180deg);
}
.bz2[data-theme="dark"] img[style*="brightness(0)"] {
  filter: brightness(0) invert(1) !important;
}

.bz2[data-theme="dark"] .composer {
  border-color: var(--line2);
}
.bz2[data-theme="dark"] .screen {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.bz2 {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  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;
}
.bz2 a {
  color: var(--ink);
  text-decoration: none;
}
.bz2 a:hover {
  color: var(--ink);
}
.bz2,
.bz2 * {
  box-sizing: border-box;
}
.bz2 .rail {
  max-width: 1280px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}
.bz2 .in {
  padding: 0 48px;
}
.bz2 .sec {
  padding: 112px 0;
  border-top: 1px solid var(--line);
}
.bz2 .h1 {
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}
.bz2 .h2 {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.0225em;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
/* a status chip that used to ride the section label ("Pro") now sits
   inline after the headline */
.bz2 .h2 .h2-tag {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 12px;
  position: relative;
  top: -0.12em;
}
.bz2 .h2 .h2-tag > * {
  margin-left: 0;
}
.bz2 .h3 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}
.bz2 .lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--mute);
  margin: 0;
  letter-spacing: -0.01em;
}
.bz2 .body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
}
.bz2 .cap {
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute2);
  margin: 0;
}
.bz2 .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;
}
.bz2 .btn-lg {
  height: 48px;
  padding: 0 22px;
  font-size: 15px;
}
.bz2 .btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.bz2 .btn-primary:hover {
  color: var(--bg);
  background: var(--ink2);
  transform: translateY(-1px);
}

.bz2 .btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 0 12px;
}
.bz2 .btn-ghost:hover {
  color: var(--ink);
}
.bz2 .btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line2);
}
.bz2 .btn-outline:hover {
  color: var(--ink);
  border-color: var(--line3);
}
.bz2 .arrow svg {
  transition: transform 0.2s ease;
}
.bz2 .arrow:hover svg {
  transform: translateX(4px);
}
.bz2 .panel {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.bz2 .card {
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}
.bz2 .card:hover {
  border-color: var(--line3);
  transform: translateY(-2px);
}
.bz2 .screen {
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
}
.bz2 .hr {
  border-top: 1px solid var(--line);
}
/* the small blue caption over a result card's bio (Results.tsx sets it
   inline at 11px #2f6fe8, 4.1:1): the label size and the chip blue */
.bz2:not([data-theme="dark"]) .hr > p.cap {
  font-size: 13px !important;
  color: #1f57c8 !important;
}
.bz2 .g2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}
.bz2 .g3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bz2 .g4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.bz2 .gfaq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 64px;
}
.bz2 .gfoot {
  display: grid;
  grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.bz2 .marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
.bz2 .track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: slide 70s linear infinite;
}
.bz2 .marquee:hover .track,
.bz2 .marquee:focus-within .track {
  animation-play-state: paused;
}
@keyframes slide {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
.bz2 .track {
  gap: 56px;
}
.bz2 .tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  flex: none;
  transition: transform 0.25s ease;
}
.bz2 .tile:hover {
  transform: translateY(-2px);
}
.bz2 .tile img {
  max-height: 46px;
  max-width: 124px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* a mark people do not know on sight (the Mall of America star) prints its
   name beside it, ink in both themes */
.bz2 .tile-named {
  gap: 10px;
}
.bz2 .tile-named img {
  height: 40px;
  max-height: 40px;
}
.bz2 .tile-named span {
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink2);
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 899px) {
  .bz2 .tile-named {
    gap: 8px;
  }
  .bz2 .tile-named img {
    height: 34px;
    max-height: 34px;
  }
  .bz2 .tile-named span {
    font-size: 13px;
    line-height: 15px;
  }
}
/* logos drawn for a dark ground (gold or pale ink) sit on their own ink chip
   so they keep their real colour on the light page */
.bz2 .tile-dark {
  padding: 0 16px;
  border-radius: 14px;
  background: #121212;
}
.bz2 .tbrand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}
.bz2 .tbrand img {
  height: 44px;
  width: 44px;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
/* Triple Five has no logo of its own: the header is its name, then its
   three malls, each shown as a logo with its name (Results.tsx) */
.bz2 .tf-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bz2 .tbrand.tf-title-row {
  min-height: 44px;
}
.bz2 .tf-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  row-gap: 12px;
}
.bz2 .tf-logo {
  display: block;
  flex: none;
  mix-blend-mode: multiply;
}
.bz2 .tf-moa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.bz2 .tf-moa .tf-logo {
  width: 30px;
  height: auto;
}
.bz2 .tf-moa span {
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  color: var(--mute);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.bz2 .tf-ad {
  width: 137px;
  height: 30px;
  object-fit: cover;
  object-position: left center;
}
.bz2 .tf-wem {
  width: 180px;
  height: 32px;
}
.bz2 .blue {
  color: #2f6fe8;
}
.bz2 .nowrap {
  white-space: nowrap;
}
.bz2 .rev {
  direction: rtl;
}
.bz2 .rev > * {
  direction: ltr;
}

.bz2 .chk {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bz2 .chk-dim {
  background: var(--panel3);
}
.bz2 ul.plain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bz2 ul.plain li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.5;
}
.bz2 .bar {
  background: var(--ink);
  border-radius: 3px 3px 0 0;
  width: 100%;
  opacity: 0.85;
}

.bz2 .chip {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--panel3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bz2 .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--mute);
  background: var(--line);
  border: 1px solid var(--line);
}
.bz2 .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink2);
}
.bz2 .k {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 980px) {
  .bz2 .g2,
  .bz2 .g3,
  .bz2 .g4,
  .bz2 .gfaq {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bz2 .gfoot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bz2 .sec {
    padding: 64px 0;
  }
  .bz2 .h1 {
    font-size: 42px;
  }
  .bz2 .h2 {
    font-size: 36px;
    line-height: 40px;
  }
  /* "Someone comments." keeps one line on phones (34px at 390, a touch
     smaller on narrower phones), so "Someone" never sits alone */
  .bz2 #automations .h2 {
    font-size: min(36px, calc((100vw - 40px) / 10.3));
    line-height: 1.12;
  }
  .bz2 .in {
    padding: 0 20px;
  }
  .bz2 .rev {
    direction: ltr;
  }
  .bz2 .hide-m {
    display: none;
  }
}
.bz2 .chat {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);
  position: relative;
}
.bz2 .chat svg g {
  transition: transform 0.25s ease;
}
.bz2 .app {
  min-height: 680px;
  border-radius: 18px;
}
.bz2 .side {
  width: 232px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bz2 .ws {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 4px 6px;
}
.bz2 .ws img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 4px;
}
.bz2 .ws svg,
.bz2 .me svg {
  color: var(--mute3);
}
.bz2 .seg {
  display: inline-flex;
  background: var(--panel3);
  border-radius: 999px;
  padding: 3px;
  font-size: 13px;
  color: var(--mute2);
  align-self: flex-start;
}
.bz2 .seg span {
  padding: 5px 12px;
  border-radius: 999px;
}
.bz2 .seg .on {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bz2 .me {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}
.bz2 .main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.bz2 .topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 18px 28px 0;
}
.bz2 .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0 8px;
}
.bz2 .thead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
}
.bz2 .composer {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (max-width: 980px) {
  .bz2 .app {
    min-height: 0;
  }
  .bz2 .side {
    display: none;
  }
  .bz2 .topbar {
    flex-wrap: wrap;
    align-items: center;
  }
  .bz2 .hero-tight {
    padding-top: 40px !important;
  }
  .bz2 .topbar {
    padding: 16px 16px 0;
  }

  .bz2 .composer {
    gap: 20px;
  }
  .bz2 .empty {
    padding-top: 16px;
  }
}
.bz2 .bubble {
  max-width: 72%;
  background: var(--panel3);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
}
.bz2 .typing {
  display: inline-flex;
  gap: 5px;
  padding: 14px 16px;
  background: var(--panel2);
  border-radius: 18px;
  border: 1px solid var(--line);
}
.bz2 .typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute);
  animation: blink 1.2s infinite ease-in-out;
}
.bz2 .typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.bz2 .typing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.bz2 .fade {
  animation: fadeup 0.45s ease both;
}
@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.bz2 .carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.bz2 .carousel::-webkit-scrollbar {
  display: none;
}
.bz2 .slide {
  flex: none;
  width: 168px;
  height: 168px;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  color: #1f3d2b;
}
.bz2 .phone {
  position: relative;
  width: 150px;
  height: 267px;
  border-radius: 20px;
  overflow: hidden;
  background: #eaf3f5;
  border: 0;
  flex: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
@media (max-width: 980px) {
  .bz2 .bubble {
    max-width: 88%;
  }
}

.bz2 .slide {
  position: relative;
  overflow: hidden;
  width: 232px;
  height: 232px;
  border-radius: 16px;
  flex: none;
  font-family: "Inter", sans-serif;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.bz2 .bottle {
  position: absolute;
  width: auto;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
}
.bz2 .b1 {
  height: 230px;
  right: -26px;
  bottom: -34px;
  transform: rotate(-8deg);
}

/* the hero chat panel is laid out at its full world width and scaled
   down once the slot is measured; until then (first paint, before
   hydration) it is wider than a 1024 window. Clip the hero sideways
   only: the section is the full window width, so nothing visible is
   cut, and the page no longer scrolls sideways (SWEEP: 65px at 1024) */
.bz2 [data-scene="hero"] {
  overflow-x: clip;
}

.bz2 .pressbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 20px 16px;
  border-bottom: 0;
  font-size: 14px;
  color: var(--ink2);
  background: transparent;
  position: relative;
  z-index: 2;
  transition: color 0.2s ease;
}
.bz2 .pressbar:hover {
  color: var(--ink);
}
.bz2 .pressbar svg {
  transition: transform 0.2s ease;
}
.bz2 .pressbar:hover svg {
  transform: translateX(4px);
}
.bz2 .presstag {
  flex: none;
  white-space: nowrap;
  background: rgba(47, 111, 232, 0.14);
  color: #1f57c8;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47, 111, 232, 0.3);
}

@media (max-width: 980px) {
  .bz2 .pressbar {
    font-size: 13px;
    padding: 10px 16px;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .bz2 .pressbar {
    gap: 8px;
    padding: 10px 12px;
    line-height: 1.4;
  }
  .bz2 .pressbar svg {
    flex: none;
  }
}

.bz2 .dotn {
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: #8a8a86;
  box-shadow: none !important;
}
.bz2 .dotn.near {
  --o: 0.9;
}
.bz2 .dotn.far {
  --o: 0.4;
}

.bz2 .next {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  padding-left: 42px;
}

@media (max-width: 980px) {
  .bz2 .next {
    padding-left: 0;
  }
}

.bz2 .chat button.act {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.bz2 .chat button.act:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
.bz2 .modal {
  position: relative;
  pointer-events: auto;
  width: min(420px, 100%);
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 26px;
  z-index: 6;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  animation: fadeup 0.3s ease both;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ---- Scene kit (2026-10-07): the feature animations ----
   One block for every feature scene (modules/business/v2/scenes). Scenes
   write no global CSS: Tailwind utilities and inline styles inside the
   stage, these rules around it. */

/* the section head of a product chapter: the headline leads at
   medium weight, the lead line sits under it, bullets under that. No
   label above it (Kedem 2026-10-12, after tryprofound.com). The
   .bzs-mirror flag stays on the markup; it no longer moves the head. */
.bz2 .bzs-theatre {
  display: flex;
  flex-direction: column;
  row-gap: 0;
  margin-bottom: 32px;
}
.bz2 .bzs-theatre-head,
.bz2 .bzs-theatre-body {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  min-width: 0;
}
.bz2 .bzs-theatre .h2 {
  max-width: 720px;
}
.bz2 .bzs-theatre-body {
  margin-top: 16px;
  max-width: 560px;
}
@media (min-width: 1024px) {
  .bz2 .bzs-theatre {
    margin-bottom: 40px;
  }
}

/* the slot: stage, optional controls, optional disclosure. The stage box
   holds its final aspect ratio from SSR on (SceneSlot sets --ar-d/--ar-m
   and the numeric --ar-d-n/--ar-m-n). Below 1024px it is capped so the
   whole phone world fits the visible band under the sticky header. */
.bz2 .bzs-slot {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: min(
    560px,
    max(
      340px,
      calc((100svh - var(--bzs-phone-band, 76px)) * var(--ar-m-n, 0.65))
    )
  );
}
@media (min-width: 1024px) {
  .bz2 .bzs-slot {
    max-width: calc((100vh - var(--bzs-desk-band, 160px)) * var(--ar-d-n, 1.4));
  }
}
.bz2 .bzs-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar-m, 3 / 4);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  /* the old page's scene text environment (measured: Inter 18px/1.4,
     normal tracking, #101014, default smoothing) */
  font-family:
    var(--font-inter),
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: normal;
  font-weight: 400;
  color: #101014;
  text-align: left;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  color-scheme: light;
  /* the page's own tokens, pinned light: page rules that reach inside
     (.bz2 a) resolve to light ink in both themes */
  --bg: #ffffff;
  --bg-rgb: 255, 255, 255;
  --ink: #0a0a0a;
  --ink2: #2b2b2a;
  --mute: #5f5f5c;
  --mute2: #6b6b68;
  --mute3: #8a8a87;
  /* the third grey for TEXT: #8a8a87 is 3.46:1 on white, so --mute3
     stays for borders and icons and small text uses this (5.35:1) */
  --mute3-text: #6b6b68;
  --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 app's 46 light tokens (styles/globals.scss :root): html.dark
     follows the OS and would turn embedded product UI dark */
  --background: #fafafa;
  --foreground: #18181b;
  --card: #ffffff;
  --card-profile: #ffffff;
  --card-foreground: #18181b;
  --popover: #ffffff;
  --popover-foreground: #18181b;
  --popover-divider: #e4e4e780;
  --border: #e4e4e7;
  --input: #ffffff;
  --input-border: #a1a1aa;
  --input-placeholder: #71717a;
  --muted: #fafafa;
  --muted-foreground: #71717a;
  --accent: #18181b;
  --accent-foreground: #fafafa;
  --accent-overlay: #27272a;
  --accent-selected-border: #4062ff66;
  --accent-hover-bg: #8351dd0d;
  --primary: #4062ff;
  --primary-foreground: #fafafa;
  --secondary: #a1a1aa;
  --secondary-foreground: #e4e4e7;
  --secondary-orange-500: #ff7518;
  --success: #008833;
  --success-foreground: #ffffff;
  --destructive: #ec008c;
  --destructive-foreground: #ffffff;
  --ring: #4062ff99;
  --success-ring: #00883399;
  --destructive-ring: #ec008c99;
  --sidebar: #ffffff;
  --sidebar-foreground: #18181b;
  --sidebar-border: #e4e4e7;
  --sidebar-accent: #e4e4e780;
  --sidebar-accent-foreground: #18181b;
  --card-scrim-100: #ffffff;
  --card-scrim-30: #ffffff4d;
  --card-scrim-0: #ffffff00;
  --tw-ring-color: #4062ff99;
  --gradient-linkme-brand: linear-gradient(
    227deg,
    #ec008c 3.4%,
    #fc8b67 69.33%,
    #ffd46d 97.87%
  );
  --gradient-linkme-secondary: linear-gradient(
    227deg,
    #4062ff 3.4%,
    #9285ff 53.36%,
    #c29aff 97.87%
  );
  --gradient-linkme-plus: linear-gradient(
    227deg,
    #ae2eb5 3.4%,
    #ec008c 41.19%,
    #ffd46d 97.87%
  );
  --gradient-linkme-pro: linear-gradient(
    226deg,
    #09b0c7 4.41%,
    #66d380 53.02%,
    #baf242 96.33%
  );
  --gradient-linkme-agency: linear-gradient(
    31deg,
    #f2b8ff 0%,
    #cf3fff 39.62%,
    #512aff 100%
  );
  --gradient-linkme-business: linear-gradient(
    227deg,
    #0060ff 3.4%,
    #2da3f3 53.47%,
    #56dfe8 97.87%
  );
}
@media (min-width: 1024px) {
  .bz2 .bzs-stage {
    aspect-ratio: var(--ar-d, 7 / 5);
  }
}
/* the CSS-switched twins: both boxes render, one shows */
.bz2 .bzs-twin {
  position: absolute;
  inset: 0;
}
.bz2 .bzs-twin-d {
  display: none;
}
@media (min-width: 1024px) {
  .bz2 .bzs-twin-d {
    display: block;
  }
  .bz2 .bzs-twin-m {
    display: none;
  }
}
/* dark theme: product UI stays light, so a stage without a frame
   becomes a white island panel (literal colours: the stage re-declares
   the tokens). Dashboard stages paint their own canvas, so they never
   get the island (DIRECTION.md I-3, below). */
.bz2[data-theme="dark"] .bzs-stage:not([data-frame]) {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* the dashboard window (defineScene frame: "window", DIRECTION.md 1.1,
   I-2, I-3). From 1024px the stage is the app window: radius 22, a
   hairline rim and a soft lift. Box shadows are not clipped by the
   stage's own overflow. The world's root node paints the #fafafa canvas,
   so the stage itself stays transparent (the page ground). In the
   page's dark mode the product stays light and becomes a lit screen in a
   dark room: a brighter rim, a deep shadow and a static glow behind it.
   The phone twin has no frame: its shell paints its own card. */
.bz2 .bzs-slot[data-frame="window"] {
  isolation: isolate;
}
.bz2[data-theme="dark"] .bzs-stage[data-frame="window"] {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (min-width: 1024px) {
  .bz2 .bzs-stage[data-frame="window"],
  .bz2[data-theme="dark"] .bzs-stage[data-frame="window"] {
    border-radius: 22px;
  }
  .bz2 .bzs-stage[data-frame="window"] {
    box-shadow:
      0 0 0 1px rgba(16, 16, 20, 0.06),
      0 1px 2px rgba(16, 16, 20, 0.04),
      0 14px 34px -10px rgba(16, 16, 20, 0.12),
      0 44px 90px -30px rgba(16, 16, 20, 0.18);
  }
  .bz2[data-theme="dark"] .bzs-stage[data-frame="window"] {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 30px 90px rgba(0, 0, 0, 0.65);
  }
  /* the glow: two blurred washes, blue left of centre and pink right,
     behind the stage and never animated */
  .bz2[data-theme="dark"] .bzs-slot[data-frame="window"]::before {
    content: "";
    position: absolute;
    inset: 80px 80px 150px;
    z-index: -1;
    background:
      radial-gradient(
        50% 60% at 30% 50%,
        rgba(64, 98, 255, 0.22),
        transparent 70%
      ),
      radial-gradient(
        50% 60% at 70% 50%,
        rgba(236, 0, 140, 0.14),
        transparent 70%
      );
    filter: blur(30px);
    transform: scale(1.12);
    pointer-events: none;
  }
}

/* controls under the stage (case chips, replay); never inside it */
.bz2 .bzs-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: var(--bzs-controls-h, 40px);
  margin-top: 16px;
}
.bz2 .bzs-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--mute);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.bz2 .bzs-chip:hover {
  color: var(--ink);
  border-color: var(--line3);
}
.bz2 .bzs-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.bz2 .bzs-chip:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
/* DM Automations brand chips (2026-10-13): avatar, what the DM sends,
   how it fires. One row on desktop, a 2 x 2 grid on phones. */
.bz2 .bzs-controls:has(.bzs-chip--case) {
  --bzs-controls-h: 52px;
}
.bz2 .bzs-casechips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.bz2 .bzs-chip.bzs-chip--case {
  display: inline-grid;
  grid-template-columns: 28px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  align-content: center;
  height: auto;
  min-height: 52px;
  padding: 8px 16px 8px 8px;
  border-radius: 16px;
  text-align: left;
}
.bz2 .bzs-chip--case img {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  /* a hairline so a dark avatar (LIV) never melts into a dark chip */
  box-shadow: 0 0 0 1px var(--line2);
}
.bz2[data-theme="dark"] .bzs-chip--case img {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.bz2 .bzs-chip-a {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--ink);
}
.bz2 .bzs-chip-b {
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  color: var(--mute);
}
.bz2 .bzs-chip--case[aria-pressed="true"] .bzs-chip-a,
.bz2 .bzs-chip--case[aria-pressed="true"] .bzs-chip-b {
  color: var(--bg);
}
.bz2 .bzs-chip--case[aria-pressed="true"] .bzs-chip-b {
  opacity: 0.75;
}
@media (max-width: 767px) {
  .bz2 .bzs-controls:has(.bzs-chip--case) {
    display: block;
    --bzs-controls-h: 120px;
  }
  .bz2 .bzs-casechips {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* every row as tall as the tallest, so the grid stays even */
    grid-auto-rows: 1fr;
  }
  .bz2 .bzs-chip.bzs-chip--case {
    width: 100%;
    min-height: 56px;
    padding: 8px 10px 8px 8px;
    column-gap: 8px;
  }
  .bz2 .bzs-chip--case:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* the film switch (kit/SceneSwitch.tsx, 2026-10-18): one section, two
   or more films, case-chip buttons under the stage to flip between
   them. Only the picked film shows. Its buttons are server rendered,
   so the row reserves no height. An old section id lands on the
   section through an anchor at its top. */
.bz2 .bzs-film[hidden] {
  display: none;
}
.bz2 .bzs-controls:has(.bzs-filmchips) {
  --bzs-controls-h: 0px;
}
/* a film that draws its own case chips (DM Automations): its chips and
   the other films' buttons make one row, the film buttons last */
.bz2 .bzs-filmchips--join,
.bz2 .bzs-controls:has(.bzs-filmchips--join) > .bzs-casechips {
  display: contents;
}
.bz2 .bzs-filmchips--join > .bzs-chip {
  order: 1;
}
.bz2 .bzs-controls:has(.bzs-filmchips--join) {
  --bzs-controls-h: 52px;
}
.bz2 .bzs-sec:has(> .bzs-anchor) {
  position: relative;
}
.bz2 .bzs-anchor {
  position: absolute;
  top: 0;
}
@media (max-width: 767px) {
  .bz2 .bzs-controls:has(.bzs-filmchips) {
    --bzs-controls-h: 0px;
  }
  /* two films: one full-width button each, so a label reads on one line */
  .bz2 .bzs-filmchips {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  /* a scene's own chips with film buttons: its 2 x 2 grid, then each
     film button full width */
  .bz2 .bzs-controls:has(.bzs-filmchips--join) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
    --bzs-controls-h: 0px;
  }
  .bz2 .bzs-filmchips--mixed {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
  }
  .bz2 .bzs-filmchips--join > .bzs-chip,
  .bz2 .bzs-filmchips--mixed > .bzs-chip:not([data-case]) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .bz2 .bz-biz .bzs-switch,
  .bz2 .bz-biz .bzs-film {
    display: contents;
  }
  .bz2 .bz-biz .bzs-film[hidden] {
    display: none;
  }
}
.bz2 .bzs-cap {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  text-wrap: balance;
}
/* the case tag above a stage (DIRECTION.md I-2): the brand doing the
   job, page type, never inside the product window */
.bz2 .bzs-case {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 2px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}
.bz2 .bzs-case img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 1px var(--line2);
}
.bz2 .bzs-case b {
  font-weight: 600;
}
.bz2 .bzs-case span {
  color: var(--mute);
  min-width: 0;
}
.bz2 .bzs-case .bzs-case-job {
  color: var(--ink2);
}

/* ---- /business on phones (round 1, scoped to the page's main.bz-biz):
   the picture comes first. At 480px and under the copy row and the slot
   open up (display: contents) so the order is label and headline, a
   short lead, the case tag on one line, the stage edge to edge at world
   scale 1 (a 390 world on a 390 screen, so 11px reads as 11px), the
   chips, the caption, then the three bullets, the CTA line and Use it
   for. ---- */
@media (max-width: 480px) {
  .bz2 .bz-biz .bzs-sec > .in {
    display: flex;
    flex-direction: column;
  }
  .bz2 .bz-biz .bzs-theatre,
  .bz2 .bz-biz .bzs-theatre-body,
  .bz2 .bz-biz .bzs-slot {
    display: contents;
  }
  .bz2 .bz-biz .bzs-theatre-head {
    order: 0;
    margin-bottom: 16px;
  }
  .bz2 .bz-biz .bzs-theatre-body > .lead {
    order: 1;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 22px;
  }
  .bz2 .bz-biz .bzs-slot > .bzs-case,
  .bz2 .bz-biz .bzs-slot > .bzs-cases {
    order: 2;
    margin-bottom: 12px;
  }
  .bz2 .bz-biz .bzs-slot > .bzs-stage {
    order: 3;
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
  }
  .bz2 .bz-biz .bzs-slot > .bzs-controls {
    order: 4;
  }
  .bz2 .bz-biz .bzs-slot > .bzs-cap {
    order: 5;
  }
  .bz2 .bz-biz .bzs-theatre-body > ul.plain,
  .bz2 .bz-biz .bzs-theatre-body > :not(.lead) {
    order: 6;
    margin-top: 24px;
  }
  .bz2 .bz-biz .bzs-slot > .bzs-cta-row {
    order: 7;
    margin-top: 20px;
  }
  .bz2 .bz-biz .bzs-slot > .bzs-sr {
    order: 8;
  }
  .bz2 .bz-biz .bzs-uses {
    order: 9;
  }
  /* the case tag: the job only, flowing as text so it wraps instead of
     clipping, with the pill inline at its end (never alone on a line,
     never cut: judges r0) */
  .bz2 .bz-biz .bzs-case {
    display: block;
    min-width: 0;
  }
  .bz2 .bz-biz .bzs-case img {
    display: inline-block;
    vertical-align: -7px;
    margin-right: 7px;
  }
  .bz2 .bz-biz .bzs-case b {
    margin-right: 6px;
  }
  .bz2 .bz-biz .bzs-case .bzs-case-kind {
    display: none;
  }
}

/* the closer (FinalCta.tsx): just the words (Kedem 2026-10-29: "remove
   the colours and just leave the word"), the big ink headline with Link's
   face inside it and the black Book a demo pill, on the page's white */
.bz2 .bzf-sec {
  padding: 96px 0 112px;
}
.bz2 .bzf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 32px 32px 24px;
  text-align: center;
}
/* one line (Kedem 2026-10-29: "make this one line not 2"): the line is
   about 21 times its font size, so the size follows the width below the
   1440 layout. Phones break it after "social." (.bzf-br) so the words
   stay big enough to read. */
.bz2 #start .bzf-card .h2 {
  margin: 0;
  font-size: min(72px, calc((100vw - 96px) / 21.6));
  line-height: 1.04;
  white-space: nowrap;
}
/* the letters in the Linkme gradient, deepened to read on white (Kedem
   2026-11-04: every blue accent in the logo gradient) */
.bz2 #start .bzf-ink {
  background: linear-gradient(100deg, #ec008c 0%, #e8553a 55%, #c97a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  color: transparent;
}
@media (max-width: 980px) {
  .bz2 .bzf-sec {
    padding: 56px 0 72px;
  }
  .bz2 .bzf-card {
    gap: 28px;
    padding: 24px 16px 16px;
  }
  .bz2 #start .bzf-card .h2 {
    font-size: min(64px, calc((100vw - 64px) / 10.8));
    line-height: 1.08;
  }
}
.bz2 #start .bzf-br {
  display: none;
}
@media (max-width: 980px) {
  .bz2 #start .bzf-br {
    display: inline;
  }
}

/* ---- /business on phones (mobile pass 2026-10-15, scoped to main.bz-biz,
   nothing here reaches 981px and up) ---- */
@media (max-width: 980px) {
  /* bigger tap areas for the quiet text links, same look: the box grows
     9px above and below and the margins give it back; the underline moves
     from the border to a 1px background line at the same spot */
  .bz2 .bz-biz .bzs-cta-row > .bzs-explore,
  .bz2 .bz-biz .bzs-cta-row > .bzs-cta {
    padding-top: 9px;
    padding-bottom: 11px;
    margin-top: -9px;
    margin-bottom: -9px;
    border-bottom-width: 0;
    background: no-repeat left 0 bottom 9px / 100% 1px;
  }
  .bz2 .bz-biz .bzs-cta-row > .bzs-cta {
    background-image: linear-gradient(var(--line3), var(--line3));
  }
  .bz2 .bz-biz .bzs-cta-row > .bzs-cta:hover {
    background-image: linear-gradient(var(--ink), var(--ink));
  }
  .bz2 .bz-biz .bzs-cta-row > .bzs-explore:hover {
    background-image: linear-gradient(var(--line3), var(--line3));
  }
  /* the hero link and the Enterprise card link grow upward into empty
     space only (nothing to tap there), so the underline stays put */
  .bz2 .bz-biz .bzh-under .bzh-ai > a {
    padding-top: 24px;
  }
  .bz2 .bz-biz .bzp-more {
    padding-top: 21px;
    margin-top: -21px;
  }
}
@media (max-width: 480px) {
  /* the first hero line ("Meet Link, AI that") never wraps; under 354px
     the 34px floor made it wider than the screen, so it scales down */
  .bz2 .bz-biz .bzh-meet .rebus {
    font-size: min(34px, 9.6vw);
  }
}

/* the CTA line under every stage (I-8): one line, ink, no button
   chrome; right aligned from 1024px, left on phones */
.bz2 .bzs-cta-row {
  display: flex;
  justify-content: flex-start;
  margin: 14px 0 0;
}
.bz2 .bzs-cta {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line3);
  padding-bottom: 1px;
  transition:
    border-color 0.2s ease,
    column-gap 0.2s ease;
}
.bz2 .bzs-cta:hover {
  border-color: var(--ink);
  column-gap: 9px;
}
.bz2 .bzs-cta:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 3px;
}
@media (min-width: 1024px) {
  .bz2 .bzs-cta-row {
    justify-content: flex-end;
  }
}
.bz2 .bzs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- v3 (2026-10-08): driven case tags, Explore, Use it for ---- */

/* several case tags in one cell: one shows, the cell keeps the tallest */
.bz2 .bzs-cases {
  display: grid;
  margin: 0 0 14px;
}
.bz2 .bzs-cases > .bzs-case {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
}
.bz2 .bzs-cases > .bzs-case[data-show] {
  visibility: visible;
}

/* Explore <product>, the quiet link before the CTA */
.bz2 .bzs-cta-row {
  align-items: center;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 8px;
}
.bz2 .bzs-explore {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.bz2 .bzs-explore:hover {
  color: var(--ink);
  border-color: var(--line3);
}
.bz2 .bzs-explore:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 3px;
}
/* the kit's quiet text links on phones (mobile pass follow-up 2026-10-15):
   Explore and the CTA line are 22px tall; a clear layer makes each tap
   at least 40px tall, centred on it. Nothing moves and nothing paints.
   The layer only reaches as far as 40px, so a link already padded to
   40px gains nothing. :where keeps it at zero weight, so every page's
   own tap rule still wins. Nothing here reaches 981px. (The 32px chips
   are left to each page: many of their rows scroll sideways, and a layer
   reaching past a chip there makes the row scroll up and down.) */
@media (max-width: 980px) {
  :where(.bz2) :where(.bzs-cta, .bzs-explore) {
    position: relative;
  }
  :where(.bz2) :where(.bzs-cta, .bzs-explore)::after {
    content: "";
    position: absolute;
    top: min(0px, calc(50% - 20px));
    bottom: min(0px, calc(50% - 20px));
    left: min(0px, calc(50% - 20px));
    right: min(0px, calc(50% - 20px));
  }
}

/* Use it for: an unboxed hairline list under the scene, a footnote to it
   rather than a second card grid (judge round 1). Four across from
   1024px, two by two below; the customer's avatar leads, the recipe is
   the line that reads. */
.bz2 .bzs-uses {
  margin-top: 44px;
}
.bz2 .bzs-uses-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--mute);
}
.bz2 .bzs-uses-t {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--mute);
}
.bz2 .bzs-uses-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 4px;
}
@media (min-width: 1024px) {
  .bz2 .bzs-uses-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
  }
}
.bz2 .bzs-uses-grid > li {
  min-width: 0;
  display: flex;
}
.bz2 .bzs-use {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
  padding: 16px 0 14px;
  border-top: 1px solid var(--line2);
  color: var(--ink);
  text-decoration: none;
}
.bz2 .bzs-use:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 4px;
  border-radius: 4px;
}
.bz2 .bzs-use-avs {
  display: flex;
  flex-direction: column;
  padding-top: 1px;
}
.bz2 .bzs-use-avs img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 2.5px var(--line2);
}
.bz2 .bzs-use-avs img + img {
  margin-top: -10px;
}
.bz2 .bzs-use-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bz2 .bzs-use-ind {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--mute);
}
.bz2 .bzs-use-r {
  display: block;
  margin: 4px 0 6px;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.bz2 .bzs-use-who {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--mute);
}
.bz2 .bzs-use-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bz2 .bzs-use-go {
  flex: none;
  opacity: 0;
  transform: translateX(-2px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.bz2 .bzs-use:hover .bzs-use-r {
  text-decoration: underline;
  text-decoration-color: var(--line3);
  text-underline-offset: 3px;
}
.bz2 .bzs-use:hover .bzs-use-go {
  opacity: 0.6;
  transform: translateX(0);
}
@media (max-width: 1023px) {
  .bz2 .bzs-uses {
    margin-top: 32px;
  }
  .bz2 .bzs-use {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 10px;
    padding: 14px 0 12px;
  }
  .bz2 .bzs-use-avs img {
    width: 24px;
    height: 24px;
  }
  .bz2 .bzs-use-r {
    font-size: 14px;
    line-height: 19px;
  }
  .bz2 .bzs-use-go {
    display: none;
  }
}

/* ---- #enterprise (sections/Enterprise.tsx): the theatre row, the
   Organization stage (scenes/enterprise), what the account includes
   with an honest status each, and the groups already running on
   Linkme, every page a live link. ---- */
.bz2 .ent-cta {
  margin: 4px 0 0;
}
/* the case line sits on the stage's own width (SceneSlot's max-width for
   this scene: 1200 x 680 desktop, 390 x 640 phone) */
.bz2 .ent-case {
  max-width: min(
    560px,
    max(340px, calc((100svh - var(--bzs-phone-band, 76px)) * 0.6094))
  );
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .bz2 .ent-case {
    max-width: calc((100vh - var(--bzs-desk-band, 160px)) * 1.7647);
  }
}
.bz2 .ent-marks {
  display: inline-flex;
}
.bz2 .ent-marks img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  box-shadow:
    0 0 0 1.5px var(--bg),
    0 0 0 2px var(--line2);
}
.bz2 .ent-marks img + img {
  margin-left: -6px;
}

/* status tags: one wording site wide (Live, Included) */
.bz2 .ent-tag {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex: none;
}
.bz2 .ent-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.bz2 .ent-live {
  color: #0f7a3c;
  background: rgba(16, 179, 84, 0.1);
}
.bz2 .ent-included {
  color: var(--ink2);
  background: var(--panel2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.bz2[data-theme="dark"] .ent-live {
  color: #5fd38f;
  background: rgba(16, 179, 84, 0.16);
}

/* what the account includes: five hairline columns, two on tablets,
   one on phones */
.bz2 .ent-incl {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line2);
}
.bz2 .ent-incl > li {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  min-width: 0;
  padding: 22px 22px 4px 0;
}
.bz2 .ent-incl > li + li {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.bz2 .ent-incl-top {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  row-gap: 12px;
}
.bz2 .ent-incl h3 {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bz2 .ent-incl p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
}
@media (max-width: 1099px) {
  .bz2 .ent-incl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0;
  }
  .bz2 .ent-incl > li,
  .bz2 .ent-incl > li + li {
    padding: 20px 20px 20px 0;
    border-left: 0;
    border-top: 1px solid var(--line2);
  }
  .bz2 .ent-incl > li:nth-child(2n) {
    padding-left: 20px;
    border-left: 1px solid var(--line);
  }
  .bz2 .ent-incl > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599px) {
  .bz2 .ent-incl {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }
  .bz2 .ent-incl > li,
  .bz2 .ent-incl > li + li,
  .bz2 .ent-incl > li:nth-child(2n) {
    padding: 18px 0;
    border-left: 0;
  }
}

/* the groups already running on Linkme: a ledger, one row per group:
   who, their live pages, their followers */
.bz2 .ent-proof {
  margin-top: 72px;
}
.bz2 .ent-proof-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line2);
}
.bz2 .ent-proof-head .h3 {
  margin: 0;
}
.bz2 .ent-proof-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute);
}
.bz2 .ent-orgs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bz2 .ent-org {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  row-gap: 18px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.bz2 .ent-org-id h4 {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bz2 .ent-org-id p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mute);
}
.bz2 .ent-org-id {
  grid-column: 1;
  grid-row: 1;
}
.bz2 .ent-org-pages {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}
.bz2 .ent-org-pages ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.bz2 .ent-page {
  display: flex;
  align-items: center;
  column-gap: 10px;
  height: 100%;
  box-sizing: border-box;
  padding: 8px 12px 8px 8px;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line2);
  color: var(--ink);
  text-decoration: none;
  transition:
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.bz2 .ent-page:hover {
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line3);
}
.bz2 .ent-page:focus-visible,
.bz2 .ent-org-note a:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
.bz2 .ent-page img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.bz2 .ent-page-txt {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.bz2 .ent-page-txt b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.bz2 .ent-page-txt > span {
  font-size: 13px;
  line-height: 16px;
  color: var(--mute);
  white-space: nowrap;
}
.bz2 .ent-out {
  flex: none;
  color: var(--mute3);
}
.bz2 .ent-page .ent-out {
  align-self: flex-start;
  margin-top: 2px;
}
.bz2 .ent-num {
  font-variant-numeric: tabular-nums;
}
.bz2 .ent-org-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mute);
}
.bz2 .ent-org-note a {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line3);
  transition: border-color 0.2s ease;
}
.bz2 .ent-org-note a:hover {
  border-color: var(--ink);
}
.bz2 .ent-org-sum {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  row-gap: 2px;
}
.bz2 .ent-org-sum b {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.bz2 .ent-org-sum span {
  font-size: 13px;
  line-height: 1.4;
  color: var(--mute);
}
@media (max-width: 1099px) {
  .bz2 .ent-org {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
  }
  .bz2 .ent-org-pages {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .bz2 .ent-org-sum {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-end;
    text-align: right;
  }
  .bz2 .ent-org-pages ul {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .bz2 .ent-org-sum b {
    font-size: 24px;
  }
}
@media (max-width: 599px) {
  .bz2 .ent-proof {
    margin-top: 56px;
  }
  .bz2 .ent-org {
    column-gap: 16px;
    padding: 20px 0;
  }
  .bz2 .ent-org-sum b {
    font-size: 22px;
  }
  .bz2 .ent-org-pages ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bz2 .ent-page {
    column-gap: 8px;
    padding: 8px 8px 8px 8px;
    border-radius: 12px;
  }
  .bz2 .ent-page img {
    width: 28px;
    height: 28px;
  }
  .bz2 .ent-page-txt b {
    font-size: 13px;
  }
  .bz2 .ent-page .ent-out {
    display: none;
  }
}

/* The shared SiteFooter (modules/landing/components/SiteFooter) is white;
   in the page's dark theme it takes the page tokens. */
.bz2[data-theme="dark"] .bzf-site footer {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line);
}
.bz2[data-theme="dark"] .bzf-site footer [class*="border-"] {
  border-color: var(--line);
}
.bz2[data-theme="dark"] .bzf-site footer a,
.bz2[data-theme="dark"] .bzf-site footer p {
  color: var(--mute);
}
.bz2[data-theme="dark"] .bzf-site footer a:hover,
.bz2[data-theme="dark"] .bzf-site footer .font-medium {
  color: var(--ink) !important;
}
.bz2[data-theme="dark"] .bzf-site footer img {
  filter: invert(1);
}

/* ---- #rise: "Link does the work of an entire social media team"
   (sections/Rise.tsx), ported from the static linkme-business-site build
   on 2026-10-13. The section pins for about two and a half screens while
   the script lights everything with a data-r (.is-on) as the scroll steps
   past it: the network's hairlines and nodes, the words, the four corner
   cards and Book a demo. The network spans the whole viewport, past the
   rail (--rise-vw, written by the script); the halo keeps it soft behind
   the words. .is-idle (off screen) pauses every loop. */
.bz2 .rise-outer {
  position: relative;
  height: 260svh;
  background: var(--bg);
}
.bz2 .rise-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.bz2 .rise-constel {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--rise-vw, 100%);
  height: 100%;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
/* the page colour over the network's top and bottom edges */
.bz2 .rise-fade {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--rise-vw, 100%);
  height: 100%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg) 0, rgba(var(--bg-rgb), 0) 140px),
    linear-gradient(0deg, var(--bg) 0, rgba(var(--bg-rgb), 0) 140px);
}
.bz2 .rise-grp {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.bz2 .rise-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bz2 .rise-ed {
  stroke: var(--line2);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.9s ease;
  vector-effect: non-scaling-stroke;
}
.bz2 .rise-nd {
  --o: 1;
  --f: none;
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.3);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  animation-name: rise-bob;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  backface-visibility: hidden;
}
.bz2 .rise-nd.is-near {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 0 14px rgba(0, 0, 0, 0.08);
}
.bz2 .rise-nd.is-mid {
  --o: 0.7;
}
.bz2 .rise-nd.is-far {
  --o: 0.42;
  --f: blur(1.2px);
}
.bz2 .rise-dot {
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: #8a8a86;
  box-shadow: none !important;
}
.bz2 .rise-dot.is-near {
  --o: 0.9;
}
.bz2 .rise-dot.is-far {
  --o: 0.4;
}
.bz2 .rise-ed.is-on {
  opacity: 1;
}
.bz2 .rise-nd.is-on,
.bz2 .rise-w.is-on,
.bz2 .rise-cta.is-on {
  opacity: var(--o, 1);
  filter: var(--f, none);
  transform: none;
}
.bz2 .rise-cta.is-on {
  pointer-events: auto;
}
.bz2 .rise-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1040px;
  max-width: 100%;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--bg-rgb), 0.97) 0%,
    rgba(var(--bg-rgb), 0.85) 45%,
    rgba(var(--bg-rgb), 0) 72%
  );
  z-index: 1;
  pointer-events: none;
}
.bz2 .rise-text {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}
.bz2 .rise-words {
  margin: 0;
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
.bz2 .rise-w {
  display: inline-block;
  opacity: 0.14;
  filter: blur(8px);
  transform: translateY(6px);
  transition:
    opacity 0.6s ease,
    filter 0.6s ease,
    transform 0.6s ease;
}
.bz2 .rise-lw {
  font-weight: 700;
  white-space: nowrap;
}
.bz2 .rise-lw-face {
  display: inline-block !important;
  width: 0.92em;
  height: 0.92em;
  margin-right: 0.14em;
  vertical-align: -0.06em;
}
.bz2 .rise-cta {
  margin-top: 14px;
  pointer-events: none;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    filter 0.6s ease;
}
.bz2 .rise-outer.is-idle .rise-grp,
.bz2 .rise-outer.is-idle .rise-nd,
.bz2 .rise-outer.is-idle .rise-mini,
.bz2 .rise-outer.is-idle .rise-mini * {
  animation-play-state: paused;
}
@keyframes rise-bob {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -5px;
  }
}
@keyframes rise-drift0 {
  33% {
    transform: translate(14px, -10px);
  }
  66% {
    transform: translate(-8px, 12px);
  }
  100% {
    transform: translate(6px, 4px);
  }
}
@keyframes rise-drift1 {
  33% {
    transform: translate(-12px, 8px);
  }
  66% {
    transform: translate(10px, 14px);
  }
  100% {
    transform: translate(-4px, -6px);
  }
}
@keyframes rise-drift2 {
  33% {
    transform: translate(8px, 16px);
  }
  66% {
    transform: translate(-14px, 2px);
  }
  100% {
    transform: translate(4px, -10px);
  }
}
@keyframes rise-drift3 {
  33% {
    transform: translate(-10px, -12px);
  }
  66% {
    transform: translate(6px, 10px);
  }
  100% {
    transform: translate(12px, -2px);
  }
}
@keyframes rise-drift4 {
  33% {
    transform: translate(12px, 6px);
  }
  66% {
    transform: translate(-6px, -14px);
  }
  100% {
    transform: translate(-10px, 8px);
  }
}
@keyframes rise-drift5 {
  33% {
    transform: translate(-8px, 14px);
  }
  66% {
    transform: translate(14px, -4px);
  }
  100% {
    transform: translate(2px, -12px);
  }
}
@keyframes rise-drift6 {
  33% {
    transform: translate(10px, -14px);
  }
  66% {
    transform: translate(-12px, -6px);
  }
  100% {
    transform: translate(6px, 12px);
  }
}
@keyframes rise-drift7 {
  33% {
    transform: translate(-14px, 4px);
  }
  66% {
    transform: translate(8px, -12px);
  }
  100% {
    transform: translate(-2px, 14px);
  }
}

/* Link at work: the four corner cards, each lit at its own step */
.bz2 .rise-mini {
  position: absolute;
  z-index: 3;
  width: 252px;
  padding: 12px 14px 13px;
  border-radius: 16px;
  background: rgba(var(--bg-rgb), 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
  transition:
    opacity 0.7s ease,
    filter 0.7s ease,
    transform 0.7s ease;
  pointer-events: none;
}
.bz2 .rise-mini.is-on {
  opacity: 1;
  filter: none;
  transform: none;
}
.bz2[data-theme="dark"] .rise-mini {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.bz2 .rise-mini p {
  margin: 0;
}
.bz2 .rise-mini-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}
.bz2 .rise-mini-t {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.bz2 .rise-mini-s {
  font-size: 11.5px;
  color: var(--mute);
}
.bz2 .rise-mini-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 9px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: #0b6e4f;
  background: rgba(11, 110, 79, 0.09);
  border: 1px solid rgba(11, 110, 79, 0.22);
  opacity: 0;
}
.bz2[data-theme="dark"] .rise-mini-tag {
  color: #3bd39b;
  background: rgba(25, 196, 138, 0.12);
  border-color: rgba(25, 196, 138, 0.35);
}
.bz2 .rise-typing {
  display: inline-flex;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--panel2);
}
.bz2 .rise-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mute);
  animation: rise-blink 1.2s infinite ease-in-out;
}
.bz2 .rise-typing i:nth-child(2) {
  animation-delay: 0.2s;
}
.bz2 .rise-typing i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes rise-blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.bz2 .rise-m1 {
  left: 4%;
  top: 12%;
}
.bz2 .rise-m2 {
  right: 4%;
  top: 12%;
}
.bz2 .rise-m3 {
  left: 4%;
  bottom: 10%;
}
.bz2 .rise-m4 {
  right: 4%;
  bottom: 10%;
}

/* card 1: a Reel made and posted to all */
.bz2 .rise-m1-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.bz2 .rise-m1-thumb {
  position: relative;
  flex: none;
  width: 54px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}
.bz2 .rise-m1-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bz2 .rise-m1-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: rise-m1vid 10s linear infinite;
}
.bz2 .rise-m1-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0)
  );
  animation: rise-m1scan 10s linear infinite;
}
.bz2 .rise-m1-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bz2 .rise-m1-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--panel3);
  overflow: hidden;
}
.bz2 .rise-m1-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: #2f6fe8;
  animation: rise-m1bar 10s ease-in-out infinite;
}
.bz2 .rise-m1-s1 {
  animation: rise-m1s1 10s infinite;
}
.bz2 .rise-m1-s2 {
  margin-top: -15px;
  font-weight: 500;
  color: #0b6e4f;
  /* one line: it sits over "Generating reel…" */
  white-space: nowrap;
  animation: rise-m1s2 10s infinite;
}
.bz2[data-theme="dark"] .rise-m1-s2 {
  color: #3bd39b;
}
.bz2 .rise-m1-plat {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.bz2 .rise-m1-plat span {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}
.bz2 .rise-m1-plat img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.55;
  animation: rise-m1pi 10s infinite;
}
.bz2 .rise-m1-plat b {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0b6e4f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  animation: rise-m1chk 10s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  animation-delay: calc(var(--d) * 0.45s);
}
.bz2 .rise-m1-plat b svg {
  width: 7px;
  height: 7px;
}
@keyframes rise-m1vid {
  0%,
  33% {
    opacity: 0;
  }
  37%,
  91% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m1scan {
  0% {
    top: -40%;
    opacity: 1;
  }
  30% {
    top: 100%;
    opacity: 1;
  }
  31%,
  100% {
    top: 100%;
    opacity: 0;
  }
}
@keyframes rise-m1bar {
  0% {
    width: 0;
  }
  32%,
  92% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes rise-m1s1 {
  0%,
  33% {
    opacity: 1;
  }
  36%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m1s2 {
  0%,
  36% {
    opacity: 0;
  }
  40%,
  92% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m1pi {
  0%,
  38% {
    opacity: 0.45;
  }
  42%,
  100% {
    opacity: 1;
  }
}
@keyframes rise-m1chk {
  0%,
  46% {
    transform: scale(0);
  }
  50%,
  90% {
    transform: scale(1);
  }
  94%,
  100% {
    transform: scale(0);
  }
}

/* card 2: a comment answered */
.bz2 .rise-m2-c,
.bz2 .rise-m2-r {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.bz2 .rise-m2-c img {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.bz2 .rise-m2-c p,
.bz2 .rise-m2-r p {
  font-size: 12px;
  line-height: 1.35;
}
.bz2 .rise-m2-c {
  animation: rise-m2c 9s infinite;
}
.bz2 .rise-m2-typing {
  height: 30px;
  padding: 8px 0 0 30px;
  animation: rise-m2t 9s infinite;
}
.bz2 .rise-m2-r {
  margin-top: -30px;
  animation: rise-m2r 9s infinite;
}
.bz2 .rise-m2-tag {
  animation: rise-m2tag 9s infinite;
}
@keyframes rise-m2c {
  0%,
  4% {
    opacity: 0;
    transform: translateY(4px);
  }
  9%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m2t {
  0%,
  16% {
    opacity: 0;
  }
  20%,
  36% {
    opacity: 1;
  }
  40%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m2r {
  0%,
  40% {
    opacity: 0;
    transform: translateY(5px);
  }
  45%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m2tag {
  0%,
  58% {
    opacity: 0;
  }
  63%,
  90% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}

/* card 3: a DM answered */
.bz2 .rise-m3-in,
.bz2 .rise-m3-out {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.bz2 .rise-m3-in {
  animation: rise-m3i 9s infinite;
}
.bz2 .rise-m3-in img {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.bz2 .rise-m3-in span {
  max-width: 170px;
  padding: 7px 10px;
  border-radius: 14px 14px 14px 4px;
  background: var(--panel2);
  font-size: 12px;
}
.bz2 .rise-m3-typing {
  height: 36px;
  padding: 8px 0 0 28px;
  animation: rise-m3t 9s infinite;
}
.bz2 .rise-m3-out {
  justify-content: flex-end;
  margin-top: -28px;
  animation: rise-m3o 9s infinite;
}
.bz2 .rise-m3-out span {
  max-width: 180px;
  padding: 7px 10px;
  border-radius: 14px 14px 4px 14px;
  background: #2f6fe8;
  color: #ffffff;
  font-size: 12px;
}
.bz2 .rise-m3-chips {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  opacity: 0;
  animation: rise-m3ch 9s infinite;
}
.bz2 .rise-m3-chips span {
  padding: 4px 9px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink);
}
@keyframes rise-m3i {
  0%,
  4% {
    opacity: 0;
    transform: translateY(4px);
  }
  9%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m3t {
  0%,
  16% {
    opacity: 0;
  }
  20%,
  36% {
    opacity: 1;
  }
  40%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m3o {
  0%,
  40% {
    opacity: 0;
    transform: translateY(5px);
  }
  45%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m3ch {
  0%,
  62% {
    opacity: 0;
  }
  67%,
  90% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}

/* card 4: what worked, and what to make next */
.bz2 .rise-m4-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 54px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.bz2 .rise-m4-chart i {
  flex: 1;
  display: block;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: var(--panel4);
  transform-origin: bottom;
  transform: scaleY(0);
  animation: rise-m4bar 10s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: calc(var(--d) * 0.12s);
}
.bz2 .rise-m4-chart i.hi {
  background: #2f6fe8;
}
.bz2 .rise-m4-top {
  margin-top: 8px;
  opacity: 0;
  animation: rise-m4top 10s infinite;
}
.bz2 .rise-m4-top b {
  font-weight: 500;
  color: var(--ink);
}
.bz2 .rise-m4-tag {
  animation: rise-m4tag 10s infinite;
}
@keyframes rise-m4bar {
  0%,
  3% {
    transform: scaleY(0);
  }
  10%,
  90% {
    transform: scaleY(1);
  }
  96%,
  100% {
    transform: scaleY(0);
  }
}
@keyframes rise-m4top {
  0%,
  38% {
    opacity: 0;
    transform: translateY(4px);
  }
  44%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes rise-m4tag {
  0%,
  60% {
    opacity: 0;
  }
  66%,
  90% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 1180px) {
  .bz2 .rise-mini {
    width: 226px;
    padding: 11px 12px 12px;
    font-size: 11.5px;
  }
  .bz2 .rise-m1 {
    left: 2.5%;
    top: 9%;
    /* 248, not 226: "Ready · Post to All" needs a 156 px side */
    width: 248px;
  }
  .bz2 .rise-m2 {
    right: 2.5%;
    top: 9%;
  }
  .bz2 .rise-m3 {
    left: 2.5%;
    bottom: 7%;
  }
  .bz2 .rise-m4 {
    right: 2.5%;
    bottom: 7%;
  }
}
@media (max-height: 760px) {
  .bz2 .rise-m1,
  .bz2 .rise-m2 {
    top: 7%;
  }
  .bz2 .rise-m3,
  .bz2 .rise-m4 {
    bottom: 5%;
  }
}
@media (max-width: 980px) {
  .bz2 .rise-outer {
    height: 200svh;
  }
  .bz2 .rise-words {
    font-size: 30px;
    line-height: 34px;
  }
  .bz2 .rise-halo {
    width: 100%;
    height: 60%;
  }
}
@media (max-width: 860px) {
  .bz2 .rise-mini {
    zoom: 0.68;
    width: 252px;
  }
  .bz2 .rise-m1 {
    left: 14px;
    top: 5%;
  }
  .bz2 .rise-m2 {
    right: 14px;
    top: 5%;
  }
  .bz2 .rise-m3 {
    left: 14px;
    bottom: 5%;
  }
  .bz2 .rise-m4 {
    right: 14px;
    bottom: 5%;
  }
}
@media (max-width: 860px) and (min-width: 600px) {
  .bz2 .rise-mini {
    zoom: 0.8;
  }
  .bz2 .rise-m1,
  .bz2 .rise-m3 {
    left: 4%;
  }
  .bz2 .rise-m2,
  .bz2 .rise-m4 {
    right: 4%;
  }
}
@media (max-width: 640px) {
  .bz2 .rise-wbr {
    display: none;
  }
}
@media (max-height: 520px) {
  .bz2 .rise-mini {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .rise-outer {
    height: auto;
  }
  .bz2 .rise-sticky {
    position: relative;
    min-height: 640px;
  }
  .bz2 .rise-grp,
  .bz2 .rise-nd,
  .bz2 .rise-mini * {
    animation: none !important;
  }
  .bz2 .rise-mini-tag,
  .bz2 .rise-m3-chips,
  .bz2 .rise-m4-top,
  .bz2 .rise-m2-r,
  .bz2 .rise-m3-out {
    opacity: 1 !important;
  }
  .bz2 .rise-m4-chart i {
    transform: none;
  }
  .bz2 .rise-m1-s1,
  .bz2 .rise-m2-typing,
  .bz2 .rise-m3-typing {
    visibility: hidden;
  }
}

/* Pricing (zip port, 2026-10-13): the billing switch, per seat plan
   cards with a seat stepper, and the AI credits panel. From the static
   business site build (linkme-business-site zip); Pricing.tsx. */
.bz2 .bill {
  display: inline-flex;
  background: var(--panel3);
  border-radius: 999px;
  padding: 3px;
  margin-top: 6px;
}
.bz2 .bill-b {
  all: unset;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--mute2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.bz2 .bill-b:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
.bz2 .bill-b.on {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.bz2 .bill-save {
  font-size: 10px;
  background: #19c48a;
  color: #fff;
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1.3;
}
.bz2 .pr-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bz2 .panel.card.pr-pop {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel2), var(--panel2)) padding-box,
    linear-gradient(135deg, #2f6fe8, #8a4dff 50%, #ff3d8a) border-box;
  box-shadow: 0 18px 50px rgba(47, 111, 232, 0.1);
}
.bz2 .packs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.bz2 .pack {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--bg);
}
.bz2 .pack b {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.bz2 .pack span {
  font-size: 11px;
  color: var(--mute);
}
.bz2 .pack em {
  font-style: normal;
  font-size: 13px;
  color: var(--ink);
  margin-top: 4px;
}
.bz2 .pack.best {
  border-color: #2f6fe8;
}
/* pricing: four plans (2026-10-21). The grid holds Standard, AI
   Powered, AI Powered Max and Enterprise: four across on a wide screen,
   two by two on a tablet, one column on a phone. Each card stays
   simple: the name and price, a short line, the button, and a plain
   list of one line items with hairlines between them. */
.bz2 .pr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1180px) {
  .bz2 .pr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .bz2 .pr-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bz2 .pr-card {
  padding: 22px;
}
/* the card head, sized down (site review 2026-10-21): the name and a
   small price on one row and the short line under them; Most popular is
   a tag centred on the card's top edge so every head lines up */
.bz2 .pr-card {
  position: relative;
}
.bz2 .pr-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bz2 .pr-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.bz2 .pr-card .pr-title {
  font-size: 18px;
  white-space: nowrap;
}
.bz2 .pr-price {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bz2 .pr-price small {
  margin-left: 1px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mute2);
}
.bz2 .pr-flag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  white-space: nowrap;
}
/* the plan's items (limits, then features): one line each, hairlines
   between, the figure in bold, a sparkle on the AI ones and an info tip
   after the social profiles */
.bz2 .pr-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bz2 .pr-items li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink2);
}
.bz2 .pr-items li:first-child {
  border-top: 0;
  padding-top: 2px;
}
.bz2 .pr-items li b {
  font-weight: 600;
  color: var(--ink);
}
/* what a plan does not include: a crossed circle and muted text */
.bz2 .pr-items li.pr-no {
  color: var(--mute2);
}
.bz2 .pr-items li.pr-no b {
  color: var(--mute);
}
.bz2 .pr-noi {
  flex: none;
  color: var(--mute2);
}
/* a small grey tag beside a plan's name ("No AI" on Standard) */
.bz2 .pr-tag {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--bg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--mute);
  vertical-align: 2px;
}
/* the small label between a plan's limits and its features */
.bz2 .pr-group {
  margin: 2px 0 -8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mute2);
}
/* the tip's bubble opens from the start of its line (the line is the
   anchor, not the icon), so it never runs off the card's side or the
   screen on a phone */
.bz2 .pr-items li {
  position: relative;
}
.bz2 .pr-items .pr-tip {
  position: static;
  display: inline-flex;
  align-self: center;
}
.bz2 .pr-items .pr-tip-b {
  left: 0;
  max-width: min(290px, calc(100vw - 48px));
  transform: translateY(4px);
}
.bz2 .pr-items .pr-tip:hover .pr-tip-b,
.bz2 .pr-items .pr-tip:focus-within .pr-tip-b {
  transform: translateY(0);
}
.bz2 .pr-tip-i {
  all: unset;
  display: inline-flex;
  align-items: center;
  cursor: help;
  color: var(--mute3);
  border-radius: 50%;
}
.bz2 .pr-tip-i:hover {
  color: var(--ink);
}
.bz2 .pr-tip-i:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
/* the Meet Link banner over the two AI Powered plans (2026-10-21): the
   home page hero in small. On a wide screen it takes the first grid row
   over columns 2 and 3 (the AI cards) and every card sits in row 2;
   once the cards wrap it runs the full width above them. The aurora is
   the hero's band at full strength on a violet ground, blurred and
   drifting; the face is the hero's live Link; the line cycles the
   hero's phrases on its clock (bzh-rbw). */
@keyframes pr-drift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
.bz2 .pr-meet {
  grid-column: 2 / 4;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 80px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #8a4dff;
  color: #ffffff;
}
.bz2 .pr-grid > .pr-card {
  grid-row: 2;
}
@media (max-width: 1180px) {
  .bz2 .pr-meet {
    grid-column: 1 / -1;
  }
  .bz2 .pr-grid > .pr-card {
    grid-row: auto;
  }
}
.bz2 .pr-meet-bg {
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: linear-gradient(
    100deg,
    #2f6fe8 0%,
    #8a4dff 18%,
    #ff3d8a 38%,
    #ffb020 56%,
    #19c48a 74%,
    #22b8ff 92%,
    #2f6fe8 100%
  );
  background-size: 220% 100%;
  filter: blur(14px) saturate(1.1);
  animation: pr-drift 12s ease-in-out infinite alternate;
}
.bz2 .pr-meet-face {
  flex: none;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
/* the text column is a size container, so the cycling line scales with
   its room and the longest phrase ("Analyses your socials" with its
   icon, about 11.4em) always fits on one line */
.bz2 .pr-meet-txt {
  flex: 1 1 0;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.26),
    0 1px 2px rgba(0, 0, 0, 0.12);
}
.bz2 .pr-meet-l1 {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
}
.bz2 .pr-meet-l2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  font-size: min(23px, 8.5cqi);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.bz2 .pr-meet-ph {
  grid-area: 1/1;
  white-space: nowrap;
}
.bz2 .pr-rw {
  display: inline-block;
  opacity: 0;
  translate: 0 0.3em;
  animation: bzh-rbw 15.6s cubic-bezier(0.22, 1, 0.36, 1) infinite both;
}
.bz2 .pr-meet-ic {
  vertical-align: -0.16em;
  margin-left: 0.2em;
}
.bz2 .pr-meet-ic img {
  width: 1.1em;
  height: 1.1em;
  object-fit: contain;
  display: block;
}
.bz2 .pr-meet-note {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .bz2 .pr-meet {
    flex-wrap: wrap;
  }
  /* the text takes the rest of the first row (beside the 46px face and
     its 14px gap), so the note always wraps under it; with a 0 basis the
     note fit beside it on banners wider than about 333px and the text
     column shrank to nothing */
  .bz2 .pr-meet-txt {
    flex-basis: calc(100% - 60px);
  }
  .bz2 .pr-meet-note {
    margin-left: 60px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .pr-meet-bg,
  .bz2 .pr-rw {
    animation: none;
  }
  .bz2 .pr-meet-ph:first-child .pr-rw {
    opacity: 1;
    translate: 0 0;
  }
}

/* Enterprise is black with white text: the page tokens are re-pointed
   inside the card, so its text, lines and callouts follow */
.bz2 .panel.card.pr-ent {
  --ink: #ffffff;
  --ink2: #d6d6d2;
  --mute: #a3a39e;
  --mute2: #a3a39e;
  --mute3: #7c7c77;
  --line: rgba(255, 255, 255, 0.1);
  --line2: rgba(255, 255, 255, 0.18);
  --line3: rgba(255, 255, 255, 0.32);
  --panel: #131315;
  --panel2: #1c1c1f;
  --bg: #141416;
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: var(--ink);
}
.bz2[data-theme="dark"] .panel.card.pr-ent {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.14);
}
.bz2 .pr-ent .pr-ent-btn {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
}
.bz2 .pr-ent .pr-ent-btn:hover {
  background: #e9e9ec;
  color: #0a0a0a;
}

/* pricing: AI powered Business (2026-10-19). The AI Powered card is the
   plan with Link AI: a white card with a 2px rim in the site's colours
   that turn slowly (conic gradient on a registered angle; no glow or
   coloured shadow), Link's face by the name and black sparkles on the AI
   features. The rim is its only colour. Still under reduced motion. */
@property --pr-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes pr-turn {
  to {
    --pr-angle: 360deg;
  }
}
.bz2 .panel.card.pr-ai {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(
        from var(--pr-angle),
        #2f6fe8,
        #8a4dff,
        #ff3d8a,
        #ffb020,
        #19c48a,
        #22b8ff,
        #2f6fe8
      )
      border-box;
  box-shadow: none;
  animation: pr-turn 8s linear infinite;
}
/* .card:hover paints the border a grey, which would cover the rim (it
   lives in the border box behind a transparent border): keep it clear */
.bz2 .panel.card.pr-ai:hover {
  border-color: transparent;
}
/* the seats footnote and its tooltip (SocialSetNote): a dashed caption
   that opens a dark bubble above it on hover or focus; a bridge under
   the bubble keeps it open while the pointer travels up to its link */
.bz2 .pr-tip {
  position: relative;
  display: inline-block;
  align-self: flex-start;
}
.bz2 .pr-tip-b {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 30;
  width: max-content;
  max-width: min(290px, 78vw);
  padding: 10px 14px;
  border-radius: 10px;
  background: #2b2b2d;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  transform: translate(-50%, 4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0.16s;
}
.bz2 .pr-tip-b::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}
.bz2 .pr-tip-b a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bz2 .pr-tip:hover .pr-tip-b,
.bz2 .pr-tip:focus-within .pr-tip-b {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.bz2[data-theme="dark"] .pr-tip-b {
  background: #444448;
}
/* on a phone the bubble starts at the caption's left edge instead of
   centring on it, so it never touches the screen edge */
@media (max-width: 600px) {
  .bz2 .pr-tip-b {
    left: 0;
    transform: translateY(4px);
  }
  .bz2 .pr-tip:hover .pr-tip-b,
  .bz2 .pr-tip:focus-within .pr-tip-b {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .pr-tip-b {
    transition: none;
  }
}
/* the Link reel: the hero's aurora in a rounded box (dark ground, the
   blurred rainbow band drifting), Link's face, and the hero's rebus */
.bz2 .pr-spark {
  flex: none;
  margin-top: 2px;
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .panel.card.pr-ai {
    animation: none;
  }
}
@media (max-width: 980px) {
  .bz2 .packs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* pricing: three packages (2026-10-28, still 2 of
   review-shots/pricing-mock/stills). AI Standard, AI Power Maxed (Most
   popular) and Enterprise in one row of three, one column on a phone,
   then the black "Your demo" band. The cards themselves are the earlier
   plan card, the pr-* rules above (Kedem 2026-10-29: the rainbow pills,
   rims and boxes "look cheap", so the cards went back to Net's look);
   only the grid, the band and its tiles live here.
   Pricing.tsx renders it; /pricing shows the same grid. */
.bz2 .pk-in {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.bz2 .pk-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.bz2 .pk-top .h2 {
  max-width: 820px;
}
.bz2 .pk-kick {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute);
}
.bz2 .pk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
/* pricing: flight (PricingFlight.tsx): the dotted arrow that loops the
   credit numbers draws on one sheet laid over the cards */
.bz2 .pk-stage {
  position: relative;
}
.bz2 .pk-fl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.bz2 .pk-fl-head {
  filter: drop-shadow(0 2px 4px rgba(47, 111, 232, 0.35));
}
/* the demo band: black, a blurred rainbow glow in its corner */
/* CreditPlanner's cards still carry .pk-card */
.bz2 .pk-card {
  width: 100%;
  max-width: 1024px;
  padding: 48px 44px 44px;
  border-radius: 24px;
  background: #ffffff;
  color: #0a0a0a;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 30px 80px -30px rgba(17, 24, 39, 0.28);
}
/* the business pricing, open on the page with no card around it (Kedem
   2026-11-01 picked still C, "even cleaner"): the name, price and one
   button, a row of five numbers, then everything included. .pkc-* only:
   bare .bz2 words collide. */
.bz2 .pkc {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 0 32px;
  color: #0a0a0a;
}
.bz2 .pkc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bz2 .pkc-title {
  margin: 0;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.bz2 .pkc-price {
  margin: 14px 0 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #2a2a2f;
}
.bz2 .pkc-price b {
  font-weight: 650;
  color: #0a0a0a;
}
.bz2 .pkc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  margin-top: 28px;
  padding: 0 28px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
.bz2 .pkc-btn svg {
  transition: transform 0.2s ease;
}
.bz2 .pkc-btn:hover,
.bz2 .pkc-btn:focus-visible {
  background: #26262b;
  color: #ffffff;
}
.bz2 .pkc-btn:hover svg,
.bz2 .pkc-btn:focus-visible svg {
  transform: translateX(3px);
}
.bz2 .pkc-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 24px 48px -28px rgba(17, 24, 39, 0.18);
}
.bz2 .pkc-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 12px 24px;
  text-align: center;
}
.bz2 .pkc-stats li + li {
  border-left: 1px solid rgba(0, 0, 0, 0.07);
}
.bz2 .pkc-pre {
  min-height: 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #63636b;
}
.bz2 .pkc-num {
  margin-top: 2px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.bz2 .pkc-unit {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
  color: #3d3d44;
}
/* the dotted underline and its dark tip, shown on hover, focus or tap */
.bz2 .pkc-has-tip {
  position: relative;
}
.bz2 .pkc-tip-btn {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed currentColor;
  background: none;
  color: inherit;
  font: inherit;
  cursor: help;
}
.bz2 .pkc-tip {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: 300px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #2b2b2e;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}
.bz2 .pkc-has-tip:hover .pkc-tip,
.bz2 .pkc-tip-btn:focus-visible + .pkc-tip,
.bz2 .pkc-tip-btn:focus + .pkc-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.bz2 .pkc-inc {
  margin-top: 64px;
}
.bz2 .pkc-label {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
}
.bz2 .pkc-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 40px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.bz2 .pkc-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
  color: #1f1f23;
}
.bz2 .pkc-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f3f3f1;
  color: #0a0a0a;
}
@media (max-width: 860px) {
  .bz2 .pkc {
    padding: 4px 0 24px;
  }
  .bz2 .pkc-title {
    font-size: 36px;
  }
  .bz2 .pkc-price {
    margin-top: 10px;
    font-size: 19px;
  }
  .bz2 .pkc-btn {
    width: 100%;
    max-width: 360px;
    justify-content: center;
    margin-top: 22px;
  }
  /* one number per row: the number, then its words */
  .bz2 .pkc-stats {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 36px;
    border-radius: 18px;
  }
  .bz2 .pkc-stats li {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    grid-template-areas:
      "num pre"
      "num unit";
    align-items: center;
    column-gap: 16px;
    padding: 16px 20px;
    text-align: left;
  }
  .bz2 .pkc-stats li + li {
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
  }
  .bz2 .pkc-pre {
    grid-area: pre;
    align-self: end;
    min-height: 0;
  }
  .bz2 .pkc-num {
    grid-area: num;
    margin: 0;
    font-size: 26px;
  }
  .bz2 .pkc-unit {
    grid-area: unit;
    align-self: start;
    margin: 0;
    font-size: 15px;
    color: #1f1f23;
  }
  .bz2 .pkc-pre:empty + .pkc-num + .pkc-unit {
    grid-row: 1 / 3;
    align-self: center;
  }
  .bz2 .pkc-pre:empty {
    display: none;
  }
  .bz2 .pkc-tip {
    left: 0;
    max-width: min(280px, calc(100vw - 180px));
    text-align: left;
    transform: translateY(4px);
  }
  .bz2 .pkc-has-tip:hover .pkc-tip,
  .bz2 .pkc-tip-btn:focus-visible + .pkc-tip,
  .bz2 .pkc-tip-btn:focus + .pkc-tip {
    transform: translateY(0);
  }
  .bz2 .pkc-inc {
    margin-top: 44px;
  }
  .bz2 .pkc-label {
    font-size: 20px;
  }
  .bz2 .pkc-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 22px;
  }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .bz2 .pkc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bz2 .pkc-num {
    font-size: 28px;
  }
}
.bz2 .pk-demo {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 36px;
  border-radius: 24px;
  background: #0a0a0a;
  color: #fff;
}
/* the band's Book a demo: the Enterprise card's white pill */
.bz2 .pk-demo .pk-demo-btn {
  margin-top: 4px;
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}
.bz2 .pk-demo .pk-demo-btn:hover {
  background: #e9e9ec;
  color: #0a0a0a;
}
/* the package card: the 2026-10-20 plan card one to one (Kedem
   2026-10-29, "copy the same way it was laid out before"; reference
   review-shots/net-pricing/before-vs-now/new-cards-desktop.png). Grey
   card, the popular one white with the turning rim (.pr-ai) and the Link
   reel, Enterprise black (.pr-ent re-points the tokens, so the inner
   box, chips and lines follow). */
.bz2 .pk-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bz2 .pk-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bz2 .pk-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bz2 .pk-badge {
  font-size: 11px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 4px 9px;
  font-weight: 500;
  line-height: 1;
}
.bz2 .pk-who,
.bz2 .pk-bill {
  margin-top: 6px;
}
.bz2 .pk-big {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bz2 .pk-unit {
  display: inline;
  margin-left: 6px;
}
.bz2 .pk-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
}
.bz2 .pk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--mute);
}
.bz2 .pk-label {
  color: var(--ink);
}
.bz2 .pk-val {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.bz2 .pk-cr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}
.bz2 .pk-cr svg {
  flex: none;
  color: var(--mute);
}
.bz2 .pk-cr b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bz2 ul.plain.pk-eq {
  gap: 4px;
  padding-left: 24px;
}
.bz2 ul.plain.pk-eq li {
  display: flex;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mute);
}
.bz2 .pk-op {
  flex: none;
  min-width: 14px;
  color: var(--mute2, var(--mute));
}
.bz2 ul.plain.pk-eq b {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bz2 .pk-fix {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--mute);
}
.bz2 .pk-fix {
  margin-top: 4px;
}
.bz2 .pk-fix svg {
  flex: none;
  color: var(--ink);
}
.bz2 .pr-ai .pk-box {
  background: var(--panel);
}
.bz2 .pr-ai .pk-fix {
  background: var(--bg);
}
/* credit planner, under the cards (CreditPlanner.tsx): three numbered
   steps on the left, the plan that fits on a dotted panel on the right */
.bz2 .cp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg);
  overflow: hidden;
}
.bz2 ol.plain.cp-steps {
  gap: 0;
  padding: 24px 20px 8px;
}
.bz2 .cp-step {
  position: relative;
  padding: 0 0 28px 44px;
}
.bz2 .cp-step::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 36px;
  bottom: 8px;
  width: 1px;
  background: var(--line2);
}
.bz2 .cp-step:last-child::before {
  display: none;
}
.bz2 .cp-n {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--panel2);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.bz2 .cp-step h3 {
  margin: 3px 0 0;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--ink);
}
.bz2 .cp-step > .cap {
  margin-top: 4px;
}
.bz2 .cp-pick {
  margin-top: 16px;
}
.bz2 .cp-pick-l {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--mute);
}
.bz2 .cp-chips,
.bz2 .cp-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bz2 .cp-chip {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--bg);
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.bz2 .cp-chip:hover {
  border-color: var(--line3);
}
.bz2 .cp-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.bz2 .cp-chip:focus-visible,
.bz2 .cp-meter input:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
.bz2 ul.plain.cp-rates {
  gap: 2px;
  margin-top: 6px;
}
.bz2 ul.plain.cp-rates li {
  display: flex;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute);
}
.bz2 ul.plain.cp-rates b {
  font-weight: 500;
  color: var(--ink);
}
.bz2 .cp-meters {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.bz2 .cp-meter {
  padding: 18px 16px 16px;
}
.bz2 .cp-meter + .cp-meter {
  border-top: 1px solid var(--line);
}
.bz2 .cp-ticks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  padding: 0 14px;
}
.bz2 .cp-ticks i {
  width: 1.5px;
  height: 6px;
  border-radius: 1px;
  background: var(--line2);
  transition:
    height 0.15s,
    background 0.15s;
}
.bz2 .cp-ticks i.cp-on {
  background: var(--mute2);
}
.bz2 .cp-ticks i.cp-t3 {
  height: 9px;
  background: var(--mute);
}
.bz2 .cp-ticks i.cp-t2 {
  height: 13px;
  background: var(--ink);
}
.bz2 .cp-ticks i.cp-t1 {
  height: 17px;
  background: var(--ink);
}
.bz2 .cp-ticks i.cp-t0 {
  width: 2px;
  height: 22px;
  background: var(--ink);
}
.bz2 .cp-meter input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 24px;
  margin: 8px 0 0;
  background: transparent;
  cursor: pointer;
}
.bz2 .cp-meter input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    var(--ink) calc(14px + (100% - 28px) * var(--p)),
    var(--line2) 0
  );
}
.bz2 .cp-meter input::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    var(--ink) calc(14px + (100% - 28px) * var(--p)),
    var(--line2) 0
  );
}
.bz2 .cp-meter input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 18px;
  margin-top: -7px;
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.bz2 .cp-meter input::-moz-range-thumb {
  width: 28px;
  height: 18px;
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.bz2 .cp-out {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.bz2 .cp-out b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bz2 .cp-out > span:last-child {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.bz2 .cp-uses {
  margin-top: 12px;
}
.bz2 .cp-uses span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel2);
  font-size: 13px;
  color: var(--ink);
}
.bz2 .cp-rec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 20px;
  border-top: 1px solid var(--line);
  background-color: var(--panel);
  background-image: radial-gradient(var(--line2) 1px, transparent 1px);
  background-size: 18px 18px;
}
.bz2 .cp-rec-h {
  margin: 0;
  font-size: 14px;
  color: var(--mute);
}
.bz2 .cp-rec-h b {
  font-weight: 500;
  color: var(--ink);
}
.bz2 .panel.card.cp-card {
  width: 100%;
  max-width: 360px;
  gap: 16px;
}
.bz2 .panel.card.cp-card:not(.pr-ai):not(.pr-ent) {
  background: var(--bg);
}
.bz2 .cp-card:hover {
  transform: none;
}
.bz2 .cp-card .pk-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bz2 .cp-use p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--mute);
}
.bz2 .cp-use b {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bz2 .cp-bar {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--line2);
  overflow: hidden;
}
.bz2 .cp-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--ink);
  transition: width 0.3s ease;
}
.bz2 ul.plain.cp-feats {
  gap: 8px;
}
.bz2 ul.plain.cp-feats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.bz2 ul.plain.cp-feats svg {
  flex: none;
  margin-top: 3px;
}
.bz2 .cp-cta {
  width: 100%;
  justify-content: center;
}
.bz2 .cp-bill {
  margin-top: 8px;
  text-align: center;
}
@media (min-width: 981px) {
  .bz2 .cp {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
  .bz2 ol.plain.cp-steps {
    padding: 32px 32px 4px;
  }
  .bz2 .cp-rec {
    justify-content: center;
    padding: 40px 32px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .cp-ticks i,
  .bz2 .cp-bar i {
    transition: none;
  }
}
.bz2 .pk-plus {
  color: var(--ink);
}
.bz2 ul.plain.pk-feats {
  gap: 10px;
}
.bz2 ul.plain.pk-feats li {
  font-size: 13px;
}
.bz2 ul.plain.pk-feats li.pk-ai-li {
  gap: 8px;
  color: var(--ink);
  font-weight: 500;
}
/* the Link reel on the popular card: the hero's band on a violet
   ground, blurred and drifting, the live face and the hero's phrases */
.bz2 .pk-reel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #8a4dff;
  color: #ffffff;
}
.bz2 .pk-reel-bg {
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: linear-gradient(
    100deg,
    #2f6fe8 0%,
    #8a4dff 18%,
    #ff3d8a 38%,
    #ffb020 56%,
    #19c48a 74%,
    #22b8ff 92%,
    #2f6fe8 100%
  );
  background-size: 220% 100%;
  filter: blur(14px) saturate(1.1);
  animation: pr-drift 12s ease-in-out infinite alternate;
}
.bz2 .pk-reel-face {
  flex: none;
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.bz2 .pk-reel-txt {
  flex: 1 1 0;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.26),
    0 1px 2px rgba(0, 0, 0, 0.12);
}
.bz2 .pk-reel-l1 {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
}
.bz2 .pk-reel-l2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  font-size: min(20px, 8.5cqi);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.bz2 .pk-reel-ph {
  grid-area: 1/1;
  white-space: nowrap;
}
.bz2 .pk-reel-ic {
  vertical-align: -0.16em;
  margin-left: 0.2em;
}
.bz2 .pk-reel-ic img {
  width: 1.1em;
  height: 1.1em;
  object-fit: contain;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .pk-reel-bg {
    animation: none;
  }
  .bz2 .pk-reel-ph:first-child .pr-rw {
    opacity: 1;
    translate: 0 0;
  }
}
.bz2 .pk-demo > * {
  position: relative;
  min-width: 0;
}
.bz2 .pk-demo-kick {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: #a9a9a4;
}
.bz2 .pk-demo h2 {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 38px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.bz2 .pk-demo-l {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.5;
  color: #bdbdb8;
}
.bz2 .pk-faces {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  color: #bdbdb8;
}
.bz2 .pk-faces span {
  display: flex;
}
.bz2 .pk-faces img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0a0a0a;
  margin-left: -10px;
}
.bz2 .pk-faces img:first-child {
  margin-left: 0;
}
.bz2 .pk-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bz2 .pk-tile {
  min-width: 0;
  padding: 10px 10px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.2);
}
.bz2 .pk-tile b {
  display: block;
  margin: 0 6px 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: #0a0a0a;
}
.bz2 .pk-tile p {
  margin: 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #5f5f5c;
}
/* each tile's scene: a tinted stage with a small dashboard moment */
.bz2 .pk-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 12px;
  overflow: hidden;
}
.bz2 .pk-art.c2 {
  background: linear-gradient(135deg, #f1eaff, #e6f0ff);
}
.bz2 .pk-art.c3 {
  background: linear-gradient(135deg, #ffe9f1, #fff1e3);
}
.bz2 .pk-art.c4 {
  background: linear-gradient(135deg, #fff4dc, #ffe9f1);
}
.bz2 .pk-art.c5 {
  background: linear-gradient(135deg, #e3f8ef, #e3f4ff);
}
.bz2 .pk-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08);
}
.bz2 .pk-post {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 7px 12px 7px 7px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(60, 30, 120, 0.35);
}
.bz2 .pk-post img {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}
.bz2 .pk-post > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.bz2 .pk-by {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #0a0a0a;
  white-space: nowrap;
}
.bz2 .pk-marks {
  display: flex;
  gap: 3px;
}
.bz2 .pk-msgs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 190px;
}
.bz2 .pk-msgs > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 9px 5px 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px -6px rgba(140, 20, 70, 0.35);
}
.bz2 .pk-msgs > div:nth-child(2) {
  margin-left: 14px;
}
.bz2 .pk-msgs span:last-child {
  overflow: hidden;
  font-size: 11.5px;
  color: #2b2b2a;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bz2 .pk-dm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 190px;
}
.bz2 .pk-dm span {
  font-size: 11.5px;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 14px;
  white-space: nowrap;
}
.bz2 .pk-dm-in {
  align-self: flex-start;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #2b2b2a;
  background: #fff;
  border-bottom-left-radius: 4px;
}
.bz2 .pk-out {
  display: flex;
  align-items: center;
  gap: 5px;
  align-self: flex-end;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  background: linear-gradient(90deg, #ff8a3d, #ff3d8a);
  border-bottom-right-radius: 4px;
}
.bz2 .pk-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 100%;
  width: 100%;
  max-width: 170px;
}
.bz2 .pk-bars i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #19c48a, #22b8ff);
  opacity: 0.45;
}
.bz2 .pk-bars i:last-child {
  opacity: 1;
}
@media (max-width: 900px) {
  .bz2 .pk-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .bz2 .pk-demo {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px 20px;
  }
  .bz2 .pk-demo h2 {
    font-size: 26px;
    line-height: 32px;
  }
  .bz2 .pk-demo .pk-demo-btn {
    width: 100%;
  }
}
/* phones: a 2x2 grid leaves each tile about 150px, too narrow for the
   scenes, so the tiles stack */
@media (max-width: 520px) {
  .bz2 .pk-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .bz2 .pk-art {
    height: 76px;
  }
}

/* ---- hero: Meet Link canvas port (2026-10-12) ----
   The /business hero is the claude.ai canvas hero (hero/canvas/ref,
   Main.dc.html). Every rule below is the canvas rule under
   `.bz2 .bzh-meet` (Hero.tsx's section), so the older hero rules above
   (.rebus, .rb-*, .chat, .composer, .bubble, .modal ...) are outranked
   and nothing outside the hero changes. The aurora and the press bar
   live outside the section, so their rules key on `.bz2:has(.bzh-meet)`.
   Keyframes carry a bzh- prefix. Flow blocks ("hero flow: <id>") follow
   this one; the contract is hero/CONTRACT.md. */

/* the aurora: the saturated gradient from the static business site build
   (linkme-business-site zip, 2026-10-13), replacing the soft pastel one.
   A dark ground, a blurred rainbow band (::before), the six blobs in full
   colour, and a fade into the page that starts lower. In light mode the
   header, the press bar, the title, the lead and the CTA turn white on
   it (rules after this block). */
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .aurora {
  height: 960px;
  clip-path: none;
  -webkit-clip-path: none;
  background: #0a0a0c;
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .aurora::before {
  content: "";
  position: absolute;
  inset: -60px;
  background: linear-gradient(
    100deg,
    #2f6fe8 0%,
    #8a4dff 18%,
    #ff3d8a 38%,
    #ffb020 56%,
    #19c48a 74%,
    #22b8ff 92%,
    #2f6fe8 100%
  );
  opacity: 0.65;
  filter: blur(30px);
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .aurora::after {
  background: linear-gradient(
    180deg,
    rgba(var(--bg-rgb), 0) 0%,
    rgba(var(--bg-rgb), 0) 44%,
    rgba(var(--bg-rgb), 0.18) 56%,
    rgba(var(--bg-rgb), 0.55) 68%,
    rgba(var(--bg-rgb), 0.88) 80%,
    rgba(var(--bg-rgb), 1) 90%,
    rgba(var(--bg-rgb), 1) 100%
  );
}
.bz2[data-theme="dark"]:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .aurora::after {
  background: linear-gradient(
    180deg,
    rgba(var(--bg-rgb), 0) 0%,
    rgba(var(--bg-rgb), 0.06) 38%,
    rgba(var(--bg-rgb), 0.25) 50%,
    rgba(var(--bg-rgb), 0.6) 66%,
    rgba(var(--bg-rgb), 0.9) 82%,
    rgba(var(--bg-rgb), 1) 94%,
    rgba(var(--bg-rgb), 1) 100%
  );
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au-blob,
.bz2[data-theme="dark"]:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .au-blob {
  opacity: 0.95;
  filter: blur(84px);
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au1 {
  width: 70vw;
  height: 600px;
  left: -22vw;
  top: -260px;
  background: #2f6fe8;
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au2 {
  width: 62vw;
  height: 640px;
  right: -20vw;
  top: -220px;
  background: #8a4dff;
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au3 {
  background: #ff3d8a;
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au4 {
  width: 50vw;
  height: 500px;
  right: -6vw;
  background: #19c48a;
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au5 {
  width: 46vw;
  height: 460px;
  left: -8vw;
  background: #ffb020;
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au6 {
  background: #22b8ff;
}
@media (max-width: 980px) {
  .bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au-blob,
  .bz2[data-theme="dark"]:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
    .au-blob {
    width: 120vw;
    filter: blur(56px);
  }
}

/* the line between the header and the press bar, and the bar in white */
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .pressbar {
  padding: 7px 20px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .pressbar:hover {
  color: #ffffff;
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .presstag {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
.bz2[data-theme="dark"]:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .pressbar {
  border-top-color: rgba(255, 255, 255, 0.18);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}
.bz2[data-theme="dark"]:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .presstag {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}
@media (max-width: 980px) {
  .bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .pressbar {
    padding: 10px 16px;
  }
}

/* the header in white over the gradient (light mode), every control kept.
   Once the phone bar is stuck to the top on the page colour, or its menu
   is open, it goes back to ink. */
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .lg-l {
  display: none !important;
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .lg-d {
  display: block !important;
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .navitem
  > a,
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .btn-ghost,
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .btn-ghost:hover {
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .navitem:is(:hover, :focus-within, [data-open])
  > a,
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .navitem
  > a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: none;
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .aud {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .aud-tab,
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .aud-tab:hover {
  color: #ffffff;
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .aud-tab.on {
  color: #111113;
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .themebtn {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .themebtn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .btn-primary,
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .btn-primary:hover {
  background: #ffffff;
  color: #111113;
}
.bz2:not([data-theme="dark"]):is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid)
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .mbtn {
  color: #ffffff;
}
/* the layers lean toward the pointer from useHeroAmbient (inline style) */
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au-p {
  transform: none;
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 40%;
}
.bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au-cursor {
  display: none;
}
@media (max-width: 980px) {
  .bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .aurora {
    height: 720px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2:is(:has(.bzh-meet), :has(.bzp-head), .bz2-vivid) .au-blob {
    animation: none;
  }
}

/* the section, the title, the lead and the CTA */
.bz2 .hero-tight.bzh-meet {
  padding: 72px 0 72px;
}
/* the older hero clipped the section sideways for its scaled chat panel;
   this section sits inside the 1280 rail, so that clip cut the
   dashboard's shadow in a hard line. A shadow adds no scroll width, and
   the customer marquee below clips its own track. */
.bz2 [data-scene="hero"].bzh-meet {
  overflow-x: visible;
}
.bz2 .bzh-meet .rebus {
  margin: 0 auto;
  max-width: 960px;
  text-align: center;
  font-size: clamp(34px, 7.4vw, 68px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.bz2 .bzh-meet .rb-l1,
.bz2 .bzh-meet .rb-l2 {
  display: block;
}
.bz2 .bzh-meet .rb-av {
  display: inline-block;
  width: 1.26em;
  height: 1.26em;
  vertical-align: -0.27em;
  margin: 0 0.04em 0 0;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.bz2 .bzh-meet .rb-l2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}
.bz2 .bzh-meet .rb-ph {
  grid-area: 1/1;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  animation: none;
}
.bz2 .bzh-meet .rb-w {
  display: inline-block;
  opacity: 0;
  translate: 0 0.3em;
  animation: bzh-rbw 15.6s cubic-bezier(0.22, 1, 0.36, 1) infinite both;
}
.bz2 .bzh-meet .rb-ic {
  vertical-align: -0.14em;
  margin-left: 0.16em;
}
.bz2 .bzh-meet .rb-ic img {
  width: 1.1em;
  height: 1.1em;
  object-fit: contain;
  display: block;
  animation: none;
}
@keyframes bzh-rbw {
  0% {
    opacity: 0;
    translate: 0 0.3em;
  }
  3.21% {
    opacity: 1;
    translate: 0 0;
  }
  13.97% {
    opacity: 1;
    translate: 0 0;
  }
  16.67% {
    opacity: 0;
    translate: 0 -0.3em;
  }
  100% {
    opacity: 0;
    translate: 0 -0.3em;
  }
}
.bz2 .bzh-meet .lead {
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}
/* white on the saturated aurora (light mode); dark mode keeps its ink,
   which is already light, and adds the same lift */
.bz2:not([data-theme="dark"]) .bzh-meet .rebus {
  color: #ffffff;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.1);
}
.bz2[data-theme="dark"] .bzh-meet .rebus {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}
.bz2 .bzh-meet .bzh-lead {
  color: #ffffff;
  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.26),
    0 1px 2px rgba(0, 0, 0, 0.12);
}
.bz2:not([data-theme="dark"]) .bzh-meet .bzh-btn,
.bz2:not([data-theme="dark"]) .bzh-meet .bzh-btn:hover {
  background: #ffffff;
  color: #1f1f21;
}
/* one flow pair at a time; display: contents keeps the chat body's gap */
.bz2 .bzh-meet .bzh-pair {
  display: contents;
}
@media (max-width: 980px) {
  .bz2 .bzh-meet .rebus {
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
  .bz2 .bzh-meet .rb-l1 {
    white-space: nowrap;
  }
}
@media (max-width: 520px) {
  .bz2 .bzh-meet .rb-ph {
    white-space: normal;
    text-wrap: balance;
  }
  .bz2 .bzh-meet .lead {
    font-size: 16px;
    line-height: 1.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .bzh-meet .rb-w {
    animation: none;
  }
  .bz2 .bzh-meet .rb-ph:first-child .rb-w {
    opacity: 1;
    translate: 0;
  }
}

/* the faces: expressions (useHeroAmbient) and the dashboard faces' eyes,
   which follow --lk-ex / --lk-ey on .chat. The title face rules also
   serve any `.rb-av.rb-live` face outside the hero (the closer, driven by
   useFaceLife in scenes/hero/faceLife.ts); :is() keeps the hero's
   specificity as it was. */
.bz2 .bzh-meet .lkf-eyes {
  transform: translate(var(--lk-ex, 0px), var(--lk-ey, 0px));
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .eyes {
  transition: transform 0.16s ease-out;
  will-change: transform;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .eye {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.09s ease,
    opacity 0.12s ease;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .arc,
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .blush,
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .m2,
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .tongue {
  opacity: 0;
  transition: opacity 0.16s ease;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .tongue {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: translateY(-1.2px) scaleY(0.2);
  transition:
    opacity 0.16s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .m1 {
  transition: opacity 0.16s ease;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .brow {
  transition: transform 0.25s ease;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-blink .eye {
  transform: scaleY(0.08);
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-wink .eR {
  transform: scaleY(0.08);
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-wink .m1 {
  opacity: 0;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-wink .m2 {
  opacity: 1;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-happy .eye {
  opacity: 0;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-happy .arc {
  opacity: 1;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-happy .blush {
  opacity: 0.65;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-happy .m1 {
  opacity: 0;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-happy .m2 {
  opacity: 1;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-brow .brow {
  transform: translateY(-1.3px);
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-brow .eye {
  transform: scale(1.12);
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-tongue .eye {
  opacity: 0;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-tongue .arc {
  opacity: 1;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-tongue .blush {
  opacity: 0.65;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-tongue .m1 {
  opacity: 0;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-tongue .m2 {
  opacity: 1;
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-tongue .tongue {
  opacity: 1;
  transform: translateY(-1.2px) scaleY(1);
}
.bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face.x-tongue .tongue.tl {
  opacity: 0.7;
}
.bz2 .bzh-meet .lkbig svg g > circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.09s ease;
}
.bz2 .bzh-meet .lkbig svg.x-blink g > circle {
  transform: scaleY(0.08);
}
@media (prefers-reduced-motion: reduce) {
  .bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .eyes,
  .bz2 :is(.bzh-meet, .rb-live, .pr-meet) .rb-face .eye,
  .bz2 .bzh-meet .lkbig svg g > circle {
    transition: none;
  }
}
/* the dashboard (Linkme Business, Pure Green's seat, Link AI open) */
.bz2 .bzh-meet .screen {
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
}
.bz2 .bzh-meet .blue {
  color: #2f6fe8;
}
.bz2 .bzh-meet .chk {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bz2 .bzh-meet .chk-dim {
  background: var(--panel3);
}
@media (max-width: 980px) {
  .bz2 .bzh-meet .in {
    padding: 0 20px;
  }
  .bz2 .bzh-meet .hide-m {
    display: none;
  }
}
.bz2 .bzh-meet .chat {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);
  position: relative;
}
.bz2 .bzh-meet .chat svg g {
  transition: transform 0.25s ease;
}
.bz2 .bzh-meet .chatbody {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 360px;
  background: var(--bg);
}
.bz2 .bzh-meet .app {
  min-height: 680px;
  border-radius: 18px;
}
.bz2 .bzh-meet .side {
  width: 232px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bz2 .bzh-meet .ws {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  padding: 4px 6px;
}
.bz2 .bzh-meet .ws img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 4px;
}
.bz2 .bzh-meet .ws svg,
.bz2 .bzh-meet .me svg {
  color: var(--mute3);
}
.bz2 .bzh-meet .gs {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.bz2 .bzh-meet .gs span {
  color: var(--mute2);
  font-weight: 400;
}
.bz2 .bzh-meet .seg {
  display: inline-flex;
  background: var(--panel3);
  border-radius: 999px;
  padding: 3px;
  font-size: 13px;
  color: var(--mute2);
  align-self: flex-start;
}
.bz2 .bzh-meet .seg span {
  padding: 5px 12px;
  border-radius: 999px;
}
.bz2 .bzh-meet .seg .on {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.bz2 .bzh-meet .snav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bz2 .bzh-meet .snav a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.bz2 .bzh-meet .snav a:hover {
  background: var(--panel2);
}
.bz2 .bzh-meet .snav a.on {
  background: var(--panel3);
}
.bz2 .bzh-meet .snav svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink2);
}
.bz2 .bzh-meet .side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bz2 .bzh-meet .rc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.bz2 .bzh-meet .rc-h {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute2);
}
.bz2 .bzh-meet .chat button.rc-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.3s ease;
}
.bz2 .bzh-meet .chat button.rc-item:hover {
  background: var(--panel3);
  color: var(--ink);
}
.bz2 .bzh-meet .chat button.rc-item.on {
  background: var(--panel3);
  color: var(--ink);
}
.bz2 .bzh-meet .chat button.rc-item:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
.bz2 .bzh-meet .chat button.rc-item svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--mute);
}
.bz2 .bzh-meet .rc-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bz2 .bzh-meet .rc-w {
  font-size: 11px;
  color: var(--mute2);
  flex: none;
}
.bz2 .bzh-meet .me {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}
.bz2 .bzh-meet .main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.bz2 .bzh-meet .main .chatbody {
  padding: 16px 32px 32px;
  min-height: 0;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  gap: 16px;
}
.bz2 .bzh-meet .topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 18px 28px 0;
}
.bz2 .bzh-meet .topr {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bz2 .bzh-meet .ibtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex: none;
}
.bz2 .bzh-meet .upill {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--panel2);
  font-size: 14px;
  color: var(--ink);
}
.bz2 .bzh-meet .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0 8px;
}
.bz2 .bzh-meet .hwel {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bz2 .bzh-meet .thead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
}
.bz2 .bzh-meet .composer {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.bz2 .bzh-meet .chat button.act-input.ph {
  background: transparent;
  border: 0;
  height: auto;
  padding: 0;
  font-size: 15px;
  color: var(--mute3);
  font-weight: 400;
  border-radius: 4px;
}
.bz2 .bzh-meet .chat button.act-input.ph:hover {
  color: var(--mute);
}
.bz2 .bzh-meet .crow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bz2 .bzh-meet .cbtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex: none;
}
.bz2 .bzh-meet .cpill {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--panel2);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.bz2 .bzh-meet .cpill i {
  font-style: normal;
  color: var(--mute2);
  font-weight: 400;
}
.bz2 .bzh-meet .prows {
  display: flex;
  flex-direction: column;
  margin-top: -6px;
}
.bz2 .bzh-meet .ubub {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.bz2 .bzh-meet .uatt {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  object-fit: contain;
  padding: 5px;
  display: block;
}
.bz2 .bzh-meet .dragstate {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bz2 .bzh-meet .dragwrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bz2 .bzh-meet .dropzone {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1.5px dashed var(--line3);
  background: var(--panel);
  flex: none;
  animation: bzh-zonehi 1.3s ease both;
}
@keyframes bzh-zonehi {
  0%,
  72% {
    border-color: var(--line3);
    border-style: dashed;
    background: var(--panel);
  }
  100% {
    border-color: var(--line2);
    border-style: solid;
    background: var(--bg);
  }
}
.bz2 .bzh-meet .dragimg {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  animation: bzh-dragin 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bzh-dragin {
  0% {
    transform: translate(-150px, -90px) scale(0.55) rotate(-12deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.bz2 .bzh-meet .draghand {
  position: absolute;
  left: 36px;
  top: 36px;
  width: 20px;
  height: 20px;
  animation:
    bzh-dragin 1s cubic-bezier(0.22, 1, 0.36, 1) both,
    bzh-handout 0.25s 1.05s ease forwards;
}
@keyframes bzh-handout {
  to {
    opacity: 0;
  }
}
.bz2 .bzh-meet .dropcap {
  font-size: 13px;
  color: var(--mute2);
  opacity: 0;
  animation: bzh-dcin 0.35s 0.95s ease forwards;
}
.bz2 .bzh-meet .typedq {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  opacity: 0;
  animation: bzh-dcin 0.3s 1.05s ease forwards;
}
@keyframes bzh-dcin {
  to {
    opacity: 1;
  }
}
.bz2 .bzh-meet .chat button.prow-btn:first-of-type {
  border-top: 0;
}
.bz2 .bzh-meet .chat button.prow-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--mute);
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}
.bz2 .bzh-meet .chat button.prow-btn:hover {
  color: var(--ink);
}
.bz2 .bzh-meet .chat button.prow-btn:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
.bz2 .bzh-meet .chat button.prow-btn svg {
  flex: none;
  color: var(--mute3);
}
@media (max-width: 980px) {
  .bz2 .bzh-meet .app {
    min-height: 0;
  }
  .bz2 .bzh-meet .side {
    display: none;
  }
  .bz2 .bzh-meet .upill {
    display: none;
  }
  .bz2 .bzh-meet .topbar {
    flex-wrap: wrap;
    align-items: center;
  }
  .bz2 .bzh-meet .topbar .topr {
    width: 100%;
    justify-content: flex-start;
  }
  .bz2 .bzh-meet .main .chatbody {
    padding: 12px 16px 20px;
  }
  .bz2 .bzh-meet .topbar {
    padding: 16px 16px 0;
  }
  .bz2 .bzh-meet .composer {
    gap: 20px;
  }
  .bz2 .bzh-meet .empty {
    padding-top: 16px;
  }
}
.bz2 .bzh-meet .msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.bz2 .bzh-meet .msg.user {
  justify-content: flex-end;
}
.bz2 .bzh-meet .bubble {
  max-width: 72%;
  background: var(--panel3);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
}
/* the sender's avatar: Pure Green's mark on the same white disc as the
   workspace switcher (.ws img), so the brand reads one way (2026-10-13) */
.bz2 .bzh-meet .uavatar {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bz2 .bzh-meet .areply {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bz2 .bzh-meet .atext {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 640px;
}
.bz2 .bzh-meet .typing {
  display: inline-flex;
  gap: 5px;
  padding: 14px 16px;
  background: var(--panel2);
  border-radius: 18px;
  border: 1px solid var(--line);
}
.bz2 .bzh-meet .typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute);
  animation: bzh-blink 1.2s infinite ease-in-out;
}
.bz2 .bzh-meet .typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.bz2 .bzh-meet .typing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes bzh-blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.bz2 .bzh-meet .fade {
  animation: bzh-fadeup 0.45s ease both;
}
@keyframes bzh-fadeup {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.bz2 .bzh-meet .cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.bz2 .bzh-meet .icard {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bz2 .bzh-meet .ititle {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}
.bz2 .bzh-meet .plist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bz2 .bzh-meet .prow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.bz2 .bzh-meet .pstats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--mute);
  white-space: nowrap;
}
.bz2 .bzh-meet .pstats b {
  color: var(--ink);
  font-weight: 500;
}
.bz2 .bzh-meet .carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 16px;
  margin: -2px -2px -10px;
  scrollbar-width: none;
}
.bz2 .bzh-meet .carousel::-webkit-scrollbar {
  display: none;
}
.bz2 .bzh-meet .slide {
  flex: none;
  width: 168px;
  height: 168px;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  color: #1f3d2b;
}
.bz2 .bzh-meet .storyrow {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.bz2 .bzh-meet .phone {
  position: relative;
  width: 150px;
  height: 267px;
  border-radius: 20px;
  overflow: hidden;
  background: #eaf3f5;
  border: 0;
  flex: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.bz2 .bzh-meet .phonevid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 980px) {
  .bz2 .bzh-meet .cards3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .bz2 .bzh-meet .bubble {
    max-width: 88%;
  }
  .bz2 .bzh-meet .chatbody {
    padding: 16px;
    min-height: 0;
  }
  .bz2 .bzh-meet .pstats {
    gap: 10px;
    white-space: normal;
  }
}
.bz2 .bzh-meet .slide {
  position: relative;
  overflow: hidden;
  width: 232px;
  height: 232px;
  border-radius: 16px;
  flex: none;
  font-family: "Inter", sans-serif;
  box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.28);
}
.bz2 .bzh-meet .s1 {
  background: radial-gradient(
    120% 90% at 85% 15%,
    #2f7a45 0%,
    #0f3d2e 60%,
    #0a2b20 100%
  );
  color: #ffffff;
}
.bz2 .bzh-meet .s2 {
  background: #f4f1e6;
  color: #1f3d2b;
}
.bz2 .bzh-meet .s3 {
  background: linear-gradient(160deg, #f9e86b 0%, #e9d63f 100%);
  color: #1f3d2b;
}
.bz2 .bzh-meet .s4 {
  background: linear-gradient(200deg, #8bc34a 0%, #2e7d32 55%, #1b4d2a 100%);
  color: #ffffff;
}
.bz2 .bzh-meet .slidelogo {
  position: absolute;
  top: 16px;
  left: 16px;
  height: 16px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.bz2 .bzh-meet .sl-count {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.bz2 .bzh-meet .bottle {
  position: absolute;
  width: auto;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
}
.bz2 .bzh-meet .b1 {
  height: 230px;
  right: -26px;
  bottom: -34px;
  transform: rotate(-8deg);
}
.bz2 .bzh-meet .b3 {
  height: 200px;
  right: -18px;
  bottom: -30px;
  transform: rotate(6deg);
}
.bz2 .bzh-meet .b4 {
  height: 210px;
  left: -40px;
  bottom: -40px;
  transform: rotate(14deg);
  opacity: 0.95;
}
.bz2 .bzh-meet .sl-copy {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bz2 .bzh-meet .s4 .sl-copy {
  left: auto;
  right: 16px;
  width: 122px;
  text-align: right;
  align-items: flex-end;
}
.bz2 .bzh-meet .sl-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.bz2 .bzh-meet .sl-title {
  margin: 0;
  font-size: 30px;
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.bz2 .bzh-meet .sl-body {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
}
.bz2 .bzh-meet .ingl {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bz2 .bzh-meet .ingl li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(31, 61, 43, 0.14);
}
.bz2 .bzh-meet .idot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.bz2 .bzh-meet .sl-foot {
  margin: 0;
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #2e6b3a;
}
.bz2 .bzh-meet .sl-stat {
  margin: 0;
  font-size: 56px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.bz2 .bzh-meet .sl-statsub {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.8;
}
.bz2 .bzh-meet .sl-btn {
  display: inline-block;
  margin-top: 10px;
  background: #ffffff;
  color: #1b4d2a;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 999px;
}
.bz2 .bzh-meet .chat button.act {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.bz2 .bzh-meet .chat button.act:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}
.bz2 .bzh-meet .chat button.act-primary {
  background: var(--ink);
  color: var(--bg);
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}
.bz2 .bzh-meet .chat button.act-primary:hover {
  background: var(--ink2);
  transform: translateY(-1px);
}
.bz2 .bzh-meet .chat button.act-outline {
  border: 1px solid var(--line2);
  color: var(--ink);
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}
.bz2 .bzh-meet .chat button.act-outline:hover {
  border-color: var(--line3);
}
.bz2 .bzh-meet .chat button.act-ghost {
  color: #2f6fe8;
  font-size: 12px;
  margin-top: auto;
  align-self: flex-start;
  border-radius: 4px;
}
.bz2 .bzh-meet .chat button.act-ghost:hover {
  color: #8db4ff;
}
.bz2 .bzh-meet .chat button.act-input {
  flex: 1;
  justify-content: flex-start;
  height: 42px;
  padding: 0 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
  white-space: normal;
  text-align: left;
}
.bz2 .bzh-meet .chat button.act-input:hover {
  border-color: var(--line3);
}
.bz2 .bzh-meet .chat button.act-send {
  width: 42px;
  height: 42px;
  background: var(--ink);
  flex: none;
}
.bz2 .bzh-meet .chat button.act-send:hover {
  background: var(--ink2);
}
.bz2 .bzh-meet .modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(var(--bg-rgb), 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
  animation: bzh-fadeup 0.25s ease both;
  border-radius: 14px;
}
.bz2 .bzh-meet .modal-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  padding: 16px;
  pointer-events: none;
}
.bz2 .bzh-meet .modal {
  position: relative;
  pointer-events: auto;
  width: min(420px, 100%);
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 26px;
  z-index: 6;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  animation: bzh-fadeup 0.3s ease both;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.bz2[data-theme="dark"] .bzh-meet .composer {
  border-color: var(--line2);
}
.bz2[data-theme="dark"] .bzh-meet .screen {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
/* a flow's primary action pressing itself (flows/kit.tsx ActButton) */
.bz2 .bzh-meet .chat button.act[data-pressed] {
  animation: bzh-press 0.16s ease;
}
@keyframes bzh-press {
  50% {
    scale: 0.97;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .bzh-meet .fade,
  .bz2 .bzh-meet .chat button.act[data-pressed] {
    animation: none;
  }
}
/* the thread (HeroDashboard .bzh-thread > .bzh-tin): the welcome or the
   flow's header, the pair and the prompt rows. Unlocked it lays out as the
   chat body did. Locked (autoplay on, useThreadLock.ts) the dashboard
   keeps the welcome's measured height, the thread scrolls inside it (by
   script only) and the composer stays pinned under it. The 6px side pad
   keeps the focus rings inside the clip. */
.bz2 .bzh-meet .bzh-thread {
  position: relative;
  margin: 0 -6px;
  padding: 0 6px;
  --bzh-ft: 0px;
  --bzh-fb: 0px;
}
.bz2 .bzh-meet .bzh-tin {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bz2 .bzh-meet .chat[data-lock] .chatbody {
  flex: 1 1 auto;
  min-height: 0;
}
.bz2 .bzh-meet .chat[data-lock] .bzh-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--bzh-ft),
    #000 calc(100% - var(--bzh-fb)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--bzh-ft),
    #000 calc(100% - var(--bzh-fb)),
    transparent 100%
  );
}
.bz2 .bzh-meet .chat[data-lock] .bzh-thread[data-more-top] {
  --bzh-ft: 22px;
}
.bz2 .bzh-meet .chat[data-lock] .bzh-thread[data-more-bottom] {
  --bzh-fb: 30px;
}
.bz2 .bzh-meet .chat[data-lock] .composer {
  flex: none;
}
/* while autoplay plays a flow the rows wait off stage: under a growing
   answer they could only slide down and out of the clip (a layout shift
   each time). They are on the welcome, and back for good after a click. */
.bz2 .bzh-meet .chat[data-lock] .bzh-pair ~ .prows {
  display: none;
}

/* hero flow: week-plan */
/* the week: a list of rows in a narrow reply (phones), five day cards from
   640 px of reply (the container query below) */
.bz2 .bzh-meet .bzf-wk {
  container: bzf-wk / inline-size;
}
.bz2 .bzh-meet .bzf-days {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bz2 .bzh-meet .bzf-day {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas: "th when slot" "th title title" "th meta meta";
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}
.bz2 .bzh-meet .bzf-when {
  grid-area: when;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--mute2);
  white-space: nowrap;
}
.bz2 .bzh-meet .bzf-when b {
  font-weight: 600;
  color: var(--ink);
}
.bz2 .bzh-meet .bzf-thumb {
  grid-area: th;
  align-self: start;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--panel3);
  container-type: inline-size;
}
.bz2 .bzh-meet .bzf-thumb > img,
.bz2 .bzh-meet .bzf-thumb > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* a video thumb: the frame held at Thumb.at; the backdrop behind it comes
   inline from the content (kinds/types.ts Thumb "video") */
.bz2 .bzh-meet .bzf-vid > video {
  object-position: 50% 38%;
}
/* a crop thumb (Thumb "crop"): the image, position and size come inline
   from the content */
.bz2 .bzh-meet .bzf-store {
  position: absolute;
  inset: 0;
  background-color: #d9d9d6;
  background-repeat: no-repeat;
}
.bz2 .bzh-meet .bzf-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.bz2 .bzh-meet .bzf-mark svg {
  display: block;
}
/* Tuesday's carousel thumb: the canvas PAIR 3 slide 1 (.slide.s1, 232 px)
   in container units, 1 slide px = 100cqw / 232 */
.bz2 .bzh-meet .bzf-s1 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(
    120% 90% at 85% 15%,
    #2f7a45 0%,
    #0f3d2e 60%,
    #0a2b20 100%
  );
  color: #ffffff;
  font-family: "Inter", sans-serif;
}
.bz2 .bzh-meet .bzf-s1 p {
  margin: 0;
}
.bz2 .bzh-meet .bzf-s1-logo {
  position: absolute;
  top: 6.9cqw;
  left: 6.9cqw;
  height: 6.9cqw;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.bz2 .bzh-meet .bzf-s1-n {
  position: absolute;
  top: 6cqw;
  right: 6cqw;
  font-size: 4.74cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.bz2 .bzh-meet .bzf-s1-bottle {
  position: absolute;
  height: 99cqw;
  width: auto;
  right: -11.2cqw;
  bottom: -14.7cqw;
  transform: rotate(-8deg);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}
.bz2 .bzh-meet .bzf-s1-copy {
  position: absolute;
  left: 6.9cqw;
  right: 6.9cqw;
  bottom: 7.8cqw;
  display: flex;
  flex-direction: column;
  gap: 1.7cqw;
}
.bz2 .bzh-meet .bzf-s1-eb {
  font-size: 4.74cqw;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.bz2 .bzh-meet .bzf-s1-t {
  font-size: 12.93cqw;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.bz2 .bzh-meet .bzf-s1 .bzf-s1-b {
  margin-top: 1.7cqw;
  font-size: 5.6cqw;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.9;
}
.bz2 .bzh-meet .bzf-title {
  grid-area: title;
}
.bz2 .bzh-meet .bzf-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  margin-top: 1px;
}
.bz2 .bzh-meet .bzf-nets {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bz2 .bzh-meet .bzf-nets img {
  width: 14px;
  height: 14px;
  display: block;
  flex: none;
}
.bz2 .bzh-meet .bzf-nets img[data-wide] {
  width: 15px;
  height: 10.5px;
}
.bz2 .bzh-meet .bzf-trend {
  font-size: 11px;
  line-height: 14px;
  color: #2f6fe8;
  white-space: nowrap;
}
/* the status slot: empty (dashed) until the press fills every slot at
   once; the filled pill is the real Badge "Scheduled" (blue, soft) */
.bz2 .bzh-meet .bzf-slot {
  grid-area: slot;
  justify-self: end;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #2f6fe8;
  background: rgba(47, 111, 232, 0);
  border: 1px dashed var(--line2);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.bz2 .bzh-meet .bzf-slot > * {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.bz2 .bzh-meet .bzf-slot[data-on] {
  background: rgba(47, 111, 232, 0.1);
  border-color: rgba(47, 111, 232, 0);
}
/* "Scheduled" reads the moment the button is pressed (no fade in) */
.bz2 .bzh-meet .bzf-slot[data-on] > * {
  opacity: 1;
  transition: none;
}
/* "5 posts scheduled": its line is kept while empty, so nothing moves */
.bz2 .bzh-meet .bzf-count {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 -6px;
  height: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}
.bz2 .bzh-meet .bzf-count svg {
  color: #2f6fe8;
  flex: none;
}
.bz2 .bzh-meet .bzf-count[data-on] {
  opacity: 1;
  visibility: visible;
  transition: none;
}
/* the primary keeps one width through its three labels */
.bz2 .bzh-meet .bzf-wk ~ div > button.act-primary {
  min-width: 146px;
}
@container bzf-wk (min-width: 640px) {
  .bz2 .bzh-meet .bzf-days {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }
  .bz2 .bzh-meet .bzf-day {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: "when" "th" "title" "meta" "slot";
    row-gap: 8px;
    align-items: start;
  }
  .bz2 .bzh-meet .bzf-title {
    min-height: 35px;
  }
  .bz2 .bzh-meet .bzf-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 0;
  }
  .bz2 .bzh-meet .bzf-nets {
    gap: 5px;
  }
  .bz2 .bzh-meet .bzf-nets img {
    width: 16px;
    height: 16px;
  }
  .bz2 .bzh-meet .bzf-nets img[data-wide] {
    width: 17px;
    height: 12px;
  }
  .bz2 .bzh-meet .bzf-slot {
    justify-self: start;
  }
  .bz2 .bzh-meet .bzf-mark {
    display: block;
  }
}
.bz2[data-theme="dark"] .bzh-meet .bzf-nets img[data-dark] {
  filter: invert(1) hue-rotate(180deg);
}
.bz2[data-theme="dark"] .bzh-meet .bzf-slot {
  color: #8db4ff;
}
.bz2[data-theme="dark"] .bzh-meet .bzf-slot[data-on] {
  background: rgba(47, 111, 232, 0.2);
}
.bz2[data-theme="dark"] .bzh-meet .bzf-trend,
.bz2[data-theme="dark"] .bzh-meet .bzf-count svg {
  color: #8db4ff;
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .bzh-meet .bzf-slot,
  .bz2 .bzh-meet .bzf-slot > *,
  .bz2 .bzh-meet .bzf-count {
    transition: none;
  }
}

/* hero flow: auto-reply */
/* left: the DM Automations card and Go Live; right: the Reel, Instagram
   style, and the DM it sends. Comment, reply and DM slots are always in
   the layout (opacity only), so nothing jumps when the result plays. */
.bz2 .bzh-meet .bzf-auto {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.bz2 .bzh-meet .bzf-auto p {
  margin: 0;
}
.bz2 .bzh-meet .bzf-ar-left,
.bz2 .bzh-meet .bzf-ar-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.bz2 .bzh-meet .bzf-ar-right {
  gap: 10px;
}
.bz2 .bzh-meet .bzf-ar-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--mute2);
}
.bz2 .bzh-meet .bzf-ar-k {
  font-size: 12px;
  line-height: 1.3;
  color: var(--mute2);
}
.bz2 .bzh-meet .bzf-ar-v {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}

/* the automation card */
.bz2 .bzh-meet .bzf-ar-card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.bz2 .bzh-meet .bzf-ar-ch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.bz2 .bzh-meet .bzf-ar-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
}
.bz2 .bzh-meet .bzf-ar-cht {
  flex: 1;
  min-width: 0;
}
.bz2 .bzh-meet .bzf-ar-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--mute);
  background: var(--panel3);
  border: 1px solid var(--line2);
  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}
.bz2 .bzh-meet .bzf-ar-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.bz2 .bzh-meet .bzf-ar-badge[data-live] {
  color: #0b6e4f;
  background: rgba(25, 196, 138, 0.12);
  border-color: rgba(25, 196, 138, 0.35);
}
.bz2 .bzh-meet .bzf-ar-badge[data-live] i {
  background: #19c48a;
  opacity: 1;
}
.bz2[data-theme="dark"] .bzh-meet .bzf-ar-badge[data-live] {
  color: #3bd39b;
}
.bz2 .bzh-meet .bzf-ar-badge[data-pulse] {
  animation: bzh-ar-badge 0.6s ease-in-out infinite alternate;
}
@keyframes bzh-ar-badge {
  to {
    opacity: 0.45;
  }
}
.bz2 .bzh-meet .bzf-ar-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
}
.bz2 .bzh-meet .bzf-ar-row .bzf-ar-v + .bzf-ar-sub {
  margin-top: -4px;
}
.bz2 .bzh-meet .bzf-ar-chip {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line2);
}
.bz2 .bzh-meet .bzf-ar-post {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bz2 .bzh-meet .bzf-ar-thumb {
  width: 30px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  flex: none;
}
.bz2 .bzh-meet .bzf-ar-lbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line2);
}
.bz2 .bzh-meet .bzf-ar-lbtn svg {
  flex: none;
  color: var(--mute);
}
.bz2 .bzh-meet .bzf-ar-tog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mute2);
}
.bz2 .bzh-meet .bzf-ar-sw {
  position: relative;
  width: 26px;
  height: 16px;
  border-radius: 999px;
  flex: none;
  background: var(--ink);
}
.bz2 .bzh-meet .bzf-ar-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
}
/* "Use my bio link" off: the DM sends the order link set above, and
   that link's url sits under its button */
.bz2 .bzh-meet .bzf-ar-sw--off {
  background: var(--line2);
}
.bz2 .bzh-meet .bzf-ar-sw--off::after {
  right: auto;
  left: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.bz2 .bzh-meet .bzf-ar-url {
  margin-top: -2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mute2);
  overflow-wrap: anywhere;
}
.bz2 .bzh-meet .bzf-ar-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.bz2 .bzh-meet .bzf-ar-stats > div {
  padding: 11px 14px;
  min-width: 0;
}
.bz2 .bzh-meet .bzf-ar-stats > div + div {
  border-left: 1px solid var(--line);
}
.bz2 .bzh-meet .bzf-ar-stats .bzf-ar-k {
  margin-bottom: 4px;
}
.bz2 .bzh-meet .bzf-ar-n {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.bz2 .bzh-meet .bzf-ar-tick {
  display: inline-block;
  animation: bzh-ar-tick 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bzh-ar-tick {
  from {
    opacity: 0.3;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* the Reel, Instagram style: video left, header, caption, comments */
.bz2 .bzh-meet .bzf-ar-reel {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "media head" "media capt" "media list" "media add";
  min-height: 300px;
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 12px;
  overflow: hidden;
}
.bz2 .bzh-meet .bzf-ar-media {
  grid-area: media;
  position: relative;
  min-height: 300px;
  background: #0f3d2e;
}
.bz2 .bzh-meet .bzf-ar-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bz2 .bzh-meet .bzf-ar-reelico {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.bz2 .bzh-meet .bzf-ar-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.bz2 .bzh-meet .bzf-ar-head b,
.bz2 .bzh-meet .bzf-ar-cb b,
.bz2 .bzh-meet .bzf-ar-dmh b {
  font-weight: 600;
}
.bz2 .bzh-meet .bzf-ar-more {
  margin-left: auto;
  display: inline-flex;
  color: var(--ink);
}
.bz2 .bzh-meet .bzf-ar-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.bz2 .bzh-meet .bzf-ar-av[data-tone="a"] {
  background: #f6d3df;
  color: #8a2a4b;
}
.bz2 .bzh-meet .bzf-ar-av[data-tone="b"] {
  background: #d4e4ff;
  color: #1d4f91;
}
.bz2 .bzh-meet .bzf-ar-capt {
  grid-area: capt;
  display: flex;
  gap: 10px;
  padding: 12px 12px 4px;
}
.bz2 .bzh-meet .bzf-ar-list {
  grid-area: list;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
}
/* Instagram's empty state until the first comment lands */
.bz2 .bzh-meet .bzf-ar-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  font-size: 12.5px;
  color: var(--mute2);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.bz2 .bzh-meet .bzf-ar-empty b {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.bz2 .bzh-meet .bzf-ar-empty[data-off] {
  opacity: 0;
}
.bz2 .bzh-meet .bzf-ar-add {
  grid-area: add;
  padding: 11px 12px;
  font-size: 12.5px;
  color: var(--mute3-text);
  border-top: 1px solid var(--line);
}
.bz2 .bzh-meet .bzf-ar-cb {
  flex: 1;
  min-width: 0;
}
.bz2 .bzh-meet .bzf-ar-cb p {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.bz2 .bzh-meet .bzf-ar-cb p.bzf-ar-meta {
  display: flex;
  gap: 12px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mute2);
}
.bz2 .bzh-meet .bzf-ar-at {
  color: #00376b;
}
.bz2[data-theme="dark"] .bzh-meet .bzf-ar-at {
  color: #a8c7fa;
}
.bz2 .bzh-meet .bzf-ar-c {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bz2 .bzh-meet .bzf-ar-c[data-on] {
  opacity: 1;
  transform: none;
}
.bz2 .bzh-meet .bzf-ar-r {
  padding-left: 34px;
}
.bz2 .bzh-meet .bzf-ar-heart {
  flex: none;
  display: inline-flex;
  padding-top: 3px;
  color: var(--mute3);
}

/* the DM that lands in maya.kim's inbox: a quiet preview from the start
   (dashed, the message dimmed, "waiting for a comment"), then the sent DM.
   Both header lines share one grid cell, so the swap moves nothing. */
.bz2 .bzh-meet .bzf-ar-dm {
  flex: none;
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px dashed var(--line2);
  transition:
    border-color 0.4s ease,
    box-shadow 0.5s ease;
}
.bz2 .bzh-meet .bzf-ar-dm[data-on] {
  border-style: solid;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.22);
}
.bz2 .bzh-meet .bzf-ar-dm > .bzf-ar-dmb {
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
.bz2 .bzh-meet .bzf-ar-dm[data-on] > .bzf-ar-dmb {
  opacity: 1;
}
.bz2 .bzh-meet .bzf-ar-dmto {
  display: inline-grid;
}
.bz2 .bzh-meet .bzf-ar-dmto > span {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease;
}
.bz2 .bzh-meet .bzf-ar-dmto > span[data-off] {
  opacity: 0;
}
.bz2 .bzh-meet .bzf-ar-dmh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--ink);
}
.bz2 .bzh-meet .bzf-ar-dmb {
  max-width: 300px;
  margin-left: 30px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel2);
  border: 1px solid var(--line);
}
.bz2 .bzh-meet .bzf-ar-dmb p {
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
}
/* the DM's link line: one text message, the body then "Title: url"
   (no link card, no button) */
.bz2 .bzh-meet .bzf-ar-dmb p.bzf-ar-dmlink {
  padding-top: 0;
  font-size: 13px;
  color: inherit;
  text-decoration: underline;
  word-break: break-all;
}

@media (max-width: 980px) {
  .bz2 .bzh-meet .bzf-auto {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .bz2 .bzh-meet .bzf-ar-reel {
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "head head" "media capt" "list list" "add add";
    min-height: 0;
  }
  .bz2 .bzh-meet .bzf-ar-media {
    align-self: start;
    min-height: 0;
    height: 139px;
    margin: 12px 0 0 12px;
    border-radius: 8px;
    overflow: hidden;
  }
  .bz2 .bzh-meet .bzf-ar-capt {
    padding: 12px 12px 0 10px;
  }
  .bz2 .bzh-meet .bzf-ar-capt .bzf-ar-av {
    display: none;
  }
  .bz2 .bzh-meet .bzf-ar-list {
    padding-top: 12px;
  }
  .bz2 .bzh-meet .bzf-ar-r {
    padding-left: 28px;
  }
  .bz2 .bzh-meet .bzf-ar-dmb {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .bzh-meet .bzf-ar-badge,
  .bz2 .bzh-meet .bzf-ar-c,
  .bz2 .bzh-meet .bzf-ar-empty,
  .bz2 .bzh-meet .bzf-ar-dm,
  .bz2 .bzh-meet .bzf-ar-dm > .bzf-ar-dmb,
  .bz2 .bzh-meet .bzf-ar-dmto > span {
    transition: none;
  }
  .bz2 .bzh-meet .bzf-ar-badge,
  .bz2 .bzh-meet .bzf-ar-tick {
    animation: none;
  }
}

/* hero flow: email-list
   Pure Green's page on a phone (always light: it is their real page), the
   form card and the Leads card. Two container queries switch the layout:
   bzf-em (the answer) and bzf-em-leads (the Leads card). */
.bz2 .bzh-meet .bzf-email {
  container: bzf-em / inline-size;
}
.bz2 .bzh-meet .bzf-email .bzf-em-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 480px);
  grid-template-areas: "ph form" "ph leads";
  grid-template-rows: auto 1fr;
  column-gap: 16px;
  row-gap: 10px;
  align-items: start;
}
.bz2 .bzh-meet .bzf-email .bzf-em-phone {
  grid-area: ph;
  position: relative;
  width: 180px;
  height: 388px;
  box-sizing: border-box;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.bz2 .bzh-meet .bzf-email .bzf-em-pg {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px 0;
  color: #111;
  text-align: center;
}
.bz2 .bzh-meet .bzf-email .bzf-em-av {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.bz2 .bzh-meet .bzf-email .bzf-em-nm {
  margin: 5px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #111;
}
.bz2 .bzh-meet .bzf-email .bzf-em-bio {
  margin: 5px 0 0;
  font-size: 8.5px;
  line-height: 1.38;
  color: #222;
}
.bz2 .bzh-meet .bzf-email .bzf-em-nw {
  white-space: nowrap;
}
.bz2 .bzh-meet .bzf-email .bzf-em-slot {
  margin-top: 9px;
  width: 100%;
  height: 80px;
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1.5px dashed rgba(47, 111, 232, 0.55);
  background: rgba(47, 111, 232, 0.05);
  color: #2f6fe8;
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}
.bz2 .bzh-meet .bzf-email .bzf-em-slot[data-wait] {
  border-color: #2f6fe8;
  background: rgba(47, 111, 232, 0.1);
}
.bz2 .bzh-meet .bzf-email .bzf-em-slot[data-filled] {
  border-color: transparent;
  background: transparent;
}
.bz2 .bzh-meet .bzf-email .bzf-em-mf {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 11px;
  background: #f4f4f2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
}
.bz2 .bzh-meet .bzf-email .bzf-em-drop {
  animation: bzh-em-drop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.12) both;
}
@keyframes bzh-em-drop {
  from {
    opacity: 0;
    transform: translateY(-22px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.bz2 .bzh-meet .bzf-email .bzf-em-mft {
  margin: 0;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  color: #111;
  text-align: center;
}
.bz2 .bzh-meet .bzf-email .bzf-em-mfi {
  height: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  font-size: 8.5px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
}
.bz2 .bzh-meet .bzf-email .bzf-em-ph {
  color: #9a9a96;
}
.bz2 .bzh-meet .bzf-email .bzf-em-caret {
  display: inline-block;
  width: 1px;
  height: 10px;
  margin-left: 1px;
  background: #111;
  animation: bzh-em-caret 1s steps(1) infinite;
}
@keyframes bzh-em-caret {
  50% {
    opacity: 0;
  }
}
.bz2 .bzh-meet .bzf-email .bzf-em-mfb {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 8.5px;
  font-weight: 600;
  transition:
    transform 0.16s ease,
    background 0.16s ease;
}
.bz2 .bzh-meet .bzf-email .bzf-em-mfb[data-pressed] {
  transform: scale(0.96);
  background: #3a3a3a;
}
.bz2 .bzh-meet .bzf-email .bzf-em-prod {
  margin-top: 9px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  text-align: left;
}
.bz2 .bzh-meet .bzf-email .bzf-em-prod img {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
}
.bz2 .bzh-meet .bzf-email .bzf-em-pt {
  margin: 0;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #111;
}
.bz2 .bzh-meet .bzf-email .bzf-em-pp {
  margin: 2px 0 0;
  font-size: 8px;
  line-height: 1.2;
  color: #666;
}
/* the page's second tile; the image, position and size come inline from
   the content (kinds/types.ts EmailList page.near) */
.bz2 .bzh-meet .bzf-email .bzf-em-near {
  margin-top: 8px;
  width: 100%;
  flex: none;
  aspect-ratio: 170.5 / 107.5;
  border-radius: 11px;
  background-color: #d9d9d6;
  background-repeat: no-repeat;
}
.bz2 .bzh-meet .bzf-email .bzf-em-form {
  grid-area: form;
  gap: 10px;
}
.bz2 .bzh-meet .bzf-email .bzf-em-fh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bz2 .bzh-meet .bzf-email .bzf-em-fh .chk {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.bz2 .bzh-meet .bzf-email .bzf-em-fh .chk[data-on] {
  opacity: 1;
  transform: none;
}
.bz2 .bzh-meet .bzf-email .bzf-em-fl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.bz2 .bzh-meet .bzf-email .bzf-em-req {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--mute2);
  background: var(--panel3);
}
.bz2 .bzh-meet .bzf-email .bzf-em-fr {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bz2 .bzh-meet .bzf-email .bzf-em-in {
  flex: 1 1 140px;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line2);
  font-size: 13px;
  color: var(--mute3-text);
  white-space: nowrap;
  overflow: hidden;
}
.bz2 .bzh-meet .bzf-email .bzf-em-btn {
  flex: none;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
}
.bz2 .bzh-meet .bzf-email .bzf-em-leads {
  grid-area: leads;
  align-self: stretch;
  gap: 10px;
  container: bzf-em-leads / inline-size;
}
.bz2 .bzh-meet .bzf-email .bzf-em-lh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bz2 .bzh-meet .bzf-email .bzf-em-tc {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--mute2);
}
.bz2 .bzh-meet .bzf-email .bzf-em-tc b {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bz2 .bzh-meet .bzf-email .bzf-em-tick {
  animation: bzh-em-tick 0.4s ease both;
}
@keyframes bzh-em-tick {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.bz2 .bzh-meet .bzf-email .bzf-em-tabs {
  font-size: 12px;
}
.bz2 .bzh-meet .bzf-email .bzf-em-tabs span {
  padding: 4px 10px;
}
.bz2 .bzh-meet .bzf-email .bzf-em-tbl {
  --bzf-em-rh: 36px;
  font-size: 12px;
}
.bz2 .bzh-meet .bzf-email .bzf-em-tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 78px;
  grid-template-areas: "c s st";
  column-gap: 10px;
  align-items: center;
  height: var(--bzf-em-rh);
  box-sizing: border-box;
  padding: 0 6px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.bz2 .bzh-meet .bzf-email .bzf-em-th {
  height: 28px;
  border-top: 0;
  font-size: 11px;
}
.bz2 .bzh-meet .bzf-email .bzf-em-tb {
  height: calc(3 * var(--bzf-em-rh));
  overflow: hidden;
}
.bz2 .bzh-meet .bzf-email .bzf-em-c,
.bz2 .bzh-meet .bzf-email .bzf-em-s {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bz2 .bzh-meet .bzf-email .bzf-em-c {
  grid-area: c;
  color: var(--ink);
}
.bz2 .bzh-meet .bzf-email .bzf-em-s {
  grid-area: s;
  color: var(--mute);
}
.bz2 .bzh-meet .bzf-email .bzf-em-st {
  grid-area: st;
}
.bz2 .bzh-meet .bzf-email .bzf-em-th .bzf-em-c,
.bz2 .bzh-meet .bzf-email .bzf-em-th .bzf-em-s,
.bz2 .bzh-meet .bzf-email .bzf-em-th .bzf-em-st {
  color: var(--mute2);
}
.bz2 .bzh-meet .bzf-email .bzf-em-tr[data-new] {
  background: rgba(25, 196, 138, 0.07);
  border-radius: 8px;
}
.bz2 .bzh-meet .bzf-email .bzf-em-tr[data-new] .bzf-em-c {
  font-weight: 500;
}
.bz2 .bzh-meet .bzf-email .bzf-em-row-in {
  animation: bzh-em-row 0.5s ease both;
}
@keyframes bzh-em-row {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: var(--bzf-em-rh);
    opacity: 1;
  }
}
.bz2 .bzh-meet .bzf-email .bzf-em-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  color: #0b6e4f;
  background: rgba(25, 196, 138, 0.12);
  border: 1px solid rgba(25, 196, 138, 0.35);
}
.bz2[data-theme="dark"] .bzh-meet .bzf-email .bzf-em-pill {
  color: #3bd39b;
}
/* narrow answer (phones): the phone shrinks beside the form card, Leads
   goes full width under them */
@container bzf-em (max-width: 559px) {
  .bz2 .bzh-meet .bzf-email .bzf-em-grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ph form" "leads leads";
    grid-template-rows: auto auto;
    column-gap: 10px;
  }
  .bz2 .bzh-meet .bzf-email .bzf-em-phone {
    zoom: 0.72;
  }
  .bz2 .bzh-meet .bzf-email .bzf-em-form {
    align-self: center;
    padding: 12px;
  }
  .bz2 .bzh-meet .bzf-email .bzf-em-in {
    flex-basis: 100%;
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }
  .bz2 .bzh-meet .bzf-email .bzf-em-btn {
    flex: 1 1 100%;
    height: 30px;
    font-size: 12px;
  }
}
/* narrow Leads card: Source goes under the contact */
@container bzf-em-leads (max-width: 380px) {
  .bz2 .bzh-meet .bzf-email .bzf-em-tbl {
    --bzf-em-rh: 40px;
  }
  .bz2 .bzh-meet .bzf-email .bzf-em-tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "c st" "s st";
    align-content: center;
    row-gap: 1px;
  }
  .bz2 .bzh-meet .bzf-email .bzf-em-th {
    height: 34px;
  }
  .bz2 .bzh-meet .bzf-email .bzf-em-s {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .bzh-meet .bzf-email .bzf-em-drop,
  .bz2 .bzh-meet .bzf-email .bzf-em-caret,
  .bz2 .bzh-meet .bzf-email .bzf-em-tick,
  .bz2 .bzh-meet .bzf-email .bzf-em-row-in {
    animation: none;
  }
  .bz2 .bzh-meet .bzf-email .bzf-em-slot,
  .bz2 .bzh-meet .bzf-email .bzf-em-mfb,
  .bz2 .bzh-meet .bzf-email .bzf-em-fh .chk {
    transition: none;
  }
}

/* hero flow: post-everywhere */
.bz2 .bzh-meet .bzf-pe {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.bz2 .bzh-meet .bzf-pe-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
  width: 150px;
}
.bz2 .bzh-meet .bzf-pe-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bz2 .bzh-meet .bzf-pe-meta .cap {
  font-size: 12px;
}
.bz2 .bzh-meet .bzf-pe-side {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bz2 .bzh-meet .bzf-pe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.bz2 .bzh-meet .bzf-pe-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--panel2);
  border: 1px solid var(--line);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.bz2 .bzh-meet .bzf-pe-chip img {
  display: block;
  flex: none;
  width: 20px;
}
.bz2 .bzh-meet .bzf-pe-pn {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ink2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bz2 .bzh-meet .bzf-pe-st {
  position: relative;
  flex: none;
  width: 46px;
  height: 16px;
}
.bz2 .bzh-meet .bzf-pe-rd,
.bz2 .bzh-meet .bzf-pe-lv {
  position: absolute;
  right: 0;
  top: 50%;
  opacity: 0;
  white-space: nowrap;
}
.bz2 .bzh-meet .bzf-pe-rd {
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #2f6fe8;
}
.bz2 .bzh-meet .bzf-pe-lv {
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b6e4f;
}
.bz2 .bzh-meet .bzf-pe-chk {
  width: 16px;
  height: 16px;
  color: var(--bg);
  transition: background 0.15s ease;
}
.bz2 .bzh-meet .bzf-pe-chip[data-s="ready"] .bzf-pe-rd {
  opacity: 1;
  transition: opacity 0.25s ease;
}
/* "Live" reads the moment Post to All is pressed (no fade in) */
.bz2 .bzh-meet .bzf-pe-chip[data-s="live"] .bzf-pe-lv {
  opacity: 1;
}
.bz2 .bzh-meet .bzf-pe-chip[data-s="live"] {
  background: rgba(11, 110, 79, 0.08);
  border-color: rgba(11, 110, 79, 0.4);
}
.bz2 .bzh-meet .bzf-pe-chip[data-s="live"] .bzf-pe-chk {
  background: #0b6e4f;
  color: #fff;
}
.bz2 .bzh-meet .bzf-pe-anim .bzf-pe-chip[data-s="live"] .bzf-pe-chk {
  animation: bzh-pe-pop 0.25s ease both;
}
.bz2 .bzh-meet .bzf-pe-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.bz2 .bzh-meet .bzf-pe-fst {
  font-size: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.bz2 .bzh-meet .bzf-pe[data-stage="result"] .bzf-pe-fst {
  color: #0b6e4f;
  font-weight: 500;
}
.bz2 .bzh-meet .bzf-pe-foot button.act-primary {
  /* 172: "Post to All · 7" at 13px with its padding, so the button
     keeps its width when it turns to "Posted" */
  min-width: 172px;
}
.bz2 .bzh-meet .bzf-pe[data-stage="result"] .bzf-pe-foot button.act-primary {
  background: #0b6e4f;
  color: #fff;
}
.bz2
  .bzh-meet
  .bzf-pe[data-stage="result"]
  .bzf-pe-foot
  button.act-primary:hover {
  background: #095c42;
}
.bz2
  .bzh-meet
  .bzf-pe[data-stage="result"]
  .bzf-pe-foot
  button.act-primary::before {
  content: "";
  box-sizing: border-box;
  width: 5px;
  height: 9px;
  margin: -3px 2px 0 0;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bz2 .bzh-meet .bzf-pe-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(11, 110, 79, 0.08);
  border: 1px solid rgba(11, 110, 79, 0.25);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    transform 0.25s ease;
}
.bz2 .bzh-meet .bzf-pe[data-stage="result"] .bzf-pe-toast {
  opacity: 1;
  transform: none;
}
.bz2 .bzh-meet .bzf-pe-tw > div {
  min-width: 0;
}
.bz2 .bzh-meet .bzf-pe-toast-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #0b6e4f;
  color: #fff;
}
.bz2[data-theme="dark"] .bzh-meet .bzf-pe-chip[data-s="live"] {
  background: rgba(25, 196, 138, 0.12);
  border-color: rgba(25, 196, 138, 0.4);
}
.bz2[data-theme="dark"] .bzh-meet .bzf-pe-chip[data-s="live"] .bzf-pe-chk,
.bz2[data-theme="dark"] .bzh-meet .bzf-pe-toast-ic {
  background: #19c48a;
}
.bz2[data-theme="dark"] .bzh-meet .bzf-pe-lv,
.bz2[data-theme="dark"] .bzh-meet .bzf-pe[data-stage="result"] .bzf-pe-fst {
  color: #3bd39b;
}
.bz2[data-theme="dark"] .bzh-meet .bzf-pe-toast {
  background: rgba(25, 196, 138, 0.12);
  border-color: rgba(25, 196, 138, 0.35);
}
.bz2[data-theme="dark"] .bzh-meet .bzf-pe-pi {
  filter: invert(1) hue-rotate(180deg);
}
@keyframes bzh-pe-pop {
  50% {
    transform: scale(1.25);
  }
}
@media (max-width: 600px) {
  .bz2 .bzh-meet .bzf-pe {
    gap: 12px;
  }
  .bz2 .bzh-meet .bzf-pe-media {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .bz2 .bzh-meet .bzf-pe-phone {
    width: 72px;
    height: 128px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }
  .bz2 .bzh-meet .bzf-pe-side {
    flex-basis: 100%;
  }
}
@media (max-width: 520px) {
  .bz2 .bzh-meet .bzf-pe-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bz2 .bzh-meet .bzf-pe-chip {
    gap: 8px;
    padding: 9px 10px;
  }
  .bz2 .bzh-meet .bzf-pe-st {
    width: 34px;
  }
  .bz2 .bzh-meet .bzf-pe-chk {
    display: none;
  }
  .bz2 .bzh-meet .bzf-pe-tw {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: -8px;
    transition: grid-template-rows 0.25s ease;
  }
  .bz2 .bzh-meet .bzf-pe-tw > div {
    min-height: 0;
    overflow: hidden;
  }
  .bz2 .bzh-meet .bzf-pe-tw .bzf-pe-toast {
    margin-top: 10px;
  }
  .bz2 .bzh-meet .bzf-pe[data-stage="result"] .bzf-pe-tw {
    grid-template-rows: 1fr;
  }
  .bz2 .bzh-meet .bzf-pe-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .bz2 .bzh-meet .bzf-pe-foot button.act-primary {
    align-self: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .bzh-meet .bzf-pe-anim .bzf-pe-chip[data-s="live"] .bzf-pe-chk {
    animation: none;
  }
  .bz2 .bzh-meet .bzf-pe-chip,
  .bz2 .bzh-meet .bzf-pe-toast,
  .bz2 .bzh-meet .bzf-pe-tw {
    transition: none;
  }
}

/* hero integrator fixes (2026-10-12) */
/* story: on a phone the long captions pushed the check under the text on two
   of the four rows; the text column now takes the free space so every check
   stays on the right */
.bz2 .bzh-meet .storyrow .prow > div:first-child {
  flex: 1 1 0;
  min-width: 0;
}

/* hero brands (2026-10-13)
   Other real Linkme businesses in Pure Green's seat (scenes/hero/
   businesses.ts, flows/kinds). The dashboard chrome follows the business
   of the flow that plays; these are the pieces their content adds. The
   round 1 switchers (?heroBrands) were removed in round 2. */

/* their avatars are photos that fill the circle; Pure Green's logo keeps
   its panel */
.bz2 .bzh-meet .ws img[data-fit="cover"] {
  padding: 0;
  object-fit: cover;
}
.bz2 .bzh-meet .uavatar img[data-fit="cover"] {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* their DM Automations: the comments (or the DM inbox) with no post */
.bz2 .bzh-meet .bzf-ar-reel[data-nomedia] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "head" "list" "add";
  min-height: 0;
}
.bz2 .bzh-meet .bzf-ar-reel[data-nomedia] .bzf-ar-list {
  min-height: 112px;
}
/* a dm automation's link image: "Sends this link" under the header */
.bz2 .bzh-meet .bzb-sends {
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.bz2 .bzh-meet .bzb-sendsi {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--line);
  color: var(--ink);
}
/* the tag on the link's image: it is the link, never a post */
.bz2 .bzh-meet .bzb-linktag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 520px) {
  .bz2 .bzh-meet .bzb-linktag {
    display: none;
  }
}
.bz2 .bzh-meet .bzb-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.25;
}
.bz2 .bzh-meet .bzb-head .bzf-ar-sub {
  font-size: 11.5px;
}
.bz2 .bzh-meet .bzb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bz2 .bzh-meet .bzb-lbtn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bz2 .bzh-meet .bzb-replied {
  opacity: 0;
  color: #19a974;
  transition: opacity 0.3s ease;
}
.bz2 .bzh-meet .bzb-replied[data-on] {
  opacity: 1;
}
.bz2[data-theme="dark"] .bzh-meet .bzb-replied {
  color: #3bd39b;
}
/* a comment keyword that goes live with a business's week */
.bz2 .bzh-meet .bzb-kw p {
  margin: 0;
}
.bz2 .bzh-meet .bzb-kw .ititle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* a week post's link tile names can be long */
.bz2 .bzh-meet .bzf-trend.bzb-tag {
  white-space: normal;
}
/* Form Submissions before the first one */
.bz2 .bzh-meet .bzf-email .bzb-em-empty {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--mute2);
}
/* the closing caption ("Example numbers") */
.bz2 .bzh-meet .bzf-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--mute);
}
/* a carousel slide with a full bleed photo (Slide.photo) under a scrim */
.bz2 .bzh-meet .slide:has(> .sl-photo) {
  background: #1b1b1b;
  color: #fff;
}
.bz2 .bzh-meet .sl-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a light wash at the top for the logo and counter, then a dark band
   from the middle down so the eyebrow and the title read over any photo;
   data-dim (Slide.photo.dim) is an even wash for big numbers */
.bz2 .bzh-meet .sl-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0) 24%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.66) 52%,
    rgba(0, 0, 0, 0.8) 100%
  );
}
.bz2 .bzh-meet .sl-scrim[data-dim] {
  background: rgba(8, 10, 22, 0.66);
}
.bz2 .bzh-meet .slide:has(> .sl-photo) .sl-eyebrow {
  opacity: 1;
}
.bz2 .bzh-meet .slide:has(> .sl-photo) .sl-copy {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.bz2 .bzh-meet .slide:has(> .sl-photo) .sl-count {
  opacity: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* a crest in its own colors (Carousel.logo.color) */
.bz2 .bzh-meet .slidelogo[data-color] {
  height: 26px;
  top: 12px;
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .bzh-meet .bzb-replied {
    transition: none;
  }
}

/* hero brands, round 2 (2026-10-13): the autoplay tour and the carousel
   palettes. The default hero tours the businesses by itself
   (useHeroChat.ts); on each change the thread, the rows and the business's
   chrome dip out together, swap, and come back (data-leaving on .chat).
   The fade matches LEAVE_MS (300). The recent chats' own rule above
   (button.rc-item, 0,4,1) carries the same opacity transition. */
.bz2 .bzh-meet .chat .bzh-tin,
.bz2 .bzh-meet .chat .ws > img,
.bz2 .bzh-meet .chat .ws > span,
.bz2 .bzh-meet .chat .wsm > img,
.bz2 .bzh-meet .chat .wsm > span,
.bz2 .bzh-meet .chat .upill-t,
.bz2 .bzh-meet .chat .rc-item {
  transition: opacity 0.3s ease;
}
.bz2 .bzh-meet .chat[data-leaving] .bzh-tin,
.bz2 .bzh-meet .chat[data-leaving] .ws > img,
.bz2 .bzh-meet .chat[data-leaving] .ws > span,
.bz2 .bzh-meet .chat[data-leaving] .wsm > img,
.bz2 .bzh-meet .chat[data-leaving] .wsm > span,
.bz2 .bzh-meet .chat[data-leaving] .upill-t,
.bz2 .bzh-meet .chat[data-leaving] .rc-item {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .bzh-meet .chat .bzh-tin,
  .bz2 .bzh-meet .chat .ws > img,
  .bz2 .bzh-meet .chat .ws > span,
  .bz2 .bzh-meet .chat .wsm > img,
  .bz2 .bzh-meet .chat .wsm > span,
  .bz2 .bzh-meet .chat .upill-t,
  .bz2 .bzh-meet .chat .rc-item,
  .bz2 .bzh-meet .chat button.rc-item {
    transition: none;
  }
}

/* the business on phones (HeroDashboard .wsm): the sidebar and the page
   pill are hidden at 980 px and under, so its avatar and name sit at the
   start of the top bar, the bell and New Chat move to the end */
.bz2 .bzh-meet .wsm {
  display: none;
}
@media (max-width: 980px) {
  .bz2 .bzh-meet .wsm {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-right: auto;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
  }
  .bz2 .bzh-meet .wsm > img {
    width: 28px;
    height: 28px;
    flex: none;
    box-sizing: border-box;
    border-radius: 50%;
    object-fit: contain;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 4px;
  }
  .bz2 .bzh-meet .wsm > img[data-fit="cover"] {
    padding: 0;
    object-fit: cover;
  }
  .bz2 .bzh-meet .wsm > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* on a phone the bell gives its room to the business name ("New York
   Islanders" was cut to "New York I...") */
@media (max-width: 520px) {
  .bz2 .bzh-meet .topr > .ibtn {
    display: none;
  }
}

/* story: Post to All (flows/kinds/story.tsx). Each row's check gives way
   to a "Published" pill the moment the button is pressed, all three
   together; both share one grid cell so the row keeps its size */
.bz2 .bzh-meet .bzf-st {
  display: grid;
  justify-items: end;
  align-items: center;
  flex: none;
}
.bz2 .bzh-meet .bzf-st > * {
  grid-area: 1 / 1;
  transition: opacity 0.15s ease;
}
.bz2 .bzh-meet .bzf-pub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #128a5a;
  background: rgba(25, 169, 116, 0.12);
  opacity: 0;
}
.bz2 .bzh-meet .bzf-st[data-on] > .chk {
  opacity: 0;
}
.bz2 .bzh-meet .bzf-st[data-on] > .bzf-pub {
  opacity: 1;
}
.bz2[data-theme="dark"] .bzh-meet .bzf-pub {
  color: #3bd39b;
  background: rgba(25, 169, 116, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .bzh-meet .bzf-st > * {
    transition: none;
  }
}

/* each business's carousel in its own colours (Carousel.palette); Pure
   Green's carousel has no data-pal and keeps the slides above */
/* New York Islanders: royal blue and orange */
.bz2 .bzh-meet .carousel[data-pal="nyi"] .s2 {
  background: #f3f5fa;
  color: #00205b;
}
.bz2 .bzh-meet .carousel[data-pal="nyi"] .s3 {
  background: linear-gradient(160deg, #ff8a3d 0%, #fc4c02 100%);
  color: #00205b;
}
.bz2 .bzh-meet .carousel[data-pal="nyi"] .s4 {
  background: linear-gradient(200deg, #1f4fa8 0%, #003087 55%, #001e50 100%);
  color: #ffffff;
}
.bz2 .bzh-meet .carousel[data-pal="nyi"] .ingl li {
  border-bottom-color: rgba(0, 48, 135, 0.14);
}
.bz2 .bzh-meet .carousel[data-pal="nyi"] .sl-foot {
  color: #fc4c02;
}
.bz2 .bzh-meet .carousel[data-pal="nyi"] .sl-btn {
  color: #003087;
}
/* Mall of America: magenta and blue */
.bz2 .bzh-meet .carousel[data-pal="moa"] .s2 {
  background: #f7f2f4;
  color: #5e0a2d;
}
.bz2 .bzh-meet .carousel[data-pal="moa"] .s4 {
  background: linear-gradient(200deg, #d0236b 0%, #a6124f 55%, #6e0b34 100%);
  color: #ffffff;
}
.bz2 .bzh-meet .carousel[data-pal="moa"] .ingl li {
  border-bottom-color: rgba(166, 18, 79, 0.16);
}
.bz2 .bzh-meet .carousel[data-pal="moa"] .sl-foot {
  color: #a6124f;
}
.bz2 .bzh-meet .carousel[data-pal="moa"] .sl-btn {
  color: #a6124f;
}
/* E11EVEN Miami: black and gold */
.bz2 .bzh-meet .carousel[data-pal="e11"] .s2 {
  background: #f5f2ea;
  color: #000f14;
}
.bz2 .bzh-meet .carousel[data-pal="e11"] .s3 {
  background: linear-gradient(160deg, #f2da7a 0%, #e5c449 55%, #c9a63a 100%);
  color: #000f14;
}
.bz2 .bzh-meet .carousel[data-pal="e11"] .s4 {
  background: linear-gradient(200deg, #2a3a40 0%, #0b1a20 55%, #000f14 100%);
  color: #ffffff;
}
.bz2 .bzh-meet .carousel[data-pal="e11"] .ingl li {
  border-bottom-color: rgba(0, 15, 20, 0.14);
}
/* the foot drawn as a price band under the caps */
.bz2 .bzh-meet .carousel[data-pal="e11"] .sl-foot {
  padding: 8px 12px;
  border-radius: 8px;
  background: #000f14;
  color: #e5c449;
  font-weight: 600;
  text-align: center;
}
.bz2 .bzh-meet .carousel[data-pal="e11"] .sl-btn {
  color: #000f14;
}
/* a four-row list reaches the foot: no rule under the last row, so no
   line runs through the foot */
.bz2 .bzh-meet .carousel[data-pal] .ingl li:last-child {
  border-bottom: 0;
}

/* ── a sub page's head (/features/ads-team-security, 2026-10-18) ─────
   The hero's top room, centred: the H1, one line and the demo button.
   The first film's section draws the rule under it. */
.bz2 .bzp-head {
  padding: 72px 0 96px;
  text-align: center;
}
/* the page's content paints over the aurora (the /business hero is tall
   enough that the wash ends inside it; this head is not), and the wash
   stops about where the head does */
.bz2:has(.bzp-head) main {
  position: relative;
  z-index: 1;
}
.bz2:has(.bzp-head) .aurora {
  height: 660px;
}
/* the first film paints the page ground, so the wash stops on the rule
   on every width (the head's height changes with the H1's wrap) */
.bz2 .bzp-head + * {
  background: var(--bg);
}
.bz2 .bzp-head .in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.bz2 .bzp-head .h1 {
  max-width: 15ch;
  text-wrap: balance;
}
.bz2 .bzp-head .lead {
  max-width: 600px;
}
.bz2 .bzp-head .btn {
  margin-top: 8px;
}
/* the head in white on the /business hero colours (Kedem 2026-10-29:
   "that same colour should be on all the pages") */
.bz2:has(.bzp-head) .bzp-head .h1 {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}
.bz2:has(.bzp-head) .bzp-head .lead {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22);
}
.bz2:has(.bzp-head) .bzp-head .btn-primary,
.bz2:has(.bzp-head) .bzp-head .btn-primary:hover {
  background: #ffffff;
  color: #111113;
}
/* the second button sits where the colours fade to white, so it gets a
   dark glass: white words stay readable on colour and on white alike
   (2026-11-01: the clear outline was white on white) */
.bz2:has(.bzp-head) .bzp-head .btn-outline,
.bz2:has(.bzp-head) .bzp-head .btn-outline:hover {
  background: rgba(17, 17, 19, 0.72);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@media (max-width: 980px) {
  .bz2 .bzp-head {
    padding: 40px 0 56px;
  }
  .bz2:has(.bzp-head) .aurora {
    height: 640px;
  }
}

/* stories (sections/Stories.tsx): the customer stories row after
   Pricing. Cards scroll sideways and snap; a card cut by either edge
   fades, except at the row's start (.st-start) and end (.st-end). */
.bz2 .st-in {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.bz2 .st-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.bz2 .st-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.bz2 .st-head .lead {
  max-width: 560px;
}
.bz2 .st-nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.bz2 .st-nav button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--bg);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.2s,
    opacity 0.2s;
}
.bz2 .st-nav button:hover:not(:disabled) {
  background: var(--panel2);
}
.bz2 .st-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}
.bz2 .st-row {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  --st-fl: 56px;
  --st-fr: 96px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--st-fl),
    #000 calc(100% - var(--st-fr)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--st-fl),
    #000 calc(100% - var(--st-fr)),
    transparent
  );
}
.bz2 .st-row::-webkit-scrollbar {
  display: none;
}
.bz2 .st-row.st-start {
  --st-fl: 0px;
}
.bz2 .st-row.st-end {
  --st-fr: 0px;
}
.bz2 .st-card {
  flex: 0 0 383px;
  scroll-snap-align: start;
}
.bz2 .st-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  outline-offset: 4px;
  border-radius: 20px;
}
.bz2 .st-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in srgb, var(--st-tint) 22%, var(--bg)),
      transparent 70%
    ),
    color-mix(in srgb, var(--st-tint) 9%, var(--panel));
  border: 1px solid var(--line);
  margin-bottom: 20px;
}
/* the brand's real page, in a phone that runs off the bottom */
.bz2 .st-phone {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 46%;
  aspect-ratio: 780 / 1688;
  transform: translateX(-50%);
  border-radius: 26px;
  border: 5px solid #0a0a0a;
  background: #0a0a0a;
  overflow: hidden;
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bz2 .st-phone video,
.bz2 .st-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.bz2 .st-link:hover .st-phone,
.bz2 .st-link:focus-visible .st-phone {
  transform: translateX(-50%) translateY(-8px);
}
.bz2 .st-tag {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute3-text);
  margin-bottom: 10px;
}
.bz2 .st-name {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.bz2 .st-line {
  font-size: 15px;
  line-height: 1.5;
  color: var(--mute);
  margin-bottom: 14px;
}
.bz2 .st-stat {
  font-size: 14px;
  color: var(--mute);
  margin-bottom: 16px;
}
.bz2 .st-stat b {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.bz2 .st-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.bz2 .st-more svg {
  transition: transform 0.25s;
}
.bz2 .st-link:hover .st-more svg {
  transform: translateX(3px);
}
@media (max-width: 980px) {
  .bz2 .st-in {
    gap: 28px;
  }
  .bz2 .st-nav {
    display: none;
  }
  /* the row runs to the screen's right edge on phones */
  .bz2 .st-row {
    margin-right: -20px;
    padding-right: 20px;
    scroll-padding-left: 0;
    gap: 14px;
  }
  .bz2 .st-card {
    flex-basis: min(80vw, 330px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bz2 .st-phone,
  .bz2 .st-more svg {
    transition: none;
  }
}