/* ─── HERO SEARCH STAGE (js/agent-stage.js) ─────────────────────────
   A chat in the middle, people scattered around it in the Jack & Jill
   collage manner, and lines drawn from the chat to whoever it matched. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.agent-stage {
  position: relative; z-index: 1;
  width: min(1320px, 100%); height: 600px;
  margin: 64px auto 0;
}

.as-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 1;
}
.as-lines path { fill: none; stroke-width: 1.6; stroke-linecap: round; }

/* People */
.as-person {
  position: absolute; top: var(--y); width: var(--w);
  margin: 0; z-index: 2;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.as-person figcaption {
  margin-top: 8px; display: grid; gap: 1px;
  font-size: 12px; line-height: 1.35; color: var(--ink-dim);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .4s ease, transform .4s ease;
}
.as-person figcaption strong { color: var(--ink); font-weight: 500; }
.as-score {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  background: var(--card); color: var(--ink);
  padding: 4px 7px; border-radius: 6px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}
.as-person.is-match figcaption,
.as-person.is-match .as-score { opacity: 1; transform: none; }

/* Chat */
.as-chat {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: min(500px, 100%);
  transform: translate(-50%, -50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 30px 70px -40px rgba(20, 20, 19, .35);
  display: flex; flex-direction: column;
  text-align: left;
}
.as-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.as-title { font-family: var(--serif); font-size: 18px; letter-spacing: -.01em; }
.as-tag {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  color: var(--ink-dim);
}
.as-log {
  height: 250px; overflow: hidden;
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.as-msg { font-size: 14px; line-height: 1.5; animation: asIn .35s ease both; }
.as-user {
  align-self: flex-end; max-width: 86%;
  background: var(--bg-2); color: var(--ink);
  padding: 10px 14px; border-radius: 14px 14px 4px 14px;
}
.as-step {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 11.5px; color: var(--ink-dim);
}
.as-step::before {
  content: ''; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
  border: 1.5px solid var(--border-hi); border-top-color: var(--ink);
  animation: asSpin .8s linear infinite;
}
.as-step.done::before {
  animation: none; border: none; background: var(--ms-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 4.9 8.7 9.6 3.4'/%3E%3C/svg%3E");
  background-size: 8px; background-repeat: no-repeat; background-position: center;
}
.as-agent { color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.4; }

.as-input {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px 12px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--border-hi); border-radius: 12px; background: var(--card);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.as-typing {
  flex: 1; min-width: 0; font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-typing.is-typing::after {
  content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px;
  vertical-align: -2px; background: var(--ink); animation: asCaret .9s steps(1) infinite;
}
.as-ph { color: var(--ink-dim); }
.as-send {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 9px; background: var(--ink); color: #fff;
  transition: transform .18s ease;
}
.as-send.is-sent { transform: scale(.88); }
.as-send svg { width: 15px; height: 15px; }
.as-input { user-select: none; pointer-events: none; }
@keyframes asCaret { 50% { opacity: 0; } }

@keyframes asIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes asSpin { to { transform: rotate(360deg); } }

/* People are placed from the chat's edges, so they never slide under it. */
.as-person[data-side="l"] { right: calc(50% + 272px + var(--off)); }
.as-person[data-side="r"] { left: calc(50% + 272px + var(--off)); }
@media (max-width: 1320px) { .as-person[data-outer] { display: none; } }

/* Phone: the chat leads, people become a strip beneath it, no lines. */
@media (max-width: 900px) {
  .agent-stage { height: auto; margin-top: 40px; display: flex; flex-direction: column-reverse; gap: 20px; }
  .as-lines { display: none; }
  .as-chat { position: relative; left: auto; top: auto; transform: none; width: 100%; }
  .as-log { height: 230px; }
  .as-people {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-top: 20px; padding-bottom: 4px; scrollbar-width: none;
  }
  .as-people::-webkit-scrollbar { display: none; }
  .as-person, .as-person[data-outer] {
    display: block; position: relative; left: auto; right: auto; top: auto;
    width: 132px; flex-shrink: 0; transform: none; scroll-snap-align: start;
  }
  .as-person figcaption { opacity: 1; transform: none; }
  }

/* ─── SCROLL MOTION (js/motion.js) ─────────────────────────────────── */
/* No blur, and quick: sections start fading in before they reach the
   screen, so a tall card never sits as an empty block on a phone. */
.js-motion [data-m] {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition:
    opacity .45s ease var(--m-delay, 0ms),
    transform .5s cubic-bezier(.2, .7, .2, 1) var(--m-delay, 0ms);
}
.js-motion [data-m].m-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .as-person { transform: none; }
  .js-motion [data-m] { opacity: 1; transform: none; filter: none; }
}

/* ─── PRODUCT MOCK-UPS IN THE CLAUDE REGISTER ────────────────────────
   No avatars, no pills, no grey header bars: a conversation, then plain
   rows on hairlines, and the profile as an artifact panel. */
.bv-panel, .profile-card {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 22px 50px -34px rgba(20, 20, 19, .3);
}
.bv-head, .bv-foot { background: transparent; }
.bv-head { padding: 16px 20px 12px; }
.bv-title { font-family: var(--serif); font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.bv-pill, .bv-tag, .usp-score {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--ink-dim);
}
.usp-score { color: var(--ink); }
.bv-av, .pcard-avatar { display: none !important; }
.bv-rows { padding: 2px 20px 10px; }
.bv-row { padding: 12px 0; border-top: 1px solid var(--border); grid-template-columns: 1fr auto; }
.bv-row:first-child { border-top: 0; }
.bv-name { font-size: 14px; }
.bv-sub { font-family: var(--sans); font-size: 12.5px; }
.bv-scale i { width: 10px; height: 18px; border-radius: 3px; }
.bv-scale i.up { background: var(--ms-blue); }

/* Conversation: the user in a soft bubble on the right, 365 in serif with
   no bubble at all, introduced by a small pastel mark. */
.usp-chat { padding: 4px 20px 8px; gap: 14px; }
.usp-who { display: none; }
.usp-query {
  justify-self: end; max-width: 86%;
  background: var(--bg-2); border: 0;
  border-radius: 18px 18px 6px 18px; padding: 11px 15px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.usp-reply {
  position: relative; padding-left: 22px;
  font-family: var(--serif); font-size: 16.5px; line-height: 1.45; color: var(--ink);
}
.usp-reply::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 10px; height: 10px; border-radius: 3px; background: var(--ms-red);
}

/* Profile card as an artifact: a document heading, plain facts. */
.profile-card { padding: 22px 24px; }
.pcard-name { font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: -.015em; }
.pcard-meta { font-family: var(--sans); font-size: 12.5px; }
.pcard-status { background: none; padding: 0; font-family: var(--sans); font-size: 11.5px; font-weight: 500; }
.pcard-skills { gap: 0; margin: 14px 0 16px; font-size: 13px; color: var(--ink-mid); }
.pcard-skills span { background: none; border: 0; padding: 0; border-radius: 0; }
.pcard-skills span:not(:last-child)::after { content: '·'; margin: 0 8px; color: var(--ink-dim); } /* dot trails, never leads a wrapped line */
.pcard-rows { background: none; border-radius: 0; gap: 0; }
.pcard-rows > div { background: none; padding: 11px 0; border-top: 1px solid var(--border); }
.pcard-rows span { font-family: var(--sans); font-size: 13px; }
.pcard-cv { background: none; border: 0; border-radius: 0; padding: 12px 0 14px; border-top: 1px solid var(--border); color: var(--ink-dim); }
.pcard-btn { border-radius: 10px; }
.bv-row > span:not(.bv-av):not(.bv-tag) { flex: 1; }

/* ─── ILLUSTRATED PROFILE CARDS ──────────────────────────────────────
   Wireframe cards in place of photos: hairline frame, hatched pastel
   header, numbered mono label, skeleton lines. Angled toward the chat. */
.as-person { width: 176px; perspective: 900px; }
.as-card {
  --t: var(--ms-blue); --ti: var(--ms-blue-ink);
  position: relative; display: grid; gap: 6px;
  padding: 34px 14px 14px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--t) 70%, #fff);
  border-radius: 6px;
  transform: rotateY(var(--ry, 0deg)) rotateX(4deg);
  transform-origin: center;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease, border-color .4s ease;
  box-shadow: 0 14px 30px -24px rgba(20, 20, 19, .35);
}
.as-person[data-side="l"] .as-card { --ry: 16deg; }
.as-person[data-side="r"] .as-card { --ry: -16deg; }
.as-card[data-tint="red"]    { --t: var(--ms-red);    --ti: var(--ms-red-ink); }
.as-card[data-tint="green"]  { --t: var(--ms-green);  --ti: var(--ms-green-ink); }
.as-card[data-tint="yellow"] { --t: var(--ms-yellow); --ti: var(--ms-yellow-ink); }
.as-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--t) 70%, #fff);
  border-radius: 5px 5px 0 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--t) 45%, #fff) 0 1px, transparent 1px 6px);
}
.as-card::after {
  content: ''; position: absolute; inset: -4px; pointer-events: none;
  background-image: linear-gradient(var(--t), var(--t)), linear-gradient(var(--t), var(--t)), linear-gradient(var(--t), var(--t)), linear-gradient(var(--t), var(--t));
  background-size: 4px 4px; background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}
.as-card-tag {
  position: absolute; top: 5px; left: 10px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  color: var(--ti); background: var(--card); padding: 1px 5px; border-radius: 3px;
}
.as-card strong { font-family: var(--serif); font-weight: 400; font-size: 15.5px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.as-card-meta { font-size: 11.5px; color: var(--ink-dim); }
.as-card-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.as-card-chips em {
  font-style: normal; font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  color: var(--ti); border: 1px solid color-mix(in srgb, var(--t) 70%, #fff); border-radius: 3px; padding: 1px 5px;
}
.as-card i { display: block; height: 4px; border-radius: 2px; background: var(--bg-2); }
.as-card i:last-of-type { width: 62%; }
.as-score { top: -10px; left: auto; right: 10px; z-index: 2; border: 1px solid var(--border); }
.as-person.is-match .as-card {
  --ry: 0deg; border-color: var(--ti);
  box-shadow: 0 22px 44px -26px rgba(20, 20, 19, .45);
}
@media (max-width: 900px) {
  .as-person, .as-person[data-outer] { width: 176px; }
  .as-card { --ry: 0deg !important; transform: none; }
}
.as-card-chips em { flex: 0 0 auto; width: auto; display: inline-block; }
@media (max-width: 900px) {
  .as-person[data-side] { left: auto; right: auto; }
}
.as-card .as-card-chips { flex-direction: row; }
/* Search mock-up spacing: room under the header, between turns, and before results. */
.usp-visual .bv-head { border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.usp-chat { padding: 20px 20px 4px; gap: 18px; }
.usp-reply { margin-bottom: 6px; }
.usp-visual .bv-rows { padding-top: 6px; }
.stack-bar { padding-top: 40px; }
/* Most popular: blue tint, blue border, blue text, like the work-type tags. */
.plan-flag {
  color: var(--ms-blue-ink) !important;
  background: color-mix(in srgb, var(--ms-blue) 24%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--ms-blue) 62%, #fff) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
/* Hero rhythm: more air under the header, chat closer to the buttons. */
.hero { padding-top: calc(var(--nav-h) + 112px); }
.agent-stage { margin-top: 36px; }
.as-chat { top: 0; transform: translateX(-50%); }
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--nav-h) + 72px); }
  .as-chat { transform: none; }
}