/* BrokerOS public V2 — physical fingerprint 20260728a. People-first copy and semantic scroll motion
   the first complete state or gets in the way of the static reading order. */

:root {
  --black: #111416;
  --paper: #fafaf8;
  --ink: #1d2127;
  --lime: #e0e467;
  color-scheme: light dark;
}

* { box-sizing: border-box; letter-spacing: 0; }

html { scroll-behavior: smooth; background: var(--black); }
html.is-resetting-scroll { scroll-behavior: auto; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { text-decoration: none; }
button { border: 0; }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.p-lime :focus-visible { outline-color: var(--ink); }

/* Grounds and page frames */

.p-black {
  background: var(--black);
  color: #ffffff;
  --dim: #9da4ac;
  --line: #30363d;
  --chip: #181c20;
  --raised: #20252a;
  --barc: #626b74;
}
.p-paper {
  background: var(--paper);
  color: var(--ink);
  --dim: #656c75;
  --line: #d9dde1;
  --chip: #ffffff;
  --raised: #f0f2f3;
  --barc: #afb7bf;
}
.p-lime {
  background: var(--lime);
  color: var(--ink);
  --dim: #515a31;
  --line: rgba(29, 33, 39, 0.28);
  --chip: rgba(255, 255, 255, 0.62);
  --raised: rgba(255, 255, 255, 0.82);
  --barc: rgba(29, 33, 39, 0.3);
}

.panel {
  position: relative;
  min-height: 100svh;
  padding: clamp(18px, 2.4vw, 30px) clamp(22px, 3.4vw, 52px) clamp(20px, 3vw, 44px);
  overflow: hidden;
}

.story-panel { padding: 0; overflow: visible; }
.story-2 { height: 190svh; }
.story-3 { height: 270svh; }
.story-4 { height: 350svh; }

.panel-frame {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(14px, 2.2vh, 24px);
  width: 100%;
  height: 100svh;
  min-height: 0;
  padding: clamp(18px, 2.4vw, 30px) clamp(22px, 3.4vw, 52px) clamp(20px, 3vw, 38px);
  overflow: hidden;
  background: inherit;
}
.story-panel .panel-frame::after {
  position: absolute;
  bottom: clamp(18px, 3vh, 30px);
  left: clamp(18px, 3.4vw, 52px);
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  opacity: 0;
  transform: rotate(45deg);
  transition: opacity 180ms ease;
  content: "";
  pointer-events: none;
}
.story-panel:not(.close-panel) .panel-frame::after { opacity: 0.72; }
.close-panel .panel-frame::after { content: none; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { justify-self: start; font-size: 20px; font-weight: 500; white-space: nowrap; }
.brand b {
  margin-left: 1px;
  padding: 4px 3px 3px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 750;
}
.p-lime .brand b { background: var(--ink); color: var(--lime); }
.bar-link { font-size: 13px; font-weight: 650; }
.bar-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.meta {
  margin: 0;
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.stage {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(520px, 1.28fr);
  align-items: center;
  gap: clamp(30px, 4.2vw, 72px);
  min-height: 0;
}
.stage.solo { grid-template-columns: minmax(0, 1fr); }
.copy, .art { min-width: 0; }

h1, h2 { margin: 0; font-weight: 600; line-height: 0.98; text-wrap: balance; }
h1 { max-width: 13ch; font-size: clamp(38px, 6.6vw, 104px); }
h2 { max-width: 15ch; font-size: clamp(30px, 3.35vw, 50px); }
h1 .sub {
  display: block;
  margin-top: 0.44em;
  color: var(--lime);
  font-size: clamp(17px, 2.2vw, 32px);
  font-weight: 400;
}
.close-head { max-width: 21ch; }

.product { margin: 0 0 12px; font-size: 13px; font-weight: 700; }
.product em {
  display: inline-block;
  padding: 3px 4px 2px;
  background: var(--lime);
  color: var(--ink);
  font-style: normal;
  line-height: 1;
}
.p-black .product em { padding: 0; background: transparent; color: var(--lime); line-height: inherit; }
.say { max-width: 43ch; margin: 17px 0 0; color: var(--dim); font-size: 15px; line-height: 1.5; }
.story-copy-stack {
  position: relative;
  max-width: 43ch;
  min-height: 4.5em;
  margin-top: 17px;
  color: var(--dim);
  font-size: 15px;
  line-height: 1.5;
}
.story-copy {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.story-copy.is-current,
.story-copy:first-child:not([hidden]) { opacity: 1; visibility: visible; }
.story-copy[hidden] { display: none; }
.go {
  display: inline-block;
  padding: 13px 19px;
  background: var(--lime);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.p-lime .go { background: var(--ink); color: var(--lime); }
.go:focus-visible { filter: invert(1); }
@media (hover: hover) {
  .go:hover { filter: invert(1); }
}
.site-footer { align-self: end; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; font-size: 12px; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Opening */

#top {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(24px, 4vh, 52px);
  padding-top: clamp(30px, 4.5vw, 66px);
  padding-bottom: clamp(38px, 5.5vw, 80px);
}
#top .stage {
  align-self: center;
  padding-bottom: clamp(52px, 8vh, 92px);
}
.growth { position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.growth svg { display: block; width: 100%; height: auto; }
#top .stage, #top .bar { position: relative; z-index: 1; }
.gridline { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.ghost { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.curve { fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; }
.marker {
  fill: none;
  stroke: var(--lime);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 0.01 4000;
  stroke-dashoffset: -1134;
}

@media (prefers-reduced-motion: no-preference) {
  .curve {
    stroke-dasharray: 1137;
    stroke-dashoffset: 1137;
    animation: draw 3.2s cubic-bezier(0.34, 0.5, 0.18, 1) 0.35s forwards;
  }
  .marker {
    stroke-dashoffset: 0;
    animation: ride 3.2s cubic-bezier(0.34, 0.5, 0.18, 1) 0.35s forwards;
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes ride { to { stroke-dashoffset: -1134; } }
}

/* Scroll controls */

.story-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 48px;
  max-width: 460px;
  margin-top: clamp(22px, 3.5vh, 38px);
}
.story-2 .story-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-3 .story-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-nav::before {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
  content: "";
}
.story-progress {
  position: absolute;
  top: -1px;
  left: 0;
  width: 25%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--lime);
  pointer-events: none;
}
.story-2 .story-progress { width: 50%; }
.story-3 .story-progress { width: 33.333%; }
.p-lime .story-progress { background: var(--ink); }
.story-nav button {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 8px 0 0;
  background: transparent;
  color: var(--dim);
  text-align: left;
  cursor: pointer;
}
.story-nav button.is-active { color: inherit; }
.story-nav b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
}
.story-nav span { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.tour-instruction {
  display: flex;
  align-items: center;
  width: fit-content;
  margin: clamp(40px, 6vh, 68px) 0 0;
  color: var(--lime);
  font-size: 13px;
  font-weight: 650;
}
.tour-instruction b { display: inline-block; margin-left: 2px; font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
  .tour-instruction b { animation: scroll-arrow-bounce 1.6s ease-in-out infinite; }
  .story-panel:not(.close-panel) .panel-frame::after { animation: scroll-chevron-bounce 1.6s ease-in-out infinite; }
  @keyframes scroll-arrow-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
  @keyframes scroll-chevron-bounce { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(5px) rotate(45deg); } }
}
@media (hover: hover) {
  .story-nav button:hover { color: inherit; }
  .story-nav button:hover span { text-decoration: underline; text-underline-offset: 4px; }
}
.story-nav button:focus span { text-decoration: underline; text-underline-offset: 4px; }
.story-nav button:active { opacity: 0.72; }

/* The persistent product frame */

.story-art { display: grid; min-height: 0; align-content: center; }
.demo-window {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: clamp(410px, 62vh, 610px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--chip);
}
.demo-bar, .mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
}
.demo-bar { min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.demo-example { opacity: 0.38; }
.scene-stack { position: relative; min-height: 0; overflow: hidden; }
.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-width: 0;
  padding: clamp(16px, 2.2vw, 28px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.scene:first-child, .scene.is-current {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
[data-enhanced] .scene[hidden] { display: none; }

.avatar {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  background: var(--lime);
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}
/* Agent tracking */

.agent-directory { display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.search-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--dim);
  font-size: 13px;
}
.search-field b { color: inherit; font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 500; text-transform: uppercase; }
.agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 0; }
.agent-grid > span {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: var(--raised);
}
.agent-grid b { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.agent-grid small { overflow: hidden; margin-top: 4px; color: var(--dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.agent-grid .selected { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.agent-grid .selected small { color: rgba(29, 33, 39, 0.68); }
.watchlist-scene { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(190px, 0.8fr); gap: 18px; }
.list-pane, .preview-pane { min-width: 0; border: 1px solid var(--line); }
.mini-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.list-pane .mini-head { padding: 11px 13px; }
.person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}
.person-row:last-child { border-bottom: 0; }
.person-row b { grid-column: 1; font-size: 14px; font-weight: 650; }
.person-row small { grid-column: 1; color: var(--dim); font-size: 11px; }
.person-row i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 20px; font-style: normal; font-weight: 650; }
.person-row.active { background: var(--lime); color: var(--ink); }
.person-row.active small { color: rgba(29, 33, 39, 0.68); }
.preview-pane { display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 10px 12px; padding: 18px; }
.preview-pane > div { align-self: center; min-width: 0; }
.preview-pane b { font-size: 15px; }
.preview-pane small { display: block; margin-top: 3px; color: var(--dim); font-size: 11px; }
.preview-pane p { grid-column: 1 / -1; margin: 10px 0 0; color: var(--dim); font-size: 13px; }
.open-profile, .compose-action { grid-column: 1 / -1; align-self: end; padding: 11px 12px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 700; }
.open-profile b, .compose-action b { float: right; }

.profile-scene { display: grid; grid-template-rows: auto auto 1fr; gap: 16px; }
.profile-head { display: flex; align-items: center; gap: 12px; }
.profile-head > div { min-width: 0; }
.profile-head b { display: block; font-size: 17px; }
.profile-head small { display: block; margin-top: 3px; color: var(--dim); font-size: 11px; }
.following { margin-left: auto; padding: 5px 9px; border: 1px solid var(--line); color: var(--dim); font-family: ui-monospace, Menlo, monospace; font-size: 10px; text-transform: uppercase; }
.profile-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.profile-metrics span { padding: 12px; border-right: 1px solid var(--line); }
.profile-metrics span:last-child { border-right: 0; }
.profile-metrics strong { display: block; font-size: clamp(20px, 2vw, 30px); font-weight: 650; font-variant-numeric: tabular-nums; }
.profile-metrics small { display: block; margin-top: 3px; color: var(--dim); font-size: 10.5px; }
.production-chart { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; padding: 12px; border: 1px solid var(--line); }
.bars { display: flex; align-items: flex-end; gap: 6px; min-height: 70px; padding-top: 12px; }
.bars i { display: block; flex: 1; background: var(--barc); }
.bars i:nth-child(1) { height: 26%; }
.bars i:nth-child(2) { height: 40%; }
.bars i:nth-child(3) { height: 33%; }
.bars i:nth-child(4) { height: 53%; }
.bars i:nth-child(5) { height: 46%; }
.bars i:nth-child(6) { height: 66%; }
.bars i:nth-child(7) { height: 60%; }
.bars i:nth-child(8) { height: 80%; }
.bars i:nth-child(9) { height: 73%; }
.bars i:nth-child(10) { height: 86%; }
.bars i:nth-child(11) { height: 66%; }
.bars i:nth-child(12) { height: 100%; }
.bars i.now { background: var(--lime); }
.chart-months { display: flex; justify-content: space-between; margin: 7px 0 0; color: var(--dim); font-family: ui-monospace, Menlo, monospace; font-size: 9px; text-transform: uppercase; }

/* Offer */

.offer-sheet { display: grid; align-content: center; }
.offer-title, .package-head, .handoff-person, .report-head, .new-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--line);
}
.offer-title small, .package-head small, .handoff-person small, .report-head small, .new-person small {
  display: block;
  margin-bottom: 3px;
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
}
.offer-title b, .package-head b, .handoff-person b, .report-head b, .new-person b { font-size: 16px; }
.offer-title > span, .package-head > span, .report-head > span {
  padding: 5px 8px;
  background: var(--lime);
  color: var(--ink);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
}
.term-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 13px 15px; border: 1px solid var(--line); border-top: 0; font-size: 14px; }
.term-row b { color: var(--dim); font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 500; }

.offer-status {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 18px;
}
.status-track { display: grid; align-content: center; }
.status-track > span { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 2px 12px; min-height: 64px; }
.status-track > span::after { content: ""; position: absolute; top: 12px; bottom: -12px; left: 4px; width: 1px; background: var(--line); }
.status-track > span:last-child::after { content: none; }
.status-track i { grid-column: 1; grid-row: 1 / span 2; width: 9px; height: 9px; margin-top: 3px; border: 2px solid var(--line); border-radius: 50%; background: var(--chip); }
.status-track b { font-size: 15px; }
.status-track small { color: var(--dim); font-size: 11px; }
.status-track .done i, .status-track .active i { border-color: var(--lime); background: var(--lime); }
.status-track .active b { color: var(--lime); }
.p-paper .status-track .active b { color: var(--ink); }
.sign-tick { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; background: var(--ink); color: var(--lime); font-size: 15px; font-weight: 750; }

.handoff-scene { display: grid; grid-template-rows: auto auto; align-content: center; gap: 16px; }
.handoff-person { justify-content: flex-start; }
.handoff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; border: 1px solid var(--line); }
.handoff-grid > span { display: grid; align-content: center; min-width: 0; padding: 14px; border-right: 1px solid var(--line); }
.handoff-grid > span:last-child { border-right: 0; }
.handoff-grid small { color: var(--dim); font-size: 10px; text-transform: uppercase; }
.handoff-grid b { margin-top: 6px; font-size: 15px; }
.handoff-grid i { margin-top: 12px; color: var(--dim); font-size: 11px; font-style: normal; }

/* Onboarding */

.paperwork-scene { display: grid; grid-template-rows: auto 1fr; }
.document-list { display: grid; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
.document-list > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.document-list i { padding: 4px 5px; border: 1px solid var(--line); color: var(--dim); font-family: ui-monospace, Menlo, monospace; font-size: 9px; font-style: normal; }
.document-list b { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.document-list small { color: var(--dim); font-family: ui-monospace, Menlo, monospace; font-size: 8px; text-transform: uppercase; }

.signing-scene {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 16px;
}
.signing-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); }
.signing-progress > i { grid-column: 1; height: 6px; background: var(--lime); }
.signing-progress span { grid-column: 2; grid-row: 1; }
.signing-progress b { display: block; font-size: 14px; }
.signing-progress small { display: block; margin-top: 3px; color: var(--dim); font-size: 10px; }
.signed-list { border: 1px solid var(--line); }
.signed-list span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.signed-list span:last-child { border-bottom: 0; }
.signed-list b { font-size: 12.5px; font-weight: 600; }
.signed-list i { padding: 3px 6px; background: var(--lime); color: var(--ink); font-family: ui-monospace, Menlo, monospace; font-size: 9px; font-style: normal; text-transform: uppercase; }

.route-scene { display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.route-line { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; }
.route-line > span { display: grid; justify-items: center; min-width: 0; text-align: center; }
.route-line > span > i { display: grid; width: 32px; height: 32px; margin-bottom: 9px; place-items: center; border: 1px solid var(--lime); color: var(--lime); font-style: normal; }
.route-line .active > i { background: var(--lime); color: var(--ink); }
.route-line b { font-size: 13px; }
.route-line small { margin-top: 4px; color: var(--dim); font-size: 10px; }
.route-connector { height: 1px; background: var(--line); }
/* Referral Engine */

.live-feed { display: grid; grid-template-rows: auto repeat(3, 1fr); gap: 8px; }
.feed-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 11px 13px; border: 1px solid var(--line); background: var(--raised); }
.feed-card.loud { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.feed-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); font-size: 12px; font-weight: 750; }
.feed-card.loud .feed-icon { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.feed-card.loud small,
.feed-card.loud p { color: rgba(29, 33, 39, 0.68); }
.feed-card div { min-width: 0; }
.feed-card small { display: block; overflow: hidden; color: var(--dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.feed-card b { display: block; margin-top: 3px; font-size: 14px; }
.feed-card p { margin: 3px 0 0; color: var(--dim); font-size: 11px; }
.feed-card > i { font-style: normal; }

.moment-scene { display: grid; place-items: center; }
.moment-card { display: grid; width: min(100%, 500px); padding: clamp(18px, 3vw, 30px); border: 1px solid var(--lime); background: var(--lime); color: var(--ink); }
.moment-kicker { color: rgba(29, 33, 39, 0.68); font-family: ui-monospace, Menlo, monospace; font-size: 10px; text-transform: uppercase; }
.moment-person { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.moment-person .avatar { background: var(--ink); color: var(--lime); }
.moment-person b { display: block; font-size: 18px; }
.moment-person small { display: block; margin-top: 3px; color: rgba(29, 33, 39, 0.68); font-size: 11px; }
.moment-card > p { margin: 20px 0; font-size: clamp(16px, 2vw, 22px); line-height: 1.2; }
.moment-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid rgba(29, 33, 39, 0.28); }
.moment-context span { padding: 10px; border-right: 1px solid rgba(29, 33, 39, 0.28); }
.moment-context span:last-child { border-right: 0; }
.moment-context small { display: block; color: rgba(29, 33, 39, 0.68); font-size: 9px; text-transform: uppercase; }
.moment-context b { display: block; margin-top: 5px; font-size: 11.5px; }
.moment-card .compose-action { background: var(--ink); color: var(--lime); }

.message-scene, .reply-scene { display: grid; grid-template-rows: auto 1fr; gap: 18px; }
.conversation { display: grid; align-content: center; gap: 15px; padding: clamp(4px, 1vw, 10px) 3px; }
.msg {
  max-width: min(78%, 42ch);
  margin: 0;
  padding: 14px 18px;
  border-radius: 19px;
  font-size: 15px;
  line-height: 1.5;
}
.msg.out { justify-self: end; border-bottom-right-radius: 5px; background: var(--ink); color: #ffffff; }
.msg.in { justify-self: start; border: 1px solid var(--line); border-bottom-left-radius: 5px; background: var(--raised); color: inherit; }
#referral .msg.out { background: var(--lime); color: var(--ink); }
.p-black .msg.out { background: var(--lime); color: var(--ink); }
.p-lime .msg.out { background: var(--ink); color: #ffffff; }
.typing { display: flex; justify-self: start; gap: 5px; margin: 0; padding: 14px 17px; border: 1px solid var(--line); border-radius: 18px; border-bottom-left-radius: 5px; background: var(--raised); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); opacity: 0.5; }
.from-line { margin: -2px 0 0 13px; justify-self: start; color: var(--dim); font-size: 12px; }

/* Reports */

.report-scene {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 14px;
}
.report-head { padding: 13px 14px; }
.report-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.report-summary span { padding: 13px; border-right: 1px solid var(--line); }
.report-summary span:last-child { border-right: 0; }
.report-summary b { display: block; font-size: 23px; font-weight: 650; }
.report-summary small { display: block; margin-top: 3px; color: var(--dim); font-size: 10px; }
.report-lines { border: 1px solid var(--line); }
.report-lines span { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.report-lines span:last-child { border-bottom: 0; }
.report-lines i { width: 7px; height: 7px; background: var(--lime); }
.report-lines b { font-size: 12px; }
.report-lines small { color: var(--dim); font-size: 10px; }
.manager-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--line); }
.manager-strip b { display: block; font-size: 14px; }
.manager-strip small { display: block; margin-top: 3px; color: var(--dim); font-size: 10.5px; }
.executive-grid { display: grid; gap: 9px; }
.executive-grid span { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); }
.executive-grid small { grid-row: 1 / span 2; color: var(--dim); font-size: 10px; text-transform: uppercase; }
.executive-grid b { font-size: 12px; }
.executive-grid i { display: block; height: 5px; background: var(--lime); }
.executive-grid span:nth-child(1) i { width: 78%; }
.executive-grid span:nth-child(2) i { width: 62%; }
.executive-grid span:nth-child(3) i { width: 86%; }
.executive-note, .report-footer-line { margin: 0; color: var(--dim); font-size: 11px; }
.market-report { grid-template-rows: auto auto auto; }
.market-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.market-columns > div { min-width: 0; min-height: 170px; padding: 13px; border: 1px solid var(--line); }
.market-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px; align-items: center; margin-top: 11px; }
.market-bar b { color: var(--dim); font-size: 10px; font-weight: 500; }
.market-bar i { display: block; height: 6px; background: var(--barc); }
.market-columns > div:first-child .market-bar:nth-child(2) i { width: 62%; }
.market-columns > div:first-child .market-bar:nth-child(3) i { width: 51%; }
.market-columns > div:first-child .market-bar:nth-child(4) i { width: 86%; }
.market-columns > div:last-child .market-bar:nth-child(2) i { width: 24%; }
.market-columns > div:last-child .market-bar:nth-child(3) i { width: 36%; }
.market-columns > div:last-child .market-bar:nth-child(4) i { width: 18%; }
.market-bar i.peak, .market-columns > div:last-child .market-bar i { background: var(--lime); }

/* Closing statement */

.close-panel .panel-frame { position: relative; }
.close-stage {
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
.close-copy { max-width: 1180px; padding: clamp(16px, 2vh, 28px) 0; }
.close-refrain {
  margin: 0 0 clamp(18px, 2.4vh, 28px);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 750;
}
.close-head {
  max-width: 17ch;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.94;
}
.close-body {
  max-width: 46ch;
  margin: clamp(24px, 3.2vh, 36px) 0 0;
  color: rgba(29, 33, 39, 0.76);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.48;
}
.close-panel .go { margin-top: clamp(30px, 4.2vh, 46px); }

/* Motion that remains after scroll stops */

@media (prefers-reduced-motion: no-preference) {
  .typing i { animation: typing-pulse 1.1s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: 0.16s; }
  .typing i:nth-child(3) { animation-delay: 0.32s; }
  @keyframes typing-pulse { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
}

/* Responsive composition */

@media (max-width: 1040px) {
  .stage { grid-template-columns: minmax(250px, 0.68fr) minmax(450px, 1.32fr); gap: 28px; }
  .demo-window { height: clamp(390px, 59vh, 560px); }
}

@media (max-width: 820px) {
  .story-2 { height: 180svh; }
  .story-3 { height: 245svh; }
  .story-4 { height: 315svh; }
  .panel-frame { gap: 12px; padding-top: 18px; padding-bottom: 18px; }
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 14px; }
  .close-stage { grid-template-rows: minmax(0, 1fr); align-items: center; }
  .copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 18px; }
  .copy .product, .copy h2, .copy .say, .copy .story-copy-stack, .copy .go { grid-column: 1; }
  .story-nav { grid-column: 2; grid-row: 1 / span 4; align-self: end; width: min(38vw, 270px); margin-top: 0; }
  h2 { max-width: 19ch; font-size: clamp(25px, 4.3vw, 35px); }
  .say { margin-top: 10px; font-size: 13.5px; line-height: 1.4; }
  .story-copy-stack { min-height: 4.2em; margin-top: 10px; font-size: 13.5px; line-height: 1.4; }
  .product { margin-bottom: 7px; font-size: 11px; }
  .story-nav button { padding-top: 8px; }
  .story-art { height: 100%; align-content: stretch; }
  .demo-window { height: 100%; min-height: 0; }
  #rollups .copy { grid-template-columns: minmax(0, 1fr) minmax(250px, 38vw); }
}

@media (max-width: 600px) {
  .panel { padding-right: 18px; padding-left: 18px; }
  .story-panel { padding: 0; }
  #top { gap: 28px; padding: 32px 20px 38px; }
  #top .stage { align-self: center; padding-bottom: 72px; }
  .panel-frame { gap: 26px; padding: 28px 18px 18px; }
  .brand { font-size: 19px; }
  .meta { font-size: 9.5px; }
  .stage { gap: 30px; }
  .copy { display: block; }
  h1 { font-size: clamp(42px, 11.5vw, 50px); }
  h1 .sub { font-size: clamp(18px, 4.8vw, 21px); line-height: 1.22; }
  h2 { max-width: 18ch; font-size: clamp(27px, 7.5vw, 32px); line-height: 1.05; }
  .product { margin-bottom: 12px; }
  .say { max-width: 52ch; margin-top: 14px; font-size: 13.5px; line-height: 1.4; }
  .story-copy-stack { max-width: 52ch; min-height: 4.2em; margin-top: 14px; font-size: 13.5px; line-height: 1.4; }
  .story-nav { display: grid; width: 100%; max-width: none; margin-top: 24px; }
  .story-nav span { font-size: 11.5px; }
  .story-nav button { min-width: 44px; min-height: 42px; padding-top: 8px; }
  .story-art { align-content: stretch; }
  .demo-window { height: 100%; min-height: 0; max-height: 580px; align-self: center; }
  .demo-bar { min-height: 36px; padding: 0 12px; font-size: 9.5px; }
  .scene { padding: 12px; }
  .avatar { width: 38px; height: 38px; font-size: 11.5px; }
  .agent-directory { gap: 8px; }
  .agent-grid { gap: 6px; }
  .agent-grid > span { padding: 8px 9px; }
  .agent-grid b { font-size: 12.5px; }
  .agent-grid small { font-size: 9.5px; }
  .search-field { padding: 9px 10px; font-size: 11px; }
  .search-field b { font-size: 8.5px; }
  .watchlist-scene { grid-template-columns: 1.08fr 0.92fr; gap: 9px; }
  .list-pane .mini-head { padding: 9px; }
  .person-row { gap: 2px 7px; padding: 8px 9px; }
  .person-row b { font-size: 11px; }
  .person-row small { font-size: 9px; }
  .person-row i { font-size: 16px; }
  .preview-pane { gap: 7px; padding: 10px; }
  .preview-pane b { font-size: 11.5px; }
  .preview-pane small, .preview-pane p { font-size: 9px; }
  .open-profile, .compose-action { padding: 9px; font-size: 9.5px; }
  .profile-scene { gap: 9px; }
  .profile-head b { font-size: 14px; }
  .profile-head small { font-size: 9.5px; }
  .following { padding: 4px 6px; font-size: 8.5px; }
  .profile-metrics span { padding: 9px; }
  .profile-metrics strong { font-size: 19px; }
  .profile-metrics small { font-size: 9px; }
  .production-chart { padding: 9px; }
  .bars { min-height: 46px; gap: 3px; padding-top: 8px; }
  .offer-title, .package-head, .handoff-person, .report-head, .new-person { padding: 10px; }
  .offer-title b, .package-head b, .handoff-person b, .report-head b, .new-person b { font-size: 12.5px; }
  .offer-title > span, .package-head > span, .report-head > span { font-size: 8.5px; }
  .term-row { padding: 10px; font-size: 11.5px; }
  .term-row b { font-size: 9.5px; }
  .offer-status, .handoff-scene, .signing-scene, .route-scene, .report-scene { gap: 9px; }
  .status-track > span { min-height: 50px; }
  .status-track b { font-size: 12px; }
  .status-track small { font-size: 9.5px; }
  .handoff-grid > span { padding: 9px; }
  .handoff-grid b { margin-top: 4px; font-size: 11px; }
  .handoff-grid i, .handoff-grid small { font-size: 8.5px; }
  .document-list > span { gap: 8px; padding: 7px 9px; }
  .document-list b { font-size: 10.5px; }
  .signing-progress { padding: 10px; }
  .signing-progress b { font-size: 11px; }
  .signing-progress small { font-size: 8.5px; }
  .signed-list span { padding: 8px 9px; }
  .signed-list b { font-size: 10px; }
  .route-line { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr); }
  .route-line > span > i { width: 27px; height: 27px; margin-bottom: 7px; }
  .route-line b { font-size: 10px; }
  .route-line small { font-size: 8px; }
  .live-feed { gap: 6px; }
  .feed-card { gap: 9px; padding: 8px 9px; }
  .feed-icon { width: 27px; height: 27px; font-size: 9.5px; }
  .feed-card small { font-size: 8.75px; }
  .feed-card b { font-size: 11.5px; }
  .feed-card p { font-size: 9.25px; }
  .moment-card { padding: 15px; }
  .moment-person { margin-top: 14px; }
  .moment-person b { font-size: 14px; }
  .moment-person small { font-size: 9.5px; }
  .moment-card > p { margin: 14px 0; font-size: 15.5px; }
  .moment-context { margin-bottom: 12px; }
  .moment-context span { padding: 8px; }
  .moment-context b { font-size: 9.5px; }
  .message-scene, .reply-scene { gap: 12px; }
  .conversation { gap: 12px; padding: 4px 1px; }
  .msg { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 13px; line-height: 1.45; }
  .msg.out { border-bottom-right-radius: 4px; }
  .msg.in { border-bottom-left-radius: 4px; }
  .typing { padding: 12px 14px; border-radius: 16px; border-bottom-left-radius: 4px; }
  .from-line { margin-left: 10px; font-size: 10px; }
  .report-summary span { padding: 9px; }
  .report-summary b { font-size: 18px; }
  .report-summary small { font-size: 8.5px; }
  .report-lines span { padding: 9px; }
  .report-lines b { font-size: 10px; }
  .report-lines small { font-size: 8.5px; }
  .manager-strip { padding: 12px; }
  .manager-strip b { font-size: 11.5px; }
  .manager-strip small { font-size: 9px; }
  .executive-grid { gap: 6px; }
  .executive-grid span { grid-template-columns: 68px minmax(0, 1fr); padding: 9px; }
  .executive-grid small { font-size: 8.5px; }
  .executive-grid b { font-size: 10.25px; }
  .market-columns { gap: 7px; }
  .market-columns > div { min-height: 160px; padding: 9px; }
  .market-bar { grid-template-columns: 66px minmax(0, 1fr); gap: 6px; margin-top: 8px; }
  .market-bar b { font-size: 8.5px; }
  #rollups .copy { display: block; }
  #rollups .say + .say { display: none; }
  #rollups .story-nav { display: grid; width: 100%; }
  .close-panel .panel-frame { gap: 18px; padding-top: 28px; }
  .close-stage { grid-template-rows: minmax(0, 1fr); align-items: center; }
  .close-copy { padding: 10px 0 18px; }
  .close-refrain { margin-bottom: 20px; font-size: 13px; }
  .close-head { max-width: 12ch; font-size: clamp(38px, 11vw, 50px); line-height: 0.98; }
  .close-body { max-width: 32ch; margin-top: 24px; font-size: 15px; line-height: 1.45; }
  .close-panel .go { margin-top: 30px; padding: 12px 15px; font-size: 12px; }
}

@media (max-width: 360px) {
  .panel-frame { padding-right: 14px; padding-left: 14px; }
  h2 { font-size: 24px; }
  .say { font-size: 12px; line-height: 1.34; }
  .story-copy-stack { min-height: 4.02em; font-size: 12px; line-height: 1.34; }
  .profile-metrics strong { font-size: 17px; }
}

@media (max-width: 600px) and (max-height: 700px) {
  .panel-frame { gap: 18px; padding-top: 22px; padding-bottom: 14px; }
  .stage { gap: 20px; }
  .product { margin-bottom: 9px; }
  h2 { font-size: 24px; }
  .say { margin-top: 10px; font-size: 12px; line-height: 1.32; }
  .story-copy-stack { min-height: 3.96em; margin-top: 10px; font-size: 12px; line-height: 1.32; }
  .story-nav { min-height: 42px; margin-top: 16px; }
  .story-nav button { min-height: 38px; padding-top: 6px; }
  .demo-bar { min-height: 32px; font-size: 8.75px; }
  .scene { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .curve, .marker, .typing i { animation: none; }
  [data-enhanced] .scene { transform: none !important; }
  .bars i, .signing-progress > i, .executive-grid i, .market-bar i, .comparison-fill { transform: none; }
}

/* V2: people-first hierarchy and decisive state motion */

.hero-panel h1 { max-width: 13.5ch; }
.hero-stage { align-self: center; }
.hero-copy { max-width: 1180px; }
.hero-emphasis { color: var(--lime); }
.hero-audience {
  margin: 0 0 clamp(18px, 3vh, 32px);
  color: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}
.hero-lead {
  max-width: 54ch;
  margin: clamp(26px, 4vh, 44px) 0 0;
  color: var(--dim);
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.46;
}
.hero-cycle {
  margin: 14px 0 0;
  color: #ffffff;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 700;
}
.hero-cycle + .tour-instruction { margin-top: clamp(36px, 5vh, 58px); }

.demo-bar b { color: inherit; font-weight: 700; }

.story-nav { min-height: 66px; }
.story-nav button {
  grid-template-rows: 28px auto;
  align-content: start;
  min-height: 60px;
}
.story-nav b {
  align-self: end;
  transform-origin: left bottom;
  transition: color 180ms ease, transform 220ms ease;
}
.story-nav button.is-active b { transform: scale(1.8); }
.story-nav button.is-active span { color: inherit; }

.offer-sent-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--dim);
  font-size: 12px;
}
.offer-sent-line span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  background: var(--lime);
  color: var(--ink);
  font-weight: 750;
}
.status-reviewed > span:last-child { opacity: 0.5; }
.acceptance-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--lime);
  color: var(--ink);
}
.acceptance-banner > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--ink);
  font-weight: 750;
}
.acceptance-banner small { display: block; font-size: 9px; text-transform: uppercase; }
.acceptance-banner b { display: block; margin-top: 3px; font-size: 13px; }
.handoff-scene:has(.acceptance-banner) { grid-template-rows: auto auto auto; }

.reply-preview { max-width: 62%; }
.referral-return-scene {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}
.return-label {
  margin: 0;
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  text-transform: uppercase;
}
.referral-return-scene .conversation { align-content: end; }
.referral-intake {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--raised);
}
.referral-intake div { min-width: 0; }
.referral-intake small { display: block; color: var(--dim); font-size: 9px; text-transform: uppercase; }
.referral-intake b { display: block; margin-top: 3px; font-size: 14px; }
.referral-intake p { margin: 3px 0 0; color: var(--dim); font-size: 10px; }
.referral-intake > i { font-style: normal; }

.coverage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.coverage-grid span { padding: 15px; border-right: 1px solid var(--line); }
.coverage-grid span:last-child { border-right: 0; }
.coverage-grid b { display: block; font-size: 24px; }
.coverage-grid small { display: block; margin-top: 3px; color: var(--dim); font-size: 9px; }
.coverage-grid .attention { background: var(--lime); color: var(--ink); }
.coverage-grid .attention small { color: var(--ink); }

.proof-story { height: 235svh; }
.proof-story h2 { max-width: 12ch; }
.proof-story .say { max-width: 38ch; }
.proof-story .story-copy-stack { max-width: 38ch; }
.proof-window {
  background: #15191d;
  color: #ffffff;
  --dim: #9da4ac;
  --line: #30363d;
  --raised: #20252a;
  --barc: #626b74;
}
.proof-scene {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(14px, 2.4vh, 24px);
}
.proof-scene-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  text-transform: uppercase;
}
.proof-scene-head b { color: #ffffff; font-weight: 650; }
.proof-scene-head span { color: var(--dim); text-align: right; }
.proof-primary {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 0;
}
.proof-primary strong {
  color: var(--lime);
  font-size: clamp(68px, 9.3vw, 148px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 0.82;
}
.proof-primary span {
  margin-top: clamp(13px, 2vh, 22px);
  font-size: clamp(17px, 1.7vw, 25px);
  font-weight: 600;
}
.proof-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proof-secondary > span {
  min-width: 0;
  padding: 15px 18px 15px 0;
  border-right: 1px solid var(--line);
}
.proof-secondary > span + span { padding-right: 0; padding-left: 18px; border-right: 0; }
.proof-secondary strong { display: block; color: #ffffff; font-size: clamp(24px, 3vw, 44px); font-weight: 600; line-height: 1; }
.proof-secondary small { display: block; max-width: 24ch; margin-top: 6px; color: var(--dim); font-size: 10px; line-height: 1.35; text-transform: uppercase; }
.proof-source {
  margin: 0;
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  line-height: 1.35;
  text-transform: uppercase;
}
.recruiting-comparison {
  display: grid;
  gap: 13px;
  padding: 4px 0;
}
.recruiting-comparison > span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 12px;
}
.recruiting-comparison small,
.recruiting-comparison b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}
.recruiting-comparison small { color: var(--dim); }
.recruiting-comparison b { color: var(--dim); font-weight: 600; text-align: right; }
.recruiting-comparison .is-highlighted b { color: var(--lime); }
.comparison-track { display: block; height: 9px; background: var(--raised); overflow: hidden; }
.comparison-fill { display: block; height: 100%; background: var(--barc); transform-origin: left center; }
.comparison-fill-2024 { width: 50.64%; }
.comparison-fill-2025 { width: 100%; background: var(--lime); }

.close-panel .product { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .story-copy.is-entering { animation: v2-copy-enter 220ms cubic-bezier(0.2, 0.65, 0.3, 1) both; }
  .scene.is-entering { animation: v2-scene-enter 520ms cubic-bezier(0.22, 0.7, 0.2, 1) both; }
  .scene.is-entering .selected,
  .scene.is-entering .person-row.active,
  .scene.is-entering .acceptance-banner,
  .scene.is-entering .feed-card.loud,
  .scene.is-entering .referral-intake,
  .scene.is-entering .proof-primary strong,
  .scene.is-entering .manager-strip {
    animation: v2-focal-enter 650ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }
  .scene.is-entering .agent-grid > span,
  .scene.is-entering .document-list > span,
  .scene.is-entering .signed-list > span,
  .scene.is-entering .status-track > span {
    animation: v2-row-enter 430ms ease both;
  }
  .scene.is-entering .agent-grid > span:nth-child(2),
  .scene.is-entering .document-list > span:nth-child(2),
  .scene.is-entering .signed-list > span:nth-child(2),
  .scene.is-entering .status-track > span:nth-child(2) { animation-delay: 45ms; }
  .scene.is-entering .agent-grid > span:nth-child(3),
  .scene.is-entering .document-list > span:nth-child(3),
  .scene.is-entering .signed-list > span:nth-child(3),
  .scene.is-entering .status-track > span:nth-child(3) { animation-delay: 90ms; }
  .scene.is-entering .agent-grid > span:nth-child(4),
  .scene.is-entering .document-list > span:nth-child(4),
  .scene.is-entering .signed-list > span:nth-child(4) { animation-delay: 135ms; }
  .scene.is-entering .agent-grid > span:nth-child(5),
  .scene.is-entering .document-list > span:nth-child(5),
  .scene.is-entering .signed-list > span:nth-child(5) { animation-delay: 180ms; }
  .scene.is-entering .bars i,
  .scene.is-entering .executive-grid i,
  .scene.is-entering .market-bar i,
  .scene.is-entering .comparison-fill,
  .scene.is-entering .signing-progress > i {
    animation: v2-bar-grow 700ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
    transform-origin: left bottom;
  }
  .scene.is-entering .bars i {
    animation-name: v2-column-grow;
    transform-origin: center bottom;
  }
  .scene.is-entering .msg { animation: v2-message-enter 520ms cubic-bezier(0.22, 0.7, 0.2, 1) both; }
  .scene.is-entering .msg:nth-child(2) { animation-delay: 130ms; }
  @keyframes v2-scene-enter {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes v2-copy-enter {
    0% { opacity: 0; }
    38% { opacity: 0.42; }
    100% { opacity: 1; }
  }
  @keyframes v2-focal-enter {
    0% { transform: translateY(18px) scale(0.98); }
    100% { transform: translateY(0) scale(1); }
  }
  @keyframes v2-row-enter {
    from { opacity: 0; transform: translateX(22px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes v2-bar-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  @keyframes v2-column-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }
  @keyframes v2-message-enter {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (max-width: 820px) {
  .proof-story { height: 225svh; }
  .proof-story h2 { max-width: 18ch; }
}

@media (max-width: 600px) {
  .hero-panel h1 { font-size: clamp(38px, 10.5vw, 46px); }
  .hero-audience { margin-bottom: 20px; font-size: 10px; }
  .hero-lead { max-width: 38ch; margin-top: 22px; font-size: 14px; line-height: 1.42; }
  .hero-cycle { margin-top: 12px; font-size: 12px; }
  .hero-cycle + .tour-instruction { margin-top: 38px; }
  .story-nav { min-height: 58px; }
  .story-nav button { grid-template-rows: 24px auto; min-height: 54px; }
  .story-nav button.is-active b { transform: scale(1.55); }
  .acceptance-banner { padding: 10px; }
  .acceptance-banner b { font-size: 10.5px; }
  .reply-preview { max-width: 82%; }
  .referral-intake { padding: 10px; }
  .coverage-grid span { padding: 10px; }
  .coverage-grid b { font-size: 18px; }
  .proof-story { height: 238svh; }
  .proof-story .stage { gap: 24px; }
  .proof-story .say { max-width: 44ch; }
  .proof-story .story-copy-stack { max-width: 44ch; }
  .proof-scene { gap: 11px; }
  .proof-scene-head { padding-bottom: 9px; font-size: 9px; }
  .proof-primary strong { font-size: clamp(58px, 19vw, 90px); }
  .proof-primary span { margin-top: 10px; font-size: 15px; }
  .proof-secondary > span { padding: 11px 11px 11px 0; }
  .proof-secondary > span + span { padding-right: 0; padding-left: 11px; }
  .proof-secondary strong { font-size: clamp(22px, 8vw, 34px); }
  .proof-secondary small { margin-top: 4px; font-size: 9px; }
  .proof-source { font-size: 8.5px; }
  .recruiting-comparison { gap: 9px; }
  .recruiting-comparison > span { grid-template-columns: 34px minmax(0, 1fr) 31px; gap: 8px; }
  .comparison-track { height: 7px; }
  #reports .copy { display: block; }
  #reports .story-nav { display: grid; width: 100%; }
}

@media (max-width: 360px) {
  .hero-panel h1 { font-size: 36px; }
  .hero-lead { font-size: 12.5px; }
  .proof-primary strong { font-size: 54px; }
}

@media (max-width: 600px) and (max-height: 700px) {
  .hero-panel h1 { font-size: 34px; }
  .hero-lead { margin-top: 17px; font-size: 12px; line-height: 1.35; }
  .hero-cycle { margin-top: 9px; font-size: 11px; }
  .hero-cycle + .tour-instruction { margin-top: 26px; }
  .close-panel .panel-frame { gap: 12px; padding-top: 22px; padding-bottom: 14px; }
  .close-copy { padding: 4px 0 10px; }
  .close-refrain { margin-bottom: 14px; font-size: 11.5px; }
  .close-head { font-size: 34px; }
  .close-body { margin-top: 16px; font-size: 13px; line-height: 1.38; }
  .close-panel .go { margin-top: 22px; padding: 10px 13px; font-size: 11px; }
}

/* Public contact */

.contact-page { min-height: 100svh; background: var(--black); color: #ffffff; }
.contact-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(46px, 8vh, 96px);
  min-height: 100svh;
  padding: clamp(30px, 4.5vw, 66px) clamp(22px, 3.4vw, 52px) clamp(28px, 4vw, 52px);
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(460px, 1.2fr);
  align-items: start;
  gap: clamp(48px, 8vw, 128px);
  width: min(1180px, 100%);
  margin: auto;
}
.contact-intro { max-width: 540px; }
.contact-kicker {
  margin: 0 0 18px;
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.contact-intro h1 { max-width: 10ch; font-size: clamp(46px, 6vw, 86px); }
.contact-intro > p:last-child {
  max-width: 42ch;
  margin: 28px 0 0;
  color: #9da4ac;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
}
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid #30363d;
  background: #181c20;
}
.contact-field { display: grid; gap: 9px; min-width: 0; }
.contact-field-wide { grid-column: 1 / -1; }
.contact-field label { color: #d9dde1; font-size: 12px; font-weight: 700; }
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #3a424a;
  border-radius: 0;
  outline: 0;
  background: #111416;
  color: #ffffff;
  font: inherit;
  font-size: 16px;
}
.contact-field input,
.contact-field select { padding: 0 14px; }
.contact-field textarea { min-height: 128px; padding: 13px 14px; resize: vertical; line-height: 1.5; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { border-color: var(--lime); outline: 1px solid var(--lime); outline-offset: 0; }
.contact-field select { color-scheme: dark; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-submit {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 0;
  background: var(--lime);
  color: var(--ink);
  cursor: pointer;
  font-weight: 750;
}
.contact-submit:hover { background: #f0f388; }
.contact-note { grid-column: 1 / -1; margin: -8px 0 0; color: #8e969f; font-size: 11px; line-height: 1.45; }
.contact-result {
  max-width: 780px;
  margin: auto;
  padding: clamp(28px, 5vw, 64px) 0;
}
.contact-result h1 { max-width: 11ch; }
.contact-result p { max-width: 40ch; margin: 28px 0 0; color: #9da4ac; font-size: 18px; line-height: 1.55; }
.contact-result .go { margin-top: 36px; }
.contact-page .site-footer { color: #9da4ac; }

@media (max-width: 760px) {
  .contact-shell { gap: 52px; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .contact-intro h1 { font-size: clamp(42px, 13vw, 58px); }
  .contact-form { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .contact-field-wide, .contact-submit, .contact-note { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scene.is-entering,
  .scene.is-entering *,
  .story-copy.is-entering,
  .story-nav b { animation: none !important; transition: none !important; }
}