/* Shared stage, five different visual stories. */
.film {
  --story-accent: var(--accent);
}
.film[data-story="travel"] {
  --story-accent: #a55535;
  background: #f2f0e9;
}
.film[data-story="gaming"] {
  --story-accent: #665ae1;
  background: var(--accent-soft);
}
.film[data-story="friends"] {
  --story-accent: #42724a;
  background: #eef2e9;
}
.film[data-story="market"] {
  --story-accent: #975e2b;
  background: #f3efe7;
}
.film:before {
  display: none;
}
.scenario-intro {
  position: absolute;
  left: 12%;
  top: 165px;
  width: 290px;
  opacity: 0;
  transform: translateY(20px) rotate(-4deg);
  transition:
    opacity 0.6s,
    transform 0.8s;
  z-index: 2;
}
.mode-ask .scenario-intro {
  opacity: 1;
  transform: rotate(-4deg);
}
.film.mode-ask .main-layer {
  left: 66%;
}
.film.mode-send .main-layer,
.film.mode-find .main-layer {
  left: 12%;
  opacity: 0;
  transform: translateX(-130%) scale(0.85);
  pointer-events: none;
}
.discovery-view {
  position: absolute;
  inset: 90px 7% 40px;
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.6s,
    transform 0.75s;
  pointer-events: none;
  z-index: 3;
}
.film[data-story="travel"].mode-send .discovery-view,
.film[data-story="travel"].mode-find .discovery-view,
.film[data-story="friends"].mode-send .discovery-view,
.film[data-story="friends"].mode-find .discovery-view,
.film[data-story="market"].mode-send .discovery-view,
.film[data-story="market"].mode-find .discovery-view {
  opacity: 1;
  transform: none;
}
.film[data-story="travel"] .network-view,
.film[data-story="friends"] .network-view,
.film[data-story="market"] .network-view {
  display: none;
}
.event-ticket {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  padding: 28px;
  color: var(--ink);
  box-shadow: 0 15px 28px color-mix(in srgb, var(--shadow-ink) 6.67%, transparent);
}
.event-ticket > span,
.budget-note > span {
  font-size: 12px;
  letter-spacing: 1.5px;
}
.event-ticket strong {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.08;
  display: block;
  margin-top: 24px;
  letter-spacing: -1.3px;
}
.event-ticket p {
  font-size: 17px;
  line-height: 1.5;
  margin-top: 19px;
}
.event-ticket small {
  font-size: 12px;
  display: block;
  margin-top: 18px;
}
.ticket-rule {
  border-top: 1px dashed var(--accent-line);
  margin-top: 22px;
}
.ticket-code {
  height: 24px;
  width: 90px;
  margin-top: 20px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent-line) 0px,
    var(--accent-line) 2px,
    transparent 2px,
    transparent 5px,
    var(--accent-line) 5px,
    var(--accent-line) 6px,
    transparent 6px,
    transparent 9px
  );
  opacity: 0.55;
}
.small-ticket {
  padding: 20px;
}
.small-ticket strong {
  font-size: 31px;
  margin-top: 17px;
}
.small-ticket .ticket-code,
.small-ticket .ticket-rule,
.small-ticket p {
  display: none;
}
.destination-card {
  position: relative;
  background: #fff;
  padding: 9px 9px 22px;
  border-radius: 8px;
  box-shadow: 0 15px 32px #51351e14;
}
.destination-card > img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 3px;
}
.destination-card > span {
  display: block;
  font-size: 14px;
  color: #a55535;
  margin: 19px 15px 12px;
}
.destination-card > strong {
  display: block;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  margin: 0 15px;
  line-height: 1.1;
}
.destination-card > small {
  display: block;
  font-size: 12px;
  color: #8c7c6b;
  margin: 17px 15px 0;
}
.budget-note {
  background: #fff9e9;
  border: 1px solid #dfd3b7;
  border-radius: 7px;
  padding: 29px;
  color: #765c35;
}
.budget-note > strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.7px;
  margin: 24px 0;
}
.budget-note p {
  font-size: 16px;
  line-height: 1.6;
}
.budget-note > small {
  display: block;
  font-size: 12px;
  margin-top: 27px;
  color: #9d8a6b;
}
/* Publishing, broad relevant delivery, then interested replies. */
.film .wide-routing {
  inset: 42px 0 16px;
  transform: scale(0.96);
  left: 0;
}
.film.mode-send .wide-routing,
.film.mode-find .wide-routing {
  left: 0;
  opacity: 1;
  transform: none;
}
.wide-routing .network-lines {
  inset: 0;
  height: 100%;
  width: 100%;
}
.wide-routing .network-lines path {
  stroke: var(--accent);
  opacity: 0;
  stroke-width: 1.3;
  transition: opacity 0.4s;
}
.wide-routing .network-lines path.active {
  opacity: 0.42;
}
.wide-routing .network-lines path.returning {
  stroke: #3b966f;
  opacity: 0.85;
}
.routing-origin,
.routing-hub {
  position: absolute;
  top: 42%;
  left: 12%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
  width: 120px;
}
.routing-origin > img {
  width: 61px;
  height: 61px;
  object-fit: contain;
  border: 1px solid var(--surface-line);
  background: white;
  border-radius: 21px;
  padding: 6px;
  margin: auto;
}
.routing-origin strong,
.routing-hub strong {
  display: block;
  font-size: 19px;
  font-weight: 500;
  margin-top: 12px;
  letter-spacing: -0.6px;
}
.routing-origin small,
.routing-hub small {
  display: block;
  font-size: 12px;
  color: #778b79;
  margin-top: 5px;
  line-height: 1.4;
}
.routing-origin > span {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  padding: 6px 9px;
  border-radius: 99px;
  background: #ffffffda;
  color: #6b8574;
}
.routing-hub {
  left: 33%;
  width: 145px;
}
.routing-hub > div {
  width: 85px;
  height: 85px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--surface-line);
  border-radius: 26px;
  box-shadow: 0 0 0 13px color-mix(in srgb, var(--shadow-ink) 46.67%, transparent);
  margin: auto;
}
.routing-hub img {
  width: 52px;
  height: 52px;
}
.routing-hub strong {
  font-size: 26px;
  letter-spacing: -1.5px;
}
.routing-cloud-label {
  position: absolute;
  left: 51%;
  top: 1%;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #809585;
}
.network-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0.26;
  transition:
    opacity 0.4s,
    filter 0.4s;
  z-index: 2;
}
.network-dot > img {
  width: 37px;
  height: 37px;
  object-fit: contain;
  border: 1px solid #d8e0d7;
  border-radius: 13px;
  padding: 5px;
  background: #fff;
  transition:
    box-shadow 0.5s,
    border-color 0.5s;
}
.network-dot.delivered {
  opacity: 0.95;
}
.network-dot.delivered > img {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--shadow-ink) 33.33%, transparent);
}
.network-dot.interested > img {
  border-color: #4baf83;
  box-shadow: 0 0 0 5px #d0ead977;
}
.network-dot > span {
  position: absolute;
  right: -5px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #3a9267;
  color: white;
  font-size: 12px;
  border: 2px solid #fff;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.network-dot.interested > span {
  opacity: 1;
  transform: scale(1);
}
.routing-message {
  position: absolute;
  left: 5%;
  top: 4%;
  width: 36%;
  padding: 19px 23px;
  border-radius: 15px;
  border: 1px solid #d3e0d2;
  background: #ffffffde;
  box-shadow: 0 6px 16px #31583407;
  z-index: 3;
}
.routing-message > small {
  font-size: 12px;
  color: #789180;
}
.routing-message > strong {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 10px;
  max-width: 325px;
}
.routing-message > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.routing-message > div > span {
  font-size: 12px;
  color: #759271;
  padding: 5px 8px;
  border-radius: 99px;
  background: #eef4e9;
}
.routing-tally {
  position: absolute;
  left: 51%;
  bottom: 7%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 19px;
  color: #587563;
}
.routing-tally > span {
  font-size: 13px;
  white-space: nowrap;
}
.routing-tally b {
  font-size: 22px;
  color: #365645;
  font-weight: 500;
  margin-right: 5px;
}
.routing-tally > small {
  font-size: 12px;
  width: 100%;
  color: #9aaa9b;
}
.interest-replies {
  position: absolute;
  left: 6%;
  right: 56%;
  top: 72%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.interest-replies > div {
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid #dce7d7;
  background: #ffffffd9;
  display: flex;
  gap: 8px;
  align-items: center;
  animation: message-pop 0.35s both;
}
.interest-replies img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}
.interest-replies span {
  font-size: 13px;
  line-height: 1.35;
  flex: 1;
  color: #597353;
}
.interest-replies b {
  font-size: 12px;
  font-weight: 400;
  color: #51976b;
}
.film[data-paused="true"] .interest-replies > div {
  animation: none;
}
/* Travel: date overlap, rather than a second people picker. */
.search-workspace,
.market-workspace {
  max-width: 850px;
  margin: auto;
}
.search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #dfded4;
  border-radius: 14px;
  padding: 16px 21px;
  font-size: 17px;
  color: #827864;
}
.search-bar span {
  flex: 1;
  font-size: 15px;
}
.search-bar b {
  font-size: 12px;
  font-weight: 400;
  background: #f3f2eb;
  padding: 6px 9px;
  border-radius: 99px;
}
.travel-posts {
  display: flex;
  gap: 12px;
  margin: 20px 0;
}
.travel-post {
  flex: 1;
  background: #faf9f4;
  border: 1px solid #e3ddcf;
  border-radius: 12px;
  padding: 18px;
  font-size: 22px;
  color: #8f826b;
  transition:
    opacity 0.8s,
    transform 0.8s;
}
.travel-post small {
  font-size: 12px;
  display: block;
  margin-top: 9px;
}
.travel-post.matched {
  background: #fff;
  border-color: #caac84;
}
.mode-find .travel-post.muted {
  opacity: 0.25;
  transform: translateY(5px);
}
.week-board {
  background: #fff;
  border: 1px solid #dedbcf;
  border-radius: 17px;
  padding: 24px;
  box-shadow: 0 12px 25px #583e1908;
}
.board-kicker {
  font-size: 12px;
  letter-spacing: 1.3px;
  color: #91836d;
  display: block;
}
.week-days,
.week-row {
  display: grid;
  grid-template-columns: 105px repeat(7, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 14px;
}
.week-days b {
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: #b4aa96;
}
.week-days b.in-range {
  color: #a16e33;
}
.week-row > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #685b45;
}
.week-row img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.week-row i {
  display: block;
  height: 27px;
  border-radius: 7px;
  background: #f6f4ee;
}
.week-row i.day-on {
  background: #ddd5c2;
}
.week-row i.overlap {
  background: #b98b50;
  box-shadow: 0 0 0 3px #f7ead3;
}
.week-row {
  transition: opacity 0.6s;
}
.week-row.no-overlap {
  opacity: 0.25;
}
.week-foot {
  font-size: 14px;
  color: #9b7847;
  text-align: right;
  margin-top: 20px;
}
.travel-talk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 920px;
  margin: 10px auto 0;
  align-items: start;
}
.travel-talk .agent-thread {
  transform: none;
}
.travel-talk .thread-messages {
  min-height: 330px;
}
.travel-match {
  padding-top: 33px;
}
.compact-week {
  padding: 20px 17px;
}
.compact-week .week-days,
.compact-week .week-row {
  grid-template-columns: 65px repeat(7, 1fr);
  gap: 5px;
}
.compact-week .week-row img {
  display: none;
}
.compact-week .week-row i {
  height: 23px;
}
.compact-week .week-foot {
  font-size: 13px;
  line-height: 1.5;
}
.travel-common {
  margin: 24px 16px;
}
.travel-common > span,
.travel-common > small {
  display: block;
  font-size: 12px;
  color: #988466;
}
.travel-common > strong {
  display: block;
  font:
    32px / 1.2 Georgia,
    serif;
  color: #886535;
  margin: 10px 0;
}
.date-choice {
  background: #f7f0e2;
  border: 1px solid #e2ceb0;
  border-radius: 14px;
  padding: 20px 15px;
}
.date-choice > span {
  font-size: 12px;
  color: #a38b6a;
}
.date-choice > strong {
  font:
    24px / 1.2 Georgia,
    serif;
  color: #7e5937;
  display: block;
  margin: 14px 0 9px;
}
.date-choice > small {
  font-size: 13px;
  color: #988368;
}
/* Gaming: two vacant places resolve independently. */
.roster {
  border: 1px solid var(--surface-line);
  background: var(--accent-soft);
  border-radius: 19px;
  padding: 23px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--shadow-ink) 4.31%, transparent);
  min-width: 0;
}
.roster-title > span {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}
.roster-title > strong {
  display: block;
  font-size: 40px;
  letter-spacing: -1.8px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 12px;
}
.roster-title small {
  font-size: 14px;
  letter-spacing: 0;
}
.roster-people {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}
.roster-person {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.roster-person > img,
.empty-place {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border: 1px dashed var(--accent-line);
  border-radius: 50%;
  margin: 0 auto 11px;
  font-size: 22px;
  color: var(--muted);
  background: var(--accent-soft);
}
.roster-person > img {
  border: 3px solid var(--surface-line);
}
.roster-person b {
  font-size: 13px;
  font-weight: 500;
  display: block;
  color: #75718e;
}
.roster-person small {
  font-size: 12px;
  line-height: 1.5;
  color: #a09db0;
  display: block;
  margin-top: 5px;
}
.roster-note {
  display: block;
  border-top: 1px solid #e8e7f1;
  font-size: 12px;
  color: #89869e;
  padding-top: 15px;
  margin-top: 23px;
  line-height: 1.5;
}
.small-roster {
  padding: 17px 13px;
}
.small-roster .roster-title > strong {
  font-size: 31px;
}
.small-roster .roster-people {
  gap: 6px;
  margin-top: 15px;
}
.small-roster .roster-person > img,
.small-roster .empty-place {
  width: 42px;
  height: 42px;
}
.small-roster .roster-note {
  display: none;
}
.game-session-bar {
  max-width: 830px;
  margin: 0 auto 23px;
  border-left: 3px solid var(--accent-line);
  padding: 4px 0 4px 15px;
}
.game-session-bar > span {
  font-size: 12px;
  color: #9590b6;
  letter-spacing: 1px;
}
.game-session-bar > strong {
  display: block;
  font-size: 19px;
  font-weight: 400;
  color: #645e8b;
  margin-top: 7px;
}
.gaming-talk .agent-thread {
  transform: none;
}
.gaming-check,
.seller-check {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 18px;
  background: var(--accent-soft);
  color: #918aaf;
  font-size: 13px;
}
.gaming-check b,
.seller-check b {
  font-weight: 500;
  color: #69618e;
}
.gaming-talk .thread-messages {
  min-height: 310px;
}
/* Friends: several private replies converge on a time. */
.dinner-board {
  background: #fff;
  border: 1px solid #d9e2d0;
  border-radius: 17px;
  padding: 24px;
}
.dinner-time {
  display: block;
  font:
    42px / 1 Georgia,
    serif;
  color: #5f7751;
  margin: 19px 0 23px;
}
.dinner-replies {
  display: grid;
  gap: 9px;
}
.dinner-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #eef1e9;
  opacity: 0.5;
  transition: opacity 0.4s;
}
.dinner-row.arrived {
  opacity: 1;
}
.dinner-row img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.dinner-row b {
  font-weight: 400;
  color: #66795e;
}
.dinner-row span {
  margin-left: auto;
  font-size: 13px;
  color: #759167;
  text-align: right;
}
.dinner-row.unavailable.arrived span {
  color: #a4aa99;
}
.dinner-board > small {
  font-size: 12px;
  color: #9ca592;
  display: block;
  margin-top: 19px;
}
.scenario-intro .dinner-board {
  padding: 24px 18px;
}
.scenario-intro .dinner-row {
  font-size: 13px;
  gap: 6px;
}
.scenario-intro .dinner-row span {
  display: none;
}
.friends-workspace {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  max-width: 780px;
  margin: auto;
  align-items: center;
}
.friends-source {
  text-align: center;
}
.friends-source > img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  margin: auto;
  border-radius: 22px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 0 0 15px #e3ebdd;
}
.friends-source > span {
  display: block;
  font-size: 22px;
  margin-top: 30px;
  color: #5b7354;
}
.friends-source > small {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: #8a9d7e;
  margin-top: 12px;
}
.friend-time-workspace {
  max-width: 700px;
  margin: 12px auto;
}
.time-grid {
  display: grid;
  grid-template-columns: 80px repeat(3, 1fr);
  gap: 8px;
  margin: 22px 0 26px;
}
.time-grid > * {
  padding: 13px 8px;
  border-radius: 9px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #91a286;
  background: #f8faf4;
}
.time-grid > .time-overlap {
  background: #e0ecd2;
  color: #537442;
}
.time-grid > b {
  font-weight: 500;
}
.friend-single-dm {
  max-width: 450px;
  margin: auto;
  border: 1px solid #dce5d6;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 22px #3e57310a;
}
.friend-single-dm .thread-messages {
  min-height: 230px;
}
.time-choice {
  background: #f0f5e8;
  border: 1px solid #dbe5cd;
  padding: 22px 16px;
  border-radius: 15px;
}
.time-choice > span {
  font-size: 12px;
  color: #8b9c7e;
  letter-spacing: 1px;
}
.time-choice > strong {
  display: block;
  font:
    48px / 1.2 Georgia,
    serif;
  color: #567343;
  margin-top: 12px;
}
.time-choice > strong > span {
  font:
    13px Arial,
    sans-serif;
  margin-left: 7px;
}
.time-choice > div {
  display: flex;
  align-items: center;
  margin-top: 17px;
}
.time-choice img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-right: -5px;
  border: 2px solid #f0f5e8;
}
.time-choice small {
  font-size: 12px;
  color: #7f926f;
  margin-left: 12px;
}
/* Marketplace: actual constraints and seller questions. */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
  margin-top: 30px;
}
.bike-listing {
  background: #fffef9;
  border: 1px solid #dfd7bf;
  border-radius: 15px;
  padding: 22px;
  box-shadow: 0 9px 18px #61410a06;
}
.listing-category {
  font-size: 15px;
  line-height: 1.5;
  color: #87724f;
}
.listing-category > span {
  display: block;
  font-size: 12px;
  color: #a99a7f;
  margin-top: 6px;
}
.bike-listing > strong {
  display: block;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: -2px;
  color: #7d6133;
  margin: 23px 0;
}
.listing-spec {
  display: grid;
  gap: 9px;
  font-size: 13px;
  color: #a18b65;
}
.listing-seller {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #ece5d7;
  padding-top: 18px;
  margin-top: 25px;
  font-size: 14px;
  color: #846c45;
}
.listing-seller img {
  width: 31px;
  height: 31px;
  border-radius: 50%;
}
.listing-seller small {
  display: block;
  font-size: 12px;
  color: #a18e6c;
  margin-top: 5px;
  line-height: 1.4;
}
.listing-seller > b {
  margin-left: auto;
  color: #7a9c66;
}
.listing-chosen {
  border-color: #abbe8d;
  background: #f9fcee;
}
.filtered-listing {
  transition:
    opacity 0.7s,
    transform 0.7s;
}
.filtered-listing.filtered-out {
  opacity: 0.16;
  transform: translateY(17px);
}
.shortlisted .bike-listing {
  border-color: #bbab85;
  box-shadow: 0 0 0 4px #e8ddc833;
}
.market-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 27px;
}
.filter-chip {
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid #ded4bf;
  border-radius: 99px;
  color: #ab9978;
  transition: background 0.4s;
}
.filter-done {
  color: #79613f;
  background: #e8ddc7;
}
.filter-done:before {
  content: "✓ ";
  margin-right: 4px;
}
.market-talk {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 42px;
  max-width: 850px;
  margin: 25px auto;
}
.seller-specs {
  position: relative;
  min-height: 440px;
  padding-top: 25px;
}
.seller-spec {
  position: absolute;
  inset: 25px 0 auto;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.4s,
    transform 0.5s;
}
.seller-spec.seller-active {
  opacity: 1;
  transform: none;
}
.seller-dms {
  position: relative;
  min-height: 490px;
}
.seller-dms .agent-thread {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.seller-dms .agent-thread.mobile-active {
  opacity: 1;
  transform: none;
}
.seller-check {
  background: #f6f2e7;
  color: #a18b64;
}
.seller-check b {
  color: #977342;
}
.market-talk .thread-messages {
  min-height: 340px;
}
.phone-chat .bike-listing {
  padding: 15px;
}
.phone-chat .bike-listing > strong {
  font-size: 33px;
  margin: 14px 0;
}
.phone-chat .listing-spec {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
}
.phone-chat .listing-seller {
  margin-top: 14px;
  padding-top: 12px;
}
/* Different outcomes retain a common human approval step. */
.scenario-ending {
  position: absolute;
  left: calc(50% + 60px);
  top: 133px;
  width: 300px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s,
    transform 0.8s;
  z-index: 3;
}
.mode-meet .scenario-ending {
  opacity: 1;
  transform: none;
}
.film.mode-meet .peer-layer {
  opacity: 0;
  pointer-events: none;
}
.film.mode-meet .main-layer {
  left: calc(50% - 180px);
}
.ending-context > p {
  font:
    33px / 1.3 Georgia,
    serif;
  color: var(--muted);
  margin-top: 28px;
}
.travel-ending,
.dinner-ending {
  background: white;
  border: 1px solid #e0dacb;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 15px 29px #53421c12;
  transform: rotate(3deg);
}
.travel-ending > img,
.dinner-ending > img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.travel-ending > div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px;
}
.travel-ending > div > img {
  width: 37px;
  height: 37px;
  border-radius: 50%;
}
.travel-ending span {
  font-size: 17px;
  color: #826543;
}
.travel-ending small {
  display: block;
  font-size: 12px;
  color: #a2957a;
  margin-top: 6px;
}
.dinner-ending > div {
  padding: 23px;
}
.dinner-ending strong {
  font:
    30px Georgia,
    serif;
  color: #5d7552;
}
.dinner-ending span {
  display: block;
  font-size: 14px;
  color: #95a385;
  margin-top: 13px;
}
.market-ending > p {
  font:
    23px / 1.4 Georgia,
    serif;
  color: #8b734b;
  margin-top: 21px;
}
.market-ending small {
  font:
    12px Arial,
    sans-serif;
  color: #aa9a7c;
}
.film[data-paused="true"] .scenario-intro,
.film[data-paused="true"] .scenario-ending,
.film[data-paused="true"] .discovery-view {
  transition: none;
}
@media (max-width: 1050px) {
  .scenario-intro {
    left: 7%;
    width: 260px;
  }
  .film.mode-ask .main-layer {
    left: 70%;
  }
  .routing-message {
    padding: 16px;
    width: 38%;
  }
  .routing-message > strong {
    font-size: 15px;
  }
  .routing-message > div {
    display: none;
  }
  .network-dot > img {
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 11px;
  }
  .routing-origin > img {
    width: 50px;
    height: 50px;
  }
  .routing-hub > div {
    width: 70px;
    height: 70px;
  }
  .routing-hub img {
    width: 44px;
    height: 44px;
  }
  .routing-origin {
    width: 100px;
  }
  .routing-origin strong {
    font-size: 16px;
  }
  .routing-hub {
    width: 123px;
  }
  .routing-hub strong {
    font-size: 23px;
  }
  .interest-replies {
    left: 4%;
    right: 53%;
  }
  .interest-replies b {
    display: none;
  }
  .listing-grid {
    gap: 12px;
  }
  .bike-listing {
    padding: 19px;
  }
  .friends-workspace {
    gap: 30px;
  }
  .scenario-ending {
    left: calc(50% + 35px);
    width: 270px;
  }
  .film.mode-meet .main-layer {
    left: calc(50% - 170px);
  }
}
@media (max-width: 720px) {
  .film.mode-ask .main-layer {
    left: 50%;
  }
  .scenario-intro {
    display: none;
  }
  .film.mode-send .main-layer {
    opacity: 0;
    left: 0;
    transform: translateX(-110%);
  }
  .film.mode-meet .main-layer {
    left: 50%;
  }
  .scenario-ending {
    display: none;
  }
  .film .wide-routing {
    inset: 40px 0 16px;
  }
  .routing-cloud-label {
    font-size: 12px;
    letter-spacing: 0;
    left: 9%;
    top: 33%;
  }
  .routing-origin,
  .routing-hub {
    top: 53%;
  }
  .routing-origin {
    left: 13%;
    width: 76px;
  }
  .routing-origin > img {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }
  .routing-origin strong {
    font-size: 14px;
  }
  .routing-origin > span {
    display: none;
  }
  .routing-hub {
    left: 35%;
    width: 95px;
  }
  .routing-hub > div {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--shadow-ink) 46.67%, transparent);
  }
  .routing-hub img {
    width: 33px;
    height: 33px;
  }
  .routing-hub strong {
    font-size: 21px;
  }
  .routing-hub small {
    font-size: 12px;
  }
  .network-dot {
    margin-top: 0;
  }
  .network-dot > img {
    width: 20px;
    height: 20px;
    padding: 2px;
    border-radius: 7px;
  }
  .network-dot > span {
    width: 13px;
    height: 13px;
    font-size: 10px;
    border-width: 1px;
    right: -4px;
    bottom: -3px;
  }
  .network-dot.delivered > img {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--shadow-ink) 33.33%, transparent);
  }
  .network-dot.interested > img {
    box-shadow: 0 0 0 3px #d0ead977;
  }
  .wide-routing .network-lines {
    transform: none;
  }
  .routing-message {
    left: 7%;
    top: 4%;
    width: 86%;
    padding: 18px;
  }
  .routing-message > strong {
    font-size: 16px;
  }
  .routing-message > div {
    display: flex;
    margin-top: 9px;
  }
  .routing-message > div > span {
    padding: 4px 6px;
  }
  .routing-tally {
    left: 7%;
    right: 7%;
    bottom: 2%;
    gap: 7px 13px;
  }
  .routing-tally b {
    font-size: 19px;
  }
  .routing-tally > span {
    font-size: 12px;
  }
  .interest-replies {
    left: 7%;
    right: 7%;
    top: 76%;
    gap: 6px;
  }
  .interest-replies > div {
    padding: 8px 10px;
  }
  .interest-replies img {
    width: 23px;
    height: 23px;
  }
  .interest-replies span {
    font-size: 12px;
  }
  .interest-replies b {
    display: block;
    font-size: 12px;
  }
  .discovery-view {
    inset: 63px 17px 25px;
  }
  .search-bar {
    padding: 14px;
    gap: 9px;
  }
  .search-bar span {
    font-size: 14px;
    line-height: 1.5;
  }
  .search-bar b {
    display: none;
  }
  .travel-posts {
    gap: 8px;
    margin: 18px 0;
  }
  .travel-post {
    padding: 14px 9px;
    font-size: 19px;
  }
  .travel-post small {
    line-height: 1.5;
  }
  .week-board {
    padding: 20px 13px;
  }
  .week-days,
  .week-row {
    grid-template-columns: 70px repeat(7, 1fr);
    gap: 5px;
  }
  .week-row > span {
    font-size: 13px;
  }
  .week-row img {
    display: none;
  }
  .week-row i {
    height: 24px;
  }
  .week-foot {
    text-align: left;
    line-height: 1.5;
    font-size: 13px;
  }
  .travel-talk {
    display: block;
    margin-top: 0;
  }
  .travel-match {
    padding-top: 0;
    margin: 0 18px 17px;
  }
  .travel-match .week-board {
    padding: 14px;
  }
  .travel-match .board-kicker {
    font-size: 12px;
  }
  .travel-match .week-row {
    margin-top: 9px;
  }
  .travel-match .week-row:last-of-type {
    display: none;
  }
  .travel-match .week-foot {
    margin-top: 10px;
  }
  .travel-common {
    display: none;
  }
  .travel-talk .agent-thread {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    margin: 0 18px;
  }
  .travel-talk .human-context {
    display: none;
  }
  .travel-talk .thread-messages {
    min-height: 280px;
    gap: 9px;
    padding: 14px;
  }
  .travel-talk .thread-messages .bubble {
    font-size: 14px;
  }
  .game-session-bar {
    margin: 0 18px 20px;
    padding-left: 13px;
  }
  .game-session-bar > strong {
    font-size: 16px;
    line-height: 1.4;
  }
  .gaming-talk .threads-grid {
    height: 460px;
  }
  .gaming-talk .thread-messages {
    min-height: 300px;
  }
  .friends-workspace {
    display: block;
  }
  .friends-source {
    display: flex;
    gap: 11px;
    align-items: center;
    margin: 0 0 22px;
    text-align: left;
  }
  .friends-source > img {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    margin: 0;
    box-shadow: none;
    padding: 3px;
  }
  .friends-source > span {
    font-size: 16px;
    margin: 0;
  }
  .friends-source > small {
    font-size: 12px;
    max-width: 125px;
    margin: 0 0 0 auto;
  }
  .dinner-board {
    padding: 23px 18px;
  }
  .dinner-time {
    font-size: 40px;
  }
  .dinner-row {
    gap: 8px;
    font-size: 14px;
  }
  .dinner-row span {
    font-size: 13px;
  }
  .friend-time-workspace {
    margin: 15px 18px 0;
  }
  .time-grid {
    grid-template-columns: 47px repeat(3, 1fr);
    gap: 5px;
    margin: 20px 0;
  }
  .time-grid > * {
    font-size: 12px;
    padding: 12px 4px;
  }
  .friend-single-dm .thread-messages {
    min-height: 280px;
  }
  .listing-grid {
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 22px;
    position: relative;
  }
  .listing-grid > div:last-child {
    position: absolute;
    bottom: -115px;
    left: 0;
    right: 0;
  }
  .listing-grid .bike-listing {
    padding: 15px 12px;
  }
  .listing-grid .bike-listing > strong {
    font-size: 34px;
    margin: 19px 0;
  }
  .listing-grid .listing-category {
    font-size: 14px;
  }
  .listing-grid .listing-seller {
    gap: 7px;
    align-items: flex-start;
  }
  .listing-grid .listing-seller img {
    width: 24px;
    height: 24px;
  }
  .listing-grid .listing-seller small {
    font-size: 12px;
  }
  .listing-grid .listing-spec {
    font-size: 12px;
  }
  .filtered-listing .bike-listing {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 15px;
  }
  .filtered-listing .bike-listing > strong {
    font-size: 28px;
    margin: 0;
  }
  .filtered-listing .listing-spec,
  .filtered-listing .listing-seller {
    display: none;
  }
  .filtered-listing.filtered-out {
    transform: translateX(10px);
    opacity: 0.2;
  }
  .market-filter {
    margin-top: 145px;
    gap: 7px;
  }
  .filter-chip {
    font-size: 12px;
    padding: 8px 10px;
  }
  .market-talk {
    display: block;
    margin: 0 18px;
  }
  .seller-specs {
    height: 150px;
    min-height: 0;
    padding: 0;
    margin-bottom: 17px;
  }
  .seller-spec {
    inset: 0;
  }
  .seller-spec .bike-listing {
    padding: 17px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  .seller-spec .bike-listing > strong {
    font-size: 33px;
    margin: 0;
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .seller-spec .listing-category > span {
    display: none;
  }
  .seller-spec .listing-spec {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
  }
  .seller-spec .listing-seller {
    display: none;
  }
  .seller-dms {
    min-height: 400px;
  }
  .seller-dms .agent-thread {
    margin: 0;
    opacity: 0;
  }
  .seller-dms .agent-thread.mobile-active {
    opacity: 1;
  }
  .market-talk .thread-messages {
    min-height: 320px;
    padding: 15px;
    gap: 10px;
  }
  .market-talk .thread-messages .bubble {
    font-size: 14px;
  }
  .market-talk .seller-check {
    display: none;
  }
  .film-eyebrow {
    font-size: 12px;
    letter-spacing: 0.6px;
    right: 12px;
    line-height: 1.4;
  }
  .film.mode-meet .peer-layer {
    opacity: 0;
  }
  .film[data-story="travel"].mode-ask {
    background:
      linear-gradient(#f2f0e9e8, #f2f0e9f9),
      url("/assets/site/assets/tokyo.webp") center / cover;
  }
  .film[data-story="friends"].mode-ask {
    background:
      linear-gradient(#eef2e9ec, #eef2e9fa),
      url("/assets/site/assets/restaurant.webp") center / cover;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scenario-intro,
  .scenario-ending,
  .discovery-view,
  .network-dot,
  .network-dot > img,
  .network-dot > span,
  .wide-routing .network-lines path,
  .filtered-listing,
  .seller-spec,
  .seller-dms .agent-thread {
    transition: none !important;
    animation: none !important;
  }
}

.routing-origin {
  transform: translate(-50%, -30px);
}
.routing-hub {
  transform: translate(-50%, -42px);
}
@media (max-width: 1050px) {
  .routing-origin {
    transform: translate(-50%, -25px);
  }
  .routing-hub {
    transform: translate(-50%, -35px);
  }
}
@media (max-width: 720px) {
  .routing-origin {
    left: 12%;
    transform: translate(-50%, -20px);
  }
  .routing-hub {
    left: 33%;
    transform: translate(-50%, -26px);
  }
  .routing-origin small {
    max-width: 65px;
    margin-inline: auto;
  }
  .routing-hub small {
    max-width: 90px;
    margin-inline: auto;
  }
  .interest-replies {
    top: 74%;
  }
  .routing-tally {
    bottom: 1%;
  }
  .film[data-story="concert"] .routing-message > div,
  .film[data-story="gaming"] .routing-message > div {
    display: none;
  }
}

.phone-chat .listing-spec,
.phone-chat .listing-category > span {
  display: none;
}
.phone-chat .bike-listing > strong {
  font-size: 30px;
  margin: 8px 0;
}
.phone-chat .listing-seller {
  margin-top: 10px;
  padding-top: 8px;
}
.small-roster .roster-person small {
  display: none;
}
@media (max-width: 380px) {
  .phone-chat .bike-listing {
    padding: 12px;
  }
  .small-roster {
    padding: 14px 12px;
  }
  .routing-tally {
    column-gap: 9px;
  }
  .routing-tally b {
    font-size: 17px;
    margin-right: 3px;
  }
}