/*
 * Realease.pro explainers: how a buyer reaches the office (the chain), who
 * does what when we start (two lanes), and what Realease Pro adds next to the
 * portals and the office's own way of working (the comparison).
 *
 * Picture first, a few words per element. Each explainer sizes itself to the
 * room it gets through a container query, not to the screen, so it reads the
 * same in a half column on the home page as at full width elsewhere.
 */

.rp .b3x {
  container-type: inline-size;
}

/* Small parts shared by the explainers */
.rp .b3x-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--b3-brand);
  color: #fff;
  font: 700 13px/1 var(--f-display);
}
.rp .b3x-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--b3-line-2);
  border-radius: 999px;
  background: #fff;
  font: 500 12px/1 var(--f-body);
  color: var(--ink);
  white-space: nowrap;
}
.rp .b3x-url::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--b3-brand);
}
.rp .b3x-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.rp .b3x-bars i {
  height: 3px;
  border-radius: 2px;
  background: #e7e5df;
}
.rp .b3x-bars i.on {
  background: var(--b3-brand);
}
.rp .b3x-foot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--b3-ink-2);
}
.rp .b3x-foot::before {
  content: '';
  flex: none;
  width: 22px;
  margin-top: 11px;
  border-top: 1.5px solid var(--sand);
}
.rp .b3x-foot b {
  font-weight: 600;
  color: var(--ink);
}

/* ===== The chain: four stations, buyer to office ===== */
.rp .b3x-flow {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp .b3x-flow > li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.rp .b3x-flow > li + li {
  margin-left: 56px;
}
.rp .b3x-vis {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  height: 184px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--b3-line);
  border-radius: 22px;
  background: var(--b3-paper);
  box-shadow: var(--b3-sh-1);
}
.rp .b3x-cap {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--b3-line);
}
.rp .b3x-cap small {
  display: block;
  margin-bottom: 8px;
  font: 600 10.5px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b3-brons-ink);
}
.rp .b3x-cap b {
  display: block;
  font: 600 20px/1.2 var(--f-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rp .b3x-cap span {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
}
.rp .b3x-pipe {
  position: absolute;
  top: 0;
  left: -56px;
  width: 56px;
  height: 184px;
}
.rp .b3x-pipe::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 6px;
  left: 6px;
  border-top: 1.5px solid var(--b3-line-2);
}
.rp .b3x-pipe i {
  position: absolute;
  top: calc(50% - 4px);
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b3-brand);
  animation: b3x-run 2.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.rp .b3x-flow > li:nth-child(3) .b3x-pipe i {
  animation-delay: 0.8s;
}
.rp .b3x-flow > li:nth-child(4) .b3x-pipe i {
  animation-delay: 1.6s;
}
@keyframes b3x-run {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(36px);
    opacity: 0;
  }
}
@keyframes b3x-run-down {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(16px);
    opacity: 0;
  }
}

/* Station 1: buyers from all over Europe */
.rp .b3x-crowd {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  justify-content: center;
  gap: 8px 10px;
}
.rp .b3x-crowd span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: var(--sand-soft);
  font: 600 11px/1 var(--f-body);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.rp .b3x-crowd span:nth-child(3n) {
  background: #e6e4ee;
}
.rp .b3x-crowd span:nth-child(4n) {
  background: #e9efed;
}

/* Station 2: the search profile on FYSH */
.rp .b3x-prof {
  font-size: 13px;
}
.rp .b3x-prof .k {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rp .b3x-prof .k b {
  font: 700 13px/1 var(--f-display);
  letter-spacing: -0.01em;
}
.rp .b3x-prof .k small {
  font-size: 11px;
  color: var(--muted);
}
.rp .b3x-prof .r {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--b3-line);
  color: var(--b3-ink-2);
}
.rp .b3x-prof .r b {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Station 3: one office per area */
.rp .b3x-areas {
  font-size: 13px;
}
.rp .b3x-areas small {
  display: block;
  margin-bottom: 8px;
  font: 600 10.5px/1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rp .b3x-areas div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #b9b7c2;
  white-space: nowrap;
}
.rp .b3x-areas div.me {
  background: var(--ink);
  font-weight: 600;
  color: #fff;
}
.rp .b3x-areas em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 500;
  color: var(--sand);
}
.rp .b3x-areas em .b3x-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-size: 10px;
}

/* Station 4: the buyer's phone, in the office's name */
.rp .b3x-vis.ph {
  align-items: center;
  justify-content: flex-end;
  padding: 0 18px;
}
.rp .b3x-mini {
  width: 150px;
  height: 150px;
  padding: 7px 7px 0;
  border-radius: 26px 26px 0 0;
  background: #16162a;
}
.rp .b3x-mini > div {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  padding: 12px 11px;
  border-radius: 20px 20px 0 0;
  background: #fff;
}
.rp .b3x-mini .b3x-url {
  align-self: center;
  padding: 4px 7px;
  font-size: 9.5px;
}
.rp .b3x-mini .br {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 12px/1.1 var(--f-display);
  color: var(--ink);
}
.rp .b3x-mini .b3x-mark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 10px;
}
.rp .b3x-mini p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--b3-ink-2);
}

/* Narrow: one row per station, picture on the right, the line runs down */
@container (max-width: 760px) {
  .rp .b3x-flow {
    flex-direction: column;
  }
  .rp .b3x-flow > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 156px;
    align-items: center;
    gap: 14px;
  }
  .rp .b3x-flow > li + li {
    margin: 24px 0 0;
  }
  .rp .b3x-vis {
    order: 2;
    height: 124px;
    padding: 12px;
    border-radius: 14px;
    box-shadow: none;
  }
  .rp .b3x-cap {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .rp .b3x-cap small {
    margin-bottom: 5px;
    font-size: 9.5px;
  }
  .rp .b3x-cap b {
    font-size: 17px;
  }
  .rp .b3x-cap span {
    font-size: 13.5px;
  }
  .rp .b3x-pipe {
    top: -24px;
    right: 0;
    left: auto;
    width: 156px;
    height: 24px;
  }
  .rp .b3x-pipe::before {
    top: 2px;
    right: auto;
    bottom: 2px;
    left: 50%;
    border-top: 0;
    border-left: 1.5px solid var(--b3-line-2);
  }
  .rp .b3x-pipe i {
    top: 2px;
    left: calc(50% - 3.5px);
    width: 7px;
    height: 7px;
    animation-name: b3x-run-down;
  }
  .rp .b3x-crowd {
    grid-template-columns: repeat(4, 27px);
    gap: 6px;
  }
  .rp .b3x-crowd span {
    width: 27px;
    height: 27px;
    font-size: 9px;
  }
  .rp .b3x-prof {
    font-size: 11px;
  }
  .rp .b3x-prof .k {
    margin-bottom: 3px;
  }
  .rp .b3x-prof .k b {
    font-size: 11.5px;
  }
  .rp .b3x-prof .k small {
    font-size: 9.5px;
  }
  .rp .b3x-prof .r {
    padding: 4px 0;
  }
  .rp .b3x-areas {
    font-size: 11px;
  }
  .rp .b3x-areas small {
    margin-bottom: 4px;
    font-size: 9px;
  }
  .rp .b3x-areas div {
    padding: 5px 8px;
  }
  .rp .b3x-areas em {
    display: none;
  }
  .rp .b3x-vis.ph {
    padding: 0 12px;
  }
  .rp .b3x-mini {
    width: 118px;
    height: 104px;
    padding: 5px 5px 0;
    border-radius: 20px 20px 0 0;
  }
  .rp .b3x-mini > div {
    gap: 7px;
    padding: 9px 8px;
    border-radius: 16px 16px 0 0;
  }
  .rp .b3x-mini .b3x-url {
    font-size: 8px;
  }
  .rp .b3x-mini .br {
    font-size: 10.5px;
  }
  .rp .b3x-mini p {
    display: none;
  }
}

/* ===== Who does what: two lanes over four phases ===== */
.rp .b3x-lanes {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 210px;
  grid-template-rows: auto auto auto;
  overflow: hidden;
  border: 1px solid var(--b3-line);
  border-radius: 22px;
  background: var(--b3-paper);
  box-shadow: var(--b3-sh-1);
}
.rp .b3x-who {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 15px/1 var(--f-display);
  color: var(--ink);
}
.rp .b3x-who::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--ink);
}
.rp .b3x-who.u::before {
  border: 2px solid var(--sand);
  background: #fff;
}
.rp .b3x-side,
.rp .b3x-tot {
  display: grid;
  grid-row: 1 / 4;
  grid-template-rows: subgrid;
}
.rp .b3x-side > *,
.rp .b3x-tot > *,
.rp .b3x-phases > li > * {
  min-width: 0;
  padding: 16px 14px;
  border-top: 1px solid var(--b3-line);
}
.rp .b3x-side > :first-child,
.rp .b3x-tot > :first-child,
.rp .b3x-phases > li > :first-child {
  padding-block: 18px 12px;
  border-top: 0;
}
.rp .b3x-side .we,
.rp .b3x-phases .we {
  background: #fcfbf8;
}
.rp .b3x-phases {
  display: grid;
  grid-row: 1 / 4;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rp .b3x-phases > li {
  display: grid;
  grid-row: 1 / 4;
  grid-template-rows: subgrid;
  border-left: 1px solid var(--b3-line);
}
.rp .b3x-phases h3 {
  margin: 0;
  font: 600 16px/1.2 var(--f-display);
  color: var(--ink);
}
.rp .b3x-phases h3 small {
  display: block;
  margin-top: 3px;
  font: 400 12.5px/1.3 var(--f-body);
  color: var(--muted);
}
.rp .b3x-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  list-style: none;
}
.rp .b3x-chips li {
  padding: 8px 11px;
  border-radius: 10px;
  font: 500 13.5px/1.25 var(--f-body);
}
.rp .b3x-chips.we li {
  background: var(--ink);
  color: #fff;
}
.rp .b3x-chips.you li {
  border: 1.5px solid var(--sand);
  background: #fff;
  color: var(--ink);
}
.rp .b3x-tot {
  border-left: 1px solid var(--b3-line);
}
.rp .b3x-tot > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.rp .b3x-tot b {
  font: 600 24px/1 var(--f-display);
}
.rp .b3x-tot span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--b3-ink-2);
}
.rp .b3x-tot .we {
  border-top-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.rp .b3x-tot .we span {
  color: rgba(246, 243, 236, 0.66);
}
.rp .b3x-tot .you {
  background: var(--sand-soft);
  color: var(--ink);
}
.rp .b3x-lhead {
  display: none;
}

/* Narrow: per phase a row, our part left and the office's part right */
@container (max-width: 760px) {
  .rp .b3x-lanes {
    display: block;
    border-radius: 14px;
    box-shadow: none;
  }
  .rp .b3x-side {
    display: none;
  }
  .rp .b3x-lhead {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--b3-line);
    background: var(--canvas);
  }
  .rp .b3x-lhead > span {
    padding: 12px 12px 10px;
  }
  .rp .b3x-lhead > span + span {
    border-left: 1px solid var(--b3-line);
  }
  .rp .b3x-phases {
    display: block;
  }
  .rp .b3x-phases > li {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    border-left: 0;
  }
  .rp .b3x-phases > li + li {
    border-top: 1px solid var(--b3-line);
  }
  .rp .b3x-phases > li > * {
    padding: 6px 12px 12px;
    border-top: 0;
  }
  .rp .b3x-phases > li > :first-child {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 4px;
  }
  .rp .b3x-phases h3 {
    font-size: 15px;
  }
  .rp .b3x-phases h3 small {
    margin: 0;
  }
  .rp .b3x-phases .we {
    background: none;
  }
  .rp .b3x-phases .you {
    border-left: 1px solid var(--b3-line);
  }
  .rp .b3x-chips li {
    padding: 7px 9px;
    font-size: 12.5px;
  }
  .rp .b3x-tot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-left: 0;
  }
  .rp .b3x-tot > :first-child {
    display: none;
  }
  .rp .b3x-tot > div {
    padding: 12px;
  }
  .rp .b3x-tot b {
    font-size: 20px;
  }
}

/* ===== The difference: portals, the office's own way, Realease Pro ===== */
.rp .b3x-mx {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--b3-line);
  border-radius: 22px;
  background: var(--b3-paper);
  box-shadow: var(--b3-sh-1);
}
.rp .b3x-mx > div {
  display: contents;
}
.rp .b3x-mx [role='columnheader'],
.rp .b3x-mx [role='rowheader'],
.rp .b3x-mx [role='cell'] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 18px 16px;
  border-top: 1px solid var(--b3-line);
}
.rp .b3x-mx [role='columnheader'] {
  align-items: center;
  border-top: 0;
  font: 600 15px/1.2 var(--f-display);
  text-align: center;
  color: var(--ink);
}
.rp .b3x-mx [role='columnheader'] small {
  display: block;
  margin-top: 3px;
  font: 500 12px/1.3 var(--f-body);
  color: var(--muted);
}
.rp .b3x-mx [role='rowheader'] {
  font: 600 17px/1.25 var(--f-display);
  color: var(--ink);
}
.rp .b3x-mx [role='cell'] {
  align-items: center;
  gap: 6px;
  text-align: center;
}
.rp .b3x-mx [role='cell'] span {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--muted);
}
.rp .b3x-mx [role='columnheader']:not(.rp-col, .blank),
.rp .b3x-mx [role='cell']:not(.rp-col) {
  border-left: 1px solid var(--b3-line);
}
.rp .b3x-mx .rp-col {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: var(--ink);
  color: #fff;
}
.rp .b3x-mx .rp-col small,
.rp .b3x-mx .rp-col span {
  color: rgba(246, 243, 236, 0.66);
}
.rp .b3x-m {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.rp .b3x-m.no {
  border: 1.5px solid var(--b3-line-2);
}
.rp .b3x-m.no::after {
  content: '';
  width: 9px;
  border-top: 1.5px solid #b9b7c2;
}
.rp .b3x-m.half {
  border: 1.5px solid var(--sand);
  background: linear-gradient(90deg, var(--sand) 50%, transparent 50%);
}
.rp .b3x-m.yes {
  background: var(--sand);
}
.rp .b3x-m.yes::after {
  content: '';
  width: 9px;
  height: 5px;
  border-bottom: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  transform: translateY(-1px) rotate(-45deg);
}

/* Narrow: the question as a row across, the three answers below it */
@container (max-width: 520px) {
  .rp .b3x-mx {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 14px;
    box-shadow: none;
  }
  .rp .b3x-mx [role='cell'],
  .rp .b3x-mx [role='columnheader'] {
    padding: 10px 6px;
  }
  .rp .b3x-mx [role='columnheader'] {
    padding-block: 14px;
    font-size: 12.5px;
  }
  .rp .b3x-mx [role='columnheader'] small {
    font-size: 10.5px;
  }
  .rp .b3x-mx [role='columnheader'].blank {
    display: none;
  }
  .rp .b3x-mx [role='columnheader']:nth-child(2) {
    border-left: 0;
  }
  .rp .b3x-mx [role='rowheader'] {
    grid-column: 1 / -1;
    padding: 14px 12px 4px;
    background: var(--canvas);
    font-size: 15px;
  }
  .rp .b3x-mx [role='cell'] {
    padding-bottom: 12px;
    border-top: 0;
    background: var(--canvas);
  }
  .rp .b3x-mx [role='rowheader'] + [role='cell'] {
    border-left: 0;
  }
  .rp .b3x-mx [role='cell'].rp-col {
    background: var(--ink);
  }
  .rp .b3x-mx [role='cell'] span {
    font-size: 11px;
  }
  .rp .b3x-m {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rp .b3x-pipe i {
    left: calc(50% - 4px);
    animation: none;
    opacity: 1;
  }
}

/* Where they sit: the chain runs under the leads head, full width */
.rp .bp-route-sec > .wrap {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 4vw, 56px);
}
.rp .bp-route-sec > .wrap > div:first-child {
  max-width: 760px;
}