/* People home "Chapters": the three sections kept from the live link.me
   People home (modules/home/chapters/live/LiveSections.tsx), the
   analytics map, the earnings calculator and the app wall. Hand written
   (chapters.css is generated, do not put these there). Everything is
   scoped under .pcl, so no other page is touched. */

.bz2:where(.pch) .pcl .pcl-head {
  margin-bottom: 40px;
}
.bz2:where(.pch) .pcl-kick {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.16px;
  /* the calculator's own orange, as it was before the pink pass (Kedem
     2026-11-04), a shade deeper than the #f08a00 original so it reads */
  color: #c2410c;
}

/* ---- analytics map: the live dark map clip in a 2:1 card ---- */
.bz2:where(.pch) .pcl-map-card {
  position: relative;
  overflow: clip;
  aspect-ratio: 2 / 1;
  border-radius: 24px;
  background: #05070b;
  box-shadow: 0 24px 48px -28px rgba(17, 24, 39, 0.35);
}
.bz2:where(.pch) .pcl-map-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bz2:where(.pch) .pcl-map-cap {
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 2;
  max-width: 560px;
}
.bz2:where(.pch) .pcl-map-cap h3 {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #fff;
}
.bz2:where(.pch) .pcl-map-cap p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.66);
}

/* ---- earnings calculator: the live panel on paper ---- */
.bz2:where(.pch) .pcl-calc-card {
  display: flex;
  overflow: clip;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 24px 48px -28px rgba(17, 24, 39, 0.28);
}
.bz2:where(.pch) .pcl-calc-img {
  width: 32%;
  flex: none;
  object-fit: cover;
  display: block;
  min-height: 100%;
}
.bz2:where(.pch) .pcl-calc-body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.bz2:where(.pch) .pcl-calc-top {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 32px 32px 56px;
}
.bz2:where(.pch) .pcl-cost {
  align-self: flex-end;
  margin-bottom: -12px;
  font-size: 15px;
  color: #5f5f5c;
}
.bz2:where(.pch) .pcl-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 587px;
}
.bz2:where(.pch) .pcl-label {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: #0a0a0a;
}
.bz2:where(.pch) .pcl-sub {
  font-size: 16px;
  color: #5f5f5c;
}
.bz2:where(.pch) .pcl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bz2:where(.pch) .pcl-tag {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 60px;
  border: 1px solid #0a0a0a;
  background: transparent;
  color: #0a0a0a;
  opacity: 0.3;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.bz2:where(.pch) .pcl-tag:hover {
  opacity: 0.6;
}
.bz2:where(.pch) .pcl-tag.on {
  opacity: 1;
}
.bz2:where(.pch) span.pcl-tag {
  cursor: default;
  flex: none;
  min-width: 44px;
  text-align: center;
}
.bz2:where(.pch) .pcl-tag:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
  opacity: 1;
}
.bz2:where(.pch) .pcl-slide {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bz2:where(.pch) .pcl-slide-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* the slider, as the live one: 44px tall for the thumb, an 8px orange
   band painted inline by paintSlider through --range-track */
.bz2:where(.pch) .pcl-range {
  --range-track: rgba(10, 10, 10, 0.12);
  -webkit-appearance: none;
  appearance: none;
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  height: 44px;
  margin: 0;
  border-radius: 999px;
  outline: none;
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    #ff9c00 0% 50%,
    var(--range-track) 50% 100%
  );
  background-size: 100% 8px;
  background-position: center;
  background-repeat: no-repeat;
}
.bz2:where(.pch) .pcl-range::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
  border-radius: 999px;
}
.bz2:where(.pch) .pcl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, 0.14);
  background: radial-gradient(circle at center, #fff 8px, #fff 8.01px);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.18);
  cursor: pointer;
}
.bz2:where(.pch) .pcl-range::-moz-range-track {
  height: 8px;
  background: transparent;
  border: none;
  border-radius: 999px;
}
.bz2:where(.pch) .pcl-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, 0.14);
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.18);
  cursor: pointer;
}
.bz2:where(.pch) .pcl-range:focus-visible {
  outline: 2px solid #2f6fe8;
  outline-offset: 2px;
}

.bz2:where(.pch) .pcl-calc-foot {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 32px 32px 56px;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.bz2:where(.pch) .pcl-total {
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -1.4px;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

/* ---- app wall: the live Rive grid, a card on desktop ---- */
.bz2:where(.pch) .pcl-apps-in {
  width: 100%;
}
.bz2:where(.pch) .pcl-apps .pcl-head {
  margin-bottom: 32px;
}
/* a rounded card like the map: the rail stops the wall short of the
   screen edge, so it sits as a panel instead of a cut-off band */
.bz2:where(.pch) .pcl-apps-wall {
  position: relative;
  width: min(1184px, calc(100% - 96px));
  margin: 0 auto;
  overflow: clip;
  border-radius: 24px;
  box-shadow: 0 24px 48px -28px rgba(17, 24, 39, 0.28);
}
.bz2:where(.pch) .pcl-apps-wall canvas {
  display: block;
}

@media (max-width: 1023px) {
  .bz2:where(.pch) .pcl-calc-card {
    flex-direction: column-reverse;
  }
  .bz2:where(.pch) .pcl-calc-img {
    width: 100%;
    height: 280px;
    min-height: 0;
    object-position: 50% 30%;
  }
}
@media (max-width: 767px) {
  .bz2:where(.pch) .pcl .pcl-head {
    margin-bottom: 28px;
  }
  .bz2:where(.pch) .pcl-map-card {
    aspect-ratio: 0.59 / 1;
    border-radius: 20px;
  }
  .bz2:where(.pch) .pcl-map-cap {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
  .bz2:where(.pch) .pcl-map-cap h3 {
    font-size: 18px;
    line-height: 24px;
  }
  .bz2:where(.pch) .pcl-map-cap p {
    font-size: 14px;
    line-height: 21px;
  }
  .bz2:where(.pch) .pcl-calc-card {
    border-radius: 20px;
  }
  /* phones: the wall runs edge to edge on white, as on the live page */
  .bz2:where(.pch) .pcl-apps-wall {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .bz2:where(.pch) .pcl-calc-top {
    padding: 20px 20px 24px;
    gap: 24px;
  }
  .bz2:where(.pch) .pcl-calc-foot {
    padding: 20px 20px 24px;
  }
  .bz2:where(.pch) .pcl-label {
    font-size: 17px;
    line-height: 22px;
  }
  .bz2:where(.pch) .pcl-total {
    font-size: 40px;
    letter-spacing: -1px;
  }
  .bz2:where(.pch) .pcl-calc-img {
    height: 220px;
  }
}
/* people-dark:start */
/* GENERATED by scripts/generate-page-dark.mjs: do not edit by hand,
   run the script again. The dark theme of the People home (Kedem 2026-10-30: dark is the
   default on every page). */
.bz2[data-theme="dark"]:where(.pch) .pp2 .pp-claim {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .pp2 .pp-claim:focus-within {
  border-color: rgba(255, 255, 255, 0.368);
}
.bz2[data-theme="dark"]:where(.pch) .pp2 .pp-claim .signup-cta {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .pj-copy {
  --bg: #19191b;
  --ink: #f2f2f0;
  --ink2: #d6d6d2;
  --mute: #a3a39e;
  --line: rgba(255, 255, 255, 0.081);
  --line2: rgba(255, 255, 255, 0.138);
}
.bz2[data-theme="dark"]:where(.pch) .pj-sec {
  background: #19191b;
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .pj-sec .pj-h2 {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .pj-sec .pj-p {
  color: #a3a39e;
}
.bz2[data-theme="dark"]:where(.pch) .agx3-main {
  --k: #f2f2f0;
  --g7: #d6d6d2;
  --g6: #a3a39e;
  --g5: #8f8f8a;
  --g4: #7c7c77;
  --g3: #39393e;
  --g2: #303034;
  --g1: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-card {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-panel {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-ub {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .am-ub.ghost {
  background: #222224;
  color: #f2f2f0;
  box-shadow: inset 0 0 0 1px #39393e;
}
.bz2[data-theme="dark"]:where(.pch) .am-ctx {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-claim {
  --line2: rgba(255, 255, 255, 0.138);
}
.bz2[data-theme="dark"]:where(.pch) .am-steps li::after {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .am-hin {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-bar i {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .am-bsk {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-bsk i {
  background: #28282b;
}
.bz2[data-theme="dark"]:where(.pch) .am-bsk .k-ic {
  color: #5f5f5c;
}
.bz2[data-theme="dark"]:where(.pch) .am-plan {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-ledger {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-ledger li {
  border-top: 1px solid rgba(255, 255, 255, 0.115);
}
html.pch-motion .bz2[data-theme="dark"]:where(.pch) .am-f03.b2 .am-bsk i {
  color: #d6d6d2;
}
.bz2[data-theme="dark"]:where(.pch) .am-scard {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-sc-h {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-sc-p {
  color: #a3a39e;
}
.bz2[data-theme="dark"]:where(.pch) .am-sc-stage {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-f02 .am-st-card {
  background: #212123;
  border-color: rgba(255, 255, 255, 0.12);
}
.bz2[data-theme="dark"]:where(.pch) .am-f02 .am-copy .pj-p {
  color: #a3a39e;
}
.bz2[data-theme="dark"]:where(.pch) .ink-ph {
  color: #a3a39e;
}
.bz2[data-theme="dark"]:where(.pch) .ink-ph.is-ink {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-world {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-comp {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-x {
  stroke: #8f8f8a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-slot {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-up svg {
  stroke: #8f8f8a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-rt {
  stroke: #5f5f5c;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-rp {
  stroke: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-ph {
  color: #7c7c77;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-txt {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-cnt {
  color: #8f8f8a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-ps {
  color: #8f8f8a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-tog {
  background: #303034;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-tog b {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-note {
  color: #8f8f8a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-pill {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-pn b {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-h {
  color: #8f8f8a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-toast {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-media {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-f04 .am-pj-arw {
  fill: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 {
  --ig-ink: #f2f2f0;
  --ig-meta: #8f8f8a;
  --ig-line: #39393e;
  --ig-hair: #28282b;
  --ig-recv: #28282b;
  --lm-g3: #39393e;
  --lm-g2: #303034;
  --lm-g1: #1f1f21;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-n {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-sc {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-tab {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-sheet {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-comp {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-mbtn {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-mbtn::after {
  background: rgba(255, 255, 255, 0.081);
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-nt {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-web {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-wbar {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-rhd {
  background: #222224;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-seg span.is-on {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-kin {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-kin kbd {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-ta {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-sw.is-on i {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-fld {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-rft {
  background: #222224;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-ed {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-thumb {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-sw2 i:last-child {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-thr {
  background: #222224;
}
html.pch-motion .bz2[data-theme="dark"]:where(.pch) .am-f05 .am-cd-bar b {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-url {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-pr {
  background: rgba(255, 255, 255, 0.057);
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-trk i {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-ppi {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-cb {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-chips > span {
  color: #5f5f5c;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-sel .am-mx-off {
  color: #5f5f5c;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-sel .am-mx-on {
  background: #222224;
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-atc .am-mx-off {
  color: #5f5f5c;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-atc .am-mx-on {
  background: #222224;
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-ok {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-okh span {
  color: #a3a39e;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-oke {
  color: #a3a39e;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-oki {
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-oki img {
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-okn span {
  color: #a3a39e;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-ip {
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-file {
  border: 2px dashed rgba(255, 255, 255, 0.1);
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-cp {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-opt {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-oin {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f06 .am-mx-wb {
  background: #222224;
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-form {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-new::before {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-toast {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-subj {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-rbox {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-seg span.on {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-map {
  background: #212123;
}
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-dot {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-bar i {
  background: #f2f2f0;
  color: #0a0a0a;
}
@media (max-width: 640px) {
  .bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-rec {
    background: #212123;
  }
}
.bz2[data-theme="dark"]:where(.pch) .am-f10 .am-cl {
  border-top: 1px solid rgba(255, 255, 255, 0.081);
}
.bz2[data-theme="dark"]:where(.pch) .am-f10 .pp-trust {
  color: #d6d6d2;
}
.bz2[data-theme="dark"]:where(.pch) .am-f10 .pp-trust b {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f10 .am-cl-cmp {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f10 .am-cl-cmp:hover,
.bz2[data-theme="dark"]:where(.pch) .am-f10 .am-cl-cmp:focus-visible {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f10 .am-loop-list > li {
  background: #28282b;
}
.bz2[data-theme="dark"]:where(.pch) .dj {
  --dk: #f2f2f0;
  --dg5: #a3a39e;
  --dg4: #8f8f8a;
  --dg3: #7c7c77;
  --dg2: #303034;
  --dg1: #212123;
  --dig: #8f8f8a;
  --dline: #28282b;
}
.bz2[data-theme="dark"]:where(.pch) .dj-rail b {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .dj-chip {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .dj-shh::before {
  background: #39393e;
}
.bz2[data-theme="dark"]:where(.pch) .dj-cmp {
  background: #222224;
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .dj-k {
  background: #222224;
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .dj-press {
  background: rgba(255, 255, 255, 0.103);
}
.bz2[data-theme="dark"]:where(.pch) .dj-mbtn {
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .dj-r {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.bz2[data-theme="dark"]:where(.pch) .dj-pbtn {
  background: #f2f2f0;
  color: #0a0a0a;
}
.bz2[data-theme="dark"]:where(.pch) .dj-pbtn-gh {
  background: #222224;
  color: #f2f2f0;
  box-shadow: inset 0 0 0 1px #39393e;
}
.bz2[data-theme="dark"]:where(.pch) .am-f09 .am-rates li {
  background: #222224;
  color: #d6d6d2;
}
.bz2[data-theme="dark"]:where(.pch) .am-f09 .am-rates b {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .am-f09 .am-perks li {
  background: #222224;
  color: #d6d6d2;
}
.bz2[data-theme="dark"]:where(.pch) .pcl-calc-card {
  background: #222224;
  border: 1px solid rgba(255, 255, 255, 0.092);
}
.bz2[data-theme="dark"]:where(.pch) .pcl-cost {
  color: #a3a39e;
}
.bz2[data-theme="dark"]:where(.pch) .pcl-label {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .pcl-sub {
  color: #a3a39e;
}
.bz2[data-theme="dark"]:where(.pch) .pcl-tag {
  border: 1px solid #f2f2f0;
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch) .pcl-range {
  --range-track: rgba(255, 255, 255, 0.138);
}
.bz2[data-theme="dark"]:where(.pch) .pcl-range::-webkit-slider-thumb {
  border: 1px solid rgba(255, 255, 255, 0.161);
  background: radial-gradient(circle at center, #222224 8px, #222224 8.01px);
}
.bz2[data-theme="dark"]:where(.pch) .pcl-range::-moz-range-thumb {
  border: 1px solid rgba(255, 255, 255, 0.161);
  background: #222224;
}
.bz2[data-theme="dark"]:where(.pch) .pcl-calc-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.092);
}
.bz2[data-theme="dark"]:where(.pch) .pcl-total {
  color: #f2f2f0;
}
.bz2[data-theme="dark"]:where(.pch)
  :is(.am-screen, .am-scr, .am-mx-scr, .dj-scr, .am-st-scroll) {
  color-scheme: light;
  color: #0a0a0a;
  --bg: #fff;
  --ink: #0a0a0a;
  --ink2: #2b2b2a;
  --mute: #5f5f5c;
  --line: rgba(0, 0, 0, 0.07);
  --line2: rgba(0, 0, 0, 0.12);
  --k: #0a0a0a;
  --g7: #3f3f46;
  --g6: #5f5f5c;
  --g5: #71717a;
  --g4: #a1a1aa;
  --g3: #d4d4d8;
  --g2: #e4e4e7;
  --g1: #f4f4f5;
  --ig-ink: #000;
  --ig-meta: #737373;
  --ig-line: #dbdbdb;
  --ig-hair: #efefef;
  --ig-recv: #efefef;
  --lm-g3: #d1d5db;
  --lm-g2: #e5e7eb;
  --lm-g1: #f9fafb;
  --dk: #0a0a0a;
  --dg5: #5f5f5c;
  --dg4: #71716e;
  --dg3: #a3a3a0;
  --dg2: #e6e6e3;
  --dg1: #f7f7f5;
  --dig: #737373;
  --dline: #efefef;
  --range-track: rgba(10, 10, 10, 0.12);
}
/* people-dark:end */
.bz2[data-theme="dark"]:where(.pch) .am-f07 .am-ls-form .am-ls-ft {
  color: #f2f2f0;
}

/* ---- Link switch (Kedem 2026-11-01, still A): every feature works two
   ways, "Let Link do it" or "Do it yourself", Link lit. One choice for
   the whole page (modules/home/chapters/LinkWays.tsx). The look is the
   /business switch (business-flow.css .fs-sw) ---- */
.bz2:where(.pch) :is(.lkw, .lkw-desk) {
  --sw-bg: #f4f4f5;
  --sw-edge: rgba(24, 24, 27, 0.08);
  --sw-off: #5f5f5c;
  --sw-on: #18181b;
  --sw-on-ink: #ffffff;
}
.bz2[data-theme="dark"]:where(.pch) :is(.lkw, .lkw-desk) {
  --sw-bg: rgba(255, 255, 255, 0.06);
  --sw-edge: rgba(255, 255, 255, 0.1);
  --sw-off: rgba(242, 242, 240, 0.7);
  --sw-on: #f2f2f0;
  --sw-on-ink: #0a0a0a;
}
.bz2:where(.pch) .lkw-sw {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid var(--sw-edge);
  border-radius: 999px;
  background: var(--sw-bg);
}
.bz2:where(.pch) .lkw-sw button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.15px;
  color: var(--sw-off);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s,
    box-shadow 0.25s;
}
.bz2:where(.pch) .lkw-sw button.lkw-link {
  padding-left: 7px;
}
.bz2:where(.pch) .lkw-sw button:hover:not(.is-on) {
  color: var(--sw-on);
}
.bz2:where(.pch) .lkw-sw button.is-on {
  background: var(--sw-on);
  color: var(--sw-on-ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  cursor: default;
}
.bz2:where(.pch) .lkw-sw button:focus-visible {
  outline: 2px solid var(--sw-on);
  outline-offset: 2px;
}
.bz2:where(.pch) .lkw-face {
  flex: none;
}
/* the two lines share one spot; the chosen one shows */
.bz2:where(.pch) .lkw-lines {
  display: grid;
}
.bz2:where(.pch) .lkw-lines > p {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
.bz2:where(.pch) .lkw-lines > p.is-on {
  visibility: visible;
  opacity: 1;
}
/* Post to All: the tag sits on the caption box's top edge once the
   caption is written (the engine sets .is-typed; stills show it) */
.bz2:where(.pch) .lkw-tag {
  position: absolute;
  right: 6px;
  top: -13px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px #e4e4e7,
    0 4px 12px -4px rgba(17, 24, 39, 0.18);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.13px;
  color: #18181b;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.bz2:where(.pch) .lkw-tag.is-on {
  opacity: 1;
}
html.pch-motion .bz2:where(.pch) .am-pj-cap:not(.is-typed) .lkw-tag {
  opacity: 0;
}
/* the comment reply: desktop shows the switch under the step rail, phones
   and tablets in a band above the journey */
.bz2:where(.pch) .dj-ways {
  margin-top: 36px;
}
.bz2:where(.pch) .dj-intro {
  display: none;
}
@media (max-width: 1023px) {
  .bz2:where(.pch) .dj-ways {
    display: none;
  }
  .bz2:where(.pch) .dj-intro {
    display: block;
    padding-bottom: 32px;
  }
  .bz2:where(.pch) .dj-intro .pj-h2 {
    margin: 0;
  }
}
/* Post to All on desktop: the switch sits beside the headline and the
   line stays one row, so the title band keeps its old height and the
   engine keeps the lead on screen. Phones keep the switch in the lead. */
.bz2:where(.pch) .lkw-desk {
  display: none;
}
@media (min-width: 1024px) {
  .bz2:where(.pch) .am-pj-title {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .bz2:where(.pch) .am-pj-title .pj-h2 {
    margin: 0;
  }
  .bz2:where(.pch) .am-pj-title .lkw-desk {
    display: inline-flex;
    margin: 0;
  }
  .bz2:where(.pch) .am-pj-lead .lkw-sw {
    display: none;
  }
  .bz2:where(.pch) .am-pj-lead .lkw {
    max-width: none;
  }
}

/* no notch on any phone (Kedem 2026-11-01): every screen runs edge to edge */
.bz2:where(.pch) .am-island {
  display: none;
}