/* Лендинг стартового экрана карьеры (includes/career_landing.html). Отдельного фона у блоков нет, карточки — на сером фоне страницы. */
.career-land { display: grid; gap: 32px; margin-top: 32px; color: var(--text-color); font-family: var(--font-primary); font-weight: var(--fw-regular); }
.career-land-block, .career-land-pro { display: block; padding: 0; border-radius: 0; background: none; }
.career-land-title { margin: 0; font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--fw-semibold); letter-spacing: var(--ls-24); }
.career-land-sub { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16); }
.career-land-check { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #FFFFFF; background: var(--accent-color); }
.career-land-check svg { display: block; width: 70%; height: 70%; }

.career-land-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.career-land-tile { display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 18px; border-radius: 24px; background: var(--surface-primary); overflow: hidden; }
.career-land-tile > strong { margin: 14px 12px 0; font-size: var(--fs-18); line-height: var(--lh-18); letter-spacing: var(--ls-18); font-weight: var(--fw-medium); }
.career-land-tile > p { margin: 2px 12px 0; font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); color: var(--text-muted); }
.career-land-stage { display: flex; align-items: center; justify-content: center; height: 208px; border-radius: 18px; background: var(--surface-secondary); overflow: hidden; }

.career-land-route { display: block; max-width: calc(100% - 32px); height: auto; }
.career-land-route path { stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.career-land-route .is-other { stroke: color-mix(in srgb, var(--text-muted) 28%, transparent); }
.career-land-route .is-chosen { stroke: var(--accent-color); }
.career-land-route .is-start, .career-land-route .is-goal { fill: var(--accent-color); }
.career-land-route .is-end { fill: var(--surface-primary); stroke: color-mix(in srgb, var(--text-muted) 40%, transparent); stroke-width: 3; }
.career-land-route .is-mark { stroke: #FFFFFF; stroke-width: 2; }

.career-land-plan { display: grid; gap: 12px; width: 200px; padding: 18px; border-radius: 16px; background: var(--surface-primary); }
.career-land-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 4px; }
.career-land-progress i { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 25%, transparent); }
.career-land-progress i:first-child { background: var(--accent-color); }
.career-land-row { display: flex; align-items: center; gap: 10px; }
.career-land-row > span { flex: none; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--text-muted) 18%, transparent); }
.career-land-row > span.career-land-check { background: var(--accent-color); }
.career-land-row > i { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 22%, transparent); }
.career-land-row.is-done > i { background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.career-land-row.is-now > span { background: color-mix(in srgb, var(--accent-color) 22%, transparent); }
.career-land-row.is-now > i { background: color-mix(in srgb, var(--text-color) 70%, transparent); }

.career-land-leaf { width: 104px; border-radius: 20px; overflow: hidden; text-align: center; background: var(--surface-primary); }
.career-land-leaf b { display: block; padding: 5px 0; font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); font-weight: var(--fw-semibold); color: #FFFFFF; background: var(--accent-color); }
.career-land-leaf i { display: block; padding: 13px 0; font-style: normal; font-size: var(--fs-40); line-height: var(--lh-40); letter-spacing: var(--ls-40); font-weight: var(--fw-semibold); }

.career-land-doc { display: grid; gap: 12px; width: calc(100% - 64px); max-width: 300px; padding: 22px 20px; border-radius: 18px; background: var(--surface-primary); }
.career-land-doc i { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text-muted) 22%, transparent); }
.career-land-doc i.is-new { background: var(--accent-color); }

.career-land-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.career-land-feats { display: grid; grid-auto-rows: 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; }
.career-land-feats li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 20px; background: var(--surface-primary); font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16); }
.career-land-feats svg { flex: none; display: block; }

.career-land-chat { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: var(--surface-primary); overflow: hidden; }
.career-land-chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); font-weight: var(--fw-medium); }
.career-land-chat-head span { margin-left: auto; font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--ls-12); font-weight: var(--fw-regular); color: var(--text-muted); }
.career-land-msg { align-self: flex-start; max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); background: var(--surface-secondary); }
.career-land-msg--user { align-self: flex-end; color: #FFFFFF; background: var(--accent-color); }
.career-land-slot { display: grid; }
.career-land-slot > * { grid-area: 1 / 1; }
.career-land-dots { align-self: center; justify-self: start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--surface-secondary); }
.career-land-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: career-land-dot 1s infinite; }
.career-land-dots i:nth-child(2) { animation-delay: .15s; }
.career-land-dots i:nth-child(3) { animation-delay: .3s; }
.career-land-closed { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--surface-secondary); font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); }
.career-land-closed small { display: block; font-size: var(--fs-12); line-height: var(--lh-12); letter-spacing: var(--ls-12); color: var(--text-muted); }
.career-land-vacancy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface-secondary); font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); }
.career-land-vacancy b { font-weight: var(--fw-semibold); }
.career-land-track { grid-column: 1 / -1; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--text-muted) 22%, transparent); }
.career-land-track i { display: block; height: 100%; border-radius: 2px; background: var(--accent-color); transform-origin: left; }

/* Анимация чата: один цикл на все реплики. Вне экрана ставится на паузу (.is-paused в profile_career.js). */
.career-land-chat [data-a] { animation-duration: 13s; animation-iteration-count: infinite; animation-timing-function: ease-out; animation-fill-mode: both; }
.career-land-chat.is-paused [data-a], .career-land-chat.is-paused .career-land-dots i { animation-play-state: paused; }
.career-land-chat [data-a=u] { animation-name: career-land-u; }
.career-land-chat [data-a=d] { animation-name: career-land-d; }
.career-land-chat [data-a=c] { animation-name: career-land-c; }
.career-land-chat [data-a=b] { animation-name: career-land-b; }
.career-land-chat [data-a=v1] { animation-name: career-land-v1; }
.career-land-chat [data-a=v2] { animation-name: career-land-v2; }
.career-land-chat [data-a=f1] { animation-name: career-land-f1; }
.career-land-chat [data-a=f2] { animation-name: career-land-f2; }
@keyframes career-land-u { 0%, 3% { opacity: 0; transform: translateY(10px); } 6%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes career-land-d { 0%, 10% { opacity: 0; } 12%, 24% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes career-land-c { 0%, 25% { opacity: 0; transform: scale(.96); } 29%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes career-land-b { 0%, 36% { opacity: 0; transform: translateY(10px); } 40%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes career-land-v1 { 0%, 46% { opacity: 0; transform: translateY(10px); } 50%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes career-land-v2 { 0%, 52% { opacity: 0; transform: translateY(10px); } 56%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes career-land-f1 { 0%, 50% { transform: scaleX(0); } 60%, 100% { transform: scaleX(.82); } }
@keyframes career-land-f2 { 0%, 56% { transform: scaleX(0); } 66%, 100% { transform: scaleX(.76); } }
@keyframes career-land-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Иллюстрации карточек: один раз, когда карточка появилась на экране (.is-waiting снимает profile_career.js). */
@media (prefers-reduced-motion: no-preference) {
  .career-land-route .is-start { transform-box: fill-box; transform-origin: center; animation: career-land-pop .3s ease-out both; }
  .career-land-route .is-other { stroke-dasharray: 1 2; animation: career-land-draw .6s .2s ease-in-out both; }
  .career-land-route .is-other:nth-child(2) { animation-delay: .28s; }
  .career-land-route .is-end { transform-box: fill-box; transform-origin: center; animation: career-land-pop .3s .75s ease-out both; }
  .career-land-route .is-end:nth-of-type(3) { animation-delay: .83s; }
  .career-land-route .is-chosen { stroke-dasharray: 1 2; animation: career-land-draw .7s .3s ease-in-out both; }
  .career-land-route .is-goal { transform-box: fill-box; transform-origin: center; animation: career-land-pop .35s .9s ease-out both; }
  .career-land-route .is-mark { stroke-dasharray: 1 2; animation: career-land-mark .25s 1.15s ease-out both; }

  .career-land-plan, .career-land-doc { animation: career-land-rise .45s ease-out both; }
  .career-land-progress i:first-child { transform-origin: left; animation: career-land-grow .5s .2s ease-out both; }
  .career-land-row > i { transform-origin: left; animation: career-land-grow .45s ease-out both; }
  .career-land-row > span { animation: career-land-pop .3s ease-out both; }
  .career-land-row:nth-child(2) > i { animation-delay: .3s; }
  .career-land-row:nth-child(3) > i, .career-land-row:nth-child(3) > span { animation-delay: .45s; }
  .career-land-row:nth-child(4) > i, .career-land-row:nth-child(4) > span { animation-delay: .6s; }
  .career-land-row:nth-child(2) > span { animation-delay: .8s; }

  .career-land-leaf { animation: career-land-rise .45s ease-out both; }
  .career-land-leaf i { animation: career-land-pop .35s .4s ease-out both; }

  .career-land-doc i { transform-origin: left; animation: career-land-grow .45s .25s ease-out both; }
  .career-land-doc i:nth-child(3) { animation-delay: .4s; }
  .career-land-doc i.is-new { animation-duration: .6s; animation-delay: .7s; }

  .career-land-tile.is-waiting * { animation-play-state: paused !important; }
}
@keyframes career-land-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { transform: none; } }
@keyframes career-land-draw { from { stroke-dashoffset: 1; } }
@keyframes career-land-mark { 0% { opacity: 0; stroke-dashoffset: 1; } 1% { opacity: 1; } }
@keyframes career-land-grow { from { transform: scaleX(0); } }
@keyframes career-land-rise { from { opacity: 0; transform: translateY(14px); } }

/* Плашка PRO здесь белая и с общей серой кнопкой: выше на странице уже есть акцентный блок. */
.career-land-pro .profile-hairik { margin-top: 0; color: var(--text-color); background: var(--surface-primary); }
.career-land-pro .profile-hairik::before { display: none; }
.career-land-pro .profile-hairik-lead { color: var(--text-muted); }
.career-land-pro .btn { flex: none; }
.career-land-memory { display: block; margin-top: 16px; }

@media (max-width: 1279px) {
  .career-land { gap: 24px; margin-top: 24px; }
  .career-land-title { font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: var(--ls-20); }
  .career-land-sub { font-size: var(--fs-14); line-height: var(--lh-14); letter-spacing: var(--ls-14); }
  .career-land-bento, .career-land-pair { grid-template-columns: minmax(0, 1fr); }
  .career-land-stage { height: 176px; }
  .career-land-doc { width: calc(100% - 48px); }
  .career-land-feats li { padding: 14px 16px; border-radius: 18px; }
  .career-land-chat { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .career-land-chat [data-a], .career-land-dots i { animation: none; }
  .career-land-dots { display: none; }
  .career-land-chat [data-a=f1] { transform: scaleX(.82); }
  .career-land-chat [data-a=f2] { transform: scaleX(.76); }
}