/* Meet your new team — phone only. Figma 10108:4255 (402-wide frames, 352-wide content).
   On <900px this replaces the Operator / Growth / Receptionist sections with one swipeable card (js/team.js). */
.team { display: none; }
@media (max-width: 899px) {
  .team { display: block; padding: 56px 0; }
  .operator, .growth, .receptionist { display: none; }
}

.team-inner { width: 100%; max-width: calc(400px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.team-eyebrow { margin-bottom: 8px; font-size: 15.96px; color: var(--text-success); } /* Figma 10118:5014 */
.team-title { font-size: 27.58px; color: var(--text-primary); }

/* Agent colours: 0 Operator, 1 Growth, 2 Receptionist. */
.team { --agent-bg: var(--cal-violet); --agent-fg: #2e4ba0; }
.team[data-active="1"] { --agent-bg: var(--bg-brand); --agent-fg: var(--text-success); }
.team[data-active="2"] { --agent-bg: var(--cc-purple); --agent-fg: #613492; }

/* Tabs: grey track, coloured pill slides under the active one. */
.team-tabs { position: relative; display: flex; margin-top: 24px; padding: 4px; border-radius: 100px; background: #f1f1f5; }
.team-tab-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 100px;
  background: var(--agent-bg); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .35s cubic-bezier(.22, .8, .3, 1);
}
.team-tab {
  position: relative; flex: 1 1 0; min-width: 0; padding: 8px 4px; border: 0; background: none; cursor: pointer;
  font-size: 15.96px; color: var(--text-secondary); text-align: center; white-space: nowrap;
}
.team-tab[aria-selected="true"] { color: var(--agent-fg); }
.team-tab:focus-visible { outline: 2px solid var(--agent-fg); outline-offset: -2px; border-radius: 100px; }

/* Swipe track: one panel per agent, snapping. */
.team-track {
  position: relative; display: flex; align-items: stretch; gap: 24px; margin-top: 24px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.team-track::-webkit-scrollbar { display: none; }
.team-panel { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; scroll-snap-align: start; scroll-snap-stop: always; }
.team-copy { flex: 1 0 auto; display: flex; flex-direction: column; gap: 16px; }
.team-kicker { font-size: 22.98px; color: #2e4ba0; }
.team-panel:nth-child(2) .team-kicker { color: var(--text-success); }
.team-panel:nth-child(3) .team-kicker { color: #613492; }
.team-body { font-size: 13.3px; line-height: normal; color: var(--text-primary); }

/* Card: always the full content width, lined up with the text and tabs (Figma 10108:4255; Shane).
   The 352×564 artboard inside is scaled and trimmed by js/team.js (--s scale, --h artboard height, --shift trim,
   --x centring); before JS runs it simply scales to the width. The card clips, so the glows reach its edges. */
.team-card {
  position: relative; overflow: hidden; width: 100%; margin: 25px 0 0; border-radius: 20px; background: #e8e8f2;
  aspect-ratio: 352 / 564;
}
.team-card .scale-box-inner { left: var(--x, 0px); transform: scale(var(--s, 1)); }
.team-card .scale-box-inner > * { margin-top: calc(var(--shift, 0) * -1px); } /* trimmed card: keep chats centred (js/team.js) */
.team-glow { position: absolute; pointer-events: none; }
.team-glow img { position: absolute; display: block; max-width: none; }
.team-glow.g8 { left: -282px; top: 204px; width: 430px; height: 428px; }
.team-glow.g8 img { inset: -32.26% -32.11%; width: 164.22%; height: 164.52%; }
.team-glow.g7 { left: 203.54px; top: -16.02px; width: 213.762px; height: 212.657px; }
.team-glow.g7 img { inset: -64.94% -64.6%; width: 229.2%; height: 229.88%; }

/* Bubbles */
.team-ts { position: absolute; color: var(--text-unavailable); white-space: nowrap; line-height: normal; }
.team-row { position: absolute; display: flex; align-items: flex-end; }
.team-row > img { flex: none; }
.team-them { position: relative; flex: none; background: rgba(255,255,255,0.3); border-radius: var(--r) var(--r) var(--r) 0; }
.team-ask { position: absolute; background: rgba(42,42,42,0.8); border-radius: var(--r) var(--r) 0 var(--r); }
.team-ask p { position: absolute; color: var(--text-selected); white-space: nowrap; }
.team-tag { display: flex; align-items: center; color: var(--text-success); white-space: nowrap; }
.team-tag img { flex: none; }
.team-lines { display: flex; flex-direction: column; align-items: flex-start; color: var(--text-secondary); white-space: nowrap; }
.team-lines strong { font-weight: 600; color: var(--text-primary); }

/* Operator — a bottom-anchored thread, like the phone hero film (Shane): the six messages stack as a chat 48px above
   the card's bottom edge; js/team.js reveals them one by one and slides the thread up, so on shorter cards the oldest
   leave under the top fade. Without JS / with reduced motion the whole thread just shows, bottom-anchored. */
.team-thread { position: absolute; left: 0; bottom: 48px; width: 352px; display: flex; flex-direction: column; }
.team-thread > .team-ask, .team-thread > .team-row { position: relative; left: auto; top: auto; flex: none; }
.team-thread > .team-ask { align-self: flex-end; margin-right: 24.47px; }
.team-thread > .team-row { align-self: flex-start; margin-left: 24px; margin-top: 5.5px; }
.team-thread > .team-row.t-op2 { margin-left: 25px; }
.team-thread > .team-row + .team-ask { margin-top: 45px; }
.team-thread-anim .team-thread > [data-msg]:not(.is-in) { display: none; }
.team-thread-anim .team-thread > [data-msg].is-in { animation: team-msg-in 1.365s cubic-bezier(.16, 1, .3, 1) both; } /* hero E_IN, 30% slower */
@keyframes team-msg-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
/* Top fade: a masked copy of the card background (with its glows) over the top 44px, as on the hero film. */
.team-card .scale-box-inner > .team-fade {
  position: absolute; z-index: 2; left: 0; top: 0; width: 352px; height: 44px; margin-top: 0; overflow: hidden; pointer-events: none;
  background: #e8e8f2;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
}
.team-fade .team-glow { margin-top: calc(var(--shift, 0) * -1px); }
@media (prefers-reduced-motion: reduce) { .team-thread-anim .team-thread > [data-msg].is-in { animation: none; } }

/* Operator 1 — price */
.t-op1-ask { --r: 8.325px; left: 82.09px; top: 50px; width: 245.435px; height: 34.226px; }
.t-op1-ask p { left: 7.8px; top: 5.4px; font-size: 11.1px; line-height: 15.263px; }
.t-op1-ask .team-ts { left: 220.67px; bottom: 4.41px; font-size: 8.33px; letter-spacing: .1666px; }
.t-op1 { left: 24px; top: 89.63px; gap: 2.362px; }
.t-op1 > img { width: 26.547px; height: 26.547px; }
.t-op1 .team-them { --r: 8.325px; width: 257.138px; height: 77.539px; padding: 8.56px 0 0 8.57px; }
.t-op1 .team-tag { gap: 2.702px; font-size: 11.1px; line-height: 15.263px; }
.t-op1 .team-tag img { width: 12.61px; height: 12.61px; }
.t-op1 .team-lines { gap: 3.603px; margin-top: 5.404px; font-size: 11.1px; line-height: 15.263px; }
.t-op1 .team-ts { right: 3.84px; bottom: 3.88px; font-size: 8.33px; letter-spacing: .1666px; }

/* Operator 2 — report */
.t-op2-ask { --r: 9.032px; left: 155.87px; top: 212px; width: 171.133px; height: 37.39px; }
.t-op2-ask p { left: 7px; top: 5.75px; font-size: 12.043px; line-height: 16.559px; }
.t-op2-ask .team-ts { left: 144.98px; bottom: 3.94px; font-size: 9.03px; letter-spacing: .1806px; }
.t-op2 { left: 25px; top: 255px; gap: 2.563px; }
.t-op2 > img { width: 28.803px; height: 28.803px; }
.t-op2 .team-them { --r: 9.032px; width: 257.418px; height: 84.128px; padding: 9.28px 0 0 9.57px; }
.t-op2 .team-tag { gap: 2.932px; font-size: 12.043px; line-height: 16.559px; }
.t-op2 .team-tag img { width: 13.683px; height: 13.683px; }
.t-op2 .team-lines { gap: 3.909px; margin-top: 5.863px; font-size: 12.043px; line-height: 16.559px; }
.t-op2 .team-ts { right: 4.55px; bottom: 4.54px; font-size: 9.03px; letter-spacing: .1806px; }

/* Operator 3 — roster */
.t-op3-ask { --r: 9.345px; left: 89.47px; top: 384px; width: 238.062px; height: 38.685px; }
.t-op3-ask p { left: 7.8px; top: 6.06px; font-size: 12.46px; line-height: 17.133px; }
.t-op3-ask .team-ts { left: 208.77px; bottom: 3.88px; font-size: 9.35px; letter-spacing: .187px; }
.t-op3 { left: 24px; top: 428.49px; gap: 2.652px; }
.t-op3 > img { width: 29.8px; height: 29.8px; }
.t-op3 .team-them { --r: 9.345px; width: 251.453px; height: 87.041px; padding: 9.6px 0 0 9.62px; }
.t-op3 .team-tag { gap: 3.033px; font-size: 12.46px; line-height: 17.133px; }
.t-op3 .team-tag img { width: 14.157px; height: 14.157px; }
.t-op3 .team-lines { gap: 4.044px; margin-top: 6.066px; font-size: 12.46px; line-height: 17.133px; }
.t-op3 .team-ts { right: 3.62px; bottom: 4.51px; font-size: 9.35px; letter-spacing: .187px; }

/* Growth — campaign card + "Go ahead" + ✅ */
.t-gr { left: 24px; top: 123px; gap: 2.503px; }
.t-gr > img { width: 28.121px; height: 28.121px; }
.t-gr .team-them {
  --r: 8.819px; width: 242.838px; height: 262.683px; padding: 11.49px 0;
  display: flex; flex-direction: column; align-items: center; gap: 6.104px;
}
.team-campaign {
  width: 221.907px; display: flex; flex-direction: column; align-items: center; gap: 15.667px; padding: 15.667px 13.286px;
  background: rgba(250,250,250,0.3); border: 0.359px solid #fff; border-radius: 7.181px;
}
.team-campaign-copy { display: flex; flex-direction: column; align-items: center; gap: 8.977px; text-align: center; }
.team-campaign-title { font-size: 9.742px; color: #b94ab6; }
.team-campaign-body { width: 194.617px; font-size: 9.4px; color: var(--text-primary); }
.team-campaign-btn {
  padding: 5.905px; border: 0.522px solid #fff; border-radius: 999px; background: rgba(255,255,255,0.2);
  font-size: 8.356px; color: var(--text-primary); white-space: nowrap;
}
.t-gr .team-text { width: 100%; padding: 5.879px 14.698px 5.879px 8.819px; font-size: 11.758px; line-height: 16.167px; color: var(--text-primary); }
.t-gr .team-ts { right: 2.51px; bottom: 3.66px; font-size: 8.82px; letter-spacing: .1764px; }
.t-gr-ask { --r: 9.654px; left: 231px; top: 392px; width: 96.613px; height: 31.856px; background: rgba(42,42,42,0.9); }
.t-gr-ask p { left: 6.8px; top: 5.74px; font-size: 12.872px; line-height: 17.699px; }
.t-gr-ask .team-ts { left: 69.46px; bottom: 1.55px; font-size: 9.65px; letter-spacing: .193px; }
.team-react {
  position: absolute; left: 302.2px; top: 420.45px; padding: 3.482px 5.919px; border-radius: 10.445px;
  background: rgba(255,255,255,0.1); font-size: 10.076px; line-height: 11.549px;
}

/* Scissors icon — 47px version of .growth-icon (Figma 10108:3923). */
.team-scissors { position: relative; flex: none; width: 47.001px; height: 47.001px; border-radius: 10.445px; background: rgba(255,255,255,0.2); }
.team-scissors .piece { position: absolute; display: flex; align-items: center; justify-content: center; }
.team-scissors .piece > div { position: relative; flex: none; transform: rotate(89.94deg); }
.team-scissors img { position: absolute; display: block; width: 100%; height: 100%; max-width: none; }
.team-scissors .p-vector { left: 14.41px; top: 23.41px; width: 9.135px; height: 3.894px; }
.team-scissors .p-vector > div { width: 3.885px; height: 9.131px; }
.team-scissors .p-vector img { inset: 0; }
.team-scissors .p-group { left: 3.13px; top: 3.13px; width: 40.335px; height: 40.335px; }
.team-scissors .p-group > div { width: 40.293px; height: 40.293px; }
.team-scissors .p-group .frame { position: absolute; inset: 7.5% 22.5% 6% 22.5%; }
.team-scissors .p-group img { left: -1.14%; top: -0.74%; width: 102.3%; height: 101.47%; }
.team-scissors .p-ring { width: 5.526px; height: 5.526px; }
.team-scissors .p-ring > div { width: 5.521px; height: 5.521px; }
.team-scissors .p-ring img { inset: 0; }
.team-scissors .p-ring.r1 { left: 8.04px; top: 14.82px; }
.team-scissors .p-ring.r2 { left: 8.12px; top: 26.56px; }
.team-scissors .p-line { left: 23.84px; top: 21.69px; width: 6.313px; height: 1.85px; }
.team-scissors .p-line > div { width: 6.578px; height: 0; transform: rotate(16.34deg); }
.team-scissors .p-line img { left: 0; top: -0.28px; width: 100%; height: 0.28px; }

/* Receptionist — stats card + message */
.t-rc1 { left: 24px; top: 131px; gap: 3.663px; }
.t-rc1 > img { width: 41.148px; height: 41.148px; }
.t-rc1 .team-them { --r: 10.309px; width: 258.416px; height: 230.261px; padding: 12.027px; display: flex; flex-direction: column; gap: 12.027px; }
.team-rc-head { display: flex; align-items: center; justify-content: space-between; }
.team-rc-id { display: flex; align-items: center; gap: 7.517px; }
.team-rc-icon {
  display: flex; padding: 7.517px; border-radius: 999px;
  background: rgba(230,245,244,0.6); border: 0.659px solid rgba(7,117,108,0.2);
}
.team-rc-icon img { width: 18.04px; height: 18.04px; }
.team-rc-id .name { font-size: 12.027px; color: var(--text-primary); }
.team-rc-id .sub { margin-top: 1.977px; font-size: 10.02px; color: var(--text-secondary); }
.team-rc-pill {
  padding: 4.51px 7.517px; border-radius: 999px; background: var(--bg-brand); border: 0.659px solid rgba(7,117,108,0.2);
  font-size: 10.02px; color: var(--text-success);
}
.team-rc-pair { display: flex; gap: 12.027px; }
.team-rc-stat {
  width: 109.745px; display: flex; flex-direction: column; gap: 6.013px; padding: 12.027px;
  background: rgba(255,255,255,0.2); border: 0.752px solid var(--border-default); border-radius: 15.034px;
}
.team-rc-stat.is-wide { width: 100%; }
.team-rc-stat .label { font-size: 10.02px; color: var(--text-secondary); }
.team-rc-stat .value { font-size: 14.432px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.team-rc-stat.is-wide .value { font-size: 24.941px; }
.t-rc1 .team-ts { right: 7.18px; bottom: 7.81px; font-size: 10.31px; letter-spacing: .2062px; }
.t-rc2 { left: 24.77px; top: 371.67px; gap: 2.925px; }
.t-rc2 > img { width: 41.146px; height: 41.146px; }
.t-rc2 .team-them { --r: 9.354px; width: 257.814px; height: 60.721px; }
.t-rc2 .team-text { white-space: nowrap; padding: 6.236px 15.59px 6.236px 9.354px; font-size: 12.472px; line-height: 17.149px; color: var(--text-primary); }
.t-rc2 .team-ts { right: 1.62px; bottom: 3.5px; font-size: 9.35px; letter-spacing: .187px; }

/* Short phones: tighter gaps so the whole block fits one screen (js/team.js shrinks the card for the rest). */
@media (max-width: 899px) and (max-height: 760px) {
  .team-tabs, .team-track { margin-top: 16px; }
  .team-copy { gap: 8px; }
  .team-card { margin-top: 16px; }
}

/* Dots: active one is a 20px pill in the agent colour. */
.team-dots { display: flex; justify-content: center; margin-top: 10px; }
.team-dot { padding: 8px 3px; border: 0; background: none; cursor: pointer; }
.team-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--border-default); }
.team-dot[aria-current="true"]::before { width: 20px; background: var(--agent-fg); }