/* The redesigned Brokers, Buyers and Sellers pages (cards IKwtHlIA,
   5NCrGv8w, k84MGBXo; plan docs/ai/2026/09/2026-09-30-audience-pages),
   on the redesigned chrome site.css draws. Each page keeps its kind of
   visitor's colour from the home page's "How it works" (--au-accent,
   from tokens.css): broker navy, buyer plum, seller amber. Buttons stay
   the brand's plum on every page; the colour marks the eyebrows, the
   steps and the pictures.
   No style is inline (the CSP): what moves is set by audiences.js through
   custom properties, or follows the classes and data attributes it sets */

.au {
  --au-accent: var(--po-aud-broker);
  --au-tint: color-mix(in srgb, var(--au-accent) 14%, #fff);
  --au-wash: color-mix(in srgb, var(--au-accent) 6%, #fff);
  --au-ok: var(--po-ok);
  --au-ok-ink: #276b47;
  --au-ok-tint: #e4f1ea;
  display: block;
}

.au[data-aud="buyer"] {
  --au-accent: var(--po-aud-buyer);
}

.au[data-aud="seller"] {
  --au-accent: var(--po-aud-seller);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.au .sec {
  padding: var(--po-sp-16) 0;
}

.au-eye {
  color: var(--au-accent);
  letter-spacing: var(--po-ls-caps);
}

.au-h1 {
  max-width: 20ch;
  margin-top: var(--po-sp-3);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--po-ls-tight);
  color: var(--po-ink-soft);
}

.au-h2 {
  max-width: 28ch;
  margin-top: var(--po-sp-2);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
}

.au-lede {
  max-width: 60ch;
  margin: var(--po-sp-4) 0 0;
  font-size: var(--po-fs-2xl);
  line-height: 1.55;
  color: var(--po-body);
}

/* The hero: one tinted field, as the home page's, the words beside the
   picture */
.au-hero {
  background: var(--po-tint-cool);
  border-bottom: 1px solid var(--po-line);
}

.au-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: var(--po-sp-12);
  align-items: center;
  padding-top: var(--po-sp-12);
  padding-bottom: var(--po-sp-16);
}

.au-hero-l {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.au-hero-l .srch {
  margin-top: var(--po-sp-6);
}

.au-hero-r {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.au-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--po-sp-3);
  margin-top: var(--po-sp-6);
}

/* A tile, ruled off the field like the home page's count tiles */
.au-tile {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-1);
  padding: var(--po-sp-4) var(--po-sp-5);
  border: 1px solid var(--po-line-2);
  border-radius: 12px;
  background: #fff;
}

.au-tile b {
  font-family: var(--po-font-ui);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--po-ls-tight);
  color: var(--au-accent);
}

.au-tile span {
  font-size: var(--po-fs-base);
  line-height: 1.45;
  color: var(--po-body);
}

.au-tiles-lg .au-tile {
  padding: var(--po-sp-6);
}

.au-cta {
  margin-top: var(--po-sp-6);
}

.au-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--po-sp-3);
}

/* The sellers' hero: choosing a broker as a button under the words */
.au-hero-acts {
  margin-top: var(--po-sp-6);
}

/* A minimum height rather than a fixed one, and allowed to wrap: a long
   label such as the sellers' "Choose a broker for your practice sale"
   would otherwise push a 360 px phone sideways. One line still sits at
   50 px */
.au .au-btn {
  min-height: 50px;
  height: auto;
  padding: var(--po-sp-3) var(--po-sp-6);
  white-space: normal;
  text-align: center;
  border-radius: 8px;
  font-size: var(--po-fs-xl);
  font-weight: 600;
}

.au-more {
  display: inline-flex;
  align-items: center;
  gap: var(--po-sp-1);
  min-height: 44px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xl);
  font-weight: 600;
}

:where(.au) .au-more,
:where(.au) .au-more:hover {
  color: var(--au-accent);
}

.au-note {
  display: flex;
  align-items: center;
  gap: var(--po-sp-3);
  margin: var(--po-sp-6) 0 0;
  font-size: var(--po-fs-xl);
  color: var(--po-ink-2);
}

.au-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--au-tint);
  color: var(--au-accent);
}

.au-icon svg {
  width: 18px;
  height: 18px;
}

.au-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--po-sp-2);
  border-radius: 999px;
  background: var(--au-tint);
  color: var(--au-accent);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.au-chip.is-loi,
.au-chip.is-ok {
  background: var(--au-ok-tint);
  color: var(--au-ok-ink);
}

.au-chip.is-draft {
  background: var(--po-bg-3);
  color: var(--po-ink-2);
}

/* The brokers' sample deal: its progress bar fills to "Under LOI" and
   its commission arrives, on CSS alone, once, as the page loads */
.deal {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-5);
  padding: var(--po-sp-6) var(--po-sp-8);
  border: 1px solid var(--po-line-2);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--po-sh-3);
}

.deal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--po-sp-4);
}

.deal-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.deal-name b {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-3xl);
  font-weight: 700;
  color: var(--po-ink-soft);
}

.deal-name span:last-child {
  font-size: var(--po-fs-md);
  color: var(--po-body);
}

.deal-prog {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deal-prog::before,
.deal-prog::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 11px;
  right: 11px;
  height: 3px;
  border-radius: 2px;
  background: var(--po-line);
}

.deal-prog::after {
  right: auto;
  width: calc((100% - 22px) * 0.75);
  background: var(--au-accent);
  transform-origin: left;
  animation: au-fill 1.2s 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.deal-prog li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 22px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-sm);
  font-weight: 700;
  white-space: nowrap;
  color: var(--po-faint);
}

.deal-prog li::before {
  content: "";
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 2px solid #cfd6dc;
  border-radius: 50%;
  background: #fff;
}

.deal-prog li:nth-child(-n+4) {
  color: var(--po-ink-2);
}

.deal-prog li:nth-child(-n+4)::before {
  border-color: var(--au-accent);
  background: var(--au-accent);
  animation: au-dot 0.3s both;
}

.deal-prog li:nth-child(2)::before {
  animation-delay: 0.7s;
}

.deal-prog li:nth-child(3)::before {
  animation-delay: 1s;
}

.deal-prog li:nth-child(4)::before {
  animation-delay: 1.3s;
}

.deal-prog li:nth-child(4) {
  color: var(--au-accent);
}

.deal-money {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-2);
  margin: 0;
  animation: au-rise 0.5s 1.5s both;
}

.deal-money div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--po-sp-4);
  font-size: var(--po-fs-lg);
}

.deal-money dd {
  margin: 0;
  font-weight: 700;
  color: var(--po-ink-soft);
}

.deal-money .deal-total {
  align-items: flex-end;
  padding-top: var(--po-sp-3);
  border-top: 1px solid var(--po-line);
}

.deal-total dt {
  display: flex;
  flex-direction: column;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xl);
  font-weight: 700;
  color: var(--po-ink-soft);
}

.deal-total small {
  font-family: var(--po-font-text);
  font-size: var(--po-fs-md);
  font-weight: 400;
  color: var(--po-body);
}

.deal-total dd {
  font-family: var(--po-font-ui);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: var(--po-ls-tight);
  color: var(--au-accent);
}

@keyframes au-fill {
  from {
    transform: scaleX(0);
  }
}

@keyframes au-dot {
  from {
    border-color: #cfd6dc;
    background: #fff;
  }
}

@keyframes au-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Wes's free tools, three cards */
.au-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--po-sp-6);
  margin: var(--po-sp-10) 0 0;
  padding: 0;
  list-style: none;
}

.au-card {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-3);
  padding: var(--po-sp-8) var(--po-sp-6);
  border: 1px solid var(--po-line);
  border-radius: 16px;
}

.au-card .au-icon {
  width: 52px;
  height: 52px;
}

.au-card .au-icon svg {
  width: 24px;
  height: 24px;
}

.au-card h3 {
  margin-top: var(--po-sp-1);
  font-size: var(--po-fs-3xl);
}

.au-card p {
  margin: 0;
  font-size: var(--po-fs-xl);
  line-height: 1.55;
}

/* The contact form the ported pages carried (_leadform.php), on the
   chrome's field, beside its heading */
.au-contact {
  padding: var(--po-sp-16) 0;
  background: var(--po-tint-cool);
  border-top: 1px solid var(--po-line);
}

.au-contact-in {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--po-sp-12);
  align-items: start;
}

.au-contact-l .au-acts {
  margin-top: var(--po-sp-6);
}

.contact-component {
  padding: var(--po-sp-8);
  border: 1px solid var(--po-line-2);
  border-radius: 16px;
  background: #fff;
}

.contact-component form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--po-sp-4);
}

.contact-component form > p,
.contact-component form > .hint,
.contact-component .actions,
.contact-component label:has(textarea) {
  grid-column: 1 / -1;
}

.contact-component form > p {
  margin: 0;
  font-size: var(--po-fs-md);
  color: var(--po-body);
}

.contact-component label {
  display: block;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 600;
  color: var(--po-ink-soft);
}

.contact-component .required::before {
  content: "*";
  margin-right: 2px;
  color: var(--po-warn);
}

.contact-component .hint {
  font-family: var(--po-font-text);
  font-size: var(--po-fs-sm);
  font-weight: 400;
  color: var(--po-muted);
}

.contact-component form > .hint {
  margin-top: calc(-1 * var(--po-sp-3));
  text-align: right;
}

.contact-component input,
.contact-component textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 46px;
  padding: 0 var(--po-sp-3);
  border: 1px solid #b9c2ca;
  border-radius: 8px;
  background: #fff;
  font-family: var(--po-font-text);
  font-size: var(--po-fs-xl);
  font-weight: 400;
  color: var(--po-ink-soft);
}

.contact-component textarea {
  height: auto;
  min-height: 120px;
  padding: var(--po-sp-2) var(--po-sp-3);
  resize: vertical;
}

/* The honeypot: out of sight and out of reach, as on the ported pages */
.contact-component .hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-component .actions {
  display: flex;
  justify-content: flex-end;
}

.contact-component button.primary,
.au-est .estimate-form .submit {
  height: 50px;
  padding: 0 var(--po-sp-6);
  border: 0;
  border-radius: 8px;
  background: var(--po-cta);
  color: #fff;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xl);
  font-weight: 700;
  cursor: pointer;
}

.contact-component button.primary:hover,
.au-est .estimate-form .submit:hover {
  background: var(--po-cta-hover);
}

.contact-component .success,
.contact-component .error {
  margin-top: var(--po-sp-4);
  padding: var(--po-sp-3) var(--po-sp-4);
  border-radius: 10px;
  background: var(--au-ok-tint);
  color: var(--au-ok);
}

.contact-component .error {
  background: #fbeaea;
  color: var(--po-warn);
}

.contact-component [hidden],
.au-est [hidden] {
  display: none;
}

/* The scroll story (layout/_story.php), as the home page's "How it
   works" plays it. As the server writes it, every step shows its line
   and the closing panel follows; audiences.js adds .is-live to pin and
   play it, or .is-still under reduced motion, and sets data-step and
   data-at, which the pictures read */
.st {
  --st-accent: var(--au-accent);
}

.st-pin {
  padding: var(--po-sp-16) 0;
}

.st-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--po-sp-12);
}

.st-copy {
  position: relative;
}

.st-h {
  max-width: 22ch;
  margin-top: var(--po-sp-2);
  font-size: var(--po-fs-display);
  line-height: 1.15;
  transition: opacity 400ms, transform 600ms, visibility 0s;
}

.st-head {
  transition: opacity 400ms, transform 600ms, visibility 0s;
}

.st-steps {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-5);
  margin: var(--po-sp-8) 0 0;
  padding: 0;
  list-style: none;
  transition: opacity 400ms, transform 600ms, visibility 0s;
}

.st-steps li {
  position: relative;
}

/* The line joins one step's circle to the next and never crosses one:
   a grey track, and over it the page's colour, filled as far as the
   reader has come (--f) */
.st-steps li:not(:last-child)::before,
.st-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  bottom: -16px;
  left: 15px;
  width: 3px;
  border-radius: 2px;
  background: var(--po-line);
}

.st-steps li:not(:last-child)::after {
  background: var(--st-accent);
  transform: scaleY(var(--f, 0));
  transform-origin: top;
  transition: transform 150ms linear;
}

.st-step {
  display: flex;
  gap: var(--po-sp-4);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.st-step:disabled {
  cursor: default;
}

.st-dot {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border: 2px solid #cfd6dc;
  border-radius: 50%;
  background: #fff;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-md);
  font-weight: 700;
  color: var(--po-muted);
  transition: background-color 300ms, border-color 300ms, color 300ms;
}

.st-dot svg {
  position: absolute;
  inset: 6px;
  width: 16px;
  height: 16px;
  color: var(--st-accent);
  opacity: 0;
}

/* A finished step's circle is a solid tint, so the line never shows
   through it */
.st-steps .is-done .st-dot {
  border-color: var(--st-accent);
  background: var(--au-tint);
}

.st-steps .is-done .st-dot > span {
  opacity: 0;
}

.st-steps .is-done .st-dot svg {
  opacity: 1;
}

.st-steps .is-on .st-dot {
  border-color: var(--st-accent);
  background: var(--st-accent);
  color: #fff;
}

.st-txt {
  display: flex;
  flex-direction: column;
}

.st-lbl {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-2xl);
  font-weight: 600;
  line-height: 32px;
  color: var(--po-ink-soft);
  transition: color 300ms;
}

.st-step:not(:disabled):hover .st-lbl {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.st-cap {
  font-size: var(--po-fs-lg);
  line-height: 24px;
  color: var(--po-muted);
}

/* A buyer step's two reasons, each after a drawn tick */
.st-tick {
  display: flex;
  align-items: center;
  gap: var(--po-sp-2);
  margin-top: var(--po-sp-1);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 600;
  line-height: 20px;
  color: var(--po-ink-2);
}

.st-tick::before {
  content: "";
  flex: none;
  width: 9px;
  height: 5px;
  margin: 0 3px 3px 1px;
  border-bottom: 2.5px solid var(--st-accent);
  border-left: 2.5px solid var(--st-accent);
  transform: rotate(-45deg);
}

.st-end {
  margin-top: var(--po-sp-10);
  transition: opacity 450ms, transform 600ms cubic-bezier(0.3, 1.3, 0.4, 1),
    visibility 0s 450ms;
}

.st-end-h {
  max-width: 20ch;
  margin-top: var(--po-sp-2);
  font-size: var(--po-fs-display);
  line-height: 1.15;
}

.st-end-p {
  max-width: 44ch;
  margin: var(--po-sp-3) 0 var(--po-sp-6);
  font-size: var(--po-fs-xl);
  line-height: 1.55;
}

.st-art[hidden] {
  display: none;
}

.st-art {
  position: relative;
}

.st-frame {
  position: relative;
  width: var(--st-w, 600px);
  height: var(--st-hh, 460px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--po-line-2);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--po-sh-3);
}

.st-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--st-k, 1));
  transform-origin: 0 0;
}

.st-prev,
.st-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 1px solid var(--po-line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 16px -8px rgba(30, 40, 50, 0.4);
  color: var(--st-accent);
  cursor: pointer;
  transition: opacity 250ms;
}

.st-prev svg,
.st-next svg {
  width: 20px;
  height: 20px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-prev {
  left: calc(50% - var(--st-w, 600px) / 2 - 22px);
}

.st-next {
  right: calc(50% - var(--st-w, 600px) / 2 - 22px);
}

.st-prev:disabled {
  opacity: 0.35;
  cursor: default;
}

.st-next:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Live: pinned under the header, only as tall as it is and centred in
   the height under the header (--st-stick), one step's line at a time.
   At the end the steps make way for the closing panel */
.st.is-live .st-pin {
  position: sticky;
  top: var(--st-stick, 71px);
  padding: var(--po-sp-12) 0;
  overflow: hidden;
}

.st.is-live .st-body,
.st.is-still .st-body {
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: center;
}

.st.is-live .st-lbl {
  color: var(--po-muted);
}

.st.is-live .is-done .st-lbl {
  color: var(--po-ink-2);
}

.st.is-live .is-on .st-lbl {
  color: var(--po-ink-soft);
}

.st.is-live .st-cap,
.st.is-live .st-tick {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 350ms, margin-top 350ms, opacity 300ms;
}

.st.is-live .is-on .st-cap {
  max-height: 72px;
  opacity: 1;
}

.st.is-live .is-on .st-tick {
  max-height: 44px;
  margin-top: var(--po-sp-1);
  opacity: 1;
}

.st.is-live .st-end {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(-50% - 24px));
}

.st.is-live.is-end .st-end {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%);
  transition-delay: 300ms, 300ms, 0s;
}

.st.is-live.is-end .st-head,
.st.is-live.is-end .st-steps {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-40px);
  transition-delay: 0s, 0s, 400ms;
}

/* Still (reduced motion): every line, the picture beside the steps,
   changed by the controls alone */
.st.is-still .st-body {
  align-items: start;
}

.st.is-still *,
.st.is-still *::before,
.st.is-still *::after {
  transition: none !important;
}

/* The brokers' sample dashboard (_dashboard.php), 760 x 500, or 380 x
   440 where the column is narrow (.is-compact). The steps: a new
   listing's alert reaches matching buyers (1), rows arrive (2), the
   progress bars fill (3), the NDAs light and the buyers slide in (4),
   the commission fills (5), the forecast takes over (6) */
.dash {
  width: 760px;
  height: 500px;
  overflow: hidden;
  background: #fff;
  font-family: var(--po-font-text);
  font-size: 13px;
  color: var(--po-body);
}

.dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid var(--po-line);
}

.dash-firm {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-firm span {
  font-family: var(--po-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: var(--po-ls-caps);
  text-transform: uppercase;
  color: var(--po-muted);
}

.dash-firm b {
  font-family: var(--po-font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--po-ink-soft);
}

.dash-pills {
  display: flex;
  gap: var(--po-sp-2);
}

.dash-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--po-bg-3);
  font-family: var(--po-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--po-ink-2);
  transition: background-color 300ms, color 300ms, opacity 400ms;
}

.dash-sample {
  border: 1px dashed var(--po-line-2);
  background: #fff;
  color: var(--po-muted);
}

.dash-play {
  background: var(--au-tint);
  color: var(--au-accent);
  opacity: 0;
}

.st[data-at~="5"] .dash-play {
  opacity: 1;
}

.st[data-step="4"] .dash-ndas {
  background: var(--au-accent);
  color: #fff;
}

.dash-table {
  position: relative;
  padding: 4px 18px 0;
  transition: opacity 450ms, transform 450ms;
}

/* The column the step is about, washed in the page's colour */
.dash-band {
  position: absolute;
  top: 4px;
  bottom: 0;
  left: 12px;
  width: 736px;
  border-radius: 10px;
  background: var(--au-wash);
  opacity: 0;
  transition: left 450ms, width 450ms, opacity 450ms;
}

.st[data-step="3"] .dash-band {
  width: 218px;
  opacity: 1;
}

.st[data-step="4"] .dash-band {
  left: 330px;
  width: 100px;
  opacity: 1;
}

.st[data-step="5"] .dash-band {
  left: 564px;
  width: 184px;
  opacity: 1;
}

.dash-row {
  position: relative;
  display: grid;
  grid-template-columns: 206px 112px 88px 96px 50px 92px 80px;
  align-items: center;
  height: 60px;
  border-top: 1px solid var(--po-line);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 450ms, transform 450ms;
}

.st[data-at~="2"] .dash-row {
  opacity: 1;
  transform: none;
}

.dash-row:nth-child(4) {
  transition-delay: 70ms;
}

.dash-row:nth-child(5) {
  transition-delay: 140ms;
}

.dash-row:nth-child(6) {
  transition-delay: 210ms;
}

.dash-row:nth-child(7) {
  transition-delay: 280ms;
}

.dash-row:nth-child(8) {
  transition-delay: 350ms;
}

/* Spaced a little tighter than the site's caps, so "Target close" keeps
   clear of "Commission" in its narrow column */
.dash-row.dash-head {
  height: 26px;
  border-top: 0;
  font-family: var(--po-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--po-muted);
  opacity: 1;
  transform: none;
}

.dash-row .dc-comm {
  text-align: right;
}

.dash-head .dc-close {
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}

.dash .au-chip {
  padding: 0 6px;
  font-size: 10px;
}

.dc-place {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dash-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.dash-name b {
  font-size: 13px;
  font-weight: 700;
  color: var(--po-ink-soft);
}

.dash-name code {
  font-family: var(--po-font-mono);
  font-size: 9.5px;
  color: var(--po-muted);
}

.dash-short,
.dc-side,
.db-i {
  display: none;
}

/* A row's progress bar: five points, filled to the listing's stage once
   the tour reaches step 3 */
.dash-prog {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The line runs through the dots' centres: the stage's name makes the
   row taller than a dot, and the dots are centred in it, so the line is
   placed by the row's middle rather than a fixed offset (Khoi, 1 Oct) */
.dash-prog::before,
.dash-prog::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 5px;
  width: 96px;
  height: 2px;
  background: var(--po-line-2);
}

.dash-prog::after {
  width: 0;
  background: var(--au-accent);
  transition: width 700ms;
}

.dash-prog i {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border: 2px solid #cfd6dc;
  border-radius: 50%;
  background: #fff;
  transition: background-color 300ms, border-color 300ms;
}

.dash-prog em {
  margin-left: -6px;
  font-family: var(--po-font-ui);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  color: var(--po-muted);
  transition: color 300ms;
}

.st[data-at~="3"] .dash-prog em {
  color: var(--au-accent);
}

.st[data-at~="3"] .dash-prog[data-stage="3"]::after {
  width: 48px;
}

.st[data-at~="3"] .dash-prog[data-stage="4"]::after {
  width: 72px;
}

.st[data-at~="3"] .dash-prog[data-stage="5"]::after {
  width: 96px;
}

.st[data-at~="3"] .dash-prog[data-stage="1"] i:nth-of-type(-n+1),
.st[data-at~="3"] .dash-prog[data-stage="3"] i:nth-of-type(-n+3),
.st[data-at~="3"] .dash-prog[data-stage="4"] i:nth-of-type(-n+4),
.st[data-at~="3"] .dash-prog[data-stage="5"] i {
  border-color: var(--au-accent);
  background: var(--au-accent);
}

.dc-price,
.dc-comm {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dc-price b,
.dc-comm b {
  font-size: 13px;
  font-weight: 700;
  color: var(--po-ink-soft);
}

.dc-price small,
.dc-comm small {
  font-size: 10px;
  color: var(--po-muted);
  white-space: nowrap;
}

.dc-days {
  font-weight: 700;
  color: var(--po-ink-2);
}

.dash-nda {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: var(--po-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--po-muted);
  transition: background-color 300ms, color 300ms;
}

.dash-nda.is-some {
  background: var(--au-tint);
  color: var(--au-accent);
}

.st[data-step="4"] .dash-nda.is-some {
  background: var(--au-accent);
  color: #fff;
}

.dc-close {
  font-size: 12px;
  font-style: italic;
  color: var(--po-body);
  white-space: nowrap;
}

.dc-close.is-firm {
  font-style: normal;
  font-weight: 700;
  color: var(--po-ink-soft);
}

/* The commission, ghosted until the tour reaches it */
.dc-comm {
  position: relative;
  align-items: flex-end;
}

.dc-comm i {
  position: absolute;
  top: 4px;
  right: 0;
  width: 46px;
  height: 9px;
  border-radius: 5px;
  background: #eceff2;
  transition: opacity 300ms;
}

.dc-comm b,
.dc-comm small {
  opacity: 0;
  transition: opacity 400ms;
}

.st[data-at~="5"] .dc-comm i {
  opacity: 0;
}

.st[data-at~="5"] .dc-comm b,
.st[data-at~="5"] .dc-comm small {
  opacity: 1;
}

.dash-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  margin: 0 18px;
  border-top: 1px solid var(--po-line);
  font-size: 12px;
  color: var(--po-muted);
  transition: opacity 450ms;
}

.dash-foot b {
  color: var(--au-accent);
}

/* The 12-month forecast takes the table's place at step 6. Each bar's
   height is --v of the tallest, which audiences.js sets from data-v */
.dash-chart {
  position: absolute;
  z-index: 2;
  inset: 56px 0 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity 500ms, transform 500ms;
}

.st[data-step="6"] .dash-chart {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.st[data-step="6"] .dash-table,
.st[data-step="6"] .dash-foot {
  opacity: 0;
}

.dash-sum {
  position: absolute;
  top: 16px;
  left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-sum span {
  font-weight: 700;
  color: var(--po-ink-soft);
}

.dash-sum b {
  font-family: var(--po-font-ui);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--au-accent);
}

.dash-sum small {
  font-size: 12px;
}

.dash-key {
  position: absolute;
  top: 20px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
  color: var(--po-ink-2);
}

.dash-key span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-key span::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px dashed var(--au-accent);
  border-radius: 3px;
  background: var(--au-tint);
}

.dash-key .is-firm::before {
  border-style: solid;
  background: var(--au-accent);
}

.dash-bars {
  position: absolute;
  top: 132px;
  right: 18px;
  left: 18px;
  display: flex;
  height: 262px;
  border-bottom: 0;
}

.dash-bars::before {
  content: "";
  position: absolute;
  top: 232px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--po-line-2);
}

.dash-bar {
  position: relative;
  flex: 1 1 0;
}

.dash-bar.is-some {
  cursor: pointer;
}

.db-col {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 30px;
  height: 0;
  margin-left: -15px;
  border: 1.5px dashed var(--au-accent);
  border-bottom: 0;
  border-radius: 6px 6px 2px 2px;
  background: var(--au-tint);
  transition: height 700ms, box-shadow 200ms;
}

.dash-bar:not(.is-some) .db-col {
  border: 0;
}

.dash-bar.is-firm .db-col {
  border-style: solid;
  background: var(--au-accent);
}

.st[data-step="6"] .db-col {
  height: calc(var(--v, 0) * 170px);
}

.dash-bar.is-shown .db-col {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-accent) 30%, #fff);
}

.db-k {
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  color: var(--po-ink-soft);
  opacity: 0;
  transition: bottom 700ms, opacity 300ms;
}

.st[data-step="6"] .db-k {
  bottom: calc(var(--v, 0) * 170px + 36px);
  opacity: 1;
}

.db-m {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--po-muted);
}

.dash-bar:nth-child(2) .db-col,
.dash-bar:nth-child(2) .db-k {
  transition-delay: 50ms;
}

.dash-bar:nth-child(4) .db-col,
.dash-bar:nth-child(4) .db-k {
  transition-delay: 150ms;
}

.dash-bar:nth-child(5) .db-col,
.dash-bar:nth-child(5) .db-k {
  transition-delay: 200ms;
}

.dash-bar:nth-child(6) .db-col,
.dash-bar:nth-child(6) .db-k {
  transition-delay: 250ms;
}

.dash-bar:nth-child(7) .db-col,
.dash-bar:nth-child(7) .db-k {
  transition-delay: 300ms;
}

.dash-bar:nth-child(9) .db-col,
.dash-bar:nth-child(9) .db-k {
  transition-delay: 400ms;
}

/* The listings behind a bar, on hover or a click */
.dash-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 232px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #2b333a;
  box-shadow: 0 12px 28px -12px rgba(20, 28, 36, 0.6);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}

.dash-tip.is-on {
  opacity: 1;
}

.dt-m {
  font-family: var(--po-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9d1d8;
}

.dt-w {
  font-size: 12.5px;
  line-height: 1.4;
}

.dt-a {
  font-size: 15px;
  font-weight: 800;
}

.dash-hint {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 11.5px;
  color: var(--po-muted);
}

/* A new listing's alert (step 1, Preston, 2 Oct): the in-app notice
   the app sends every buyer whose saved search fits it, over the empty
   table before the rows arrive. It never takes the pointer, so a click
   on the forecast's bars beneath it lands */
.dash-alert {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  top: 84px;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 440px;
  margin-left: -220px;
  padding: 18px;
  border: 1px solid var(--po-line-2);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 48px -28px rgba(30, 40, 50, 0.45);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms, transform 450ms;
}

.st[data-step="1"] .dash-alert {
  opacity: 1;
  transform: none;
}

.da-new {
  display: flex;
  align-items: center;
  gap: 10px;
}

.da-new b {
  font-size: 15px;
  color: var(--po-ink-soft);
}

.da-new code {
  font-family: var(--po-font-mono);
  font-size: 10px;
  color: var(--po-muted);
}

.da-s {
  font-size: 12px;
  color: var(--po-muted);
}

/* Each buyer's notice lands after the last */
.da-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--au-wash);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 400ms, transform 400ms;
}

.st[data-step="1"] .da-note {
  opacity: 1;
  transform: none;
  transition-delay: 450ms;
}

.st[data-step="1"] .da-note + .da-note {
  transition-delay: 750ms;
}

.da-note > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.da-note b {
  font-size: 13px;
  color: var(--po-ink-soft);
}

.da-note small {
  font-size: 12px;
  line-height: 1.4;
  color: var(--po-body);
}

/* The network the alert reaches, the picture's focal point (Khoi,
   6 Oct): the figure large in the page's colour on a soft tint, "Matched
   from" above it and "qualified buyers" beside it */
.da-net {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--au-tint);
}

.da-net small {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--po-muted);
}

.da-net b {
  font-family: var(--po-font-ui);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--au-accent);
}

.da-net span {
  font-size: 17px;
  font-weight: 700;
  color: var(--po-ink-soft);
}

.is-compact .dash-alert {
  top: 72px;
  right: 14px;
  left: 14px;
  width: auto;
  margin-left: 0;
}

.is-compact .da-new code {
  display: none;
}

/* The NDAs to review: the buyers' profiles slide in from the right,
   after the column lights, and the first is approved */
.dash-drawer {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  padding: 18px;
  border-left: 1px solid var(--po-line-2);
  background: #fff;
  box-shadow: -24px 0 40px -28px rgba(30, 40, 50, 0.45);
  transform: translateX(106%);
  transition: transform 550ms cubic-bezier(0.3, 1.05, 0.4, 1);
}

.st[data-step="4"] .dash-drawer {
  transform: none;
  transition-delay: 600ms;
}

.dd-h {
  font-family: var(--po-font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--po-ink-soft);
}

.dd-s {
  margin-top: -8px;
  font-size: 11.5px;
  color: var(--po-muted);
}

.dd-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--po-line-2);
  border-radius: 12px;
}

.dd-who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dd-who > span:last-child {
  display: flex;
  flex-direction: column;
}

.dd-who b {
  font-size: 13.5px;
  color: var(--po-ink-soft);
}

.dd-who small {
  font-size: 11px;
  color: var(--po-muted);
}

.dd-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--au-tint);
  font-size: 12px;
  font-weight: 800;
  color: var(--au-accent);
}

.dd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.dd-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--po-bg-3);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--po-ink-2);
}

.dd-chip.is-ok {
  background: var(--au-ok-tint);
  color: var(--au-ok-ink);
}

.dd-acts {
  position: relative;
  display: flex;
  gap: 8px;
  height: 32px;
}

.dd-yes,
.dd-no {
  display: grid;
  place-items: center;
  flex: 1;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  transition: opacity 300ms;
}

.dd-yes {
  background: var(--au-accent);
  color: #fff;
}

.dd-no {
  border: 1px solid #cfd6dc;
  color: var(--po-ink-2);
}

.dd-done {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--au-ok-tint);
  font-size: 12px;
  font-weight: 800;
  color: var(--au-ok-ink);
  opacity: 0;
  transition: opacity 300ms;
}

.st[data-step="4"] .is-first .dd-done {
  opacity: 1;
  transition-delay: 2200ms;
}

.st[data-step="4"] .is-first .dd-yes,
.st[data-step="4"] .is-first .dd-no {
  opacity: 0;
  transition-delay: 2200ms;
}

.dd-more {
  font-size: 12px;
  font-weight: 700;
  color: var(--au-accent);
}

/* The dashboard in a narrow column: a row is its place, its progress
   and the one figure the step is about */
.is-compact .dash {
  width: 380px;
  height: 440px;
}

.is-compact .dash-top {
  height: 52px;
  padding: 0 14px;
}

.is-compact .dash-firm span,
.is-compact .dash-count,
.is-compact .dash-play,
.is-compact .dash-band,
.is-compact .dash-head,
.is-compact .dash-hint,
.is-compact .db-m,
.is-compact .db-k,
.is-compact .dash-name > b:first-child,
.is-compact .dc-st,
.is-compact .dc-price,
.is-compact .dc-days,
.is-compact .dc-nda,
.is-compact .dc-close,
.is-compact .dc-comm {
  display: none;
}

.is-compact .dash-short,
.is-compact .db-i {
  display: block;
}

.is-compact .dash-table {
  padding: 0 14px;
}

.is-compact .dash-row {
  grid-template-columns: minmax(0, 1fr) auto;
  height: 56px;
}

.is-compact .dash-row:nth-child(3) {
  border-top: 0;
}

.is-compact .dc-side {
  display: block;
}

.dc-side span {
  display: none;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--po-bg-3);
  font-family: var(--po-font-ui);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 24px;
  color: var(--po-ink-soft);
}

.is-compact .st-art .ds-price,
.st[data-step="4"] .ds-nda,
.st[data-at~="5"] .ds-comm {
  display: inline-block;
}

.st[data-step="4"] .ds-price,
.st[data-at~="5"] .ds-price {
  display: none;
}

.ds-nda.is-some {
  background: var(--au-accent);
  color: #fff;
}

.ds-comm {
  background: var(--au-tint);
  color: var(--au-accent);
}

.is-compact .dash-foot {
  height: 48px;
  margin: 0 14px;
}

.is-compact .dash-chart {
  top: 52px;
}

.is-compact .dash-sum {
  top: 14px;
  left: 14px;
}

.is-compact .dash-sum b {
  font-size: 28px;
}

.is-compact .dash-key {
  inset: auto auto 12px 14px;
  flex-direction: row;
  gap: 14px;
}

.is-compact .dash-bars {
  top: 112px;
  right: 14px;
  left: 14px;
  height: 230px;
}

.is-compact .dash-bars::before {
  top: 204px;
}

.is-compact .db-col {
  bottom: 26px;
  width: 16px;
  margin-left: -8px;
}

.is-compact.st[data-step="6"] .db-col {
  height: calc(var(--v, 0) * 130px);
}

.db-i {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--po-muted);
}

.is-compact .dash-tip {
  width: 200px;
}

.is-compact .dash-drawer {
  top: auto;
  left: 0;
  width: auto;
  height: 310px;
  border-top: 1px solid var(--po-line-2);
  border-left: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -20px 40px -26px rgba(30, 40, 50, 0.5);
  transform: translateY(106%);
}

.is-compact .dd-card:nth-of-type(2) {
  display: none;
}

/* The buyers' journey (_journey.php), a 600 x 460 scene: the road with
   Wes's stages, the step's picture, and Practice Orbit underneath */
.trip {
  width: 600px;
  height: 460px;
  background: #f7f9fb;
  font-family: var(--po-font-text);
  font-size: 13px;
  color: var(--po-body);
}

.trip-road {
  position: absolute;
  top: 35px;
  left: 60px;
  width: 480px;
  height: 3px;
  border-radius: 2px;
  background: var(--po-line-2);
}

.trip-road i {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--au-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms;
}

.st[data-step="2"] .trip-road i {
  transform: scaleX(0.25);
}

.st[data-step="3"] .trip-road i {
  transform: scaleX(0.5);
}

.st[data-step="4"] .trip-road i {
  transform: scaleX(0.75);
}

.st[data-step="5"] .trip-road i {
  transform: none;
}

.trip-miles {
  position: absolute;
  top: 16px;
  left: 10px;
  display: flex;
  width: 580px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trip-mile {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tm-dot {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid #cfd6dc;
  border-radius: 50%;
  background: #fff;
  color: var(--po-muted);
  transition: background-color 350ms, border-color 350ms, color 350ms,
    box-shadow 350ms;
}

.tm-dot svg {
  width: 20px;
  height: 20px;
}

.tm-lbl {
  font-family: var(--po-font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--po-muted);
}

.st[data-at~="2"] .trip-mile[data-n="1"] .tm-dot,
.st[data-at~="3"] .trip-mile[data-n="2"] .tm-dot,
.st[data-at~="4"] .trip-mile[data-n="3"] .tm-dot,
.st[data-at~="5"] .trip-mile[data-n="4"] .tm-dot {
  border-color: var(--au-accent);
  background: var(--au-tint);
  color: var(--au-accent);
}

.st[data-step="1"] .trip-mile[data-n="1"] .tm-dot,
.st[data-step="2"] .trip-mile[data-n="2"] .tm-dot,
.st[data-step="3"] .trip-mile[data-n="3"] .tm-dot,
.st[data-step="4"] .trip-mile[data-n="4"] .tm-dot,
.st[data-step="5"] .trip-mile[data-n="5"] .tm-dot {
  border-color: var(--au-accent);
  background: var(--au-accent);
  color: #fff;
  box-shadow: 0 0 0 6px var(--au-tint);
}

.st[data-step="1"] .trip-mile[data-n="1"] .tm-lbl,
.st[data-step="2"] .trip-mile[data-n="2"] .tm-lbl,
.st[data-step="3"] .trip-mile[data-n="3"] .tm-lbl,
.st[data-step="4"] .trip-mile[data-n="4"] .tm-lbl,
.st[data-step="5"] .trip-mile[data-n="5"] .tm-lbl {
  color: var(--po-ink-soft);
}

.trip-stage {
  position: absolute;
  top: 104px;
  left: 20px;
  width: 560px;
  height: 240px;
}

/* A step's picture shows while its step does - the first before the
   story starts - and its pieces play in after it */
.trip-l {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 450ms, transform 450ms;
}

.st[data-step="0"] .trip-l[data-n="1"] {
  opacity: 1;
  transform: none;
}

.st[data-step="1"] .trip-l[data-n="1"],
.st[data-step="2"] .trip-l[data-n="2"],
.st[data-step="3"] .trip-l[data-n="3"],
.st[data-step="4"] .trip-l[data-n="4"],
.st[data-step="5"] .trip-l[data-n="5"] {
  opacity: 1;
  transform: none;
  transition-delay: 150ms;
}

.tc {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--po-line-2);
  border-radius: 16px;
  background: #fff;
}

.tc b {
  font-family: var(--po-font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--po-ink-soft);
}

.tc small {
  font-size: 11.5px;
  color: var(--po-body);
}

.tc-cap {
  font-family: var(--po-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--po-muted);
}

.tc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tc-row svg {
  width: 16px;
  height: 16px;
  color: var(--au-accent);
}

.tc-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--au-tint);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  color: var(--au-accent);
}

.tc-pill.is-ok {
  background: var(--au-ok-tint);
  color: var(--au-ok-ink);
}

.tc-pill.is-dark {
  background: var(--po-ink-soft);
  color: #fff;
}

.tc-pill.is-accent {
  background: var(--au-accent);
  color: #fff;
}

.tc-ok {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--au-ok);
  color: #fff;
  transform: scale(0);
  transition: transform 400ms;
}

.tc-ok svg {
  width: 16px;
  height: 16px;
}

.st[data-step="1"] [data-n="1"] .tc-ok,
.st[data-step="2"] [data-n="2"] .tc-ok {
  transform: none;
  transition-delay: 700ms;
}

/* 1 Associate: the fee is $0, the ownership course free */
.tc-fee {
  top: 14px;
  left: 30px;
  width: 230px;
  height: 200px;
  justify-content: space-between;
}

.tc-tag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 70px;
  background: var(--au-accent);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 22% 100%, 0 50%);
}

.tc-tag b {
  margin-left: 22px;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
}

.tc-fee .tc-ok {
  position: absolute;
  top: 54px;
  left: 168px;
}

.tc-line {
  font-size: 13px;
  color: var(--po-ink-2);
}

.tc-course {
  top: 24px;
  left: 300px;
  width: 230px;
  height: 180px;
  padding: 0;
  overflow: hidden;
}

.tc-video {
  position: relative;
  display: grid;
  place-items: center;
  height: 112px;
  background: #34414d;
}

.tc-play {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.tc-play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 14px 0 0 18px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #fff;
}

.tc-cap-hat {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  transform: translateY(-30px);
  transition: transform 500ms;
}

.tc-cap-hat svg {
  width: 34px;
  height: 34px;
  fill: #e7b75a;
  stroke: #c9952e;
}

.st[data-step="1"] .tc-cap-hat {
  transform: rotate(-12deg);
  transition-delay: 300ms;
}

.tc-course .tc-row {
  padding: 12px 14px;
}

/* 2 Associate: a profile whose production grows, pre-qualification, a
   readiness checklist */
.tc-profile {
  top: 8px;
  left: 20px;
  width: 250px;
  height: 224px;
  gap: 10px;
}

.tc-who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tc-who > span {
  display: flex;
  flex-direction: column;
}

.tc-av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--au-tint);
  color: var(--au-accent);
}

.tc-av svg {
  width: 22px;
  height: 22px;
}

.tc-prod {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 76px;
  border-bottom: 1px solid var(--po-line-2);
}

.tc-prod i {
  width: 36px;
  height: 0;
  border-radius: 5px 5px 0 0;
  background: var(--au-tint);
  transition: height 600ms;
}

.tc-prod i:nth-child(2) {
  background: color-mix(in srgb, var(--au-accent) 45%, #fff);
}

.tc-prod i:nth-child(3) {
  background: var(--au-accent);
}

.st[data-step="2"] .tc-prod i:nth-child(1) {
  height: 34px;
  transition-delay: 300ms;
}

.st[data-step="2"] .tc-prod i:nth-child(2) {
  height: 52px;
  transition-delay: 450ms;
}

.st[data-step="2"] .tc-prod i:nth-child(3) {
  height: 72px;
  transition-delay: 600ms;
}

.tc-bank {
  top: 8px;
  left: 290px;
  width: 250px;
  height: 100px;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.tc-bank > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.tc-bank-i {
  width: 40px;
  height: 40px;
  color: var(--po-ink-2);
}

.tc-ready {
  top: 122px;
  left: 290px;
  width: 250px;
  height: 110px;
  gap: 6px;
  padding: 12px 16px;
}

.tc-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--po-ink-soft);
}

.tc-box i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--au-accent);
  color: #fff;
  opacity: 0;
  transition: opacity 300ms;
}

.tc-box svg {
  width: 12px;
  height: 12px;
}

.st[data-step="2"] .tc-box i {
  opacity: 1;
  transition-delay: 900ms;
}

.st[data-step="2"] .tc-box:nth-of-type(2) i {
  transition-delay: 1100ms;
}

.st[data-step="2"] .tc-box:nth-of-type(3) i {
  transition-delay: 1300ms;
}

/* 3 Find: every broker's listings into one feed, and a match alert */
.tc-links {
  position: absolute;
  inset: 0;
  width: 560px;
  height: 240px;
  fill: none;
  stroke: var(--au-accent);
  stroke-dasharray: 5 5;
  stroke-width: 2;
  opacity: 0.7;
}

.tc-src {
  left: 10px;
  width: 140px;
  height: 52px;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 12px;
}

.tc-src:nth-of-type(1) {
  top: 20px;
}

.tc-src:nth-of-type(2) {
  top: 94px;
}

.tc-src:nth-of-type(3) {
  top: 168px;
}

.tc-src span {
  font-size: 11px;
  font-weight: 700;
}

.tc-src i {
  width: 90px;
  height: 6px;
  border-radius: 3px;
  background: var(--po-line-2);
}

.tc-feed {
  top: 6px;
  left: 246px;
  width: 190px;
  height: 228px;
  gap: 10px;
  padding: 14px;
  box-shadow: 0 16px 30px -24px rgba(30, 40, 50, 0.5);
}

.tc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: #f5f7f9;
  opacity: 0.3;
  transform: translateX(-16px);
  transition: opacity 400ms, transform 400ms;
}

.tc-item.is-new {
  background: var(--au-tint);
}

.tc-item > i {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: var(--po-line-2);
}

.tc-item.is-new > i {
  background: var(--au-accent);
}

.tc-item > span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tc-item > span i {
  width: 80px;
  height: 7px;
  border-radius: 4px;
  background: #c9d1d8;
}

.tc-item > span i + i {
  width: 52px;
  height: 6px;
  background: var(--po-line-2);
}

.tc-item b {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  color: var(--au-accent);
}

.st[data-step="3"] .tc-item {
  opacity: 1;
  transform: none;
  transition-delay: 300ms;
}

.st[data-step="3"] .tc-item:nth-of-type(3) {
  transition-delay: 450ms;
}

.st[data-step="3"] .tc-item:nth-of-type(4) {
  transition-delay: 600ms;
}

.tc-phone {
  position: absolute;
  top: 34px;
  left: 462px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 86px;
  height: 172px;
  padding: 18px 6px 6px;
  border: 5px solid #34414d;
  border-radius: 18px;
  background: #fff;
  transform: translateY(40px);
  transition: transform 500ms;
}

.tc-phone b {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 7px;
  background: var(--au-tint);
  font-family: var(--po-font-ui);
  font-size: 10px;
  font-weight: 800;
  color: var(--au-accent);
}

.tc-phone i {
  height: 5px;
  border-radius: 3px;
  background: var(--po-line-2);
}

.tc-phone i:nth-of-type(2) {
  width: 70%;
}

.tc-bell {
  position: absolute;
  top: 14px;
  left: 526px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--po-line-2);
  border-radius: 50%;
  background: #fff;
  color: var(--au-accent);
  transform: scale(0);
  transition: transform 400ms;
}

.tc-bell svg {
  width: 16px;
  height: 16px;
}

.st[data-step="3"] .tc-phone {
  transform: none;
  transition-delay: 600ms;
}

.st[data-step="3"] .tc-bell {
  transform: scale(1) rotate(-12deg);
  transition-delay: 1000ms;
}

/* 4 Offer: the NDA signed, the take-home before the LOI, the LOI sent */
.tc-doc {
  top: 12px;
  width: 150px;
  height: 216px;
}

.tc-doc b {
  font-size: 16px;
  font-weight: 800;
}

.tc-doc > i {
  height: 6px;
  border-radius: 3px;
  background: var(--po-line-2);
}

.tc-doc > i:nth-of-type(2) {
  width: 75%;
}

.tc-doc .tc-pill {
  margin-top: auto;
}

.tc-nda {
  left: 10px;
}

.tc-loi {
  left: 404px;
  width: 146px;
}

.tc-sign {
  width: 118px;
  height: 34px;
  fill: none;
  stroke: var(--au-accent);
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  stroke-linecap: round;
  stroke-width: 2.4;
  transition: stroke-dashoffset 1s;
}

.st[data-step="4"] .tc-sign {
  stroke-dashoffset: 0;
  transition-delay: 400ms;
}

.tc-nda .tc-pill,
.tc-loi .tc-pill {
  opacity: 0;
  transition: opacity 300ms;
}

.st[data-step="4"] .tc-nda .tc-pill {
  opacity: 1;
  transition-delay: 1400ms;
}

.st[data-step="4"] .tc-loi .tc-pill {
  opacity: 1;
  transition-delay: 1800ms;
}

.tc-take {
  top: 12px;
  left: 182px;
  width: 206px;
  height: 216px;
  padding: 14px 14px 10px;
}

.tc-take .tc-row b {
  font-size: 12.5px;
}

.tc-fall {
  position: relative;
  flex: 1;
  border-bottom: 1px solid var(--po-line-2);
}

.tc-fall i {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 0;
  border-radius: 4px 4px 0 0;
  transition: height 500ms;
}

.tc-fall i:nth-child(1) {
  left: 6px;
  background: var(--au-accent);
}

.tc-fall i:nth-child(2) {
  bottom: 60px;
  left: 52px;
  border-radius: 4px;
  background: #c9d1d8;
}

.tc-fall i:nth-child(3) {
  bottom: 36px;
  left: 98px;
  border-radius: 4px;
  background: var(--po-line-2);
}

.tc-fall i:nth-child(4) {
  left: 144px;
  background: var(--au-ok);
}

.st[data-step="4"] .tc-fall i:nth-child(1) {
  height: 120px;
  transition-delay: 500ms;
}

.st[data-step="4"] .tc-fall i:nth-child(2) {
  height: 60px;
  transition-delay: 800ms;
}

.st[data-step="4"] .tc-fall i:nth-child(3) {
  height: 24px;
  transition-delay: 1100ms;
}

.st[data-step="4"] .tc-fall i:nth-child(4) {
  height: 36px;
  transition-delay: 1400ms;
}

.tc-axis {
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--po-muted);
}

.tc-axis .is-keep {
  color: var(--au-ok);
}

/* 5 Buy: the keys, closed, and the team in the deal room */
.tc-keys {
  position: absolute;
  top: 20px;
  left: 20px;
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--au-tint);
  color: var(--au-accent);
}

.tc-keys svg {
  width: 92px;
  height: 92px;
  transform: rotate(-40deg);
  transition: transform 600ms;
}

.tc-stamp {
  position: absolute;
  top: 150px;
  left: 118px;
  padding: 4px 12px;
  border: 3px solid var(--au-ok);
  border-radius: 8px;
  background: #fff;
  font-family: var(--po-font-ui);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--au-ok);
  opacity: 0;
  transform: rotate(-10deg) scale(1.6);
  transition: opacity 350ms, transform 350ms;
}

.st[data-step="5"] .tc-keys svg {
  transform: none;
  transition-delay: 300ms;
}

.st[data-step="5"] .tc-stamp {
  opacity: 1;
  transform: rotate(-10deg);
  transition-delay: 1000ms;
}

.tc-room {
  top: 8px;
  left: 250px;
  width: 300px;
  height: 224px;
  gap: 10px;
  padding: 14px 16px;
}

.tc-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 350ms, transform 350ms;
}

.tc-msg > i {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 26px;
  border-radius: 7px;
  background: var(--po-bg-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  color: var(--po-ink-2);
}

.tc-msg:nth-of-type(1) > i {
  background: var(--au-tint);
  color: var(--au-accent);
}

.tc-msg > span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tc-msg > span i {
  width: 130px;
  height: 6px;
  border-radius: 3px;
  background: #c9d1d8;
}

.tc-msg > span i + i {
  width: 120px;
  background: var(--po-line-2);
}

.st[data-step="5"] .tc-msg {
  opacity: 1;
  transform: none;
  transition-delay: 300ms;
}

.st[data-step="5"] .tc-msg:nth-of-type(2) {
  transition-delay: 500ms;
}

.st[data-step="5"] .tc-msg:nth-of-type(3) {
  transition-delay: 700ms;
}

.tc-done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--au-ok);
  opacity: 0;
  transition: opacity 300ms;
}

.tc-done svg {
  width: 16px;
  height: 16px;
}

.st[data-step="5"] .tc-done {
  opacity: 1;
  transition-delay: 1200ms;
}

/* Practice Orbit underneath: a mark under the step's stage, and the
   platform's part in it */
.trip-band {
  position: absolute;
  top: 364px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 560px;
  height: 76px;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid var(--po-line-2);
  border-radius: 14px;
  background: #fff;
}

.trip-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--au-accent);
  transform: translateX(-10px);
  transition: transform 500ms;
}

.st[data-step="2"] .trip-mark {
  transform: translateX(106px);
}

.st[data-step="3"] .trip-mark {
  transform: translateX(222px);
}

.st[data-step="4"] .trip-mark {
  transform: translateX(338px);
}

.st[data-step="5"] .trip-mark {
  transform: translateX(454px);
}

.tb-po {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.tb-po > b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--au-accent);
  font-family: var(--po-font-ui);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.tb-po > span {
  display: flex;
  flex-direction: column;
}

.tb-po > span b {
  font-family: var(--po-font-ui);
  font-size: 13px;
  font-weight: 800;
  color: var(--po-ink-soft);
}

.tb-po small {
  font-size: 10.5px;
}

.tb-sep {
  flex: none;
  width: 1px;
  height: 40px;
  background: var(--po-line-2);
}

.tb-sets {
  position: relative;
  flex: 1;
  height: 28px;
}

.tb-set {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 350ms, transform 350ms;
}

.tb-set i {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--au-tint);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  color: var(--au-accent);
}

.tb-set svg {
  width: 12px;
  height: 12px;
}

.st[data-step="0"] .tb-set[data-n="1"],
.st[data-step="1"] .tb-set[data-n="1"],
.st[data-step="2"] .tb-set[data-n="2"],
.st[data-step="3"] .tb-set[data-n="3"],
.st[data-step="4"] .tb-set[data-n="4"],
.st[data-step="5"] .tb-set[data-n="5"] {
  opacity: 1;
  transform: none;
  transition-delay: 300ms;
}

/* Wes's sample listing, the buyers' hero picture: a photo cover, the
   figures every listing shows before the NDA, and what else it carries */
.lst {
  width: min(100%, 560px);
  overflow: hidden;
  border: 1px solid var(--po-line-2);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--po-sh-3);
}

.lst-cover,
.nda-cover {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: #e6edf2;
}

/* Stock photos from Wes's prototype (Unsplash), cropped to a band */
.lst-cover img,
.nda-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lst-tag,
.lst-lock,
.nda-lock {
  position: absolute;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.lst-tag {
  left: 16px;
  background: var(--po-ink-soft);
  color: #fff;
}

.lst-lock,
.nda-lock {
  right: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--po-ink-soft);
}

.nda-lock {
  right: auto;
  left: 12px;
}

.lst-lock svg {
  width: 13px;
  height: 13px;
}

.lst-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--po-sp-4);
  padding: var(--po-sp-4) var(--po-sp-6) 0;
}

.lst-head div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lst-place {
  font-size: var(--po-fs-3xl);
  font-weight: 700;
}

.lst-head span {
  font-size: var(--po-fs-md);
}

.lst-figs,
.nda-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--po-sp-4) var(--po-sp-6) 0;
  border-top: 1px solid var(--po-line);
  border-bottom: 1px solid var(--po-line);
}

.lst-figs div,
.nda-figs div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--po-sp-3) 0;
}

.lst-figs div + div {
  padding-left: var(--po-sp-4);
  border-left: 1px solid var(--po-line);
}

.lst-figs dt,
.nda-figs dt {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--po-muted);
}

.lst-figs dd,
.nda-figs dd {
  margin: 0;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-2xl);
  font-weight: 700;
  color: var(--po-ink-soft);
}

.lst-figs div:last-child dd {
  color: var(--au-accent);
}

.lst-more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--po-sp-2);
  margin: var(--po-sp-4) var(--po-sp-6) 0;
  padding: 0;
  list-style: none;
}

.lst-more li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--po-sp-2);
  height: 84px;
  padding: var(--po-sp-2) var(--po-sp-3);
  border-radius: 10px;
  background: #f5f7f9;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-sm);
  font-weight: 700;
  color: var(--po-ink-soft);
}

.lst-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
}

.lst-bars i {
  width: 14px;
  height: 20px;
  border-radius: 3px;
  background: var(--au-tint);
}

.lst-bars i:nth-child(2) {
  height: 28px;
}

.lst-bars i:nth-child(3) {
  height: 34px;
  background: color-mix(in srgb, var(--au-accent) 45%, #fff);
}

.lst-bars i:nth-child(4) {
  height: 40px;
  background: var(--au-accent);
}

.lst-pie {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--au-accent) 0 46%,
    color-mix(in srgb, var(--au-accent) 45%, #fff) 46% 78%,
    var(--au-tint) 78% 100%);
}

.lst-team {
  display: flex;
  align-items: center;
  height: 40px;
}

.lst-team i {
  width: 26px;
  height: 26px;
  border: 2px solid #f5f7f9;
  border-radius: 50%;
  background: var(--au-accent);
}

.lst-team i + i {
  margin-left: -8px;
  background: color-mix(in srgb, var(--au-accent) 45%, #fff);
}

.lst-team i:nth-child(3) {
  background: var(--au-tint);
}

.lst-team i:nth-child(4) {
  background: #dfe5ea;
}

.lst-kit {
  display: flex;
  align-items: center;
  height: 40px;
  color: var(--au-accent);
}

.lst-kit svg {
  width: 34px;
  height: 30px;
}

.lst-foot {
  display: flex;
  align-items: center;
  gap: var(--po-sp-2);
  margin: var(--po-sp-4) 0 0;
  padding: var(--po-sp-3) var(--po-sp-6);
  border-top: 1px solid var(--po-line);
  background: #f7f9fb;
  font-size: var(--po-fs-md);
  color: var(--po-ink-2);
}

.lst-foot svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* The sellers' level 1 estimate (estimates/_level1form.php) as the
   hero's card: the one form every page carries, laid out for this one */
.au-est {
  width: min(100%, 540px);
  padding: var(--po-sp-8);
  border: 1px solid var(--po-line-2);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--po-sh-3);
}

.au-est-h {
  font-size: var(--po-fs-3xl);
}

.au-est-s {
  margin: var(--po-sp-1) 0 var(--po-sp-4);
  font-size: var(--po-fs-base);
}

.au-est .estimate-level {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-4);
}

.au-est .estimate-form .fields {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-4);
}

.au-est .estimate-form label {
  display: block;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 600;
  color: var(--po-ink-soft);
}

.au-est .estimate-form .required::before {
  content: "*";
  margin-right: 2px;
  color: var(--po-warn);
}

.au-est .estimate-form input,
.au-est .estimate-form select {
  display: block;
  width: 100%;
  height: 50px;
  margin-top: 6px;
  padding: 0 var(--po-sp-3);
  border: 1px solid #b9c2ca;
  border-radius: 8px;
  background: #fff;
  font-family: var(--po-font-text);
  font-size: var(--po-fs-xl);
  font-weight: 400;
  color: var(--po-ink-soft);
}

.au-est .estimate-form .submit {
  width: 100%;
  margin-top: var(--po-sp-4);
}

.au-est .estimate-results.hidden {
  display: none;
}

.au-est .estimate-results table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--po-fs-base);
}

.au-est .estimate-results th,
.au-est .estimate-results td {
  padding: var(--po-sp-2);
  border-bottom: 1px solid var(--po-line);
  text-align: right;
}

.au-est .estimate-results th[scope="row"] {
  text-align: left;
}

.au-est .estimate-results p {
  margin: var(--po-sp-2) 0 0;
  font-size: var(--po-fs-md);
}

.au-est .level-two-link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin-top: var(--po-sp-3);
  padding: 0 var(--po-sp-4);
  border-radius: 8px;
  background: var(--po-cta);
  font-family: var(--po-font-ui);
  font-weight: 600;
  color: #fff;
}

.au-est .level-two-link:hover {
  background: var(--po-cta-hover);
  text-decoration: none;
}

/* While the website's full estimator is on, the call to action is a
   button carrying the two figures on to it (_level1results.php) */
.au-est button.level-two-link {
  border: 0;
  font-size: var(--po-fs-lg);
  cursor: pointer;
}

.au-est .estimate-disclaimer {
  margin: var(--po-sp-3) 0 0;
  font-size: var(--po-fs-sm);
  color: var(--po-muted);
}

.au-est-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--po-sp-3);
  min-height: 44px;
  margin-top: var(--po-sp-4);
  padding-top: var(--po-sp-3);
  border-top: 1px solid var(--po-line);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-lg);
  font-weight: 700;
}

:where(.au) .au-est-more,
:where(.au) .au-est-more:hover {
  color: var(--au-accent);
}

/* Wes's two propositions, each a picture over its words */
.au-two-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--po-sp-6);
  margin-top: var(--po-sp-10);
}

.au-prop {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-5);
}

.au-pic {
  display: flex;
  justify-content: center;
  padding: var(--po-sp-6);
  border-radius: 22px;
  background: var(--au-wash);
}

.au-prop-t {
  display: flex;
  gap: var(--po-sp-4);
}

.au-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--au-accent);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 800;
  color: #fff;
}

.au-prop-t h3 {
  font-size: var(--po-fs-3xl);
}

.au-prop-t p {
  margin: var(--po-sp-2) 0 0;
  font-size: var(--po-fs-xl);
  line-height: 1.55;
}

.tk,
.bk {
  width: 100%;
  max-width: 600px;
  margin: 0;
  padding: var(--po-sp-5) var(--po-sp-6);
  border: 1px solid var(--po-line-2);
  border-radius: 18px;
  background: #fff;
}

.tk figcaption,
.bk figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--po-sp-1) var(--po-sp-3);
  font-size: var(--po-fs-md);
}

.tk-rows {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-3);
  margin: var(--po-sp-4) 0 0;
}

.tk-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  align-items: center;
  gap: var(--po-sp-3);
}

.tk-row dt {
  font-size: var(--po-fs-base);
  line-height: 1.25;
  color: var(--po-ink-2);
}

.tk-row dd {
  display: flex;
  align-items: center;
  gap: var(--po-sp-3);
  margin: 0;
}

.tk-bar {
  flex: 1;
  height: 24px;
}

/* The bars are scaled from their own start - a cost from its right end,
   since it comes off the price - so they can play in from nothing */
.tk-bar rect {
  fill: color-mix(in srgb, var(--au-accent) 30%, #fff);
  transform-box: fill-box;
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tk-row.is-cost .tk-bar rect {
  fill: #c9d1d8;
  transform-origin: right;
}

.tk-row.is-keep .tk-bar rect {
  fill: var(--au-accent);
}

.tk-v {
  flex: none;
  width: 92px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-lg);
  font-weight: 800;
  text-align: right;
  color: var(--po-ink-2);
  transition: opacity 400ms;
}

.tk-row.is-keep dt {
  font-weight: 700;
  color: var(--po-ink-soft);
}

.tk-row.is-keep .tk-v {
  font-size: var(--po-fs-2xl);
  color: var(--au-accent);
}

.tk-row:nth-child(2) rect,
.tk-row:nth-child(2) .tk-v {
  transition-delay: 350ms;
}

.tk-row:nth-child(3) rect,
.tk-row:nth-child(3) .tk-v {
  transition-delay: 700ms;
}

.tk-row:nth-child(4) rect,
.tk-row:nth-child(4) .tk-v {
  transition-delay: 1050ms;
}

.tk-row:nth-child(5) rect,
.tk-row:nth-child(5) .tk-v {
  transition-delay: 1400ms;
}

.bk-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--po-sp-3);
  margin: var(--po-sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.bk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-2);
  padding: var(--po-sp-4) var(--po-sp-3) var(--po-sp-3);
  border: 2px solid var(--po-line-2);
  border-radius: 14px;
  background: #fff;
  transition: border-color 400ms, background-color 400ms, box-shadow 400ms,
    transform 400ms;
}

.bk-card b {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-lg);
  color: var(--po-ink-soft);
}

.bk-av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--po-bg-3);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 800;
  color: var(--po-ink-2);
}

.bk-states {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-sm);
  font-weight: 800;
  color: var(--po-ink-2);
}

.bk-stats {
  font-size: var(--po-fs-md);
  line-height: 1.45;
}

.bk-card.is-match {
  border-color: var(--au-accent);
  background: var(--au-wash);
  box-shadow: 0 18px 30px -22px rgba(60, 40, 10, 0.55);
  transform: translateY(-4px);
  transition-delay: 900ms;
}

.bk-card.is-match .bk-av {
  background: var(--au-tint);
  color: var(--au-accent);
}

.bk-pick {
  position: absolute;
  top: -13px;
  left: 50%;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--au-accent);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xs);
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
  transform: translateX(-50%);
  transition: opacity 300ms 900ms;
}

/* Waiting to play: audiences.js marks a section .will-play as the page
   loads, then .is-on once it is well in view. Without script neither
   class arrives and the pictures are simply drawn */
.will-play:not(.is-on) .tk-bar rect {
  transform: scaleX(0);
}

.will-play:not(.is-on) .tk-v,
.will-play:not(.is-on) .bk-pick {
  opacity: 0;
}

.will-play:not(.is-on) .bk-card.is-match {
  border-color: var(--po-line-2);
  background: #fff;
  box-shadow: none;
  transform: none;
}

/* Anonymity, the sellers' headline, on a warm wash */
.au-private {
  background: var(--au-wash);
  border-top: 1px solid var(--po-line);
  border-bottom: 1px solid var(--po-line);
}

.au-private-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--po-sp-12);
  align-items: center;
}

.au-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--au-tint);
  color: var(--au-accent);
}

.au-badge svg {
  width: 26px;
  height: 26px;
}

.au-private-h {
  margin-top: var(--po-sp-5);
  font-size: clamp(28px, 2.6vw, 40px);
}

.au-ticks {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-3);
  margin: var(--po-sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.au-ticks li {
  display: flex;
  gap: var(--po-sp-3);
  font-size: var(--po-fs-xl);
  line-height: 1.5;
  color: var(--po-ink-soft);
}

.au-ticks li::before {
  content: "";
  flex: none;
  width: 11px;
  height: 6px;
  margin: 6px 3px 0 2px;
  border-bottom: 3px solid var(--au-accent);
  border-left: 3px solid var(--au-accent);
  transform: rotate(-45deg);
}

/* What a buyer sees: two radio buttons switch the card, so it works
   without script, and only the chosen state is shown */
.nda {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-4);
  padding: var(--po-sp-5);
  border: 1px solid var(--po-line-2);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 60px -40px rgba(60, 40, 10, 0.45);
}

.nda-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--po-sp-3);
}

.nda-h {
  font-size: var(--po-fs-xl);
}

.nda-switch {
  display: flex;
  gap: var(--po-sp-1);
  margin: 0;
  padding: var(--po-sp-1);
  border: 1px solid var(--po-line);
  border-radius: 999px;
  background: var(--po-bg-3);
}

.nda-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nda-switch label {
  display: grid;
  place-items: center;
  height: 36px;
  padding: 0 var(--po-sp-4);
  border-radius: 999px;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-md);
  font-weight: 700;
  color: var(--po-ink-2);
  cursor: pointer;
  transition: background-color 250ms, color 250ms;
}

.nda-switch input:checked + label {
  background: var(--au-accent);
  color: #fff;
}

.nda-switch input:focus-visible + label {
  outline: 2px solid var(--po-brand-2);
  outline-offset: 2px;
}

.nda-cover {
  height: 130px;
  border-radius: 12px;
}

.nda-cover img {
  filter: blur(9px);
  transform: scale(1.06);
  transition: filter 500ms;
}

.nda:has(#nda-after:checked) .nda-cover img {
  filter: none;
}

.nda:has(#nda-after:checked) .nda-before,
.nda:not(:has(#nda-after:checked)) .nda-after {
  display: none;
}

.nda-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--po-sp-3);
}

.nda-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nda-name b {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-3xl);
  font-weight: 700;
  color: var(--po-ink-soft);
}

.nda-name span {
  font-size: var(--po-fs-md);
}

.nda-figs {
  grid-template-columns: repeat(2, auto);
  gap: var(--po-sp-5);
  margin: 0;
  border: 0;
  text-align: right;
}

.nda-figs div {
  padding: 0;
}

.nda-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--po-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nda-rows li {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-1);
  padding: var(--po-sp-2) var(--po-sp-3);
  border-radius: 10px;
  background: #f5f2ee;
  font-size: var(--po-fs-md);
  line-height: 1.35;
  color: var(--po-ink-soft);
}

.nda-rows b {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--au-accent);
}

.nda:has(#nda-after:checked) .nda-rows li {
  background: #e9f3ee;
}

.nda:has(#nda-after:checked) .nda-rows b {
  color: var(--au-ok);
}

.nda-foot {
  margin: 0;
  font-size: var(--po-fs-md);
}

/* Narrow: one column, and the story as the home page plays it on a
   phone - the heading, the picture, then a row of step dots with the one
   step's line under them, which the closing panel replaces at the end */
@media (max-width: 1040px) {
  .au-hero-in,
  .au-contact-in,
  .au-private-in {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--po-sp-8);
  }
  .au-hero-in {
    padding-top: var(--po-sp-8);
    padding-bottom: var(--po-sp-10);
  }
  .st.is-live .st-pin {
    padding: var(--po-sp-6) 0;
  }
  .st.is-live .st-body {
    display: flex;
    flex-direction: column;
    gap: var(--po-sp-4);
    align-items: stretch;
  }
  .st.is-live .st-copy {
    display: contents;
  }
  .st.is-live .st-head {
    order: 1;
  }
  .st.is-live .st-h {
    font-size: var(--po-fs-4xl);
  }
  .st.is-live .st-art {
    order: 2;
  }
  .st.is-live .st-nav {
    position: relative;
    order: 3;
    height: 180px;
  }
  .au[data-aud="buyer"] .st.is-live .st-nav {
    height: 210px;
  }
  .st.is-live .st-steps {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
    margin: 0;
  }
  .st.is-live .st-steps::before,
  .st.is-live .st-steps::after {
    content: "";
    position: absolute;
    top: 21px;
    right: 22px;
    left: 22px;
    height: 2px;
    background: var(--po-line);
  }
  .st.is-live .st-steps::after {
    background: var(--st-accent);
    transform: scaleX(var(--st-prog, 0));
    transform-origin: left;
    transition: transform 150ms linear;
  }
  .st.is-live .st-steps li {
    position: static;
  }
  .st.is-live .st-steps li::before,
  .st.is-live .st-steps li::after {
    display: none;
  }
  .st.is-live .st-step {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  .st.is-live .st-dot {
    z-index: 1;
    flex: 0 0 24px;
    height: 24px;
    font-size: var(--po-fs-xs);
  }
  .st.is-live .st-dot svg {
    inset: 4px;
    width: 12px;
    height: 12px;
  }
  .st.is-live .st-txt {
    position: absolute;
    top: 56px;
    right: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 300ms, transform 400ms;
  }
  .st.is-live .is-on .st-txt {
    opacity: 1;
    transform: none;
  }
  .st.is-live .st-lbl {
    line-height: 1.3;
  }
  .st.is-live .st-cap,
  .st.is-live .st-tick {
    max-height: none;
    opacity: 1;
  }
  .st.is-live .st-cap {
    font-size: var(--po-fs-base);
    line-height: 1.45;
  }
  .st.is-live .st-end {
    top: 0;
    transform: translateY(-20px);
  }
  .st.is-live.is-end .st-end {
    transform: none;
  }
  .st.is-live.is-end .st-head {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .st.is-live .st-end-h {
    font-size: var(--po-fs-3xl);
  }
  .st.is-live .st-end-p {
    margin-bottom: var(--po-sp-3);
    font-size: var(--po-fs-base);
  }
  .st.is-still .st-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .st-prev {
    left: 6px;
  }
  .st-next {
    right: 6px;
  }
  .st-prev:disabled {
    opacity: 0;
  }
  .au-two-in {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .au .sec,
  .au-contact {
    padding: var(--po-sp-10) 0;
  }
  .au-tiles,
  .au-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .au-tiles {
    gap: var(--po-sp-2);
  }
  .au-tile {
    flex-direction: row;
    align-items: baseline;
    gap: var(--po-sp-3);
    padding: var(--po-sp-3) var(--po-sp-4);
  }
  .au-tile b {
    flex: none;
    min-width: 4.2em;
  }
  .au-acts .btn {
    flex: 1 1 100%;
  }
  .contact-component {
    padding: var(--po-sp-5);
  }
  .contact-component form {
    grid-template-columns: minmax(0, 1fr);
  }
  .deal {
    padding: var(--po-sp-5);
  }
  .deal-total dd {
    font-size: 28px;
  }
  .deal-prog li {
    font-size: 10px;
  }
  .lst-more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lst-figs dd {
    font-size: var(--po-fs-lg);
  }
  /* The cover's two chips no longer fit side by side: the lock moves to
     its bottom edge, so it never runs into the "Sample listing" tag */
  .lst-lock {
    top: auto;
    bottom: 14px;
  }
  .bk-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .bk-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--po-sp-3);
  }
  .bk-av {
    grid-row: span 3;
  }
  .bk-pick {
    top: 10px;
    right: 10px;
    left: auto;
    transform: none;
  }
  .tk {
    padding: var(--po-sp-4);
  }
  .tk-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .nda-rows {
    grid-template-columns: minmax(0, 1fr);
  }
  .nda-figs {
    text-align: left;
  }
}

/* Reduced motion: the hero's deal and the sellers' pictures are drawn
   finished, with nothing moving */
@media (prefers-reduced-motion: reduce) {
  .deal-prog::after,
  .deal-prog li::before,
  .deal-money {
    animation: none;
  }
  .tk-bar rect,
  .tk-v,
  .bk-card,
  .bk-pick,
  .nda-cover img {
    transition: none;
  }
}