/* ============================================================== *
 * /pricing footer                                                *
 *                                                                *
 * The shared Footer component is styled by landing-globals.css,  *
 * which /pricing deliberately does not load (its Webflow .gap-*  *
 * and .container rules collide with this page's Tailwind         *
 * layout). This file carries just the footer's own rules,        *
 * scoped under .pricing-page so nothing leaks either way,        *
 * plus the light treatment the agencies page and light home      *
 * already give the footer on white pages.                        *
 * ============================================================== */

/* --- layout (from landing-globals.css, footer subtree only) --- */

.pricing-page .padding-footer {
  padding-top: 64px;
  padding-bottom: 38px;
}
.pricing-page .padding-footer .container {
  width: 100%;
  max-width: 1320px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-page .footer-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 48px;
}
.pricing-page .footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.pricing-page .footer-logo {
  width: 140px;
}
.pricing-page .footer-links-wrapper {
  display: flex;
  align-items: flex-start;
  column-gap: 64px;
}
.pricing-page .footer-links-row {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.pricing-page .padding-footer .gap-8 {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.pricing-page .footer-links-title {
  font-size: 20px;
  font-weight: 500;
}
.pricing-page .footer-link {
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
}
.pricing-page .footer-bottom {
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pricing-page .horisontal-flex-16 {
  display: flex;
  align-items: center;
  column-gap: 16px;
}
.pricing-page .border-radius-60 {
  border-radius: 60px;
}
.pricing-page .market-icon {
  width: 140px;
  transition: all 300ms 0ms ease;
}
.pricing-page .market-icon:hover {
  transform: scale(0.99, 0.99);
}

/* --- light treatment (same recipe as agencies / light home:     *
 *     a black slab would cut the white page in half)             */

.pricing-page .padding-footer {
  background: transparent;
  border-top: 1px solid #e7e7ea;
}
.pricing-page .footer-links-title {
  color: #0a0a0a;
}
.pricing-page .footer-link,
.pricing-page .footer-bottom {
  color: #6b6b74;
}
.pricing-page .footer-link:hover {
  /* the shared hover paints a pink to gold gradient into the text; the
     revamp keeps this page free of brand gradients, so plain ink (until
     the shared site footer replaces this one at merge time) */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #0a0a0a;
}
/* the component hardcodes the white wordmark; paint the dark one the
   navbar already serves on light pages (content:url() is Chrome-only,
   so push the intrinsic image out of its box instead) */
.pricing-page .padding-footer .footer-logo {
  width: 140px;
  height: 35px;
  object-position: -9999px 0;
  background: url("/assets/c98549a0324e9861b0d30226b687035d_4649.svg") no-repeat
    left center / contain;
}
/* the store badges are self-contained white pills; give them an edge */
.pricing-page .footer-bottom img {
  border: 1px solid #e7e7ea;
  border-radius: 9px;
}

/* --- responsive (from landing-globals.css) --- */

@media screen and (max-width: 1167px) {
  .pricing-page .footer-top {
    flex-direction: column;
    row-gap: 20px;
  }
  .pricing-page .footer-links-wrapper {
    grid-template-columns: 1fr 1fr;
    display: grid;
    row-gap: 20px;
  }
  .pricing-page .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 20px;
  }
}
@media screen and (max-width: 767px) {
  .pricing-page .padding-footer {
    padding-top: 32px;
  }
  .pricing-page .footer-wrapper {
    row-gap: 32px;
  }
}
@media screen and (max-width: 500px) {
  .pricing-page .border-radius-60 {
    border-radius: 40px;
  }
  .pricing-page .footer-links-row {
    row-gap: 14px;
  }
  .pricing-page .footer-link {
    font-size: 16px;
  }
  .pricing-page .footer-bottom {
    font-size: 12px;
  }
}

/* ============================================================== *
 * pricing v2 (2026-10-07 revamp)                                 *
 *                                                                *
 * /pricing in the new Business page's language: white ground,    *
 * Inter, the six-blob colour wash, the dashed 1280 rail, blue    *
 * dot labels, grey panels and black pill buttons. Same values    *
 * as business-v2.css (.bz2), redrawn here under .pricing-page    *
 * with a pz- prefix so neither page depends on the other's       *
 * stylesheet.                                                    *
 * ============================================================== */

.pricing-page {
  --pz-ink: #0a0a0a;
  --pz-ink2: #2b2b2a;
  --pz-mute: #5f5f5c;
  --pz-mute2: #6b6b68;
  --pz-mute3: #8a8a87;
  --pz-panel: #f7f7f5;
  --pz-panel2: #f2f2f0;
  --pz-panel3: #e8e8e6;
  --pz-line: rgba(0, 0, 0, 0.07);
  --pz-line2: rgba(0, 0, 0, 0.12);
  --pz-line3: rgba(0, 0, 0, 0.3);
  /* the page accent is the Linkme pink now (Kedem 2026-11-04: every blue
     accent in the logo gradient); the name stays so every rule follows */
  --pz-blue: #ec008c;
  color: var(--pz-ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* --- the frame: a 1280 column, no side lines (Kedem 2026-10-15) --- */
.pricing-page .pz-rail {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* --- the colour wash (business-v2.css .aurora, same blobs) --- */
.pricing-page .pz-aurora {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 820px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
.pricing-page .pz-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.4) 46%,
    rgba(255, 255, 255, 0.9) 80%,
    #ffffff 100%
  );
}
.pricing-page .pz-au {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.9;
  will-change: transform;
  transform: translateZ(0);
}
.pricing-page .pz-au1 {
  width: 62vw;
  height: 560px;
  left: -14vw;
  top: -260px;
  background: #79b0ff;
  animation: pz-au-a 19s ease-in-out infinite alternate;
}
.pricing-page .pz-au2 {
  width: 54vw;
  height: 600px;
  right: -12vw;
  top: -220px;
  background: #b9a6ff;
  animation: pz-au-b 23s ease-in-out infinite alternate;
}
.pricing-page .pz-au3 {
  width: 44vw;
  height: 520px;
  left: 28vw;
  top: -40px;
  background: #ffb3a3;
  animation: pz-au-c 21s ease-in-out infinite alternate;
}
.pricing-page .pz-au4 {
  width: 46vw;
  height: 480px;
  right: 14vw;
  top: 220px;
  background: #8de2c4;
  animation: pz-au-d 25s ease-in-out infinite alternate;
}
.pricing-page .pz-au5 {
  width: 40vw;
  height: 440px;
  left: 4vw;
  top: 300px;
  background: #ffdf8c;
  animation: pz-au-e 27s ease-in-out infinite alternate;
}
.pricing-page .pz-au6 {
  width: 36vw;
  height: 420px;
  left: 44vw;
  top: 380px;
  background: #8fd0ff;
  animation: pz-au-f 24s ease-in-out infinite alternate;
}
@keyframes pz-au-a {
  to {
    transform: translate(18vw, 160px) scale(1.18);
  }
}
@keyframes pz-au-b {
  to {
    transform: translate(-16vw, 200px) scale(0.9);
  }
}
@keyframes pz-au-c {
  to {
    transform: translate(-14vw, 220px) scale(1.25);
  }
}
@keyframes pz-au-d {
  to {
    transform: translate(-12vw, -180px) scale(1.12);
  }
}
@keyframes pz-au-e {
  to {
    transform: translate(22vw, -140px) scale(0.92);
  }
}
@keyframes pz-au-f {
  to {
    transform: translate(-20vw, -200px) scale(1.2);
  }
}
@media (max-width: 980px) {
  .pricing-page .pz-aurora {
    height: 640px;
  }
  .pricing-page .pz-au {
    filter: blur(56px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page .pz-au {
    animation: none;
  }
}

/* --- type --- */
.pricing-page .pz-h1 {
  margin: 0;
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--pz-ink);
  text-wrap: balance;
}
/* People leads with a full sentence, as live link.me/pricing does: one size
   down so "Grow your social media engagement" holds one line on desktop */
.pricing-page .pz-h1.pz-h1-long {
  font-size: 50px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.pricing-page .pz-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--pz-mute);
  text-wrap: balance;
}

/* --- hero --- */
.pricing-page .pz-hero {
  position: relative;
  padding: 88px 48px 64px;
}
.pricing-page .pz-hero-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.pricing-page .pz-hero .pz-lead {
  max-width: 640px;
}
@media (min-width: 768px) {
  .pricing-page .pz-h1-line {
    display: block;
  }
}
.pricing-page .pz-sub-line {
  display: block;
}
.pricing-page .pz-chunk {
  white-space: nowrap;
}
.pricing-page .pz-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* --- segmented control: the header's People | Business switch, sized
       up for the page. The big one picks the audience, the small one
       the billing interval. --- */
.pricing-page .pz-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  border-radius: 999px;
  background: rgba(242, 242, 240, 0.86);
  border: 1px solid var(--pz-line);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.pricing-page .pz-seg-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--pz-mute);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.pricing-page .pz-seg-tab:hover {
  color: var(--pz-ink);
}
.pricing-page .pz-seg-tab.on {
  color: var(--pz-ink);
}
.pricing-page .pz-seg-tab:focus-visible {
  outline: 2px solid var(--pz-blue);
  outline-offset: 2px;
}
.pricing-page .pz-seg-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}
/* the white thumb: on the audience row it is the button's own fill, on
   the billing row a sliding span (Motion layoutId) */
.pricing-page .pz-seg-lg .pz-seg-tab.on,
.pricing-page .pz-seg-thumb {
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--pz-line);
}
.pricing-page .pz-seg-thumb {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}
.pricing-page .pz-seg-lg {
  padding: 4px;
}
.pricing-page .pz-seg-lg .pz-seg-tab {
  height: 40px;
  padding: 0 22px;
  font-size: 15px;
}
.pricing-page .pz-save {
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* always green with white letters, picked or not (Kedem 2026-10-16),
     the same green as the /business "3 months free" badge (.bz2 .bill-save) */
  color: #fff;
  background: #19c48a;
}

@media (max-width: 980px) {
  .pricing-page .pz-hero {
    padding: 56px 20px 48px;
  }
  .pricing-page .pz-h1 {
    font-size: 42px;
    line-height: 1.08;
  }
  .pricing-page .pz-h1.pz-h1-long {
    font-size: 30px;
    line-height: 1.15;
  }
  .pricing-page .pz-lead {
    font-size: 17px;
  }
}
@media (max-width: 380px) {
  .pricing-page .pz-h1 {
    font-size: 36px;
  }
  .pricing-page .pz-h1.pz-h1-long {
    font-size: 27px;
  }
  /* a lead chunk never breaks inside, so at 360 it needs the smaller size
     to fit the 320px column */
  .pricing-page .pz-lead {
    font-size: 16px;
  }
  .pricing-page .pz-seg-lg .pz-seg-tab {
    padding: 0 16px;
    font-size: 14px;
  }
}
/* phones: the billing toggle is drawn 32px tall and "Compare all
   features" 20px; an invisible band around each makes a 40px tap target
   without changing the look */
@media (max-width: 767px) {
  .pricing-page .pz-seg:not(.pz-seg-lg) .pz-seg-tab::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
  .pricing-page .pz-plans-link a {
    position: relative;
  }
  .pricing-page .pz-plans-link a::after {
    content: "";
    position: absolute;
    inset: -10px -6px;
  }
}

/* --- plan cards (job 2): the Business page's pricing cards. Grey panel,
       hairline edge, 16px corners; the recommended plan gets the darker
       edge, the blue chip and the black button. One set of classes for
       the People cards (PricingPeopleCard) and the Business and Agencies
       cards (PricingBusinessPlans TierCard). --- */
.pricing-page .pz-cap {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--pz-mute2);
}
.pricing-page .pz-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  max-width: 1184px;
  margin: 0 auto;
}
.pricing-page .pz-plans-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 800px;
}
/* the business tab: the /business plan cards in a .bz2 island
   (BusinessPlanGrid, styled by business-v2.css), on the old row's width */
.pricing-page .pz-seat {
  max-width: 1184px;
  margin: 0 auto;
}
/* the island sits on the page's aurora, so it drops the .bz2 white page
   ground and full-screen height (the Meet Link banner spans only the two
   AI cards, which left a white box over the aurora beside it) */
.pricing-page .pz-seat.bz2-island {
  min-height: 0;
  background: transparent;
}
/* /business spaces the cards and the demo band with .pk-in's gap; here
   they sit straight in the island, so the band brings its own */
.pricing-page .pz-seat .pk-demo {
  margin-top: 44px;
}
.pricing-page .pz-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 28px;
  border-radius: 16px;
  background: var(--pz-panel2);
  border: 1px solid var(--pz-line);
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}
.pricing-page .pz-plan:hover {
  border-color: var(--pz-line3);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pricing-page .pz-plan:hover {
    transform: translateY(-2px);
  }
}
.pricing-page .pz-plan.pz-pick {
  border-color: var(--pz-line3);
}
.pricing-page .pz-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pricing-page .pz-plan-name {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-chip {
  flex: none;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  /* the deep end of the gradient so the white words read */
  background: linear-gradient(135deg, #ec008c, #d9480f);
}
.pricing-page .pz-plan-tag {
  margin-top: 6px;
}
/* every price row is the figure's height, whatever it holds (the $0, a
   loading shimmer, a price, or "Pricing unavailable"), so the buttons
   below line up across the row */
.pricing-page .pz-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  min-height: 40px;
  margin: 0;
}
.pricing-page .pz-price-num {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-price-unit {
  white-space: nowrap;
  font-size: 13px;
  color: var(--pz-mute2);
}
.pricing-page .pz-price-na {
  font-size: 15px;
  line-height: 40px;
  color: var(--pz-mute);
}
.pricing-page .pz-price-load {
  height: 40px;
}
.pricing-page .pz-price-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-height: 19px;
  margin-top: 8px;
}
.pricing-page .pz-tag {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--pz-blue);
  background: rgba(236, 0, 140, 0.1);
}
.pricing-page .pz-btn,
.pricing-page a.pz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}
.pricing-page .pz-btn-block {
  width: 100%;
}
.pricing-page .pz-btn-primary,
.pricing-page a.pz-btn-primary {
  color: #ffffff;
  background: var(--pz-ink);
}
.pricing-page .pz-btn-primary:hover,
.pricing-page a.pz-btn-primary:hover {
  color: #ffffff;
  background: var(--pz-ink2);
}
.pricing-page .pz-btn-outline,
.pricing-page a.pz-btn-outline {
  color: var(--pz-ink);
  background: transparent;
  border-color: var(--pz-line2);
}
.pricing-page .pz-btn-outline:hover,
.pricing-page a.pz-btn-outline:hover {
  color: var(--pz-ink);
  border-color: var(--pz-line3);
}
@media (prefers-reduced-motion: no-preference) {
  .pricing-page .pz-btn:hover {
    transform: translateY(-1px);
  }
}
.pricing-page .pz-btn:focus-visible {
  outline: 2px solid var(--pz-blue);
  outline-offset: 2px;
}
.pricing-page .pz-btn:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}
.pricing-page .pz-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-page .pz-plan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pricing-page .pz-plan-list li {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pz-ink2);
}
.pricing-page .pz-plan-sub {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pz-mute2);
}
.pricing-page .pz-plan-rule {
  padding-top: 20px;
  border-top: 1px solid var(--pz-line);
}
.pricing-page .pz-plan-lead {
  margin: 0 0 -6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pricing-page .pz-stats li {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pz-ink2);
}
.pricing-page .pz-stats strong {
  font-weight: 600;
  color: var(--pz-ink);
}
.pricing-page .pz-quote {
  margin: auto 0 0;
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--pz-line);
}
.pricing-page .pz-quote blockquote {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pz-mute);
}
.pricing-page .pz-plans-note {
  margin-top: 28px;
  text-align: center;
}
.pricing-page .pz-plans-link {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.pricing-page .pz-plans-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pz-ink);
  text-decoration: none;
}
.pricing-page .pz-plans-link a svg {
  transition: transform 0.2s ease;
}
.pricing-page .pz-plans-link a:hover svg {
  transform: translateY(2px);
}

/* the switch band under the Business cards: one wide grey panel */
.pricing-page .pz-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  max-width: 1184px;
  margin: 20px auto 0;
  padding: 24px 28px;
  border-radius: 16px;
  background: var(--pz-panel2);
  border: 1px solid var(--pz-line);
}
.pricing-page .pz-switch-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-switch-body {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pz-mute);
  text-wrap: pretty;
}

/* the audience line wraps to two lines only in the narrow three-column
   band; hold both lines there so the prices line up */
@media (min-width: 981px) and (max-width: 1279px) {
  .pricing-page .pz-plan-tag {
    min-height: 38px;
  }
}
@media (max-width: 980px) {
  .pricing-page .pz-plans,
  .pricing-page .pz-plans-2 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
  .pricing-page .pz-seat {
    max-width: 560px;
  }
  /* one card per row: nothing to line up, so an empty note line goes,
     and so does the whole price block when the plans never loaded (the
     card prints an empty .pz-price then; its 40px would sit blank
     between the tagline and the button) */
  .pricing-page .pz-price-note:empty,
  .pricing-page .pz-plan > div:has(> .pz-price:empty) {
    display: none;
  }
  .pricing-page .pz-switch {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 18px;
    max-width: 560px;
    padding: 24px 20px;
    text-align: center;
  }
}
@media (max-width: 380px) {
  .pricing-page .pz-plan {
    padding: 24px 20px;
  }
}

/* --- compare table (job 3): one table for all three tabs
       (modules/pricing/PricingCompare.tsx). A white card with a hairline
       edge; closed it is a 400px bar, open it widens to the column while
       the rows unfold. Hairline rows, ink checks, the recommended column
       on the panel tone, the header sticks while the rows scroll. --- */
.pricing-page .pz-cmp {
  width: 100%;
  max-width: 400px;
  margin: 64px auto 0;
  background: #ffffff;
  border: 1px solid var(--pz-line2);
  border-radius: 16px;
  /* clears the 60px site header plus 16px on a direct #compare-packages
     load and on the in-page link */
  scroll-margin-top: 76px;
  transition:
    max-width 0.3s ease-in-out,
    border-color 0.25s ease;
}
.pricing-page .pz-cmp:not(.is-open):hover {
  border-color: var(--pz-line3);
}
.pricing-page .pz-cmp.is-open {
  max-width: 1184px;
}
/* two plans (Agencies): the width of their two cards */
.pricing-page .pz-cmp[data-plans="2"].is-open {
  max-width: 880px;
}
.pricing-page .pz-cmp-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 24px;
  border: 0;
  background: none;
  color: var(--pz-ink);
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
}
.pricing-page .pz-cmp-bar:focus-visible {
  outline: 2px solid var(--pz-blue);
  outline-offset: 2px;
}
.pricing-page .pz-cmp.is-open .pz-cmp-bar {
  padding: 32px 32px 8px;
}
.pricing-page .pz-cmp-head {
  display: block;
  min-width: 0;
}
.pricing-page .pz-cmp-title {
  display: block;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-cmp-sub {
  display: none;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pz-mute);
}
.pricing-page .pz-cmp.is-open .pz-cmp-sub {
  display: block;
}
.pricing-page .pz-cmp-chev {
  flex: none;
  width: 16px;
  height: 12px;
  margin-top: 9px;
  color: var(--pz-mute3);
  transition: transform 0.3s ease-in-out;
}
.pricing-page .pz-cmp.is-open .pz-cmp-chev {
  transform: rotate(180deg);
}
/* the unfold: rows 0fr to 1fr; clipped only while it runs */
.pricing-page .pz-cmp-fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.32s ease-in-out,
    opacity 0.25s ease-out;
}
.pricing-page .pz-cmp.is-open .pz-cmp-fold {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* relative, so the screen reader words in the cells (absolutely placed
   .sr-only spans) are clipped with the rest; without it they escaped the
   clip and the closed card stretched the page by the table's height */
.pricing-page .pz-cmp-in {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 0 32px;
}
.pricing-page .pz-cmp-in::after {
  content: "";
  display: block;
  height: 28px;
}
.pricing-page .pz-cmp.is-settled .pz-cmp-in {
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page .pz-cmp,
  .pricing-page .pz-cmp-fold,
  .pricing-page .pz-cmp-chev {
    transition: none;
  }
}

.pricing-page .pz-cmp-table {
  width: 100%;
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: inherit;
}
.pricing-page .pz-cmp-col-name {
  width: 34%;
}
.pricing-page .pz-cmp[data-plans="2"] .pz-cmp-col-name {
  width: 46%;
}
.pricing-page .pz-cmp-table th,
.pricing-page .pz-cmp-table td {
  margin: 0;
  font-weight: 400;
  vertical-align: middle;
}
/* the plan header sticks to the top while the rows scroll under it */
.pricing-page .pz-cmp-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
  padding: 20px 12px 22px;
  border-bottom: 1px solid var(--pz-line);
  vertical-align: bottom;
}
.pricing-page .pz-cmp-table thead th.pz-cmp-pick {
  background: var(--pz-panel);
  border-radius: 14px 14px 0 0;
}
.pricing-page .pz-cmp-corner {
  text-align: left;
}
.pricing-page .pz-cmp-corner-in {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--pz-mute2);
}
.pricing-page .pz-cmp-plan {
  text-align: center;
}
.pricing-page .pz-cmp-plan-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-cmp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 5px;
  margin-top: 8px;
}
.pricing-page .pz-cmp-num {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-cmp-unit {
  white-space: nowrap;
  font-size: 13px;
  color: var(--pz-mute2);
}
.pricing-page .pz-cmp-act {
  display: block;
  max-width: 210px;
  margin: 16px auto 0;
}
.pricing-page .pz-cmp-btn {
  height: 40px;
}
/* the recommended column, top to bottom */
.pricing-page .pz-cmp-table td.pz-cmp-pick {
  background: var(--pz-panel);
}
/* the shaded rows under the header: the numbers that set plans apart */
.pricing-page .pz-cmp-keys th,
.pricing-page .pz-cmp-keys td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--pz-line);
  background: #fbfbfa;
}
.pricing-page .pz-cmp-keys td.pz-cmp-pick {
  background: var(--pz-panel2);
}
.pricing-page .pz-cmp-keys th {
  text-align: left;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-cmp-keys .pz-cmp-val {
  font-size: 15px;
  font-weight: 600;
}
/* a group title: folds its rows */
/* the title may run on over the empty plan cells beside it, so a long
   one never wraps in a narrow phone column */
.pricing-page .pz-cmp-gh {
  padding: 28px 12px 10px;
  text-align: left;
  white-space: nowrap;
  overflow: visible;
}
.pricing-page .pz-cmp-gbtn {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--pz-ink);
  text-align: left;
  cursor: pointer;
}
.pricing-page .pz-cmp-gbtn:focus-visible {
  outline: 2px solid var(--pz-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.pricing-page .pz-cmp-gchev {
  width: 11px;
  height: 8px;
  color: var(--pz-mute3);
  transition: transform 0.25s ease-in-out;
}
.pricing-page .pz-cmp-gchev.is-shut {
  transform: rotate(-90deg);
}
.pricing-page .pz-cmp-rows th,
.pricing-page .pz-cmp-rows td {
  padding: 13px 12px;
  border-top: 1px solid var(--pz-line);
}
.pricing-page .pz-cmp-name {
  text-align: left;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--pz-ink2);
}
.pricing-page .pz-cmp-name-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pz-mute2);
}
.pricing-page .pz-cmp-c {
  text-align: center;
}
.pricing-page .pz-cmp-check {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  color: var(--pz-ink);
}
.pricing-page .pz-cmp-none {
  display: inline-block;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  vertical-align: middle;
  background: rgba(0, 0, 0, 0.22);
}
.pricing-page .pz-cmp-val {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-cmp-foot td {
  height: 18px;
  padding: 0;
}
.pricing-page .pz-cmp-foot td.pz-cmp-pick {
  border-radius: 0 0 14px 14px;
}
.pricing-page .pz-cmp-phone-acts {
  display: none;
}
@media (max-width: 980px) {
  .pricing-page .pz-cmp {
    margin-top: 48px;
  }
  .pricing-page .pz-cmp.is-open .pz-cmp-bar {
    padding: 24px 20px 4px;
  }
  .pricing-page .pz-cmp-in {
    padding: 0 12px;
  }
}
/* phones: narrow plan columns, so the units, the chip and the header
   buttons step aside; the buttons stack under the table */
@media (max-width: 640px) {
  .pricing-page .pz-cmp-bar {
    padding: 20px;
  }
  .pricing-page .pz-cmp-col-name {
    width: 37%;
  }
  .pricing-page .pz-cmp[data-plans="2"] .pz-cmp-col-name {
    width: 44%;
  }
  .pricing-page .pz-cmp-table thead th {
    padding: 14px 4px 14px;
  }
  .pricing-page .pz-cmp-table thead th.pz-cmp-corner {
    padding-left: 8px;
  }
  .pricing-page .pz-cmp-plan-name {
    font-size: 13.5px;
    line-height: 1.25;
  }
  .pricing-page .pz-cmp-chip,
  .pricing-page .pz-cmp-unit,
  .pricing-page .pz-cmp-act {
    display: none;
  }
  .pricing-page .pz-cmp-num {
    font-size: 16px;
    letter-spacing: -0.02em;
  }
  .pricing-page .pz-cmp-keys th,
  .pricing-page .pz-cmp-keys td,
  .pricing-page .pz-cmp-rows th,
  .pricing-page .pz-cmp-rows td {
    padding: 12px 4px;
  }
  .pricing-page .pz-cmp-keys th,
  .pricing-page .pz-cmp-rows th,
  .pricing-page .pz-cmp-gh {
    padding-left: 8px;
  }
  .pricing-page .pz-cmp-name,
  .pricing-page .pz-cmp-keys th {
    font-size: 13px;
  }
  /* the second lines would make every row five lines tall here */
  .pricing-page .pz-cmp-name-sub {
    display: none;
  }
  .pricing-page .pz-cmp-val,
  .pricing-page .pz-cmp-keys .pz-cmp-val {
    font-size: 12px;
  }
  .pricing-page .pz-cmp-gbtn {
    font-size: 14px;
  }
  .pricing-page .pz-cmp-phone-acts {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
  }
  .pricing-page .pz-cmp-phone-act {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 8px;
    border-top: 1px solid var(--pz-line);
  }
  .pricing-page .pz-cmp-phone-plan {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .pricing-page .pz-cmp-phone-name {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--pz-ink);
  }
  .pricing-page .pz-cmp-phone-price {
    font-size: 13px;
    color: var(--pz-mute2);
  }
  .pricing-page .pz-cmp-phone-act .pz-btn {
    flex: none;
    width: auto;
  }
}

/* --- sections (job 4 on): the Business page's section frame. A hairline
       across the rail above each section, 112px of air, 48px sides; the
       head is the blue-dot label and an Inter headline, left aligned. --- */
.pricing-page .pz-sec {
  position: relative;
  z-index: 1;
  padding: 112px 0;
  border-top: 1px solid var(--pz-line);
}
.pricing-page .pz-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
.pricing-page .pz-sec-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin-bottom: 48px;
}
.pricing-page .pz-sec-head .pz-lead {
  max-width: 560px;
}
.pricing-page .pz-h2 {
  margin: 0;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.0225em;
  font-weight: 500;
  color: var(--pz-ink);
  text-wrap: balance;
}
.pricing-page .pz-h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--pz-ink);
}
.pricing-page .pz-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pz-mute);
}

/* --- plan limits (job 4): two white cards, each a small hairline table */
.pricing-page .pz-lims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.pricing-page .pz-lim {
  min-width: 0;
  padding: 28px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--pz-line2);
}
.pricing-page .pz-lim-desc {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--pz-mute);
}
.pricing-page .pz-lim-table {
  width: 100%;
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.pricing-page .pz-lim-table th,
.pricing-page .pz-lim-table td {
  padding: 12px 8px;
  border-top: 1px solid var(--pz-line);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  color: var(--pz-ink);
}
.pricing-page .pz-lim-table thead th {
  border-top: 0;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pz-mute2);
}
.pricing-page .pz-lim-table thead th.pz-lim-pick {
  border-radius: 12px 12px 0 0;
  color: var(--pz-ink);
}
.pricing-page .pz-lim-table th[scope="row"] {
  width: 34%;
  padding-left: 0;
  text-align: left;
  color: var(--pz-ink2);
}
.pricing-page .pz-lim-table td {
  font-weight: 500;
}
.pricing-page .pz-lim-table .pz-lim-pick {
  background: var(--pz-panel);
}
.pricing-page .pz-lim-table tbody tr:last-child .pz-lim-pick {
  border-radius: 0 0 12px 12px;
}
.pricing-page .pz-lim-note {
  margin-top: 16px;
}

/* --- the brand wall on the Business and Agencies tabs (job 4): its own
       section with the hairline above, and its line in the page's label
       style instead of the old pink gradient caps (the component is shared
       with /business, so the restyle lives here, scoped to /pricing) --- */
.pricing-page .pz-proof {
  position: relative;
  z-index: 1;
  margin-top: 96px;
  border-top: 1px solid var(--pz-line);
}
.pricing-page .pz-proof #proof-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--pz-mute);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: none;
}
.pricing-page .pz-proof #proof-heading::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pz-blue);
}

@media (max-width: 1100px) {
  .pricing-page .pz-lims {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
  }
}
@media (max-width: 980px) {
  .pricing-page .pz-sec {
    padding: 64px 0;
  }
  .pricing-page .pz-in {
    padding: 0 20px;
  }
  .pricing-page .pz-sec-head {
    margin-bottom: 32px;
  }
  .pricing-page .pz-h2 {
    font-size: 36px;
    line-height: 40px;
  }
  .pricing-page .pz-proof {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .pricing-page .pz-lim {
    padding: 22px 16px;
  }
  .pricing-page .pz-lim-table th,
  .pricing-page .pz-lim-table td {
    padding: 11px 4px;
    font-size: 13px;
  }
  .pricing-page .pz-lim-table thead th {
    font-size: 12px;
  }
  .pricing-page .pz-lim-table th[scope="row"] {
    width: 31%;
  }
  .pricing-page .pz-proof #proof-heading {
    font-size: 14px;
    padding: 0 8px;
  }
}

/* --- closing (job 5): the Business page's FinalCta, centred on white
       (the FAQ above it is SiteFaq) --- */
.pricing-page .pz-end {
  padding: 128px 0;
}
.pricing-page .pz-end-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.pricing-page .pz-end-title {
  max-width: 680px;
  margin: 0;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 500;
  color: var(--pz-ink);
  text-wrap: balance;
}
.pricing-page .pz-end-lead {
  max-width: 520px;
}
.pricing-page .pz-end-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.pricing-page .pz-btn-lg,
.pricing-page a.pz-btn-lg {
  height: 48px;
  padding: 0 22px;
  font-size: 15px;
}
.pricing-page .pz-arrow svg {
  transition: transform 0.2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .pricing-page .pz-arrow:hover svg {
    transform: translateX(4px);
  }
}
@media (max-width: 980px) {
  .pricing-page .pz-end {
    padding: 88px 0;
  }
  .pricing-page .pz-end-title {
    font-size: 40px;
  }
}
@media (max-width: 380px) {
  .pricing-page .pz-end-title {
    font-size: 34px;
  }
}

/* --- vivid: the Business tab without prices wears the /business hero
       (Kedem 2026-10-29: "the colours that is on the hero page"). The
       same dark ground, rainbow band and blobs as business-v2.css
       `.bz2:has(.bzh-meet) .aurora`, white type on it, the header in
       white until it sticks or opens, and the brands line as a headline.
       The root carries .pz-vivid (modules/pricing.tsx). --- */
.pricing-page.pz-vivid .pz-aurora {
  height: 820px;
  clip-path: none;
  -webkit-clip-path: none;
  background: #0a0a0c;
}
.pricing-page.pz-vivid .pz-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);
}
.pricing-page.pz-vivid .pz-aurora::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 48%,
    rgba(255, 255, 255, 0.2) 60%,
    rgba(255, 255, 255, 0.6) 72%,
    rgba(255, 255, 255, 0.92) 84%,
    #ffffff 94%,
    #ffffff 100%
  );
}
/* under the dark theme the colour fades into the dark ground instead */
.pricing-page.pz-vivid[data-theme="dark"] .pz-aurora::after {
  background: linear-gradient(
    180deg,
    rgba(25, 25, 27, 0) 0%,
    rgba(25, 25, 27, 0) 48%,
    rgba(25, 25, 27, 0.2) 60%,
    rgba(25, 25, 27, 0.6) 72%,
    rgba(25, 25, 27, 0.92) 84%,
    #19191b 94%,
    #19191b 100%
  );
}
/* the plan cards' Linkme wordmark (the shared icon paints its letters
   black) turns light on the dark cards */
.pricing-page[data-theme="dark"] .lm-glass svg .fill-\[\#000\] {
  fill: #f2f2f0;
}
/* the six blobs in full colour, as business-v2.css `.bz2:has(.bzh-meet)
   .au1..6` */
.pricing-page.pz-vivid .pz-au {
  opacity: 0.95;
  filter: blur(84px);
}
.pricing-page.pz-vivid .pz-au1 {
  width: 70vw;
  height: 600px;
  left: -22vw;
  top: -260px;
  background: #2f6fe8;
}
.pricing-page.pz-vivid .pz-au2 {
  width: 62vw;
  height: 640px;
  right: -20vw;
  top: -220px;
  background: #8a4dff;
}
.pricing-page.pz-vivid .pz-au3 {
  background: #ff3d8a;
}
.pricing-page.pz-vivid .pz-au4 {
  width: 50vw;
  height: 500px;
  right: -6vw;
  background: #19c48a;
}
.pricing-page.pz-vivid .pz-au5 {
  width: 46vw;
  height: 460px;
  left: -8vw;
  background: #ffb020;
}
.pricing-page.pz-vivid .pz-au6 {
  background: #22b8ff;
}
.pricing-page.pz-vivid-biz .pz-hero {
  padding-top: 128px;
  padding-bottom: 28px;
}
.pricing-page.pz-vivid .pz-h1 {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}
.pricing-page.pz-vivid-biz .pz-h1 {
  font-size: 76px;
  line-height: 1.04;
}
/* People and Agencies wear the same ground (Kedem 2026-10-29: "that same
   colour should be on all the pages"): the lead and the small billing
   switch in white too */
.pricing-page.pz-vivid .pz-hero .pz-lead {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22);
}
.pricing-page.pz-vivid .pz-seg:not(.pz-seg-lg) {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}
.pricing-page.pz-vivid .pz-seg:not(.pz-seg-lg) .pz-seg-tab {
  color: rgba(255, 255, 255, 0.92);
}
.pricing-page.pz-vivid .pz-seg:not(.pz-seg-lg) .pz-seg-tab.on {
  color: #111113;
}
.pricing-page.pz-vivid .pz-seg-lg {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}
.pricing-page.pz-vivid .pz-seg-lg .pz-seg-tab {
  color: rgba(255, 255, 255, 0.92);
}
.pricing-page.pz-vivid .pz-seg-lg .pz-seg-tab:hover {
  color: #ffffff;
}
.pricing-page.pz-vivid .pz-seg-lg .pz-seg-tab.on {
  color: #111113;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* on phones the switches sit low, where the aurora fades to pale yellow
   and the white labels wash out: a soft ink track keeps them readable */
@media (max-width: 767px) {
  .pricing-page.pz-vivid .pz-seg:not(.pz-seg-lg),
  .pricing-page.pz-vivid .pz-seg-lg {
    background: rgba(17, 17, 19, 0.26);
    border-color: rgba(255, 255, 255, 0.22);
  }
}
.pricing-page.pz-vivid-biz .pkc {
  padding-top: 4px;
}
/* the name, price and button sit on the navy too (Kedem 2026-11-03: "make
   sure this is white"): white type, a white button, and the ground runs
   longer so its fade starts under the button. The numbers card is solid,
   so the fade can finish behind it. */
.pricing-page.pz-vivid-biz .pz-aurora {
  height: 880px;
}
.pricing-page.pz-vivid-biz .pz-aurora::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 77%,
    rgba(255, 255, 255, 0.6) 86%,
    #ffffff 96%,
    #ffffff 100%
  );
}
.pricing-page.pz-vivid-biz[data-theme="dark"] .pz-aurora::after {
  background: linear-gradient(
    180deg,
    rgba(25, 25, 27, 0) 0%,
    rgba(25, 25, 27, 0) 77%,
    rgba(25, 25, 27, 0.6) 86%,
    #19191b 96%,
    #19191b 100%
  );
}
.pricing-page.pz-vivid-biz .pkc-title {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}
.pricing-page.pz-vivid-biz .pkc-price {
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
.pricing-page.pz-vivid-biz .pkc-price b {
  color: #ffffff;
}
.pricing-page.pz-vivid-biz .pkc-btn {
  background: #ffffff;
  color: #0a0a0a;
}
.pricing-page.pz-vivid-biz .pkc-btn:hover,
.pricing-page.pz-vivid-biz .pkc-btn:focus-visible {
  background: #e9e9ee;
  color: #0a0a0a;
}
.pricing-page.pz-vivid-biz .pz-proof {
  margin-top: 120px;
  border-top: 0;
}
.pricing-page.pz-vivid-biz .pz-proof #proof-heading {
  display: block;
  max-width: 860px;
  color: var(--pz-ink);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.pricing-page.pz-vivid-biz .pz-proof #proof-heading::before {
  display: none;
}
/* the header in white over the colours; ink again once it sticks to the
   top or its menu opens */
.pricing-page.pz-vivid .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .lg-l {
  display: none !important;
}
.pricing-page.pz-vivid .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .lg-d {
  display: block !important;
}
.pricing-page.pz-vivid .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .navitem > a,
.pricing-page.pz-vivid .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .btn-ghost,
.pricing-page.pz-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);
}
.pricing-page.pz-vivid
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .navitem:is(:hover, :focus-within, [data-open])
  > a,
.pricing-page.pz-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;
}
.pricing-page.pz-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);
}
.pricing-page.pz-vivid .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .aud-tab,
.pricing-page.pz-vivid .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .aud-tab:hover {
  color: #ffffff;
}
.pricing-page.pz-vivid .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .aud-tab.on {
  color: #111113;
}
.pricing-page.pz-vivid .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .btn-primary,
.pricing-page.pz-vivid
  .lmh.hdr:not(.lmh-stuck):not(.lmh-open)
  .btn-primary:hover {
  background: #ffffff;
  color: #111113;
}
.pricing-page.pz-vivid .lmh.hdr:not(.lmh-stuck):not(.lmh-open) .mbtn {
  color: #ffffff;
}
@media (max-width: 980px) {
  .pricing-page.pz-vivid .pz-aurora {
    height: 640px;
  }
  .pricing-page.pz-vivid .pz-au {
    width: 120vw;
    filter: blur(56px);
  }
  .pricing-page.pz-vivid-biz .pz-hero {
    padding-top: 72px;
  }
  .pricing-page.pz-vivid-biz .pz-aurora {
    height: 720px;
  }
  .pricing-page.pz-vivid-biz .pz-h1 {
    font-size: 46px;
  }
  .pricing-page.pz-vivid-biz .pz-proof {
    margin-top: 72px;
  }
  .pricing-page.pz-vivid-biz .pz-proof #proof-heading {
    font-size: 32px;
    line-height: 1.12;
    padding: 0 4px;
  }
}
@media (max-width: 380px) {
  .pricing-page.pz-vivid-biz .pz-h1 {
    font-size: 40px;
  }
  .pricing-page.pz-vivid-biz .pz-proof #proof-heading {
    font-size: 28px;
  }
}

/* pricing-dark:start */
/* GENERATED by scripts/generate-page-dark.mjs: do not edit by hand,
   run the script again. The dark theme of /pricing (its glass cards are in pricing.tsx) (Kedem 2026-10-30: dark is the
   default on every page). */
.pricing-page[data-theme="dark"] .padding-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing-page[data-theme="dark"] .footer-links-title {
  color: #f2f2f0;
}
.pricing-page[data-theme="dark"] .footer-link,
.pricing-page[data-theme="dark"] .footer-bottom {
  color: #8f8f8a;
}
.pricing-page[data-theme="dark"] .footer-link:hover {
  color: #f2f2f0;
}
.pricing-page[data-theme="dark"] .footer-bottom img {
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing-page[data-theme="dark"] {
  --pz-ink: #f2f2f0;
  --pz-ink2: #d6d6d2;
  --pz-mute: #a3a39e;
  --pz-mute2: #8f8f8a;
  --pz-mute3: #7c7c77;
  --pz-panel: #212123;
  --pz-panel2: #28282b;
  --pz-panel3: #303034;
  --pz-line: rgba(255, 255, 255, 0.081);
  --pz-line2: rgba(255, 255, 255, 0.138);
  --pz-line3: rgba(255, 255, 255, 0.345);
}
.pricing-page[data-theme="dark"] .pz-quote {
  background: #222224;
}
.pricing-page[data-theme="dark"] .pz-cmp {
  background: #222224;
}
.pricing-page[data-theme="dark"] .pz-cmp-table thead th {
  background: #222224;
}
.pricing-page[data-theme="dark"] .pz-cmp-keys th,
.pricing-page[data-theme="dark"] .pz-cmp-keys td {
  background: #1f1f21;
}
.pricing-page[data-theme="dark"] .pz-lim {
  background: #222224;
}
/* pricing-dark:end */