@font-face {
  font-family: "Graphik";
  src: url("./assets/style-pack/fonts/Graphik-Regular-Web.woff2") format("woff2"),
    url("./assets/style-pack/fonts/Graphik-Regular-Web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Graphik";
  src: url("./assets/style-pack/fonts/Graphik-Semibold-Web.woff2") format("woff2"),
    url("./assets/style-pack/fonts/Graphik-Semibold-Web.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("./assets/style-pack/fonts/Graphik-Bold-Web.woff2") format("woff2"),
    url("./assets/style-pack/fonts/Graphik-Bold-Web.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-dark: #000000;
  --surface: #f5f5f5;
  --surface-dark: #202020;
  --text: #000000;
  --text-on-dark: #ffffff;
  --primary: #3d3bff;
  --primary-hover: #302ee6;
  --mint: #b8e8b6;
  --peach: #ffc38e;
  --lime: #d8ff28;
  --pink: #f7c8ff;
  --lavender: #968bab;
  --gray: #c4c4c4;
  --field-border: #d9d9d9;
  --font: "Graphik", "Segoe UI", sans-serif;
  --container: 1160px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --motion: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app {
  min-height: 100vh;
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.shell.fitting-shell {
  background:
    linear-gradient(135deg, rgba(61, 59, 255, 0.08), rgba(184, 232, 182, 0.08)),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat;
}

.fitting-shell .topbar {
  background: transparent;
}

.fitting-shell .fitting-stage .stage-main,
.fitting-shell .fitting-stage .stage-side {
  background: rgba(250, 250, 252, 0.90);
  box-shadow: 0 18px 50px rgba(42, 36, 128, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
}

.simple-header {
  background: transparent;
}

.simple-header-inner {
  width: min(var(--container), calc(100% - 32px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-inner {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  width: 118px;
  height: auto;
  display: block;
}

.brand span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
}

.top-progress {
  display: grid;
  gap: 8px;
  min-width: 160px;
}

.top-progress-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}

.progress-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  transition: width var(--motion);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-pill {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  color: var(--text-on-dark);
  background: var(--bg-dark);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.reset-button {
  min-height: 38px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text);
  background: var(--surface);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
}

.screen {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 72px;
}

.hero-screen {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  gap: 32px;
  align-items: stretch;
  min-height: calc(100vh - 76px);
  padding-top: 38px;
}

.landing-screen {
  min-height: calc(100vh - 76px);
  display: grid;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 40px;
}

.landing-hero {
  min-height: min(680px, calc(100vh - 132px));
  display: grid;
  align-content: center;
  gap: 26px;
  padding: clamp(28px, 6vw, 72px);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.78)),
    url("./assets/style-pack/assets/gradients/01_Gradient.webp") center / cover no-repeat,
    var(--bg-dark);
}

.landing-hero .eyebrow {
  background: var(--lime);
  color: var(--text);
}

.landing-hero h1 {
  max-width: 11ch;
  color: var(--text-on-dark);
  font-size: clamp(52px, 8vw, 104px);
}

.landing-hero .lead {
  max-width: 760px;
  color: var(--text-on-dark);
}

.landing-value {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 880px;
}

.landing-value span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 16px;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  font-weight: 700;
}

.hero-copy {
  display: grid;
  align-content: center;
  gap: 24px;
}

.eyebrow {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  letter-spacing: 0;
}

h1 {
  max-width: 12ch;
  font-size: clamp(42px, 7vw, 86px);
  line-height: 0.96;
  font-weight: 700;
}

h2 {
  max-width: 15ch;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  font-weight: 700;
}

h3 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
  font-weight: 600;
}

.lead {
  max-width: 720px;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
}

.body-copy {
  max-width: 760px;
  font-size: 18px;
}

.muted {
  color: var(--text);
  opacity: 1;
}

.hero-actions,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.button {
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--motion), background var(--motion), color var(--motion);
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  color: var(--text-on-dark);
  background: var(--primary);
}

.button.primary:hover {
  background: var(--primary-hover);
}

.button.secondary {
  color: var(--text);
  background: var(--surface);
}

.button.dark {
  color: var(--text-on-dark);
  background: var(--bg-dark);
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.landing-proof {
  position: relative;
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 560px;
  padding: 24px;
  border-radius: var(--radius-lg);
  color: var(--text);
  background: var(--surface);
  overflow: hidden;
}

.landing-proof::after {
  content: "";
  position: absolute;
  inset: auto 24px 24px auto;
  width: 164px;
  height: 164px;
  border-radius: 50%;
  background: var(--lime);
}

.landing-proof > * {
  position: relative;
  z-index: 1;
}

.proof-card {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 4vw, 42px);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.proof-card span {
  font-size: 14px;
  font-weight: 700;
}

.proof-card strong {
  max-width: 16ch;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  font-weight: 700;
}

.dark-proof {
  color: var(--text-on-dark);
  background: var(--bg-dark);
}

.proof-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.proof-grid span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 16px;
  background: var(--bg);
  font-size: 14px;
  font-weight: 700;
}

.landing-proof p {
  max-width: 520px;
  font-size: 16px;
  font-weight: 600;
}

.hero-visual {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  min-height: 620px;
  padding: 24px;
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.78)),
    url("./assets/style-pack/assets/gradients/01_Gradient.webp") center / cover no-repeat,
    var(--bg-dark);
  overflow: hidden;
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: auto 24px 24px auto;
  width: 164px;
  height: 164px;
  border-radius: 50%;
  background: var(--lime);
}

.hero-visual > * {
  position: relative;
  z-index: 1;
}

.day-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
}

.workspace-card {
  align-self: center;
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.72);
}

.message-line {
  min-height: 44px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
}

.message-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--text-on-dark);
}

.message-text {
  display: grid;
  gap: 8px;
}

.message-text i {
  display: block;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--text-on-dark);
}

.message-text i:nth-child(2) {
  width: 72%;
}

.hero-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hero-stat {
  min-height: 96px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.92);
  color: var(--text);
}

.hero-stat b {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.hero-stat span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}

.stage {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(330px, 0.56fr);
  gap: 32px;
  align-items: start;
}

.course-lead-stage,
.completion-stage {
  width: min(1040px, calc(100% - 32px));
  grid-template-columns: 1fr;
}

.prep-screen {
  min-height: calc(100vh - 76px);
  display: grid;
  align-items: center;
}

.prep-main {
  width: min(860px, 100%);
  min-height: 0;
  margin: 0 auto;
  display: grid;
  align-content: center;
  gap: 26px;
  padding: clamp(24px, 5vw, 56px);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.prep-main .screen-title h2 {
  max-width: 820px;
}

.prep-main .choice-grid {
  gap: 10px;
}

.barrier-screen {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 76px);
  padding: 0;
  align-items: stretch;
  background:
    radial-gradient(circle at 82% 20%, rgba(216,255,40,0.72), transparent 24%),
    linear-gradient(135deg, #dff6ff 0%, #8dd8ff 48%, #4ca8ff 100%);
  overflow: hidden;
}

.barrier-screen::before {
  content: "";
  position: absolute;
  right: clamp(230px, 30vw, 430px);
  top: clamp(72px, 11vh, 132px);
  width: clamp(460px, 44vw, 700px);
  aspect-ratio: 1;
  background: url("./картинка.png") center / contain no-repeat;
  z-index: 1;
  opacity: 0.82;
  filter: saturate(1.18) drop-shadow(0 20px 46px rgba(20, 78, 130, 0.12));
  mix-blend-mode: normal;
  transform-origin: 50% 52%;
  animation: barrierFloat 12s ease-in-out infinite;
  pointer-events: none;
}

.barrier-main {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 56px));
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(34px, 6vw, 82px) 0;
}

.barrier-copy {
  display: grid;
  gap: 26px;
  align-content: center;
}

.barrier-copy .eyebrow {
  background: var(--text-on-dark);
}

.barrier-copy .screen-title {
  gap: 18px;
}

.barrier-copy h2 {
  max-width: 12ch;
  font-size: clamp(48px, 6.8vw, 92px);
  line-height: 0.94;
}

.barrier-copy .body-copy {
  max-width: 620px;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.2;
}

.barrier-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 680px;
}

.barrier-points span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 16px;
  color: var(--text);
  background: rgba(255,255,255,0.82);
  font-size: 14px;
  font-weight: 700;
}

.barrier-visual {
  position: relative;
  min-height: min(680px, calc(100vh - 156px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  padding: clamp(20px, 3vw, 34px);
  border-radius: var(--radius-lg);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76)),
    url("./assets/style-pack/assets/gradients/06_Gradient.webp") center / cover no-repeat;
  box-shadow: 0 24px 70px rgba(12, 74, 130, 0.18);
  overflow: hidden;
}

.barrier-visual::before {
  content: "";
  position: absolute;
  inset: 11% auto auto -38px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: var(--pink);
}

.barrier-visual::after {
  content: "";
  position: absolute;
  inset: auto 28px 132px auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--lime);
}

.barrier-visual > * {
  position: relative;
  z-index: 1;
}

.workday-visual-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  font-weight: 700;
}

.workday-visual-header span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 14px;
  color: var(--text-on-dark);
  background: var(--bg-dark);
  font-size: 14px;
}

.workday-visual-header b {
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1;
}

.workday-stack {
  align-self: center;
  display: grid;
  gap: 12px;
}

.workday-row {
  min-height: 82px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 26px rgba(20, 78, 130, 0.10);
}

.workday-row span {
  font-size: 15px;
  font-weight: 700;
}

.workday-row strong {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
}

.workday-row em {
  justify-self: end;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 12px;
  color: var(--text);
  background: var(--mint);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.ai-delegate-panel {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  background: var(--bg-dark);
}

.ai-core {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  background: var(--lime);
  font-size: 28px;
  font-weight: 700;
}

.ai-delegate-panel b {
  display: block;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1;
}

.ai-delegate-panel p {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
}

@keyframes barrierFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }

  50% {
    transform: translate3d(-22px, 18px, 0) rotate(4deg) scale(1.04);
  }
}

.prep-note {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  background: var(--bg-dark);
  font-size: 17px;
  font-weight: 600;
}

.stage-main,
.stage-side,
.panel,
.result-panel,
.task-surface {
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.stage-main {
  min-height: 620px;
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  align-content: start;
  gap: 26px;
}

.stage-side {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 18px;
  padding: 24px;
}

.screen-title {
  display: grid;
  gap: 16px;
}

.screen-title h2 {
  max-width: 760px;
}

.screen-title .body-copy {
  font-size: 19px;
}

.choice-grid {
  display: grid;
  gap: 12px;
}

.choice-card {
  width: 100%;
  min-height: 74px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
  transition: border-color var(--motion), transform var(--motion), background var(--motion);
}

.choice-card:hover {
  border-color: var(--text);
  transform: translateY(-1px);
}

.choice-card.is-selected {
  border-color: transparent;
}

.choice-card.is-selected:hover,
.choice-card:focus-visible {
  border-color: var(--text);
}

.choice-card.is-correct {
  background: var(--mint);
}

.choice-card.is-wrong {
  background: var(--peach);
}

.choice-card--no-action {
  grid-template-columns: 22px 1fr;
}

.choice-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-items: center;
}

.choice-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform var(--motion);
}

.choice-card.is-selected .choice-radio::after,
.choice-card.is-correct .choice-radio::after,
.choice-card.is-wrong .choice-radio::after {
  transform: scale(1);
}

.choice-copy {
  display: grid;
  gap: 4px;
}

.choice-copy strong {
  font-size: 17px;
  font-weight: 600;
}

.choice-copy span {
  font-size: 14px;
}

.choice-meta {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: start;
}

.timeline-time {
  font-size: 14px;
  font-weight: 700;
}

.timeline-body {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--bg);
}

.timeline-row.is-active .timeline-time {
  color: var(--primary);
}

.timeline-row.is-done .timeline-body {
  background: var(--mint);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.timeline-body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.timeline-body span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

.wins {
  display: grid;
  gap: 10px;
}

.wins h3,
.mini-title {
  font-size: 20px;
  font-weight: 700;
}

.win-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.win-list li {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.win-list li::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text);
}

.metric-panel {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  background: var(--bg-dark);
}

.metric-panel b {
  font-size: 34px;
  line-height: 1;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field-block {
  display: grid;
  gap: 8px;
}

.field-block.full {
  grid-column: 1 / -1;
}

.field-block label {
  font-size: 14px;
  font-weight: 700;
}

.field,
.textarea {
  width: 100%;
  border: 2px solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  padding: 16px 18px;
  outline: none;
  transition: border-color var(--motion);
}

.textarea {
  min-height: 118px;
  resize: vertical;
}

.field:focus,
.textarea:focus {
  border-color: var(--text);
}

.field::placeholder,
.textarea::placeholder {
  color: #8d8d8d;
}

.form-note {
  font-size: 14px;
  font-weight: 600;
}

.error {
  color: var(--text);
  background: var(--peach);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
}

.task-surface {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: var(--bg);
}

.chat-box,
.notes-box,
.table-box,
.ai-answer {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.chat-message {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.chat-message b,
.note-line b {
  font-size: 13px;
}

.chat-message span,
.note-line span,
.ai-answer span {
  font-size: 15px;
}

.result-box {
  display: none;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--mint);
}

.result-box.is-visible {
  display: grid;
}

.result-box ul,
.course-list,
.check-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.result-box li,
.course-list li,
.check-list li {
  position: relative;
  padding-left: 24px;
}

.result-box li::before,
.course-list li::before,
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text);
}

.table-grid {
  min-width: 680px;
  display: grid;
  gap: 8px;
}

.table-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.table-row.head {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-weight: 700;
}

.table-row.is-flagged {
  background: var(--peach);
}

.click-fragment {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 4px 7px;
  font-weight: 600;
  text-align: left;
}

.click-fragment.is-selected {
  background: var(--peach);
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.risk-zone {
  min-height: 168px;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.risk-zone b {
  font-size: 15px;
}

.risk-item {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg);
  font-size: 14px;
  font-weight: 600;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.comparison-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.comparison-card.dark {
  color: var(--text-on-dark);
  background: var(--bg-dark);
}

.comparison-card h3 {
  font-size: 26px;
}

.comparison-card ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.comparison-card li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
}

.personal-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--lime);
}

.start-brief {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: stretch;
}

.start-brief-card {
  display: grid;
  align-content: space-between;
  gap: 24px;
  min-height: 280px;
  padding: 24px;
  border-radius: var(--radius-lg);
}

.start-brief-card span {
  font-size: 15px;
  font-weight: 700;
}

.start-brief-card strong {
  max-width: 18ch;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.03;
  font-weight: 700;
}

.prompt-output {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius-md);
  white-space: pre-line;
  color: var(--text-on-dark);
  background: var(--bg-dark);
}

.lead-confirmation {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--mint);
}

.dev-note {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 15px;
}

.noscript {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
}

.dev-menu {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  width: min(320px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  color: var(--text-on-dark);
  background: var(--bg-dark);
}

.dev-menu summary {
  min-height: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.dev-menu summary::-webkit-details-marker {
  display: none;
}

.dev-menu summary::after {
  content: "свернуть";
  font-size: 12px;
  font-weight: 600;
  opacity: 0.62;
}

.dev-menu:not([open]) summary::after {
  content: "открыть";
}

.dev-menu.is-dragging {
  cursor: grabbing;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
}

.dev-menu.is-dragging summary {
  cursor: grabbing;
}

.dev-menu-drag-hint {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  white-space: nowrap;
}

.dev-menu-compact-title {
  display: none;
}

.dev-menu-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-on-dark) 72%, transparent);
}

.dev-menu-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--text-on-dark) 16%, transparent);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--text-on-dark);
  background: var(--surface-dark);
}

.dev-menu-actions {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 8px;
}

.dev-menu-button {
  min-height: 42px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: var(--lime);
}

.dev-menu-button.light {
  background: var(--text-on-dark);
}

@media (max-width: 980px) {
  .topbar-inner {
    grid-template-columns: 1fr auto;
  }

  .top-progress {
    grid-column: 1 / -1;
    order: 3;
  }

  .hero-screen,
  .stage,
  .barrier-main,
  .comparison-grid,
  .start-brief {
    grid-template-columns: 1fr;
  }

  .hero-screen {
    min-height: 0;
  }

  .landing-hero {
    min-height: min(620px, calc(100vh - 116px));
  }

  .hero-visual {
    min-height: 480px;
  }

  .landing-proof {
    min-height: 420px;
  }

  .stage-side {
    position: static;
  }

  .barrier-main {
    min-height: 0;
    width: min(760px, calc(100% - 40px));
    padding: 44px 0 56px;
  }

  .barrier-screen::before {
    right: -104px;
    top: 170px;
    width: 560px;
    opacity: 0.56;
  }

  .barrier-copy h2 {
    max-width: 14ch;
  }

  .barrier-visual {
    min-height: 520px;
  }

  .risk-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .topbar-inner {
    width: calc(100% - 24px);
    gap: 12px;
    min-height: 68px;
  }

  .brand img {
    width: 96px;
  }

  .brand span,
  .time-pill {
    display: none;
  }

  .screen {
    width: calc(100% - 24px);
    padding: 32px 0 48px;
  }

  .barrier-screen {
    width: 100%;
    min-height: calc(100vh - 68px);
    padding: 0;
  }

  .barrier-screen::before {
    right: -132px;
    top: 96px;
    width: 360px;
    opacity: 0.42;
  }

  .barrier-main {
    width: calc(100% - 24px);
    min-height: calc(100vh - 68px);
    gap: 24px;
    padding: 28px 0 36px;
  }

  .barrier-copy {
    gap: 20px;
  }

  .barrier-copy h2 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .barrier-copy .body-copy {
    font-size: 19px;
  }

  .barrier-points span {
    min-height: 38px;
    font-size: 13px;
  }

  .barrier-visual {
    min-height: 470px;
    padding: 16px;
    border-radius: var(--radius-md);
  }

  .workday-row {
    grid-template-columns: 58px 1fr;
    gap: 8px 12px;
    min-height: 94px;
    padding: 14px;
  }

  .workday-row em {
    grid-column: 2;
    justify-self: start;
  }

  .ai-delegate-panel {
    grid-template-columns: 58px 1fr;
    padding: 14px;
  }

  .ai-core {
    width: 58px;
    height: 58px;
    font-size: 22px;
  }

  .landing-screen {
    min-height: calc(100vh - 68px);
    padding-top: 12px;
    padding-bottom: 20px;
  }

  .landing-hero {
    min-height: calc(100vh - 104px);
    gap: 18px;
    padding: 22px;
  }

  .landing-hero h1 {
    font-size: clamp(42px, 15vw, 58px);
  }

  .landing-hero .lead {
    font-size: 20px;
  }

  .landing-value span {
    min-height: 38px;
    font-size: 13px;
  }

  .hero-visual {
    min-height: 430px;
    padding: 16px;
  }

  .landing-proof {
    min-height: 0;
    padding: 16px;
  }

  .proof-card {
    padding: 22px;
  }

  .prep-main {
    padding: 18px;
    border-radius: var(--radius-md);
  }

  .hero-stat-grid,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .stage-main,
  .stage-side {
    padding: 18px;
    border-radius: var(--radius-md);
  }

  .choice-card {
    grid-template-columns: 22px 1fr;
  }

  .choice-meta {
    grid-column: 2;
  }

  .comparison-card li {
    grid-template-columns: 50px 1fr;
  }

  .dev-menu {
    right: 12px;
    bottom: 12px;
  }
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insight-popover-screen {
  position: relative;
}

.insight-question-background {
  pointer-events: none;
}

.insight-popover-layer {
  position: fixed;
  inset: 76px 0 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.insight-popover-card {
  width: min(430px, 100%);
  max-height: 100%;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--lime) 42%, transparent);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  background: #181818;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  text-align: center;
  overflow-y: auto;
  animation: insightPopoverIn 380ms cubic-bezier(0.22, 0.9, 0.3, 1.2) both;
}

.insight-popover-tag {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--lime);
  background: color-mix(in srgb, var(--lime) 12%, transparent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.insight-popover-card h2 {
  max-width: 12ch;
  color: var(--text-on-dark);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.04;
}

.insight-popover-card p {
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.48;
}

.insight-popover-card--barrier {
  width: min(560px, 100%);
}

.insight-popover-card--barrier h2 {
  max-width: 17ch;
}

.insight-popover-points {
  width: 100%;
  display: grid;
  gap: 8px;
  text-align: left;
}

.insight-popover-points > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}

.insight-popover-points > div > span {
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.insight-popover-points p {
  max-width: none;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.35;
}

.insight-popover-points strong {
  display: block;
  margin-bottom: 2px;
  color: var(--text-on-dark);
  font-size: 14px;
}

.insight-popover-actions {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 4px;
}

.insight-popover-actions .button {
  min-width: 0;
  padding-inline: 18px;
}

@keyframes insightPopoverIn {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.86);
  }

  65% {
    opacity: 1;
    transform: translateY(0) scale(1.03);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.single-field-form {
  max-width: 560px;
}

.single-field-form .field-block {
  width: 100%;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.insight-card {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.insight-card > span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.insight-card strong {
  font-size: 18px;
}

.insight-card p {
  margin: 0;
  color: rgba(0, 0, 0, 0.62);
  line-height: 1.45;
}

.consent-list {
  display: grid;
  gap: 12px;
  margin-top: 2px;
}

.consent-row {
  display: grid !important;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  color: var(--text);
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45;
}

.consent-row input {
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  accent-color: var(--primary);
}

.consent-row a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.consent-marketing-muted {
  margin-top: -6px;
}

.consent-row--muted {
  grid-template-columns: 18px 1fr;
  gap: 8px;
  color: #777777;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35;
}

.consent-row--muted input {
  width: 15px;
  height: 15px;
  margin-top: 0;
  accent-color: #777777;
}

.consent-row--muted a {
  color: #777777;
}

.processing-list {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin-top: 28px;
}

.processing-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid var(--field-border);
  border-radius: 16px;
  background: var(--bg);
  opacity: 0;
  transform: translateY(8px);
  animation: processingReveal 0.45s ease forwards;
  animation-delay: var(--delay);
}

.processing-check {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  font-weight: 900;
}

.processing-item div {
  display: grid;
  gap: 3px;
}

.processing-item small {
  color: rgba(0, 0, 0, 0.62);
  font-size: 13px;
}

@keyframes processingReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.unlock-card {
  display: grid;
  gap: 12px;
  max-width: 780px;
  margin-top: 28px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.unlock-card > span,
.profile-result-main > span,
.profile-result-detail > span {
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.unlock-card h3,
.unlock-card p {
  margin: 0;
}

.unlock-card h3 {
  font-size: clamp(28px, 4vw, 46px);
}

.unlock-card p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
}

.summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.summary-pills span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
}

.profile-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-result-main,
.profile-result-detail {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 22px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.profile-result-main {
  grid-column: 1 / -1;
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.profile-result-main h3,
.profile-result-main p {
  margin: 0;
}

.profile-result-main h3 {
  font-size: clamp(28px, 4vw, 44px);
}

.profile-result-main p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

.profile-result-detail > span {
  color: var(--primary);
}

.profile-result-detail strong {
  font-size: 16px;
  line-height: 1.45;
}

.qualification-status {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--field-border);
  font-size: 14px;
}

/* Анкета должна целиком помещаться в один экран, как в референсных воронках. */
.prep-screen:not(.barrier-screen) {
  height: calc(100dvh - 76px);
  min-height: 0;
  padding: 10px 0;
  overflow: hidden;
}

.prep-screen:not(.barrier-screen) .prep-main {
  position: relative;
  width: min(980px, 100%);
  max-height: 100%;
  gap: clamp(8px, 1.35vh, 16px);
  padding: clamp(16px, 2.6vh, 28px) clamp(18px, 3vw, 36px);
  overflow: hidden;
}

.prep-screen:not(.barrier-screen) .eyebrow {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.prep-screen:not(.barrier-screen) .screen-title {
  gap: 7px;
}

.prep-screen:not(.barrier-screen) .prep-intro {
  max-width: 820px;
  font-size: clamp(13px, 1.8vh, 16px);
  line-height: 1.35;
}

.prep-screen:not(.barrier-screen) .screen-title h2 {
  max-width: 900px;
  font-size: clamp(27px, 4.4vh, 46px);
  line-height: 1.02;
}

.prep-screen:not(.barrier-screen) .screen-title .body-copy {
  max-width: 900px;
  font-size: clamp(13px, 1.8vh, 16px);
  line-height: 1.35;
}

.prep-screen:not(.barrier-screen) .choice-grid {
  gap: clamp(5px, 0.8vh, 8px);
}

.prep-screen:not(.barrier-screen) .choice-card {
  min-height: 0;
  gap: 10px;
  padding: clamp(7px, 1.05vh, 10px) 14px;
  border-radius: 14px;
}

.prep-screen:not(.barrier-screen) .choice-radio {
  width: 19px;
  height: 19px;
}

.prep-screen:not(.barrier-screen) .choice-radio::after {
  width: 9px;
  height: 9px;
}

.prep-screen:not(.barrier-screen) .choice-copy {
  gap: 2px;
}

.prep-screen:not(.barrier-screen) .choice-copy strong {
  font-size: clamp(13px, 1.85vh, 15px);
  line-height: 1.2;
}

.prep-screen:not(.barrier-screen) .choice-copy span {
  font-size: clamp(11px, 1.55vh, 13px);
  line-height: 1.2;
}

.prep-screen:not(.barrier-screen) .choice-meta {
  font-size: 11px;
}

.prep-screen:not(.barrier-screen) .action-row {
  gap: 8px;
}

.prep-screen:not(.barrier-screen) .button {
  min-height: clamp(40px, 5.7vh, 46px);
  padding: 0 20px;
  font-size: 14px;
}

.prep-screen:not(.barrier-screen) .field,
.prep-screen:not(.barrier-screen) .textarea {
  padding: 11px 14px;
}

.prep-screen:not(.barrier-screen) .consent-list {
  gap: 8px;
}

.prep-screen:not(.barrier-screen) .consent-row {
  font-size: 12px !important;
  line-height: 1.3;
}

.prep-screen:not(.barrier-screen) .error {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 3;
  width: min(520px, calc(100% - 24px));
  transform: translateX(-50%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  text-align: center;
}

@media (max-width: 760px) {
  .compact-grid,
  .insight-grid,
  .profile-result {
    grid-template-columns: 1fr;
  }

  .profile-result-main {
    grid-column: auto;
  }

  .unlock-card {
    padding: 22px;
  }

  .insight-popover-layer {
    inset: 76px 0 0;
    padding: 16px;
  }

  .insight-popover-card {
    gap: 12px;
    padding: 22px 18px;
    border-radius: 20px;
  }

  .insight-popover-actions {
    grid-template-columns: 1fr;
  }

  .prep-screen:not(.barrier-screen) {
    width: calc(100% - 20px);
    height: calc(100dvh - 76px);
    padding: 6px 0;
  }

  .prep-screen:not(.barrier-screen) .prep-main {
    gap: clamp(6px, 1vh, 10px);
    padding: 11px 12px;
    border-radius: 14px;
  }

  .prep-screen:not(.barrier-screen) .eyebrow {
    min-height: 26px;
    font-size: 11px;
  }

  .prep-screen:not(.barrier-screen) .screen-title h2 {
    font-size: clamp(23px, 3.7vh, 31px);
  }

  .prep-screen:not(.barrier-screen) .screen-title .body-copy {
    font-size: clamp(11px, 1.7vh, 14px);
  }

  .prep-screen:not(.barrier-screen) .prep-intro {
    font-size: clamp(11px, 1.7vh, 14px);
  }

  .prep-screen:not(.barrier-screen) .choice-card {
    grid-template-columns: 18px 1fr;
    gap: 8px;
    padding: clamp(6px, 0.85vh, 8px) 9px;
  }

  .prep-screen:not(.barrier-screen) .choice-radio {
    width: 18px;
    height: 18px;
  }

  .prep-screen:not(.barrier-screen) .choice-copy strong {
    font-size: clamp(12px, 1.65vh, 14px);
  }

  .prep-screen:not(.barrier-screen) .choice-copy span {
    font-size: clamp(10px, 1.4vh, 12px);
  }

  .prep-screen:not(.barrier-screen) .choice-meta {
    display: none;
  }

  .prep-screen:not(.barrier-screen) .button {
    min-height: 38px;
    padding: 0 15px;
    font-size: 13px;
  }
}

/* Task 1 result: the AI-prepared reply succeeds in the real work chat. */
.chat-result-stage .stage-main {
  align-content: start;
  gap: 18px;
}

.chat-result-card {
  display: grid;
  gap: 20px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(32, 35, 55, 0.09);
}

.chat-result-card__status {
  display: flex;
  align-items: center;
  gap: 14px;
}

.chat-result-card__status span {
  width: fit-content;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--lime);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.chat-result-card__status time,
.chat-result-message__meta time {
  color: rgba(0, 0, 0, 0.48);
}

.chat-result-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.chat-result-message--outgoing {
  justify-content: flex-end;
}

.chat-result-message__body {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-width: min(650px, calc(100% - 54px));
}

.chat-result-message--outgoing .chat-result-message__body {
  justify-items: end;
}

.chat-result-message__meta {
  display: flex;
  gap: 5px;
  padding: 0 10px;
  color: rgba(0, 0, 0, 0.56);
  font-size: 12px;
}

.chat-result-message__meta b {
  color: inherit;
  font-weight: 700;
}

.chat-result-message__meta b::after {
  content: " ·";
}

.chat-result-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.chat-result-avatar--user {
  display: grid;
  place-items: center;
  margin-top: 22px;
  color: #fff;
  background: linear-gradient(145deg, #514fff, #2826ce);
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(61, 59, 255, 0.2);
}

.chat-result-message--incoming > .chat-result-avatar {
  margin-top: 22px;
  background-size: 882% auto;
}

.chat-result-bubble {
  position: relative;
  width: fit-content;
  padding: 16px 18px;
  border-radius: 20px;
}

.chat-result-bubble p,
.chat-result-impact p {
  margin: 0;
}

.chat-result-bubble p {
  font-size: clamp(15px, 2.1vw, 18px);
  line-height: 1.42;
}

.chat-result-bubble--outgoing {
  padding-right: 50px;
  color: #fff;
  background: linear-gradient(145deg, #2e61ff, #3d3bff);
  border-bottom-right-radius: 7px;
}

.chat-result-read {
  position: absolute;
  right: 17px;
  bottom: 13px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.32em;
}

.chat-result-bubble--incoming {
  background: #f4f4f6;
  border-bottom-left-radius: 7px;
}

.chat-result-bubble--followup {
  margin-top: 3px;
  border-top-left-radius: 7px;
}

.chat-result-impact {
  display: grid;
  gap: 12px;
  padding: clamp(20px, 3.5vw, 30px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 94% 10%, rgba(61, 59, 255, 0.16), transparent 27%),
    var(--lime);
}

.chat-result-impact > span {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.chat-result-impact > strong {
  max-width: 32ch;
  font-size: clamp(23px, 3vw, 33px);
  line-height: 1.08;
}

.chat-result-impact p {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  font-size: 15px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .chat-result-stage .stage-main {
    gap: 12px;
  }

  .chat-result-card {
    gap: 14px;
    padding: 14px 12px;
    border-radius: 20px;
  }

  .chat-result-card__status {
    gap: 9px;
  }

  .chat-result-card__status span {
    padding: 8px 10px;
    font-size: 9px;
  }

  .chat-result-card__status time,
  .chat-result-message__meta {
    font-size: 10px;
  }

  .chat-result-message {
    gap: 8px;
  }

  .chat-result-message__body {
    max-width: calc(100% - 42px);
  }

  .chat-result-avatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .chat-result-avatar--user {
    margin-top: 18px;
    font-size: 15px;
  }

  .chat-result-message--incoming > .chat-result-avatar {
    margin-top: 18px;
  }

  .chat-result-bubble {
    padding: 11px 12px;
    border-radius: 14px;
  }

  .chat-result-bubble p {
    font-size: 12px;
    line-height: 1.37;
  }

  .chat-result-bubble--outgoing {
    padding-right: 38px;
    border-bottom-right-radius: 5px;
  }

  .chat-result-bubble--incoming {
    border-bottom-left-radius: 5px;
  }

  .chat-result-bubble--followup {
    border-top-left-radius: 5px;
  }

  .chat-result-read {
    right: 12px;
    bottom: 9px;
    font-size: 12px;
  }

  .chat-result-impact {
    gap: 9px;
    padding: 16px 14px;
    border-radius: 20px;
  }

  .chat-result-impact > span {
    font-size: 9px;
  }

  .chat-result-impact > strong {
    font-size: 20px;
  }

  .chat-result-impact p {
    padding-top: 9px;
    font-size: 12px;
  }
}

/* Экран 18: компактный рабочий чат в режиме наблюдения. */
.fitting-shell {
  --app-safe-area-top: max(env(safe-area-inset-top), var(--preview-safe-area-top, 0px));
}

.fitting-shell .topbar {
  padding-top: var(--app-safe-area-top);
}

.chat-inbox-stage .stage-main {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.chat-inbox-stage .source-panel {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
}

.observed-chat {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dedee8;
  border-radius: 18px;
  background: #f3f4f7;
  box-shadow: 0 9px 28px rgba(30, 28, 71, 0.08);
}

.observed-chat__header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border-bottom: 1px solid #e4e4eb;
  background: rgba(255, 255, 255, 0.96);
}

.observed-chat__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.observed-chat__identity > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.observed-chat__channel-mark {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #fff;
  background: #3d3bff;
  font-size: 20px;
  font-weight: 800;
}

.observed-chat__header b {
  overflow: hidden;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.observed-chat__identity small {
  color: rgba(0, 0, 0, 0.48);
  font-size: 9px;
}

.observed-chat__identity small span {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #48b88a;
}

.observed-chat__eyebrow {
  color: rgba(0, 0, 0, 0.54);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.observed-chat__members {
  flex: 0 0 auto;
  display: flex;
  padding-right: 5px;
}

.observed-chat__members .colleague-avatar + .colleague-avatar {
  margin-left: -7px;
}

.observed-chat__header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.observed-chat__search {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #e1e1e8;
  border-radius: 9px;
  color: #585765;
  background: #f8f8fa;
}

.observed-chat__search svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.observed-chat__workspace {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at 15% 12%, rgba(110, 120, 231, 0.08), transparent 28%),
    #f4f5f8;
}

.observed-chat__day {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 2px;
  color: rgba(0, 0, 0, 0.42);
  font-size: 9px;
  font-weight: 650;
}

.observed-chat__day::before,
.observed-chat__day::after {
  height: 1px;
  content: "";
  flex: 1;
  background: rgba(54, 53, 72, 0.1);
}

.observed-chat__thread {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 6px 14px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.colleague-message {
  --person-color: #a8a8b8;
  --bubble-color: #f6f6f8;
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.colleague-message__body {
  min-width: 0;
  max-width: min(88%, 620px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.colleague-message__content {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  display: grid;
  gap: 4px;
  padding: 8px 11px 9px;
  border: 1px solid rgba(34, 32, 62, 0.08);
  border-radius: 4px 13px 13px 13px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(30, 28, 71, 0.06);
}

.colleague-message__meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 9px;
  line-height: 1.1;
}

.colleague-message__meta b {
  color: var(--person-color);
  font-size: 10px;
}

.colleague-message__meta time {
  color: rgba(0, 0, 0, 0.46);
}

.colleague-message p {
  margin: 0;
  font-size: clamp(10px, 1.45vh, 13px);
  line-height: 1.28;
}

.colleague-message__reply {
  overflow: hidden;
  color: rgba(0, 0, 0, 0.46);
  font-size: 8px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colleague-message__reaction {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-top: -1px;
  padding: 2px 7px;
  border: 1px solid #ddddea;
  border-radius: 999px;
  color: #51505f;
  background: #fff;
  font-size: 9px;
  line-height: 1;
}

.observed-chat__composer {
  position: relative;
  min-height: 43px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 6px;
  margin: 0 12px 10px 53px;
  padding: 6px 8px;
  border: 1px solid #d9d9e2;
  border-radius: 12px;
  color: rgba(0, 0, 0, 0.32);
  background: rgba(255, 255, 255, 0.84);
}

.observed-chat__attach,
.observed-chat__send {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #eeeef3;
  font-size: 15px;
}

.observed-chat__send {
  color: #fff;
  background: #aaa9bd;
  font-size: 13px;
}

.observed-chat__placeholder {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.observed-chat__composer small {
  position: absolute;
  right: 7px;
  bottom: -9px;
  padding: 1px 5px;
  border-radius: 999px;
  color: #4d497d;
  background: #eeecff;
  font-size: 7px;
  font-weight: 700;
}

.colleague-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.colleague-message--coral { --person-color: #bd5548; }
.colleague-message--blue { --person-color: #505bc9; }
.colleague-message--mint { --person-color: #287e67; }
.colleague-message--gold { --person-color: #9b6a14; }
.colleague-avatar--coral { color: #8a2e21; background: #ffd9d2; }
.colleague-avatar--blue { color: #313a9d; background: #dfe2ff; }
.colleague-avatar--mint { color: #17634e; background: #d6f2e8; }
.colleague-avatar--gold { color: #765018; background: #ffebba; }

.mobile-ai-launch--single {
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 14px;
  text-align: left;
  box-shadow: 0 9px 20px rgba(61, 59, 255, 0.18);
}

.ai-transfer-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
}

.ai-transfer-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ai-transfer-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.ai-transfer-copy b {
  font-size: 13px;
  line-height: 1.2;
}

.ai-transfer-copy small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  line-height: 1.2;
}

.ai-transfer-arrow {
  font-size: 20px;
}

@media (max-width: 980px) {
  .fitting-shell .fitting-stage {
    height: calc(100dvh - 64px - var(--app-safe-area-top));
  }
}

@media (max-width: 760px) {
  .chat-inbox-stage .stage-main {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 5px;
  }

  .chat-inbox-stage .screen-title h2 {
    font-size: clamp(23px, 6.5vw, 28px);
  }

  .chat-inbox-stage .source-panel {
    gap: 7px;
    padding: 8px 9px 9px;
  }

  .observed-chat {
    border-radius: 14px;
  }

  .observed-chat__header {
    gap: 8px;
    padding: 7px 8px;
  }

  .observed-chat__channel-mark {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    font-size: 17px;
  }

  .observed-chat__header b {
    font-size: 15px;
  }

  .observed-chat__eyebrow {
    font-size: 8px;
  }

  .observed-chat__identity small,
  .observed-chat__search {
    display: none;
  }

  .observed-chat__thread {
    gap: 5px;
    padding: 4px 8px 7px;
  }

  .colleague-message {
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 6px;
  }

  .colleague-avatar {
    width: 25px;
    height: 25px;
    font-size: 8px;
  }

  .colleague-message__content {
    gap: 1px;
    padding: 5px 7px 6px;
    border-radius: 3px 10px 10px 10px;
  }

  .colleague-message__meta,
  .colleague-message__meta b {
    font-size: 8px;
  }

  .colleague-message p {
    font-size: 10px;
    line-height: 1.2;
  }

  .colleague-message__reply,
  .colleague-message__reaction,
  .observed-chat__composer small {
    display: none;
  }

  .observed-chat__composer {
    min-height: 34px;
    margin: 0 7px 7px 38px;
    padding: 4px 6px;
  }

  .mobile-ai-launch--single {
    position: static;
    min-height: 52px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px 11px;
    box-shadow: 0 7px 16px rgba(61, 59, 255, 0.16);
  }

  .ai-transfer-icon {
    width: 29px;
    height: 29px;
  }

  .ai-transfer-icon svg {
    width: 19px;
    height: 19px;
  }

  .ai-transfer-copy b {
    font-size: 11px;
  }

  .ai-transfer-copy small {
    font-size: 8px;
  }
}

@media (max-height: 680px) {
  .prep-screen:not(.barrier-screen) .screen-title h2 {
    font-size: 23px;
  }

  .prep-screen:not(.barrier-screen) .screen-title .body-copy {
    font-size: 11px;
  }

  .prep-screen:not(.barrier-screen) .prep-intro {
    font-size: 11px;
  }

  .prep-screen:not(.barrier-screen) .choice-card {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .prep-screen:not(.barrier-screen) .choice-copy strong {
    font-size: 12px;
  }

  .prep-screen:not(.barrier-screen) .choice-copy span {
    font-size: 10px;
  }
}

.screen.ai-stage {
  width: min(1480px, calc(100% - 32px));
}

.ai-stage {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.ai-stage .stage-main {
  min-width: 0;
}

.task-label,
.task-counter {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 12px;
  color: var(--text);
  background: var(--lime);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.workday-brief {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  background:
    radial-gradient(circle at 88% 12%, rgba(216, 255, 40, 0.36), transparent 28%),
    var(--bg-dark);
}

.workday-brief-main {
  display: grid;
  gap: 16px;
}

.workday-brief-main strong {
  max-width: 28ch;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.05;
}

.workday-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.workday-steps div {
  min-height: 116px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 16px;
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--text-on-dark);
}

.workday-steps b {
  color: var(--primary);
  font-size: 13px;
}

.workday-steps span {
  font-size: 18px;
  font-weight: 700;
}

.workday-steps small {
  color: rgba(0, 0, 0, 0.62);
}

.ai-task-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(300px, 0.84fr) minmax(420px, 1.16fr);
  gap: 16px;
  align-items: stretch;
}

.source-panel,
.work-chat {
  min-width: 0;
  min-height: 690px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.source-panel {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--field-border);
}

.source-heading {
  display: grid;
  gap: 5px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--field-border);
}

.source-heading span {
  color: rgba(0, 0, 0, 0.56);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.source-heading b {
  font-size: 23px;
}

.source-messages {
  display: grid;
  gap: 10px;
}

.source-message {
  max-width: 94%;
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 4px 16px 16px 16px;
  background: var(--surface);
}

.source-message:nth-child(even) {
  justify-self: end;
  border-radius: 16px 4px 16px 16px;
  background: #ecebff;
}

.source-message b {
  font-size: 12px;
}

.source-message span {
  font-size: 14px;
}

.source-table-wrap {
  overflow-x: auto;
}

.source-table {
  min-width: 360px;
  display: grid;
  gap: 5px;
}

.source-table-row {
  display: grid;
  grid-template-columns: 1fr 0.9fr 0.7fr;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
}

.source-table-row.head {
  color: var(--text-on-dark);
  background: var(--bg-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.source-table-row:nth-child(3),
.source-table-row:nth-child(4),
.source-table-row:last-child {
  box-shadow: inset 3px 0 0 var(--peach);
}

.day-artifacts {
  display: grid;
  gap: 10px;
}

.day-artifacts div {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 12px;
  padding: 15px;
  border-radius: var(--radius-md);
  background: var(--mint);
}

.day-artifacts div.pending {
  background: var(--pink);
}

.day-artifacts span {
  grid-row: 1 / span 2;
  color: rgba(0, 0, 0, 0.55);
  font-size: 12px;
  font-weight: 700;
}

.day-artifacts small {
  grid-column: 2;
}

.work-chat {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto;
  border: 1px solid #d9d9e8;
  background: #f4f4fa;
  box-shadow: 0 18px 50px rgba(34, 30, 92, 0.10);
}

.work-chat-header {
  min-height: 70px;
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ddddec;
  background: rgba(255, 255, 255, 0.92);
}

.work-chat-header__identity {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.chat-history-back {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 11px;
  color: #4e4971;
  background: #efedf8;
  font-size: 10px;
  font-weight: 750;
}

.chat-history-back:hover {
  color: var(--text-on-dark);
  background: var(--primary);
}

.ai-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--text-on-dark);
  background: #7568ee;
  font-size: 13px;
  font-weight: 900;
}

.ai-avatar.small {
  width: 28px;
  height: 28px;
  font-size: 9px;
}

.ai-status {
  color: #6a6680;
  font-size: 11px;
  font-weight: 600;
}

.chat-attachment-label {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 10px;
  color: rgba(0, 0, 0, 0.64);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
}

.ai-feed {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 18px 16px;
  scroll-behavior: smooth;
}

.ai-row {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.ai-row.user {
  justify-content: flex-end;
}

.ai-row.system {
  justify-content: center;
}

.ai-bubble {
  max-width: 88%;
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 6px 16px 16px 16px;
  color: var(--text);
  background: var(--text-on-dark);
  font-size: 13px;
  line-height: 1.42;
  box-shadow: 0 5px 14px rgba(28, 26, 61, 0.07);
}

.ai-bubble.user {
  border-radius: 16px 6px 16px 16px;
  color: var(--text-on-dark);
  background: var(--primary);
}

.ai-bubble.system {
  max-width: 100%;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  color: rgba(0, 0, 0, 0.6);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  font-size: 11px;
}

.ai-bubble.warning {
  background: #fff0df;
  box-shadow: inset 3px 0 0 var(--peach);
}

.ai-bubble.success {
  background: #e3f7e2;
  box-shadow: inset 3px 0 0 #63ad69;
}

.ai-bubble small {
  color: currentColor;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.58;
}

.ai-bubble span,
.ai-bubble em {
  display: block;
}

.ai-bubble em {
  padding-top: 7px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-style: normal;
}

.ai-attachment {
  display: flex !important;
  gap: 8px;
  align-items: center;
}

.ai-attachment b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--text);
  background: var(--lime);
}

.ai-bubble.typing {
  grid-auto-flow: column;
  gap: 4px;
  width: 54px;
}

.ai-bubble.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lavender);
  animation: typingDot 0.8s ease-in-out infinite alternate;
}

.ai-bubble.typing i:nth-child(2) {
  animation-delay: 0.16s;
}

.ai-bubble.typing i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes typingDot {
  to { transform: translateY(-4px); opacity: 0.45; }
}

.ai-composer {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid #ddddec;
  background: var(--text-on-dark);
}

.chat-error {
  margin: 0 12px 8px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #7b1515;
  background: #ffe1e1;
  font-size: 11px;
  font-weight: 700;
}

.composer-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
}

.composer-label span {
  color: rgba(0, 0, 0, 0.52);
  font-size: 10px;
}

.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prompt-chip {
  min-height: 30px;
  border: 1px solid #d6d6df;
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  color: var(--text);
  background: var(--bg);
  font-size: 10px;
  font-weight: 650;
  text-align: left;
}

.prompt-chip:hover,
.prompt-chip.is-selected {
  border-color: var(--primary);
  color: var(--text-on-dark);
  background: var(--primary);
}

.ai-composer-draft {
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  color: rgba(0, 0, 0, 0.76);
  background: #fbfbfd;
  font-size: 11px;
}

.ai-composer-draft.is-filled {
  border-color: rgba(61, 59, 255, 0.38);
  color: #17162d;
  background: #f5f4ff;
}

.composer-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.composer-actions small {
  max-width: 55%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 9px;
}

.button.compact {
  min-height: 38px;
  padding: 0 15px;
  font-size: 11px;
}

.ai-composer.completed {
  grid-template-columns: 1fr auto;
  align-items: center;
  background: #e3f7e2;
}

.ai-composer.completed div {
  display: grid;
  gap: 3px;
}

.ai-composer.completed b {
  font-size: 12px;
}

.ai-composer.completed span,
.ai-composer.waiting {
  color: rgba(0, 0, 0, 0.6);
  font-size: 10px;
}

.inline-risk {
  display: inline;
  border: 0;
  border-radius: 5px;
  padding: 1px 3px;
  color: inherit;
  background: rgba(255, 195, 142, 0.5);
  font: inherit;
  text-align: left;
  text-decoration: underline dashed;
  text-underline-offset: 3px;
}

.inline-risk.is-selected {
  color: #790e0e;
  background: #ffc4c4;
  outline: 2px solid #d74747;
}

.mobile-ai-launch,
.chat-mobile-close,
.chat-drawer-backdrop {
  display: none;
}

.result-processing {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.result-processing-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  align-items: center;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg);
}

.result-processing-item > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  font-weight: 800;
}

.result-processing-item div {
  display: grid;
  gap: 2px;
}

.result-processing-item small {
  color: rgba(0, 0, 0, 0.56);
}

.result-processing-item.active {
  box-shadow: inset 3px 0 0 var(--primary);
}

.mini-spinner {
  border: 3px solid #dedee8;
  border-top-color: var(--primary);
  animation: miniSpin 0.8s linear infinite;
}

@keyframes miniSpin {
  to { transform: rotate(360deg); }
}

.result-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.result-hero > div {
  display: grid;
  gap: 8px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.result-hero > div:first-child {
  background: var(--lime);
}

.result-hero span {
  font-size: 12px;
  font-weight: 700;
}

.result-hero strong {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
}

.result-hero small {
  color: rgba(0, 0, 0, 0.62);
}

.scenario-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--pink);
}

.scenario-card > span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Экраны 15–19 повторяют масштаб знакомства: один шаг занимает один viewport. */
.fitting-stage {
  height: calc(100dvh - 76px);
  min-height: 0;
  padding: clamp(7px, 1.1vh, 11px) 0;
  overflow: hidden;
  align-items: stretch;
}

.fitting-stage .stage-main {
  height: 100%;
  min-height: 0;
  align-content: stretch;
  gap: clamp(7px, 1.2vh, 13px);
  padding: clamp(13px, 2vh, 21px) clamp(15px, 2.2vw, 25px);
  overflow: hidden;
}

.fitting-stage .screen-title {
  gap: clamp(4px, 0.7vh, 7px);
}

.fitting-stage .screen-title h2 {
  max-width: 980px;
  font-size: clamp(24px, 3.7vh, 40px);
  line-height: 1.02;
}

.fitting-stage .screen-title .body-copy {
  max-width: 980px;
  font-size: clamp(11px, 1.65vh, 16px);
  line-height: 1.3;
}

.fitting-stage .stage-side {
  position: static;
  top: auto;
  height: 100%;
  min-height: 0;
  align-content: start;
  gap: clamp(7px, 1vh, 12px);
  padding: clamp(11px, 1.7vh, 17px);
  overflow: hidden;
}

.fitting-stage .metric-panel {
  gap: 4px;
  padding: clamp(10px, 1.4vh, 14px);
}

.fitting-stage .metric-panel span {
  font-size: clamp(10px, 1.35vh, 12px);
}

.fitting-stage .metric-panel b {
  font-size: clamp(23px, 3.4vh, 31px);
}

.fitting-stage .timeline {
  gap: clamp(3px, 0.55vh, 6px);
}

.fitting-stage .timeline-row {
  grid-template-columns: 44px 1fr;
  gap: 7px;
}

.fitting-stage .timeline-time {
  font-size: clamp(10px, 1.5vh, 13px);
}

.fitting-stage .timeline-body {
  padding-bottom: clamp(4px, 0.8vh, 8px);
}

.fitting-stage .timeline-row.is-done .timeline-body {
  padding: 5px 7px;
}

.fitting-stage .timeline-body strong {
  font-size: clamp(10px, 1.5vh, 13px);
}

.fitting-stage .timeline-body span {
  margin-top: 1px;
  font-size: clamp(9px, 1.25vh, 11px);
  line-height: 1.2;
}

.fitting-stage .wins {
  gap: 4px;
}

.fitting-stage .wins h3 {
  font-size: clamp(13px, 1.8vh, 17px);
}

.fitting-stage .win-list {
  gap: 2px;
}

.fitting-stage .win-list li {
  min-height: 22px;
  font-size: clamp(9px, 1.35vh, 12px);
  line-height: 1.2;
}

.fitting-stage .win-list li::before {
  width: 8px;
  height: 8px;
}

.fitting-intro-stage {
  width: min(1120px, calc(100% - 32px));
  grid-template-columns: 1fr;
}

.fitting-intro-stage .stage-main {
  grid-template-rows: auto auto auto auto;
  align-content: center;
  padding-inline: clamp(24px, 5vw, 64px);
}

.fitting-intro-stage .screen-title {
  gap: clamp(10px, 1.6vh, 16px);
}

.fitting-intro-stage .screen-title h2 {
  max-width: 900px;
}

.fitting-intro-stage .screen-title .body-copy {
  max-width: 900px;
  font-size: clamp(18px, 2.8vh, 26px);
  line-height: 1.18;
  font-weight: 600;
}

.fitting-intro-stage .workday-brief {
  height: auto;
  min-height: 0;
  gap: clamp(7px, 1.1vh, 11px);
  padding: clamp(12px, 1.8vh, 17px);
  color: var(--text);
  border: 1px solid var(--field-border);
  background: var(--bg);
}

.fitting-intro-stage .workday-brief-main {
  gap: 0;
}

.fitting-intro-stage .workday-steps div {
  min-height: clamp(62px, 9.5vh, 78px);
  padding: clamp(8px, 1.2vh, 11px);
  border: 1px solid #ececec;
  background: var(--surface);
}

.fitting-intro-stage .workday-steps span {
  font-size: clamp(14px, 2vh, 17px);
}

.fitting-intro-stage .workday-steps small {
  font-size: clamp(9px, 1.25vh, 11px);
}

.fitting-intro-stage .prep-note {
  padding: clamp(10px, 1.5vh, 15px);
  font-size: clamp(11px, 1.55vh, 15px);
}

.fitting-intro-stage .button {
  min-height: clamp(39px, 5.5vh, 46px);
}

.ai-stage .stage-main {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.fitting-stage .task-label {
  min-height: clamp(25px, 3.8vh, 29px);
  padding: 0 10px;
  font-size: clamp(9px, 1.35vh, 11px);
}

.fitting-stage .ai-task-grid {
  height: 100%;
  min-height: 0;
  gap: clamp(9px, 1vw, 14px);
  overflow: hidden;
}

.fitting-stage .source-panel,
.fitting-stage .work-chat {
  height: 100%;
  min-height: 0;
  border-radius: clamp(14px, 2vh, 22px);
}

.fitting-stage .source-panel {
  gap: clamp(8px, 1.3vh, 14px);
  padding: clamp(12px, 1.8vh, 18px);
}

.fitting-stage .source-heading {
  gap: 2px;
  padding-bottom: clamp(7px, 1.1vh, 11px);
}

.fitting-stage .source-heading span {
  font-size: clamp(9px, 1.25vh, 11px);
}

.fitting-stage .source-heading b {
  font-size: clamp(17px, 2.4vh, 22px);
}

.fitting-stage .source-messages {
  gap: clamp(5px, 0.8vh, 8px);
}

.fitting-stage .source-message {
  gap: 2px;
  padding: clamp(7px, 1.15vh, 11px) clamp(9px, 1.2vw, 13px);
}

.fitting-stage .source-message b {
  font-size: clamp(9px, 1.25vh, 11px);
}

.fitting-stage .source-message span {
  font-size: clamp(10px, 1.45vh, 13px);
  line-height: 1.28;
}

.fitting-stage .source-table-row {
  padding: clamp(7px, 1.15vh, 10px);
  font-size: clamp(9px, 1.35vh, 12px);
}

.fitting-stage .day-artifacts {
  gap: clamp(6px, 1vh, 9px);
}

.fitting-stage .day-artifacts div {
  padding: clamp(9px, 1.4vh, 13px);
}

.fitting-stage .day-artifacts b {
  font-size: clamp(11px, 1.55vh, 14px);
}

.fitting-stage .day-artifacts small {
  font-size: clamp(9px, 1.25vh, 11px);
}

.fitting-stage .work-chat {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.fitting-stage .work-chat-header {
  min-height: clamp(52px, 7.8vh, 64px);
  padding: clamp(7px, 1.1vh, 10px) 12px;
}

.fitting-stage .ai-avatar {
  width: clamp(34px, 5vh, 40px);
  height: clamp(34px, 5vh, 40px);
}

.fitting-stage .ai-avatar.small {
  width: 25px;
  height: 25px;
}

.fitting-stage .ai-feed {
  gap: clamp(6px, 0.9vh, 10px);
  padding: clamp(9px, 1.4vh, 14px) 12px;
}

.fitting-stage .ai-bubble {
  gap: 4px;
  padding: clamp(7px, 1vh, 10px) clamp(9px, 1vw, 12px);
  font-size: clamp(9px, 1.35vh, 12px);
  line-height: 1.32;
}

.fitting-stage .ai-composer {
  gap: clamp(5px, 0.8vh, 8px);
  padding: clamp(8px, 1.15vh, 11px);
}

.fitting-stage .composer-label,
.fitting-stage .ai-composer.completed b {
  font-size: clamp(9px, 1.3vh, 11px);
}

.fitting-stage .prompt-chips {
  gap: 4px;
}

.fitting-stage .prompt-chip {
  min-height: clamp(25px, 3.6vh, 29px);
  padding: 4px 8px;
  font-size: clamp(8px, 1.15vh, 10px);
}

.fitting-stage .ai-composer-draft {
  min-height: clamp(38px, 5.8vh, 48px);
  padding: 7px 9px;
  font-size: clamp(8px, 1.18vh, 10px);
}

.fitting-stage .button.compact {
  min-height: clamp(32px, 4.6vh, 37px);
  padding: 0 12px;
  font-size: clamp(9px, 1.3vh, 11px);
}

.fitting-processing-stage .stage-main {
  grid-template-rows: auto minmax(0, 1fr);
}

.fitting-processing-stage {
  width: min(900px, calc(100% - 32px));
  grid-template-columns: 1fr;
}

.fitting-processing-stage .result-processing {
  width: 100%;
  max-width: 760px;
  align-self: center;
  gap: clamp(6px, 1vh, 10px);
}

.fitting-processing-stage .result-processing-item {
  padding: clamp(10px, 1.6vh, 15px);
}

@media (max-width: 1200px) {
  .fitting-stage {
    grid-template-columns: 1fr;
  }

  .fitting-stage .stage-side {
    display: none;
  }
}

@media (max-width: 760px) {
  .fitting-stage {
    width: calc(100% - 20px);
    height: calc(100dvh - 68px);
    padding: 5px 0;
  }

  .fitting-stage .stage-main {
    gap: 6px;
    padding: 10px;
    border-radius: 14px;
  }

  .fitting-stage .screen-title h2 {
    font-size: clamp(21px, 3.8vh, 29px);
  }

  .fitting-stage .screen-title .body-copy {
    font-size: clamp(10px, 1.65vh, 13px);
  }

  .workday-steps,
  .result-hero {
    grid-template-columns: 1fr;
  }

  .workday-steps div {
    min-height: 0;
  }

  .fitting-intro-stage .workday-brief {
    padding: 11px;
  }

  .fitting-intro-stage .workday-brief-main strong {
    font-size: clamp(20px, 3.4vh, 27px);
  }

  .fitting-intro-stage .workday-steps {
    gap: 5px;
  }

  .fitting-intro-stage .workday-steps div {
    padding: 7px 9px;
  }

  .fitting-intro-stage .workday-steps small {
    font-size: 10px;
  }

  .ai-task-grid {
    grid-template-columns: 1fr;
  }

  .fitting-stage .source-panel {
    min-height: 0;
    padding: 10px;
  }

  .fitting-stage .source-message {
    padding: 6px 8px;
  }

  .fitting-stage .source-table-row {
    padding: 6px 8px;
  }

  .mobile-ai-launch {
    min-height: clamp(43px, 6.5vh, 54px);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border: 0;
    border-radius: var(--radius-md);
    padding: 0 16px;
    color: var(--text-on-dark);
    background: var(--primary);
    font-size: 13px;
  }

  .work-chat {
    position: fixed;
    inset: 74px 8px 8px;
    z-index: 102;
    min-height: 0;
    border-radius: 22px;
    transform: translateY(calc(100% + 90px));
    opacity: 0;
    pointer-events: none;
    transition: transform var(--motion), opacity var(--motion);
  }

  .work-chat.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .chat-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 101;
    display: block;
    border: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(2px);
  }

  .work-chat-header {
    grid-template-columns: auto 36px minmax(0, 1fr);
    gap: 8px;
  }

  .chat-history-back {
    min-height: 34px;
    padding-inline: 9px;
  }

  .chat-attachment-label {
    display: none;
  }

  .chat-mobile-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--text);
    background: var(--surface);
    font-size: 24px;
  }

  .ai-feed {
    padding: 14px 12px;
  }

  .ai-composer {
    padding: 11px;
  }

  .ai-composer.completed {
    grid-template-columns: 1fr;
  }

  .composer-actions small {
    display: none;
  }

  .composer-actions .button {
    width: 100%;
  }
}

@media (max-height: 690px) and (min-width: 761px) {
  .fitting-stage .screen-title h2 {
    font-size: 24px;
  }

  .fitting-stage .screen-title .body-copy {
    font-size: 11px;
  }

  .fitting-stage .source-message {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .fitting-stage .ai-bubble {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .fitting-stage .chat-attachment-label,
  .fitting-stage .composer-actions small {
    display: none;
  }
}

.course-lead-stage,
.completion-stage {
  height: calc(100dvh - 76px);
  min-height: 0;
  padding: clamp(7px, 1.1vh, 11px) 0;
  overflow: hidden;
  align-items: stretch;
}

.course-lead-stage .stage-main,
.completion-stage .stage-main {
  height: 100%;
  min-height: 0;
  align-content: center;
  gap: clamp(8px, 1.4vh, 15px);
  padding: clamp(16px, 2.8vh, 30px) clamp(20px, 4vw, 46px);
  overflow: hidden;
}

.course-lead-stage .screen-title,
.completion-stage .screen-title {
  gap: clamp(6px, 1vh, 10px);
}

.course-lead-stage .screen-title h2,
.completion-stage .screen-title h2 {
  font-size: clamp(28px, 4.4vh, 46px);
  line-height: 1.02;
}

.course-lead-stage .screen-title .body-copy,
.completion-stage .screen-title .body-copy {
  font-size: clamp(13px, 1.9vh, 18px);
  line-height: 1.35;
}

.course-lead-stage .task-surface {
  gap: clamp(7px, 1vh, 11px);
  padding: clamp(12px, 1.8vh, 18px);
}

.course-lead-stage .task-surface h3,
.course-lead-stage .personal-card h3,
.completion-stage .lead-confirmation h3 {
  font-size: clamp(18px, 2.6vh, 24px);
  line-height: 1.1;
}

.course-lead-stage .course-list {
  gap: clamp(3px, 0.65vh, 6px);
}

.course-lead-stage .course-list li {
  font-size: clamp(12px, 1.65vh, 15px);
  line-height: 1.3;
}

.course-lead-stage .personal-card,
.completion-stage .lead-confirmation {
  gap: clamp(6px, 1vh, 10px);
  padding: clamp(13px, 2vh, 20px);
}

.course-lead-stage .personal-card .body-copy,
.completion-stage .lead-confirmation .body-copy {
  font-size: clamp(12px, 1.7vh, 16px);
  line-height: 1.35;
}

.course-lead-stage .form-note {
  font-size: clamp(10px, 1.4vh, 13px);
}

.course-lead-stage .button,
.completion-stage .button {
  min-height: clamp(38px, 5.6vh, 46px);
  padding-inline: clamp(16px, 2.5vw, 28px);
}

@media (max-width: 760px) {
  .course-lead-stage,
  .completion-stage {
    width: calc(100% - 20px);
    padding: 5px 0;
  }

  .course-lead-stage .stage-main,
  .completion-stage .stage-main {
    gap: 6px;
    padding: 11px;
    border-radius: 14px;
  }

  .course-lead-stage .screen-title h2,
  .completion-stage .screen-title h2 {
    font-size: clamp(24px, 4vh, 30px);
  }

  .course-lead-stage .screen-title .body-copy,
  .completion-stage .screen-title .body-copy {
    font-size: clamp(11px, 1.7vh, 13px);
  }

  .course-lead-stage .task-surface,
  .course-lead-stage .personal-card,
  .completion-stage .lead-confirmation {
    padding: 10px;
    border-radius: 14px;
  }

  .course-lead-stage .task-surface h3,
  .course-lead-stage .personal-card h3,
  .completion-stage .lead-confirmation h3 {
    font-size: clamp(16px, 2.5vh, 19px);
  }

  .course-lead-stage .course-list li,
  .course-lead-stage .personal-card .body-copy,
  .completion-stage .lead-confirmation .body-copy {
    font-size: clamp(10px, 1.5vh, 12px);
  }

  .course-lead-stage .course-list li {
    padding-left: 18px;
  }

  .course-lead-stage .course-list li::before {
    width: 8px;
    height: 8px;
  }

  .course-lead-stage .action-row,
  .completion-stage .action-row {
    gap: 6px;
  }

  .course-lead-stage .button,
  .completion-stage .button {
    min-height: 38px;
    padding-inline: 14px;
    font-size: 12px;
  }
}

@media (max-height: 650px) {
  .course-lead-stage .screen-title h2,
  .completion-stage .screen-title h2 {
    font-size: 24px;
  }

  .course-lead-stage .screen-title .body-copy,
  .completion-stage .screen-title .body-copy,
  .course-lead-stage .course-list li,
  .course-lead-stage .personal-card .body-copy,
  .completion-stage .lead-confirmation .body-copy {
    font-size: 11px;
  }
}

.landing-screen {
  height: calc(100dvh - 76px);
  min-height: 0;
  padding: clamp(12px, 2.2vh, 22px) 0;
  overflow: hidden;
}

.landing-hero {
  width: 100%;
  height: min(720px, 100%);
  min-height: 0;
  justify-self: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(216, 255, 40, 0.24), transparent 26%),
    linear-gradient(145deg, rgba(24, 20, 90, 0.42), rgba(0, 0, 0, 0.76)),
    url("./assets/style-pack/assets/gradients/01_Gradient.webp") center / cover no-repeat,
    var(--bg-dark);
}

.landing-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(14px, 2.2vh, 22px);
}

.landing-illustration {
  position: relative;
  width: 100%;
  height: clamp(340px, 58vh, 520px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: clamp(22px, 3vw, 32px);
  background: #443cff;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transform: rotate(1deg);
}

.landing-illustration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 58% center;
}

.landing-illustration::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.64));
}

.landing-result-preview {
  position: absolute;
  z-index: 1;
  right: clamp(16px, 2vw, 24px);
  bottom: clamp(16px, 2vw, 24px);
  left: clamp(16px, 2vw, 24px);
  display: grid;
  gap: 5px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.landing-result-preview span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-result-preview strong {
  font-size: clamp(23px, 2.5vw, 34px);
  line-height: 1.02;
}

.landing-result-preview small {
  font-size: 14px;
  line-height: 1.25;
}

.landing-hero .eyebrow {
  min-height: 34px;
  padding-inline: 14px;
  font-size: 12px;
}

.landing-hero h1 {
  max-width: 11ch;
  font-size: clamp(50px, 5.4vw, 70px);
  line-height: 0.94;
  text-wrap: balance;
}

.landing-hero .lead {
  max-width: 610px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.3;
}

.landing-hero .button {
  min-height: 58px;
  padding-inline: 28px;
  color: var(--text);
  background: var(--lime);
  font-size: 16px;
}

.landing-hero .button:hover {
  background: #e5ff6e;
}

.landing-hero .button:focus-visible {
  outline: 3px solid var(--text-on-dark);
  outline-offset: 4px;
}

.landing-hero .button span {
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 980px) and (min-width: 641px) {
  .landing-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.64fr);
    gap: 24px;
    padding-inline: 28px;
  }

  .landing-illustration {
    height: min(54vh, 430px);
  }
}

@media (max-width: 640px) {
  .landing-screen {
    width: calc(100% - 20px);
    height: calc(100dvh - 76px);
    padding: 6px 0;
  }

  .landing-hero {
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(132px, 1fr);
    align-content: stretch;
    gap: clamp(12px, 2vh, 18px);
    padding: clamp(18px, 3.2vh, 26px) 18px;
    border-radius: 18px;
  }

  .landing-illustration {
    display: block;
    height: 100%;
    min-height: 132px;
    max-height: 210px;
    border-radius: 18px;
    transform: none;
  }

  .landing-hero .eyebrow {
    min-height: 30px;
    padding-inline: 12px;
    font-size: 11px;
  }

  .landing-hero h1 {
    max-width: 10.5ch;
    font-size: clamp(39px, 6.3vh, 48px);
    line-height: 0.93;
  }

  .landing-hero .lead {
    font-size: clamp(15px, 2.35vh, 18px);
    line-height: 1.26;
  }

  .landing-hero .hero-actions {
    width: 100%;
  }

  .landing-hero .button {
    width: 100%;
    min-height: 54px;
    padding-inline: 20px;
    font-size: 15px;
  }

  .landing-result-preview {
    right: 10px;
    bottom: 10px;
    left: 10px;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 13px;
  }

  .landing-result-preview span {
    font-size: 9px;
  }

  .landing-result-preview strong {
    font-size: 20px;
  }

  .landing-result-preview small {
    font-size: 11px;
  }
}

@media (max-height: 620px) {
  .landing-hero h1 {
    font-size: 34px;
  }

  .landing-hero .lead {
    font-size: 13px;
  }

  .landing-illustration {
    min-height: 100px;
  }

}

/* One visual story from questionnaire processing to Marina's first project. */
.simulation-flow-screen .prep-main,
.project-start-screen .prep-main {
  animation: profileStepIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.profile-data-screen.simulation-intro-screen .prep-main > .eyebrow,
.profile-data-screen.project-start-screen .prep-main > .eyebrow {
  display: none;
}

.simulation-workspace-cue,
.profile-mobile-chat-cue {
  order: -1;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -22px -22px 2px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(61, 59, 255, 0.11);
  border-radius: 24px 24px 0 0;
  color: #3c3a58;
  background: rgba(248, 248, 255, 0.86);
  font-size: 12px;
}

.simulation-workspace-cue strong,
.profile-mobile-chat-cue strong {
  font-size: 12px;
}

.simulation-workspace-cue__dots,
.profile-mobile-chat-cue__dots {
  display: flex;
  gap: 3px;
}

.simulation-workspace-cue__dots i,
.simulation-workspace-cue__status i,
.profile-mobile-chat-cue__dots i,
.profile-mobile-chat-cue__status i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
}

.simulation-workspace-cue__dots i:nth-child(1),
.profile-mobile-chat-cue__dots i:nth-child(1) { background: #ff655d; }
.simulation-workspace-cue__dots i:nth-child(2),
.profile-mobile-chat-cue__dots i:nth-child(2) { background: #ffbd2e; }
.simulation-workspace-cue__dots i:nth-child(3),
.simulation-workspace-cue__status i,
.profile-mobile-chat-cue__dots i:nth-child(3),
.profile-mobile-chat-cue__status i { background: #27c840; }

.simulation-workspace-cue__status,
.profile-mobile-chat-cue__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #77738e;
  font-size: 11px;
}

.simulation-loading-screen .processing-list {
  width: 100%;
  max-width: none;
  gap: 8px;
  margin-top: 4px;
}

.simulation-loading-screen .processing-item {
  min-height: 62px;
  padding: 12px 14px;
  border-color: rgba(61, 59, 255, 0.12);
  background: linear-gradient(135deg, #f8f7ff 0%, #ffffff 100%);
  box-shadow: 0 8px 24px rgba(61, 59, 255, 0.05);
}

.simulation-loading-screen .processing-item strong {
  font-size: 14px;
}

.simulation-loading-screen .processing-check {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(61, 59, 255, 0.08);
}

.simulation-ready-card {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(28px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(61, 59, 255, 0.15);
  border-radius: 24px;
  color: #171622;
  background:
    radial-gradient(circle at 12% 10%, rgba(207, 255, 0, 0.42), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(114, 222, 255, 0.38), transparent 35%),
    linear-gradient(145deg, #f4f2ff 0%, #ffffff 52%, #f5ffdc 100%);
  box-shadow: 0 22px 54px rgba(50, 44, 146, 0.16);
  text-align: center;
}

.simulation-ready-card > :not(.simulation-ready-confetti) {
  position: relative;
  z-index: 2;
}

.simulation-ready-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.simulation-ready-confetti i {
  position: absolute;
  width: 8px;
  height: 16px;
  border-radius: 3px;
  background: #3d3bff;
  opacity: 0;
  animation: simulationReadyConfetti 1.1s ease-out forwards;
}

.simulation-ready-confetti i:nth-child(1) { top: 13%; left: 12%; transform: rotate(20deg); animation-delay: 0.05s; }
.simulation-ready-confetti i:nth-child(2) { top: 24%; left: 21%; width: 7px; height: 7px; border-radius: 50%; background: #ff79a8; animation-delay: 0.18s; }
.simulation-ready-confetti i:nth-child(3) { top: 12%; right: 15%; background: #cfff00; transform: rotate(-28deg); animation-delay: 0.12s; }
.simulation-ready-confetti i:nth-child(4) { top: 31%; right: 8%; width: 6px; height: 6px; border-radius: 50%; background: #72deff; animation-delay: 0.26s; }
.simulation-ready-confetti i:nth-child(5) { bottom: 22%; left: 8%; background: #cfff00; transform: rotate(45deg); animation-delay: 0.32s; }
.simulation-ready-confetti i:nth-child(6) { bottom: 15%; right: 12%; width: 7px; height: 7px; border-radius: 50%; background: #ff79a8; animation-delay: 0.4s; }
.simulation-ready-confetti i:nth-child(7) { top: 48%; left: 4%; height: 11px; transform: rotate(-20deg); animation-delay: 0.22s; }
.simulation-ready-confetti i:nth-child(8) { top: 45%; right: 20%; height: 11px; background: #72deff; transform: rotate(35deg); animation-delay: 0.46s; }

.simulation-ready-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(61, 59, 255, 0.12);
  border-radius: 999px;
  color: #4c4872;
  background: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.simulation-ready-card__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #52e68a;
  box-shadow: 0 0 0 4px rgba(82, 230, 138, 0.16);
}

.simulation-ready-card__meter {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 4px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  color: #101018;
  background: linear-gradient(145deg, #d9ff74 0%, #9ceaff 100%);
  box-shadow: 0 0 0 10px rgba(61, 59, 255, 0.06), 0 12px 28px rgba(61, 59, 255, 0.16);
  animation: simulationReadyPop 650ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

.simulation-ready-card__meter strong {
  font-size: 25px;
  line-height: 1;
}

.simulation-ready-card__meter span {
  font-size: 10px;
  font-weight: 900;
}

.simulation-ready-card__copy {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.simulation-ready-card h2 {
  max-width: 610px;
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.02;
}

.simulation-ready-card__copy p {
  max-width: 600px;
  margin: 0;
  color: rgba(23, 22, 34, 0.72);
  font-size: 16px;
  line-height: 1.45;
}

.simulation-ready-card__copy p:last-child {
  color: #24213f;
  font-weight: 700;
}

.simulation-ready-card .simulation-ready-card__action {
  width: min(620px, 100%);
  min-height: 54px;
  margin-top: 4px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 12px 28px rgba(61, 59, 255, 0.22);
}

.profile-data-screen .simulation-ready-card .simulation-ready-card__action,
.profile-data-screen .project-start-action {
  min-height: 54px !important;
  font-size: 15px !important;
}

.project-start-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-start-toolbar button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #5a5770;
  background: #f1f0f8;
  font-size: 12px;
  font-weight: 700;
}

.project-start-toolbar > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #77738e;
  font-size: 11px;
  font-weight: 700;
}

.project-start-toolbar > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #27c840;
}

.project-start-conversation {
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 8%, rgba(217, 255, 116, 0.46), transparent 27%),
    linear-gradient(135deg, #f2f1ff 0%, #f8f7ff 100%);
  box-shadow: 0 12px 34px rgba(61, 59, 255, 0.1);
}

.project-start-brief {
  display: grid;
  gap: 11px;
  margin: 0 14px 14px 72px;
  padding: 16px;
  border: 1px solid rgba(61, 59, 255, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(61, 59, 255, 0.07);
}

.project-start-brief__label {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--primary);
  background: #efefff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-start-brief h2 {
  margin: 0;
  font-size: clamp(25px, 4vw, 36px);
  line-height: 1.04;
}

.project-start-brief .project-start-brief__copy {
  width: auto;
  max-width: 650px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.project-start-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.project-start-progress > div:first-child {
  display: grid;
  gap: 2px;
}

.project-start-progress > div:first-child span {
  color: #77738e;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-start-progress > div:first-child strong {
  font-size: 12px;
}

.project-start-progress > div:last-child {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #77738e;
  font-size: 12px;
}

.project-start-progress b {
  color: var(--primary);
  font-size: 22px;
}

.project-start-action {
  width: 100%;
  min-height: 52px;
}

@keyframes simulationReadyPop {
  from { opacity: 0; transform: scale(0.55) rotate(-10deg); }
  to { opacity: 1; transform: none; }
}

@keyframes simulationReadyConfetti {
  0% { opacity: 0; translate: 0 -18px; scale: 0.4; }
  35% { opacity: 1; }
  100% { opacity: 0.72; translate: 0 16px; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .simulation-ready-card__meter {
    animation: none;
  }

  .simulation-ready-confetti i {
    opacity: 0.72;
    animation: none;
  }
}

@media (max-width: 640px) {
  .simulation-flow-screen .prep-main,
  .project-start-screen .prep-main {
    margin-top: 18px;
  }

  .simulation-workspace-cue {
    margin: -24px -18px 2px;
    padding: 10px 18px;
    border-radius: 18px 18px 0 0;
  }

  .simulation-loading-screen .screen-title h2 {
    font-size: clamp(29px, 8.2vw, 36px) !important;
  }

  .simulation-loading-screen .processing-item {
    min-height: 56px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 11px;
    padding: 10px 11px;
  }

  .simulation-loading-screen .processing-check {
    width: 30px;
    height: 30px;
  }

  .simulation-ready-card {
    gap: 18px;
    padding: 24px 18px 28px;
    border-radius: 18px;
  }

  .simulation-ready-card__meter {
    width: 66px;
    height: 66px;
  }

  .simulation-ready-card h2 {
    font-size: clamp(29px, 8.4vw, 36px);
  }

  .simulation-ready-card__copy p {
    font-size: 16px;
  }

  .project-start-toolbar {
    margin-top: -2px;
  }

  .project-start-conversation .project-chat-brief__message {
    padding-bottom: 10px;
  }

  .project-start-brief {
    gap: 9px;
    margin: 0 10px 10px;
    padding: 13px;
    border-radius: 14px;
  }

  .project-start-brief h2 {
    font-size: 26px;
  }

  .project-start-brief .project-start-brief__copy {
    font-size: 16px;
    line-height: 1.45;
  }

  .project-start-progress {
    padding-top: 8px;
  }
}

/* Landing: test-drive promise, layered AI visual and three concrete benefits. */
.landing-header .simple-header-inner {
  width: min(1560px, calc(100% - clamp(40px, 8vw, 112px)));
  max-width: none;
}

.shell:has(> .landing-screen) {
  background:
    radial-gradient(circle at 15% 0, rgba(119, 94, 255, 0.18), transparent 34%),
    linear-gradient(115deg, #f0edff 0%, #eef8ff 100%);
}

.landing-header-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(20, 20, 20, 0.07);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px rgba(61, 59, 255, 0.08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.landing-header-meta span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(216, 255, 40, 0.18);
}

.landing-screen {
  width: 100%;
  height: auto;
  min-height: calc(100dvh - 76px);
  margin: 0;
  padding: clamp(12px, 2vw, 24px);
  background: transparent;
}

.landing-hero {
  position: relative;
  isolation: isolate;
  width: min(1560px, 100%);
  height: auto;
  min-height: min(726px, calc(100dvh - 124px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(460px, 0.92fr) minmax(520px, 1.08fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: clamp(16px, 1.25vw, 20px);
  padding: clamp(22px, 2.4vw, 36px);
  overflow: hidden;
  border-radius: clamp(26px, 3vw, 42px);
  color: #ffffff;
  background:
    radial-gradient(circle at 48% 5%, rgba(118, 91, 255, 0.25), transparent 30%),
    radial-gradient(circle at 92% 92%, rgba(216, 255, 40, 0.13), transparent 28%),
    #171717;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
}

.landing-hero::before,
.landing-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.landing-hero::before {
  top: -170px;
  left: 34%;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.landing-hero::after {
  right: -90px;
  bottom: 90px;
  width: 240px;
  height: 240px;
  background: rgba(216, 255, 40, 0.06);
}

.landing-copy {
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: clamp(8px, 1.3vw, 20px);
  color: #ffffff;
}

.landing-kickers {
  width: min(520px, 100%);
  display: block;
  margin: 0 0 clamp(20px, 2.8vh, 32px);
}

.landing-hero .eyebrow {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.07);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.landing-hero .eyebrow::before {
  content: "";
  min-width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: inset 0 0 0 7px #272727;
}

.landing-hero h1 {
  max-width: 720px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(48px, 4.7vw, 76px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}

.landing-accent {
  max-width: 620px;
  margin: clamp(20px, 2.7vh, 30px) 0 0;
  color: var(--lime);
  font-size: clamp(19px, 1.65vw, 25px);
  font-weight: 600;
  line-height: 1.22;
}

.landing-accent span {
  color: inherit;
}

.landing-hero .lead {
  max-width: 600px;
  margin: clamp(14px, 2vh, 22px) 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.45;
}

.landing-hero .hero-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: clamp(24px, 3vh, 34px);
}

.landing-hero .button {
  min-width: 260px;
  min-height: 60px;
  justify-content: center;
  gap: 16px;
  border-radius: var(--radius-pill);
  padding: 0 30px;
  color: #ffffff;
  background: linear-gradient(110deg, #3d3bff 0 36%, #786cff 47%, #b78cff 52%, #4b49ff 60%, #3d3bff 100%);
  background-size: 230% 100%;
  font-size: 17px;
  box-shadow: 0 16px 34px rgba(61, 59, 255, 0.32);
  animation: landingCtaShimmer 3s ease-in-out infinite;
}

.landing-hero .button.primary:hover {
  color: #111111;
  background: var(--lime);
  animation: none;
}

.landing-hero .button:focus-visible {
  outline-color: var(--primary);
}

.landing-illustration {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 390px;
  max-height: 520px;
  align-self: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.landing-illustration::after {
  display: none;
}

.landing-illustration .landing-reference-panel {
  position: absolute;
  z-index: 1;
  top: 2%;
  left: 48%;
  width: auto;
  height: 96%;
  max-width: none;
  display: block;
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.36));
  transform: translateX(-50%);
}

.landing-illustration .landing-reference-cursor {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 5%;
  width: clamp(150px, 38%, 230px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.32));
  transform: rotate(-4deg);
}

.landing-reference-sparkle {
  position: absolute;
  z-index: 4;
  top: 10%;
  right: 3%;
  width: clamp(92px, 20%, 132px);
  aspect-ratio: 162 / 130;
  display: block;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.25));
}

.landing-reference-sparkle > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.landing-reference-sparkle i {
  position: absolute;
  z-index: 1;
  display: block;
  background: #000000;
  clip-path: polygon(50% 0, 60% 36%, 100% 50%, 60% 64%, 50% 100%, 40% 64%, 0 50%, 40% 36%);
}

.landing-reference-sparkle i:first-of-type {
  top: 31%;
  left: 27%;
  width: 43%;
  height: 53%;
}

.landing-reference-sparkle i:last-of-type {
  top: 24%;
  right: 21%;
  width: 19%;
  height: 23%;
}

.landing-benefits {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.landing-benefit {
  min-width: 0;
  min-height: 98px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.landing-benefit--result {
  border-color: rgba(255, 255, 255, 0.22);
  color: #111111;
  background: linear-gradient(135deg, #ffb38d, #ff7ca5);
}

.landing-benefit-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #000000;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.landing-benefit strong {
  display: block;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.15;
}

.landing-benefit p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  line-height: 1.35;
}

.landing-benefit--result p {
  color: rgba(0, 0, 0, 0.62);
}

@keyframes landingCtaShimmer {
  0%, 22% { background-position: 100% 50%; }
  68%, 100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero .button {
    animation: none;
  }
}

@media (max-width: 980px) and (min-width: 641px) {
  .landing-hero {
    grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
    padding: 28px;
  }

  .landing-copy {
    padding: 8px;
  }

  .landing-hero h1 {
    font-size: clamp(43px, 5.5vw, 56px);
  }

  .landing-benefit {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 14px;
  }

  .landing-benefit-icon {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 640px) {
  .landing-header .simple-header-inner {
    width: calc(100% - 20px);
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .landing-header .brand {
    flex: 0 0 auto;
  }

  .landing-header .brand img {
    width: 96px;
  }

  .landing-header-meta {
    flex: 0 0 auto;
    min-height: 32px;
    gap: 7px;
    padding: 0 11px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
  }

  .landing-header-meta span {
    width: 8px;
    height: 8px;
    box-shadow: none;
  }

  .landing-screen {
    width: 100%;
    min-height: calc(100dvh - 64px);
    padding: 0 10px 12px;
    overflow: visible;
    background:
      radial-gradient(circle at 15% 0, rgba(119, 94, 255, 0.18), transparent 34%),
      linear-gradient(115deg, #f0edff 0%, #eef8ff 100%);
  }

  .landing-hero {
    min-height: calc(100dvh - 64px);
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-content: start;
    gap: 14px;
    padding: 16px 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(20, 18, 45, 0.18);
  }

  .landing-copy {
    display: contents;
  }

  .landing-kickers {
    order: 1;
    width: 100%;
    display: block;
    margin: 0;
  }

  .landing-hero .eyebrow {
    width: 100%;
    min-height: 38px;
    gap: 9px;
    padding: 6px 9px 6px 6px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1.2;
  }

  .landing-hero .eyebrow::before {
    min-width: 22px;
    min-height: 22px;
  }

  .landing-hero h1 {
    order: 2;
    max-width: 100%;
    font-size: clamp(38px, 10.8vw, 44px);
    letter-spacing: -0.045em;
    line-height: 0.94;
  }

  .landing-accent {
    order: 3;
    margin-top: 0;
    font-size: 18px;
    line-height: 1.25;
  }

  .landing-hero .lead {
    order: 4;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.42;
  }

  .landing-hero .hero-actions {
    position: fixed;
    z-index: 40;
    right: 20px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 20px;
    order: 7;
    width: auto;
    margin: 0;
    align-items: stretch;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    background: rgba(17, 17, 17, 0.78);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(12px);
  }

  .landing-hero .hero-actions .button.primary {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    justify-content: center;
    padding: 0 24px;
    font-size: 17px;
  }

  .landing-illustration {
    order: 5;
    width: 100%;
    height: clamp(240px, 62vw, 270px);
    min-height: 240px;
    max-height: 270px;
    border-radius: 0;
  }

  .landing-illustration .landing-reference-panel {
    top: 5%;
    height: 90%;
  }

  .landing-illustration .landing-reference-cursor {
    right: 2%;
    bottom: 5%;
    width: 39%;
  }

  .landing-reference-sparkle {
    top: 13%;
    right: 5%;
    width: 22%;
  }

  .landing-benefits {
    order: 6;
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 4px;
    margin-bottom: 86px;
  }

  .landing-benefit {
    min-height: 82px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding: 13px 14px;
    border-radius: 18px;
  }

  .landing-benefit-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .landing-benefit strong {
    font-size: 16px;
  }

  .landing-benefit p {
    margin-top: 4px;
    font-size: 12px;
  }
}

@media (max-height: 720px) and (max-width: 640px) {
  .landing-hero h1 {
    font-size: 36px;
  }

  .landing-hero .lead {
    font-size: 15px;
  }

}

.course-offer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.course-offer-modal {
  position: relative;
  width: min(720px, 100%);
  display: grid;
  gap: clamp(14px, 2.2vh, 22px);
  padding: clamp(26px, 5vw, 52px);
  border-radius: clamp(22px, 3vw, 36px);
  color: var(--text);
  background:
    radial-gradient(circle at 100% 0, rgba(216, 255, 40, 0.72), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(232, 231, 255, 0.98));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.34);
  animation: courseOfferIn 0.34s var(--motion) both;
}

.course-offer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 255, 255, 0.78);
  font-size: 28px;
  line-height: 1;
}

.course-offer-heading {
  display: flex;
  gap: 10px;
  align-items: center;
}

.course-offer-heading span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.course-offer-heading b {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 13px;
  color: var(--text-on-dark);
  background: var(--primary);
  font-size: 15px;
}

.course-offer-modal h2 {
  max-width: 12ch;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 0.96;
}

.course-offer-promise {
  max-width: 610px;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  line-height: 1.12;
}

.course-offer-price {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 12px;
}

.course-offer-price > div {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.course-offer-price span {
  color: rgba(0, 0, 0, 0.54);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.course-offer-price s {
  color: rgba(0, 0, 0, 0.58);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  text-decoration-thickness: 3px;
  text-decoration-color: #f05252;
}

.course-offer-price-current {
  color: var(--text-on-dark);
  background: var(--bg-dark) !important;
}

.course-offer-price-current span {
  color: rgba(255, 255, 255, 0.64);
}

.course-offer-price-current strong {
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1;
}

.course-offer-cta {
  width: 100%;
  min-height: 58px;
  font-size: 17px;
}

.course-offer-later {
  justify-self: center;
  border: 0;
  padding: 2px 8px;
  color: rgba(0, 0, 0, 0.56);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes courseOfferIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .course-offer-backdrop {
    padding: 10px;
  }

  .course-offer-modal {
    gap: 11px;
    padding: 24px 16px 18px;
    border-radius: 22px;
  }

  .course-offer-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }

  .course-offer-modal h2 {
    max-width: 13ch;
    padding-right: 24px;
    font-size: clamp(32px, 10vw, 44px);
  }

  .course-offer-promise {
    font-size: clamp(17px, 5vw, 21px);
  }

  .course-offer-price {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .course-offer-price > div {
    padding: 11px 13px;
  }

  .course-offer-price-current strong {
    font-size: 31px;
  }

  .course-offer-cta {
    min-height: 50px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .barrier-screen::before {
    animation: none;
  }

  .processing-item {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .insight-popover-card {
    animation: none;
  }

  .ai-bubble.typing i,
  .mini-spinner {
    animation: none;
  }

  .course-offer-modal {
    animation: none;
  }
}

/* Mobile-first questionnaire, personalized benefits and profile creation. */
.question-screen,
.benefit-screen,
.profile-screen {
  width: 100%;
  height: auto !important;
  min-height: calc(100dvh - 76px) !important;
  padding: 12px;
  overflow: visible !important;
  align-items: stretch;
}

.question-screen .prep-main,
.benefit-screen .prep-main,
.profile-screen .prep-main {
  width: min(920px, 100%);
  min-height: calc(100dvh - 100px);
  max-height: none !important;
  padding: 22px 18px;
  gap: 14px;
  align-content: start;
  overflow: visible !important;
}

.question-screen .screen-title,
.benefit-screen .screen-title,
.profile-screen .screen-title {
  gap: 8px;
}

.question-screen .screen-title h2,
.benefit-screen .screen-title h2,
.profile-screen .screen-title h2 {
  font-size: clamp(28px, 8vw, 42px) !important;
  line-height: 1.02;
}

.question-screen .screen-title .body-copy,
.benefit-screen .screen-title .body-copy,
.profile-screen .screen-title .body-copy {
  max-width: 760px;
  font-size: 15px !important;
  line-height: 1.42;
}

.question-screen .choice-grid {
  gap: 8px !important;
}

.question-screen .choice-card {
  min-height: 60px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 11px 13px !important;
  border: 2px solid var(--field-border);
  border-radius: 16px !important;
  background: #f5f5f5;
}

.question-screen .choice-card:hover {
  transform: none;
}

.question-screen .choice-card.is-selected {
  border-color: var(--text);
  background: var(--text);
  color: var(--text-on-dark);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.question-screen .choice-card.is-selected .choice-copy span {
  color: rgba(255, 255, 255, 0.72);
}

.question-screen .choice-card.is-selected .choice-radio {
  background: var(--primary);
}

.question-screen .choice-card.is-selected .choice-radio::after {
  background: var(--text);
}

.question-screen .choice-card:disabled {
  border-color: #dedede;
  background: #eeeeee;
  color: #8a8a8a;
  cursor: not-allowed;
  opacity: 0.62;
}

.question-screen .choice-card:disabled .choice-copy span {
  color: #999999;
}

.question-screen .choice-copy strong {
  font-size: 15px !important;
  line-height: 1.22 !important;
}

.question-screen .choice-copy span {
  margin-top: 2px;
  color: #5d5d5d;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.question-actions {
  display: grid;
  position: sticky;
  bottom: 0;
  z-index: 4;
  grid-template-columns: minmax(96px, 0.36fr) minmax(0, 1fr);
  gap: 8px !important;
  margin-top: auto;
  padding-top: 8px;
  padding-bottom: max(2px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface) 22%);
}

.question-actions--single {
  grid-template-columns: 1fr;
}

.question-actions .button {
  min-height: 50px !important;
  font-size: 15px !important;
}

.question-actions .button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.45);
}

.benefit-screen .prep-main {
  align-content: center;
}

.benefit-card {
  display: grid;
  gap: 18px;
  padding: 24px 20px;
  border-radius: 22px;
  background: linear-gradient(145deg, #d8ff28 0%, #c5f700 100%);
  box-shadow: 0 18px 50px rgba(74, 98, 0, 0.16);
}

.benefit-card__context,
.profile-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.benefit-card__context span,
.profile-summary span {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-weight: 700;
}

.benefit-card__metric {
  max-width: 700px;
  font-size: clamp(25px, 7vw, 42px);
  line-height: 1.06;
}

.benefit-card p {
  max-width: 700px;
  margin: 0;
  font-size: 16px;
  line-height: 1.42;
}

.benefit-card--compact {
  background: linear-gradient(145deg, #dff6ff 0%, #b9e9ff 100%);
}

.benefit-card__label {
  font-size: 13px;
  font-weight: 700;
}

.benefit-steps {
  display: grid;
  gap: 8px;
}

.benefit-steps span {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

.benefit-steps b {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--text-on-dark);
}

.profile-screen .prep-main {
  align-content: center;
}

.profile-activation-screen .prep-main {
  width: min(760px, 100%);
}

.activation-console {
  overflow: hidden;
  border-radius: 20px;
  color: var(--text-on-dark);
  background: var(--bg-dark);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
}

.activation-console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.activation-console__bar > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.activation-console__bar strong {
  color: var(--text-on-dark);
  font-size: 13px;
}

.activation-console__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(207, 255, 0, 0.13);
}

.activation-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 15px;
}

.activation-steps > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.06);
}

.activation-steps b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  font-size: 12px;
}

.activation-steps small {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
}

.activation-steps > span.is-active {
  color: var(--text);
  background: var(--lime);
}

.activation-steps > span.is-active b {
  border-color: var(--text);
}

.activation-steps > span.is-complete {
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, 0.12);
}

.activation-steps > span.is-complete b {
  border-color: var(--lime);
  color: var(--text);
  background: var(--lime);
}

.activation-form {
  display: grid;
  gap: 14px;
}

.activation-message {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--field-border);
}

.activation-message p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.activation-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  color: var(--text);
  background: var(--lime);
  font-size: 12px;
  font-weight: 900;
}

.profile-marina-card {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  animation: profileMessageCardIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}

.profile-marina-card .project-chat-brief__message > .colleague-avatar {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  opacity: 0;
  transform: scale(0.78);
  animation: profileMessageAvatarIn 380ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards;
}

.profile-marina-card .project-chat-brief__person,
.profile-marina-card .project-chat-brief__content p {
  opacity: 0;
  transform: translateX(-12px);
  animation: profileMessageTextIn 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.profile-marina-card .project-chat-brief__person {
  animation-delay: 360ms;
}

.profile-marina-card .project-chat-brief__content p {
  padding: 14px 17px;
  font-size: 17px;
  line-height: 1.45;
  animation-delay: 480ms;
}

.profile-activation-screen .prep-main {
  animation: profileStepIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.profile-activation-screen .activation-form > .field-block:not(.skb-consent) {
  opacity: 0;
  transform: translateY(8px);
  animation: profileContextIn 420ms cubic-bezier(0.22, 1, 0.36, 1) 720ms forwards;
}

.profile-activation-screen .profile-form__actions,
.profile-activation-screen .skb-consent,
.profile-activation-screen .skb-consent__note {
  opacity: 0;
  transform: translateY(6px);
  animation: profileContextIn 400ms cubic-bezier(0.22, 1, 0.36, 1) 820ms forwards;
}

@keyframes profileStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes profileContextIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes profileMessageCardIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes profileMessageAvatarIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes profileMessageTextIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.profile-summary {
  margin-top: -2px;
}

.profile-form {
  padding: 18px;
  border: 1px solid var(--field-border);
  border-radius: 20px;
  background: #f7f7f7;
}

.profile-form .field {
  min-height: 52px;
  padding: 13px 14px !important;
  border-radius: 13px;
  background: #fff;
  font-size: 16px;
}

.profile-form .field-block.has-error .field {
  border-color: #b42318;
  background: #fff7f6;
}

.field-error {
  color: #9f1d13;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.profile-form__actions {
  display: grid;
  grid-template-columns: minmax(96px, 0.36fr) minmax(0, 1fr);
  gap: 8px;
}

.profile-form__actions .button {
  min-height: 50px !important;
}

.profile-form .consent-marketing-muted {
  margin: 2px 0 0;
  padding: 0 2px;
  color: #6f6f6f;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

.profile-form .consent-marketing-muted a {
  color: #6f6f6f;
}

.profile-form .consent-row--muted {
  font-size: 12px !important;
  line-height: 1.35;
}

.profile-form__note {
  margin: 0;
  color: #5d5d5d;
  font-size: 12px;
  line-height: 1.4;
}

.profile-form .consent-row {
  align-items: flex-start;
}

.profile-form .consent-row input {
  flex: 0 0 auto;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .question-screen,
  .benefit-screen,
  .profile-screen {
    width: 100% !important;
    padding: 8px !important;
  }

  .question-screen .prep-main,
  .benefit-screen .prep-main,
  .profile-screen .prep-main {
    min-height: calc(100dvh - 92px);
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }

  .question-screen .eyebrow,
  .benefit-screen .eyebrow,
  .profile-screen .eyebrow {
    min-height: 34px !important;
    padding: 0 12px;
    font-size: 13px !important;
  }

  .question-screen .screen-title h2,
  .benefit-screen .screen-title h2,
  .profile-screen .screen-title h2 {
    font-size: clamp(26px, 7.3vw, 31px) !important;
  }

  .profile-form {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 14px;
  }

  .profile-form .field-block {
    grid-column: 1;
  }

  .profile-form__actions {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .activation-console__bar > span:last-child {
    display: none;
  }

  .activation-steps {
    padding: 10px;
  }

  .activation-steps > span {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    padding: 7px 6px;
  }

  .activation-steps b {
    width: 24px;
    height: 24px;
  }

  .benefit-card {
    padding: 21px 18px;
  }
}

@media (min-width: 761px) {
  .question-screen,
  .benefit-screen,
  .profile-screen {
    padding: 24px;
  }

  .question-screen .prep-main,
  .benefit-screen .prep-main,
  .profile-screen .prep-main {
    min-height: min(720px, calc(100dvh - 124px));
    padding: 38px 44px;
    gap: 20px;
  }

  .question-screen .choice-card {
    height: auto;
    min-height: 60px !important;
    padding: 8px 14px !important;
  }

  .question-screen .choice-copy strong {
    font-size: 17px !important;
  }

  .question-screen .choice-copy span {
    font-size: 13px !important;
  }

  .age-question-screen .prep-main {
    align-content: center;
  }

  .age-question-screen .choice-grid {
    align-self: start;
    align-content: start;
    grid-auto-rows: 76px;
  }

  .age-question-screen .choice-card {
    min-height: 76px !important;
    padding: 14px 20px !important;
  }

  .benefit-card {
    padding: 34px;
  }
}

/* Personalized insights appear as modal overlays over the answered question. */
.shell:has(> .insight-overlay-screen) > .simple-header {
  background: rgba(15, 15, 15, 0.42);
}

.insight-overlay-screen {
  position: relative;
  width: 100%;
  height: calc(100dvh - 76px) !important;
  min-height: 0 !important;
  padding: 10px;
  overflow: hidden !important;
  align-items: stretch;
}

.insight-backdrop-question {
  width: min(920px, 100%);
  height: 100%;
  min-height: 0;
  max-height: none !important;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 42px);
  gap: 12px;
  align-content: start;
  overflow: hidden !important;
  opacity: 0.5;
  filter: blur(0.8px);
  transform: scale(0.985);
  pointer-events: none;
}

.insight-backdrop-question .choice-grid {
  gap: 8px;
}

.insight-backdrop-question .choice-card {
  min-height: 58px;
  padding: 10px 14px;
  border: 2px solid var(--field-border);
}

.insight-backdrop-question .choice-card.is-selected {
  border-color: var(--text);
  background: var(--text);
  color: var(--text-on-dark);
}

.insight-backdrop-question .choice-card.is-selected .choice-copy span {
  color: rgba(255, 255, 255, 0.72);
}

.insight-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 15, 15, 0.42);
  backdrop-filter: blur(2px);
}

.insight-modal {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100dvh - 112px);
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  animation: insightModalIn 220ms ease-out both;
}

.insight-modal__primary {
  display: grid;
  gap: 13px;
  padding: 30px;
  border-radius: 20px;
  background: linear-gradient(145deg, #d8ff28 0%, #c5f700 100%);
}

.insight-modal__tag {
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--text);
  color: var(--text-on-dark);
  font-size: 12px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .profile-activation-screen .prep-main,
  .profile-marina-card,
  .profile-marina-card .project-chat-brief__message > .colleague-avatar,
  .profile-marina-card .project-chat-brief__person,
  .profile-marina-card .project-chat-brief__content p,
  .profile-activation-screen .activation-form > .field-block:not(.skb-consent),
  .profile-activation-screen .profile-form__actions,
  .profile-activation-screen .skb-consent,
  .profile-activation-screen .skb-consent__note {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.insight-modal__tag--solution {
  border: 1px solid rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
}

.insight-modal__contexts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.insight-modal__contexts span {
  width: fit-content;
  padding: 6px 9px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 700;
}

.insight-modal__primary h2 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(32px, 4.2vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.insight-modal__lead {
  max-width: 680px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
}

.insight-skill-highlight {
  font-weight: 850;
}

.insight-benefit-list {
  display: grid;
  gap: 15px;
}

.insight-benefit-item {
  display: grid;
  gap: 5px;
}

.insight-benefit-item__problem {
  font-size: 1.04em;
  line-height: 1.28;
}

.insight-benefit-item__solution {
  font-weight: 400;
}

.insight-modal__detail {
  max-width: 680px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  font-size: 14px;
  line-height: 1.4;
}

.insight-modal__metric {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--field-border);
  border-radius: 16px;
  background: #f4f4f4;
}

.insight-modal__metric span {
  color: #666;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.insight-modal__metric strong {
  font-size: 20px;
  line-height: 1.2;
}

.insight-modal__metric .insight-metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.insight-modal__metric .insight-metric-item {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 11px;
  background: #ffffff;
}

.insight-modal__metric .insight-metric-item__label {
  color: #666666;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.insight-modal__metric .insight-metric-item__value {
  color: var(--text);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: normal;
  text-transform: none;
}

.insight-modal__actions {
  display: grid;
  grid-template-columns: minmax(96px, 0.34fr) minmax(0, 1fr);
  gap: 8px;
}

.insight-modal__actions .button {
  min-height: 50px;
}

@media (min-width: 641px) {
  .insight-modal--multiple {
    width: min(920px, 100%);
    gap: 10px;
    padding: 12px;
  }

  .insight-modal--multiple .insight-modal__primary {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
    padding: 24px;
  }

  .insight-modal--multiple .insight-modal__contexts {
    flex-wrap: nowrap;
  }

  .insight-modal--multiple .insight-modal__primary h2,
  .insight-modal--multiple .insight-modal__lead {
    grid-column: 1 / -1;
    max-width: none;
  }

  .insight-modal--multiple .insight-modal__primary h2 {
    font-size: clamp(32px, 3vw, 40px);
  }

  .insight-modal--multiple .insight-modal__lead {
    font-size: 16px;
  }

  .insight-modal--multiple .insight-benefit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .insight-modal--multiple .insight-benefit-item {
    align-content: start;
    padding: 11px 13px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.32);
  }

  .insight-modal--multiple .insight-modal__metric {
    padding: 10px 12px;
  }
}

@keyframes insightModalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .insight-overlay-screen {
    width: 100% !important;
    padding: 8px !important;
  }

  .insight-backdrop-question {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }

  .insight-backdrop-question .screen-title h2 {
    font-size: 29px;
  }

  .insight-overlay-layer {
    place-items: end center;
    padding: 8px;
  }

  .insight-modal {
    width: 100%;
    max-height: calc(100dvh - 92px);
    gap: 9px;
    padding: 9px;
    border-radius: 24px 24px 16px 16px;
  }

  .insight-modal::before {
    content: "";
    width: 42px;
    height: 4px;
    margin: 1px auto 0;
    border-radius: 999px;
    background: #c6c6c6;
  }

  .insight-modal__primary {
    gap: 10px;
    padding: 19px 17px;
    border-radius: 18px;
  }

  .insight-modal__primary h2 {
    font-size: clamp(27px, 8vw, 32px);
    line-height: 1;
  }

  .insight-modal__lead {
    font-size: 16px;
    line-height: 1.32;
  }

  .insight-modal__detail {
    padding-top: 9px;
    font-size: 13px;
  }

  .insight-modal__metric {
    padding: 12px 14px;
  }

  .insight-modal__metric strong {
    font-size: 16px;
  }

  .insight-modal__metric .insight-metric-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .insight-modal__metric .insight-metric-item {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 11px;
    background: #ffffff;
  }

  .insight-modal__metric .insight-metric-item__label {
    color: #666666;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
  }

  .insight-modal__metric .insight-metric-item__label::after {
    content: "";
  }

  .insight-modal__metric .insight-metric-item__value {
    color: var(--text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.25;
  }

  .insight-modal__actions {
    position: sticky;
    bottom: -9px;
    padding-top: 2px;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    background: var(--surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  .insight-modal {
    animation: none;
  }
}

/* Тестовый рабочий день: сначала последовательный мобильный сценарий, затем расширение. */
.stage-back {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.58);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.stage-back:hover {
  color: var(--primary);
}

.stage-topline {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.result-delivery-status {
  width: fit-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border: 1px solid rgba(103, 136, 0, 0.18);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lime) 78%, white);
  box-shadow: 0 8px 22px rgba(113, 145, 0, 0.12);
}

.result-delivery-status__icon {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #111;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.result-delivery-status__copy {
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.result-delivery-status__copy strong {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.result-delivery-status__copy small {
  color: rgba(0, 0, 0, 0.56);
  font-size: 9px;
  font-weight: 650;
}

.workday-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.workday-summary > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 13px 14px;
  border: 1px solid var(--field-border);
  border-radius: 16px;
  background: var(--surface);
}

.workday-summary strong {
  font-size: 18px;
  line-height: 1.1;
}

.workday-summary span {
  color: rgba(0, 0, 0, 0.58);
  font-size: 11px;
  line-height: 1.25;
}

.workday-start-stage .workday-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workday-start-stage .workday-steps > div {
  position: relative;
  border: 1px solid var(--field-border);
  background: #f5f5f5;
}

.workday-start-stage .workday-steps > div.is-next {
  border-color: var(--primary);
  background: #ecebff;
  box-shadow: inset 0 0 0 1px var(--primary);
}

.workday-start-stage .workday-steps > div.is-finish {
  background: var(--mint);
}

.flow-step-label {
  width: fit-content;
  min-height: 24px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--text);
  background: var(--lime);
  font-size: 9px !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-step-label--result {
  margin-bottom: 2px;
}

.task-output-list {
  display: grid;
  gap: 5px;
}

.task-output-list > div {
  display: grid;
  gap: 1px;
  padding: 7px 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9px;
  background: #f7f7fa;
}

.task-output-list strong,
.task-output-list span,
.task-output-alert strong,
.task-output-alert span {
  display: block;
}

.task-output-list span {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.9em;
}

.task-output-alert {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border-radius: 10px;
  background: #fff0df;
  box-shadow: inset 3px 0 0 var(--peach);
}

.workday-warmup-stage {
  width: min(920px, calc(100% - 32px));
  grid-template-columns: 1fr;
}

.workday-warmup-stage .stage-main {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: center;
  padding: clamp(24px, 5vw, 58px);
}

.warmup-card {
  align-self: center;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 26px;
  color: var(--text);
  background:
    radial-gradient(circle at 92% 10%, rgba(61, 59, 255, 0.22), transparent 34%),
    var(--lime);
}

.warmup-card-top {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.warmup-role {
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.warmup-metric,
.warmup-result {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.warmup-metric span,
.warmup-result span {
  color: rgba(0, 0, 0, 0.55);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.warmup-metric strong,
.warmup-result strong {
  font-size: clamp(19px, 2.5vw, 28px);
  line-height: 1.1;
}

.timeline-body small {
  display: block;
  margin-top: 4px;
  color: rgba(0, 0, 0, 0.46);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.timeline-row.is-active .timeline-body small {
  color: var(--primary);
}

.timeline-row.is-done .timeline-body small {
  color: #38763e;
}

.ai-stage .stage-main {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.fitting-stage .source-messages {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.fitting-stage .source-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.fitting-stage .source-panel > .mobile-ai-launch {
  flex: 0 0 auto;
}

@media (min-width: 761px) {
  .workday-start-stage {
    width: min(1240px, calc(100% - 32px));
  }

  .workday-start-stage .stage-main {
    grid-template-rows: auto auto auto auto auto auto;
    align-content: center;
    padding-inline: clamp(28px, 4vw, 52px);
  }

  .workday-start-stage .screen-title h2 {
    font-size: clamp(30px, 4.2vh, 46px);
  }

  .workday-start-stage .screen-title .body-copy {
    font-size: clamp(15px, 2vh, 19px);
  }

  .workday-start-stage .workday-steps > div {
    min-height: 128px;
  }
}

@media (max-width: 980px) {
  .fitting-shell .topbar-inner {
    min-height: 64px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .fitting-shell .top-progress {
    grid-column: auto;
    order: initial;
  }

  .fitting-shell .fitting-stage {
    height: calc(100dvh - 64px);
  }
}

@media (max-width: 760px) {
  .fitting-shell .topbar {
    background: rgba(250, 250, 252, 0.90);
  }

  .fitting-shell .topbar-inner {
    width: calc(100% - 20px);
    min-height: 64px;
    gap: 10px;
  }

  .fitting-shell .brand img {
    width: 82px;
  }

  .fitting-shell .top-progress-row {
    font-size: 10px;
  }

  .fitting-shell .top-progress-row span:last-child {
    display: none;
  }

  .fitting-shell .header-actions {
    gap: 0;
  }

  .fitting-shell .reset-button {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 10px;
  }

  .fitting-shell .fitting-stage {
    width: 100%;
    height: calc(100dvh - 64px);
    padding: 0;
  }

  .fitting-stage .stage-main {
    border-radius: 0;
  }

  .stage-back {
    min-height: 24px;
    font-size: 11px;
  }

  .workday-start-stage .stage-main {
    display: grid;
    grid-template-rows: auto auto auto auto auto auto;
    align-content: start;
    gap: 9px;
    padding: 10px 12px calc(82px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .workday-start-stage .screen-title {
    gap: 5px;
  }

  .workday-start-stage .screen-title h2 {
    font-size: clamp(25px, 7vw, 31px);
    line-height: 0.98;
  }

  .workday-start-stage .screen-title .body-copy {
    font-size: 13px;
    line-height: 1.28;
  }

  .workday-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .workday-summary > div {
    padding: 9px 8px;
    border-radius: 12px;
  }

  .workday-summary strong {
    font-size: 14px;
  }

  .workday-summary span {
    font-size: 9px;
  }

  .workday-start-stage .workday-brief {
    gap: 8px;
    padding: 10px;
  }

  .workday-start-stage .task-counter {
    min-height: 25px;
    font-size: 9px;
  }

  .workday-start-stage .workday-steps {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .workday-start-stage .workday-steps > div {
    min-height: 0;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 2px 9px;
    padding: 8px 9px;
  }

  .workday-start-stage .workday-steps b {
    grid-row: 1 / span 2;
    font-size: 10px;
  }

  .workday-start-stage .workday-steps span {
    font-size: 13px;
  }

  .workday-start-stage .workday-steps small {
    font-size: 9px;
    line-height: 1.2;
  }

  .workday-start-stage .prep-note {
    padding: 9px 10px;
    font-size: 10px;
  }

  .mobile-action-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    margin: 0;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    background: rgba(250, 250, 252, 0.94);
    border-top: 1px solid var(--field-border);
    backdrop-filter: blur(14px);
  }

  .mobile-action-dock .button {
    width: 100%;
    min-height: 52px;
  }

  .workday-warmup-stage .stage-main {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px 12px calc(86px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .workday-warmup-stage .screen-title h2 {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 0.98;
  }

  .workday-warmup-stage .screen-title .body-copy {
    font-size: 14px;
    line-height: 1.35;
  }

  .warmup-card {
    align-self: center;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
    border-radius: 22px;
  }

  .warmup-card-top {
    grid-column: auto;
  }

  .warmup-metric,
  .warmup-result {
    padding: 14px;
    border-radius: 15px;
  }

  .warmup-metric strong,
  .warmup-result strong {
    font-size: 20px;
  }

  .ai-stage .stage-main {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px 10px 10px;
  }

  .ai-stage .screen-title h2 {
    font-size: clamp(22px, 6vw, 27px);
    line-height: 1;
  }

  .ai-stage .screen-title .body-copy {
    font-size: 11px;
    line-height: 1.25;
  }

  .fitting-stage .task-label {
    min-height: 24px;
  }

  .fitting-stage .source-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 9px;
  }

  .fitting-stage .source-heading {
    padding-bottom: 6px;
  }

  .fitting-stage .source-heading b {
    font-size: 16px;
  }

  .fitting-stage .source-messages {
    padding-right: 2px;
  }

  .fitting-stage .source-message {
    max-width: 96%;
    padding: 7px 8px;
  }

  .fitting-stage .source-message b {
    font-size: 9px;
  }

  .fitting-stage .source-message span {
    font-size: 11px;
    line-height: 1.25;
  }

  .mobile-ai-launch {
    position: sticky;
    bottom: 0;
    min-height: 50px;
    box-shadow: 0 -10px 24px rgba(250, 250, 252, 0.94);
  }

  .fitting-stage .work-chat {
    inset: 4px 6px 6px;
    height: auto;
  }

  .fitting-stage .work-chat-header {
    min-height: 56px;
  }

  .fitting-stage .ai-feed {
    padding: 10px;
  }

  .fitting-stage .ai-bubble {
    max-width: 94%;
    font-size: 11px;
    line-height: 1.32;
  }

  .task-output-list {
    gap: 4px;
  }

  .task-output-list > div {
    padding: 6px 7px;
  }

  .fitting-stage .ai-composer {
    gap: 7px;
    padding: 9px 10px max(9px, env(safe-area-inset-bottom));
  }

  .fitting-stage .prompt-chip {
    min-height: 32px;
    font-size: 10px;
  }

  .fitting-stage .ai-composer-draft {
    min-height: 44px;
    font-size: 10px;
  }

  .fitting-stage .button.compact {
    min-height: 42px;
    font-size: 11px;
  }
}

/* Персональный результат: единая mobile-first выдача для всех ролей. */
.result-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

.result-header__inner {
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
}

.result-header__inner .brand span,
.result-header__inner .reset-button {
  display: none;
}

.result-header__status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 999px;
  color: #23451e;
  background: #e9f8e2;
  font-size: 11px;
  font-weight: 800;
}

.result-header__status span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2e7b31;
  font-size: 10px;
}

.result-stage {
  width: 100%;
  grid-template-columns: 1fr;
  padding: 0 0 calc(32px + env(safe-area-inset-bottom));
  background: #fff;
}

.result-stage .stage-main {
  width: 100%;
  min-height: 0;
  gap: 14px;
  padding: 20px 16px;
  border-radius: 0;
  background: #fff;
  overflow: visible;
}

.result-stage .screen-title {
  gap: 10px;
  padding: 0 2px 10px;
}

.result-stage .task-label {
  width: fit-content;
  margin: 2px 2px -4px;
  color: #23451e;
  border-color: rgba(46, 123, 49, 0.16);
  background: #e9f8e2;
}

.result-stage .screen-title h2 {
  max-width: 18ch;
  font-size: clamp(31px, 9vw, 42px);
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.result-stage .screen-title .body-copy {
  max-width: 760px;
  color: rgba(0, 0, 0, 0.66);
  font-size: 15px;
  line-height: 1.4;
}

.result-proof-strip {
  display: grid;
  gap: 8px;
}

.result-proof-strip > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  background: #f6f6f6;
}

.result-proof-strip span {
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-proof-strip strong {
  font-size: 13px;
  line-height: 1.35;
}

.result-profile-card,
.result-section,
.result-saving,
.result-lead-section,
.result-prompt {
  border-radius: 22px;
}

.result-profile-card {
  display: grid;
  gap: 14px;
  padding: 22px 18px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 0%, rgba(216, 255, 40, 0.28), transparent 36%),
    #000;
}

.result-profile-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.result-profile-card__meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 700;
}

.result-profile-card__meta span:first-child {
  border-color: var(--lime);
  color: #000;
  background: var(--lime);
}

.result-profile-card h3 {
  max-width: 20ch;
  font-size: clamp(29px, 8vw, 42px);
  overflow-wrap: anywhere;
}

.result-profile-card > p {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  line-height: 1.45;
}

.result-profile-card__outcome {
  display: grid;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.result-profile-card__outcome span,
.result-day-benefit span,
.result-saving > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-profile-card__outcome strong {
  font-size: 18px;
  line-height: 1.3;
}

.result-section {
  display: grid;
  gap: 16px;
  padding: 19px 17px;
  background: var(--surface);
}

.result-section--accent {
  background: #eef0ff;
}

.result-section__heading {
  display: grid;
  gap: 6px;
}

.result-section__heading > span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-section__heading h3 {
  max-width: 24ch;
  font-size: 24px;
  line-height: 1.05;
}

.result-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.result-chip-list span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.result-section__note {
  padding: 13px 14px;
  border-radius: 14px;
  background: #fff;
  font-size: 13px;
  line-height: 1.4;
}

.result-task-grid,
.result-skills,
.before-after-list,
.responsibility-grid {
  display: grid;
  gap: 9px;
}

.result-task {
  min-height: 64px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(61, 59, 255, 0.14);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
}

.result-task b {
  color: var(--primary);
  font-size: 12px;
}

.result-task span {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.result-day-benefit {
  display: grid;
  gap: 5px;
  padding: 15px;
  border-radius: 16px;
  background: var(--lime);
}

.result-day-benefit strong {
  font-size: 15px;
  line-height: 1.4;
}

.result-skill {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  background: #fff;
}

.result-skill > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  font-weight: 900;
}

.result-skill div {
  display: grid;
  gap: 4px;
}

.result-skill strong {
  font-size: 14px;
}

.result-skill p {
  color: rgba(0, 0, 0, 0.62);
  font-size: 12px;
  line-height: 1.4;
}

.result-saving {
  display: grid;
  gap: 16px;
  padding: 22px 18px;
  background: var(--lime);
}

.result-saving__headline {
  display: grid;
  gap: 5px;
}

.result-saving__headline > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-saving__headline > strong {
  max-width: 22ch;
  font-size: clamp(40px, 13vw, 62px);
  line-height: 0.92;
}

.result-saving__headline > b {
  font-size: 16px;
}

.result-saving__periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.result-saving__periods > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 11px 9px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.52);
}

.result-saving__periods span {
  color: rgba(0, 0, 0, 0.58);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.result-saving__periods strong {
  font-size: 13px;
  line-height: 1.15;
}

.result-saving p {
  max-width: 760px;
  color: rgba(0, 0, 0, 0.62);
  font-size: 12px;
  line-height: 1.4;
}

.result-saving .result-saving__formula {
  padding: 12px 13px;
  border-radius: 13px;
  color: #000;
  background: #fff;
  font-weight: 750;
}

.result-lead-section {
  display: grid;
  gap: 14px;
  padding: 20px 16px;
  background:
    radial-gradient(circle at 94% 4%, rgba(216, 255, 40, 0.66), transparent 26%),
    #dfe2ff;
}

.result-lead-section__header {
  display: grid;
  gap: 9px;
}

.result-lead-section__header > span {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-lead-section__header h3 {
  max-width: 20ch;
  font-size: 28px;
  line-height: 1.02;
}

.result-lead-section__header p {
  max-width: 760px;
  color: rgba(0, 0, 0, 0.66);
  font-size: 13px;
  line-height: 1.45;
}

.result-lead-benefits {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.result-lead-benefits li {
  position: relative;
  padding-left: 26px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.result-lead-benefits li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  font-size: 11px;
  font-weight: 900;
}

.result-lead-section .lead-context {
  background: rgba(255, 255, 255, 0.76);
}

.result-lead-section .lead-review-form {
  background: #fff;
}

.result-lead-section .lead-review-form__actions {
  grid-template-columns: 1fr;
}

.result-lead-section .lead-review-form__actions .button {
  min-height: 56px;
  font-size: 14px;
}

.lead-review-form__footnote {
  color: rgba(0, 0, 0, 0.54);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.lead-demo-note {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: color-mix(in srgb, var(--blue) 8%, #fff);
}

.lead-demo-note strong {
  font-size: 14px;
}

.lead-demo-note span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.before-after-board {
  display: grid;
  gap: 8px;
}

.before-after-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  background: #fff;
}

.before-after-row > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: #f1f1f1;
}

.before-after-row > div:last-child {
  background: #e1f7df;
}

.before-after-row > b {
  justify-self: center;
  color: var(--primary);
  font-size: 20px;
  transform: rotate(90deg);
}

.before-after-row span {
  color: rgba(0, 0, 0, 0.54);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.before-after-row strong {
  font-size: 14px;
  line-height: 1.3;
}

.responsibility-grid article {
  display: grid;
  gap: 11px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
}

.responsibility-grid article:last-child {
  color: #fff;
  background: #000;
}

.responsibility-grid article > span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.responsibility-grid article:last-child > span {
  color: var(--lime);
}

.responsibility-grid ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
}

.responsibility-grid li {
  font-size: 13px;
  line-height: 1.35;
}

.result-control-note {
  margin: 0;
  padding: 14px 15px;
  border-radius: 14px;
  color: #fff;
  background: var(--primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.result-course-offer {
  display: grid;
  gap: 18px;
  padding: 22px 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 0%, rgba(216, 255, 40, 0.7), transparent 28%),
    #dfe2ff;
}

.result-course-offer__copy {
  display: grid;
  gap: 9px;
}

.result-course-offer__copy > span {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.result-course-offer__copy h3 {
  max-width: 22ch;
  font-size: 28px;
  line-height: 1.02;
}

.result-course-offer__copy p,
.result-course-offer__note {
  max-width: 760px;
  color: rgba(0, 0, 0, 0.66);
  font-size: 13px;
  line-height: 1.45;
}

.result-course-benefits {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-course-benefits li {
  display: grid;
  gap: 3px;
  padding: 13px 14px 13px 42px;
  border: 1px solid rgba(61, 59, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  position: relative;
}

.result-course-benefits li::before {
  content: "✓";
  position: absolute;
  top: 13px;
  left: 14px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  font-size: 11px;
  font-weight: 900;
}

.result-course-benefits strong {
  font-size: 13px;
}

.result-course-benefits span {
  color: rgba(0, 0, 0, 0.58);
  font-size: 11px;
  line-height: 1.35;
}

.result-course-offer__note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(61, 59, 255, 0.14);
}

.result-prompt {
  padding: 16px;
  background: var(--pink);
}

.result-prompt summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.result-prompt[open] {
  display: grid;
  gap: 12px;
}

.result-prompt small {
  color: rgba(0, 0, 0, 0.62);
  font-size: 11px;
}

.result-prompt__button {
  min-height: 46px;
  justify-self: start;
  color: #fff;
  border-color: #000;
  background: #000;
}

.result-prompt__button.is-complete {
  color: #23451e;
  border-color: #2e7b31;
  background: #e9f8e2;
}

.result-final-actions {
  display: grid;
  gap: 9px;
  padding: 18px;
  border: 1px solid rgba(61, 59, 255, 0.16);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(28, 26, 110, 0.12);
}

.result-final-actions .button {
  min-height: 58px;
  padding-inline: 18px;
  white-space: normal;
  line-height: 1.15;
}

.result-final-actions p {
  margin: 0;
  color: rgba(0, 0, 0, 0.56);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

/* Финальная проверка контактов и состояния отправки. */
.course-lead-stage {
  width: 100%;
  height: auto;
  min-height: calc(100dvh - 68px);
  grid-template-columns: 1fr;
  padding: 0 0 32px;
  overflow: visible;
}

.course-lead-stage .stage-main {
  width: 100%;
  height: auto;
  min-height: 0;
  align-content: start;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 0;
  overflow: visible;
}

.course-lead-stage .screen-title h2 {
  max-width: 20ch;
  font-size: clamp(30px, 8.5vw, 42px);
  overflow-wrap: anywhere;
}

.course-lead-stage .screen-title .body-copy {
  font-size: 14px;
}

.lead-context {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: var(--lime);
}

.lead-context span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lead-context strong {
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lead-context p {
  color: rgba(0, 0, 0, 0.64);
  font-size: 12px;
  line-height: 1.4;
}

.lead-review-form {
  display: grid;
  gap: 14px;
  padding: 17px 15px;
  border: 1px solid var(--field-border);
  border-radius: 20px;
  background: #f7f7f7;
}

.lead-review-form__intro {
  display: grid;
  gap: 6px;
}

.lead-review-form__intro h3 {
  font-size: 22px;
}

.lead-review-form__intro p {
  color: rgba(0, 0, 0, 0.62);
  font-size: 12px;
  line-height: 1.4;
}

.lead-review-form__fields {
  grid-template-columns: 1fr;
  gap: 11px;
}

.lead-review-form .field,
.lead-review-form .textarea {
  min-height: 52px;
  border-radius: 13px;
  background: #fff;
  font-size: 16px;
}

.lead-review-form .textarea {
  min-height: 92px;
  resize: vertical;
}

.lead-review-form .field-block.has-error .field {
  border-color: #b42318;
  background: #fff7f6;
}

.lead-review-form .consent-row {
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.35;
}

.lead-review-form .consent-row input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.lead-submit-status:empty {
  display: none;
}

.submit-error {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid #f0b3ad;
  border-radius: 14px;
  color: #8e1c14;
  background: #fff1ef;
}

.submit-error span {
  font-size: 12px;
  line-height: 1.35;
}

.lead-review-form__actions {
  display: grid;
  gap: 8px;
}

.lead-review-form__actions .button {
  min-height: 52px;
  white-space: normal;
  line-height: 1.15;
}

.button[disabled] {
  cursor: wait;
  opacity: 0.62;
}

@media (min-width: 761px) {
  .result-header__inner {
    width: min(1180px, calc(100% - 48px));
    min-height: 76px;
    grid-template-columns: 1fr auto auto;
    margin: 0 auto;
    padding: 12px 0;
  }

  .result-header__inner .brand span,
  .result-header__inner .reset-button {
    display: inline-flex;
  }

  .result-stage {
    width: min(1180px, calc(100% - 48px));
    padding: 34px 0 64px;
  }

  .result-stage .stage-main {
    gap: 18px;
    padding: 42px;
    border-radius: 30px;
    background: #fafafa;
  }

  .result-stage .screen-title {
    padding: 0 4px 14px;
  }

  .result-stage .screen-title h2 {
    max-width: 20ch;
    font-size: clamp(48px, 5.2vw, 70px);
  }

  .result-stage .screen-title .body-copy {
    font-size: 18px;
  }

  .result-proof-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .result-proof-strip > div {
    padding: 17px;
  }

  .result-proof-strip strong {
    font-size: 14px;
  }

  .result-profile-card,
  .result-section,
  .result-saving,
  .result-lead-section,
  .result-course-offer {
    padding: 30px;
    border-radius: 26px;
  }

  .result-profile-card h3 {
    font-size: clamp(40px, 4vw, 56px);
  }

  .result-profile-card > p {
    font-size: 18px;
  }

  .result-section__heading h3 {
    font-size: 32px;
  }

  .result-task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-skills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .before-after-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .before-after-row {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    align-items: stretch;
    padding: 14px;
  }

  .before-after-row > b {
    align-self: center;
    transform: none;
  }

  .before-after-row > div {
    padding: 16px;
  }

  .responsibility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-saving__headline > strong {
    font-size: 64px;
  }

  .result-saving__periods > div {
    padding: 15px;
  }

  .result-saving__periods strong {
    font-size: 18px;
  }

  .result-course-offer__copy h3 {
    font-size: 40px;
  }

  .result-course-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-final-actions {
    padding: 24px;
  }

  .result-final-actions .button {
    width: min(100%, 620px);
    justify-self: center;
    font-size: 16px;
  }

  .result-lead-section {
    gap: 18px;
  }

  .result-lead-section__header h3 {
    font-size: 38px;
  }

  .course-lead-stage {
    width: min(1100px, calc(100% - 48px));
    min-height: calc(100dvh - 76px);
    padding: 30px 0 48px;
  }

  .course-lead-stage .stage-main {
    gap: 18px;
    padding: 38px 44px;
    border-radius: 28px;
  }

  .course-lead-stage .screen-title h2 {
    font-size: clamp(40px, 4.4vw, 58px);
  }

  .course-lead-stage .screen-title .body-copy {
    font-size: 17px;
  }

  .lead-context,
  .lead-review-form {
    padding: 22px;
    border-radius: 22px;
  }

  .lead-review-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-review-form__actions {
    grid-template-columns: 1fr;
  }

  .result-lead-section .lead-review-form__actions {
    grid-template-columns: 1fr;
  }
}

/* Практическая ветка: единая mobile-first механика для разных профессий. */
.task-context-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.task-context-strip > div {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(61, 59, 255, 0.14);
  border-radius: 14px;
  background: #f5f4ff;
}

.task-context-strip span,
.benefit-outcome > span,
.benefit-human > span,
.branch-artifact > span {
  color: var(--primary);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.task-context-strip strong {
  font-size: 12px;
  line-height: 1.35;
}

.ai-stage .stage-main {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}

.flow-step-label {
  color: #3530ca;
  border: 1px solid rgba(61, 59, 255, 0.18);
  background: #ebeaff;
}

.flow-step-label--result {
  color: #23451e;
  border-color: rgba(58, 123, 48, 0.18);
  background: #e9f8e2;
}

.ai-task-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ai-task-grid.is-chat-open {
  grid-template-columns: minmax(330px, 0.88fr) minmax(440px, 1.12fr);
}

.source-panel {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-ai-launch {
  min-height: 54px;
  display: flex;
  position: relative;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0 18px;
  color: var(--text-on-dark);
  background: var(--primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.ai-task-grid.is-chat-open .mobile-ai-launch {
  display: none;
}

.ai-launch-hint {
  position: absolute;
  right: 10px;
  bottom: calc(100% + 8px);
  display: none;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--text);
  background: var(--lime);
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(30, 28, 80, 0.18);
}

.mobile-ai-launch.is-hinting {
  animation: ai-launch-pulse 1.6s ease-in-out 2;
}

.mobile-ai-launch.is-hinting .ai-launch-hint {
  display: block;
}

@keyframes ai-launch-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 59, 255, 0.28); }
  50% { box-shadow: 0 0 0 8px rgba(61, 59, 255, 0); }
}

.review-checklist,
.recommendation-list,
.change-option-list {
  display: grid;
  gap: 7px;
}

.review-choice {
  min-height: 42px;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid #d8d8e8;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}

.review-choice > span {
  width: 18px;
  height: 18px;
  border: 1.5px solid #aaa9be;
  border-radius: 5px;
}

.review-choice.is-selected {
  border-color: var(--primary);
  background: #efefff;
}

.review-choice.is-selected > span {
  display: grid;
  place-items: center;
  border-color: var(--primary);
  background: var(--primary);
}

.review-choice.is-selected > span::after {
  content: "✓";
  color: #fff;
  font-size: 11px;
}

.review-choice b {
  font-size: 11px;
  line-height: 1.25;
}

.plan-review-progress {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 10px;
}

.plan-review-progress span {
  color: rgba(0, 0, 0, 0.56);
  text-align: right;
}

.project-plan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.plan-row {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dedee8;
  border-radius: 13px;
  background: #fff;
}

.plan-row.is-marked {
  border-color: var(--primary);
  background: #f3f2ff;
}

.plan-row-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.plan-row-title strong {
  font-size: 11px;
  line-height: 1.2;
}

.plan-row-title > span {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  color: rgba(0, 0, 0, 0.62);
  background: #eeeef3;
  font-size: 8px;
}

.plan-row-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.plan-row-meta > span {
  display: grid;
  gap: 1px;
}

.plan-row-meta small,
.plan-row label > span {
  color: rgba(0, 0, 0, 0.52);
  font-size: 8px;
}

.plan-row-meta b,
.plan-row p {
  font-size: 9px;
  line-height: 1.25;
}

.plan-row p {
  margin: 0;
  color: rgba(0, 0, 0, 0.66);
}

.plan-row label {
  display: grid;
  gap: 4px;
}

.plan-row select {
  min-width: 0;
  height: 34px;
  border: 1px solid #cfcfdd;
  border-radius: 9px;
  padding: 0 7px;
  color: var(--text);
  background: #fff;
  font: inherit;
  font-size: 9px;
}

.recommendation-list,
.change-option-list {
  max-height: 330px;
  overflow-y: auto;
}

.recommendation-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d9d9e6;
  border-radius: 12px;
  background: #fff;
}

.recommendation-card > div:first-child {
  display: grid;
  gap: 3px;
}

.recommendation-card strong,
.recommendation-card span {
  font-size: 10px;
  line-height: 1.3;
}

.recommendation-card span {
  color: rgba(0, 0, 0, 0.62);
}

.recommendation-actions,
.before-after-plan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.recommendation-actions button {
  min-height: 32px;
  border: 1px solid #d2d2de;
  border-radius: 9px;
  background: #f7f7fa;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
}

.recommendation-actions button.is-selected {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.recommendation-actions button.is-correct-hint {
  color: #183a19;
  border-color: #56a85b;
  background: #dff4d8;
  box-shadow: inset 0 0 0 1px rgba(44, 126, 52, 0.14);
}

.before-after-plan > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 11px;
  background: #f0f0f5;
}

.before-after-plan > div:last-child {
  background: #e8f7df;
}

.before-after-plan span,
.before-after-plan small {
  font-size: 9px;
}

.change-update {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-left: 4px solid #ff8a3d;
  border-radius: 13px;
  background: #fff2e8;
}

.change-update span {
  color: #a3460a;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.change-update p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

.impact-picker {
  display: grid;
  gap: 7px;
}

.impact-picker > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
}

.impact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.impact-chips button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d4d4e1;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
}

.impact-chips button.is-selected {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.change-option {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 10px;
  text-align: left;
  border: 1px solid #d8d8e5;
  border-radius: 12px;
  background: #fff;
  font: inherit;
}

.change-option.is-selected {
  border-color: var(--primary);
  background: #efefff;
}

.change-option-head {
  display: flex;
  justify-content: space-between;
  gap: 7px;
}

.change-option-head strong {
  font-size: 10px;
}

.change-option-head b {
  flex: 0 0 auto;
  color: #275620;
  font-size: 8px;
}

.change-option > span,
.change-option small {
  font-size: 9px;
  line-height: 1.3;
}

.ai-option-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ai-option-summary span {
  padding: 5px 7px;
  border-radius: 8px;
  background: #efeff5;
  font-size: 9px;
}

.updated-plan,
.message-preview {
  display: grid;
  gap: 6px;
}

.updated-plan > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px;
  padding: 7px;
  border-radius: 9px;
  background: #f1f1f5;
  font-size: 9px;
}

.message-preview {
  padding: 10px;
  border-radius: 10px;
  background: #eff7eb;
}

.message-preview span {
  color: #396a32;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.message-preview p {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
}

.benefit-card {
  align-self: center;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 26px;
  color: var(--text);
  background:
    radial-gradient(circle at 94% 8%, rgba(61, 59, 255, 0.18), transparent 30%),
    var(--lime);
}

.benefit-card .warmup-card-top {
  grid-column: 1 / -1;
}

.benefit-outcome,
.benefit-human,
.benefit-card .warmup-metric {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 16px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.82);
}

.benefit-outcome {
  grid-column: 1 / -1;
}

.benefit-outcome strong {
  max-width: 46ch;
  font-size: clamp(20px, 2.2vw, 29px);
  line-height: 1.04;
}

.benefit-evidence {
  display: grid;
  gap: 7px;
}

.benefit-evidence > div {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.benefit-evidence b {
  color: #2c6c25;
}

.benefit-human strong,
.benefit-card .warmup-metric strong {
  font-size: 14px;
  line-height: 1.3;
}

.branch-result-summary {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  color: #fff;
  background: #171721;
}

.branch-result-summary .result-section__heading span {
  color: var(--lime);
}

.branch-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.branch-actions > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 7px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 11px;
}

.branch-actions b {
  color: var(--lime);
}

.branch-artifact {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 15px;
  color: var(--text);
  background: var(--lime);
}

.branch-artifact > span {
  color: rgba(0, 0, 0, 0.6);
}

.branch-artifact strong {
  font-size: 17px;
}

.branch-artifact p {
  margin: 0;
  color: rgba(0, 0, 0, 0.66);
  font-size: 10px;
  line-height: 1.35;
}

@media (min-width: 761px) {
  .work-chat:not(.is-open) {
    display: none;
  }

  .fitting-stage .work-chat {
    grid-template-rows: auto minmax(170px, 1fr) auto auto;
  }

  .fitting-stage .review-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fitting-stage .review-choice {
    min-height: 38px;
  }

  .fitting-stage .ai-composer {
    max-height: min(280px, 42vh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 760px) {
  .task-context-strip,
  .benefit-card,
  .branch-actions {
    grid-template-columns: 1fr;
  }

  .task-context-strip {
    gap: 5px;
  }

  .task-context-strip > div {
    gap: 3px;
    padding: 8px 9px;
  }

  .task-context-strip strong {
    font-size: 10px;
  }

  .ai-stage .stage-main {
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .ai-task-grid,
  .source-panel {
    min-height: 0;
  }

  .fitting-stage .source-panel {
    display: grid;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .project-plan {
    grid-template-columns: 1fr;
  }

  .plan-row {
    padding: 9px;
  }

  .plan-review-progress {
    align-items: flex-start;
  }

  .plan-review-progress span {
    max-width: 20ch;
  }

  .mobile-ai-launch {
    flex-wrap: wrap;
    flex: 0 0 auto;
  }

  .benefit-stage .stage-main {
    align-content: start;
  }

  .benefit-card {
    align-self: start;
    gap: 7px;
    padding: 12px;
    border-radius: 20px;
  }

  .benefit-card .warmup-card-top,
  .benefit-outcome {
    grid-column: auto;
  }

  .benefit-outcome,
  .benefit-human,
  .benefit-card .warmup-metric {
    padding: 12px;
    border-radius: 14px;
  }

  .benefit-outcome strong {
    font-size: 20px;
  }

  .benefit-evidence {
    gap: 5px;
  }

  .benefit-evidence > div {
    padding: 7px 8px;
    font-size: 10px;
  }

  .recommendation-list,
  .change-option-list {
    max-height: 38dvh;
  }

  .before-after-plan {
    grid-template-columns: 1fr;
  }

  .branch-result-summary {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-ai-launch.is-hinting {
    animation: none;
  }
}

/* Финальные привязки каскада для специальной компоновки экрана 18. */
.chat-inbox-stage .stage-main {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.fitting-stage.chat-inbox-stage .source-panel {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
}

.mobile-ai-launch.mobile-ai-launch--single {
  display: grid;
}

@media (max-width: 980px) {
  .fitting-shell .fitting-stage {
    height: calc(100dvh - 64px - var(--app-safe-area-top));
  }
}

@media (max-width: 760px) {
  .chat-inbox-stage .stage-main {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 5px;
  }

  .fitting-stage.chat-inbox-stage .source-panel {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px 9px 9px;
  }

  .mobile-ai-launch.mobile-ai-launch--single {
    position: static;
  }
}

/* Экран 18: mobile-first уточнение по Style Pack и референсам чата. */
.chat-inbox-stage {
  grid-template-columns: minmax(0, 1fr);
}

.fitting-shell .chat-inbox-stage .stage-main {
  box-shadow: none;
}

.fitting-stage.chat-inbox-stage .source-panel,
.chat-inbox-stage .work-chat {
  border: 0;
  box-shadow: none;
}

.chat-inbox-stage .observed-chat__header {
  border-bottom: 0;
}

.chat-inbox-stage .observed-chat__eyebrow,
.chat-inbox-stage .observed-chat__notice,
.chat-inbox-stage .colleague-message__meta time {
  color: var(--text);
}

.chat-inbox-stage .observed-chat__notice,
.chat-inbox-stage .colleague-message__content {
  border: 0;
  background: var(--surface);
}

.chat-inbox-stage .mobile-ai-launch--single {
  box-shadow: none;
}

.colleague-avatar--practice-woman,
.colleague-avatar--practice-man,
.colleague-avatar--frame-masha,
.colleague-avatar--frame-andrey {
  color: transparent;
  background-repeat: no-repeat;
}

.colleague-avatar--practice-woman,
.colleague-avatar--practice-man {
  background-image: url("/%D0%9F%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D1%83%D0%B5%D1%82%D0%B5%D1%81%D1%8C.png");
  background-size: 882% auto;
}

.colleague-avatar--practice-woman {
  background-position: 20% 91%;
}

.colleague-avatar--practice-man {
  background-position: 87% 65%;
}

.colleague-avatar--frame-masha,
.colleague-avatar--frame-andrey {
  background-image: url("/Image%20Frame.png");
  background-size: 1687% auto;
}

.colleague-avatar--frame-masha {
  background-position: 14% 26%;
}

.colleague-avatar--frame-andrey {
  background-position: 33% 66%;
}

@media (min-width: 761px) {
  .chat-inbox-stage .ai-task-grid,
  .chat-inbox-stage .ai-task-grid.is-chat-open {
    grid-template-columns: minmax(380px, 0.92fr) minmax(460px, 1.08fr);
  }

  .chat-inbox-stage .work-chat:not(.is-open),
  .chat-inbox-stage .work-chat {
    display: grid;
  }

  .chat-inbox-stage .mobile-ai-launch.mobile-ai-launch--single {
    display: none;
  }

  .fitting-stage.chat-inbox-stage .source-panel {
    grid-template-rows: minmax(0, 1fr);
    gap: var(--spacing-sm, 12px);
  }

  .chat-inbox-stage .observed-chat {
    gap: 12px;
  }

  .chat-inbox-stage .observed-chat__header {
    padding-bottom: 4px;
  }

  .chat-inbox-stage .observed-chat__header b {
    font-size: clamp(15px, 1.65vw, 17px);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .chat-inbox-stage .observed-chat__eyebrow {
    font-size: 11px;
  }

  .chat-inbox-stage .observed-chat__notice {
    display: none;
  }

  .chat-inbox-stage .observed-chat__thread {
    gap: 8px;
  }

  .chat-inbox-stage .colleague-message {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }

  .chat-inbox-stage .colleague-avatar {
    width: 36px;
    height: 36px;
    border: 0;
  }

  .chat-inbox-stage .colleague-message__content {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
  }

  .chat-inbox-stage .colleague-message__meta,
  .chat-inbox-stage .colleague-message__meta b {
    font-size: 11px;
  }

  .chat-inbox-stage .colleague-message p {
    font-size: 14px;
    line-height: 1.35;
  }
}

@media (max-width: 760px) {
  .chat-inbox-stage .stage-main {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .chat-inbox-stage .task-label {
    min-height: 28px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .chat-inbox-stage .screen-title {
    gap: 6px;
  }

  .chat-inbox-stage .screen-title h2 {
    font-size: 27px;
    line-height: 1.02;
  }

  .chat-inbox-stage .screen-title .body-copy {
    font-size: 13px;
    line-height: 1.35;
  }

  .fitting-stage.chat-inbox-stage .source-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
    overflow: hidden;
  }

  .chat-inbox-stage .observed-chat {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .chat-inbox-stage .observed-chat__header {
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .chat-inbox-stage .observed-chat__header b {
    font-size: 17px;
    line-height: 1.15;
    white-space: normal;
  }

  .chat-inbox-stage .observed-chat__eyebrow {
    font-size: 10px;
  }

  .chat-inbox-stage .observed-chat__notice {
    display: none;
  }

  .chat-inbox-stage .observed-chat__thread {
    min-height: 0;
    height: auto;
    gap: 7px;
    padding-right: 3px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .chat-inbox-stage .colleague-message {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
  }

  .chat-inbox-stage .colleague-avatar {
    width: 32px;
    height: 32px;
    border: 0;
  }

  .chat-inbox-stage .colleague-message__content {
    gap: 3px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
  }

  .chat-inbox-stage .colleague-message__meta,
  .chat-inbox-stage .colleague-message__meta b {
    font-size: 10px;
  }

  .chat-inbox-stage .colleague-message p {
    font-size: 12px;
    line-height: 1.3;
  }

  .chat-inbox-stage .mobile-ai-launch.mobile-ai-launch--single {
    min-height: 60px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 9px 12px;
    margin-top: 0;
  }

  .chat-inbox-stage .ai-transfer-copy b {
    font-size: 13px;
  }

  .chat-inbox-stage .ai-transfer-copy small {
    font-size: 10px;
  }
}

/* Экран 18: последовательное прикрепление и заметная зона формирования запроса. */
.chat-inbox-stage .work-chat {
  background: #f4f3fa;
}

.chat-inbox-stage .ai-composer--guided {
  position: relative;
  gap: 10px;
  margin: 0 12px 12px;
  padding: 17px 14px 14px;
  overflow: hidden;
  border: 1px solid #d8d6ff;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, #f8f7ff 100%);
  box-shadow: 0 12px 30px rgba(57, 53, 139, 0.13);
}

.chat-inbox-stage .ai-composer--guided::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0 72%, var(--lime) 72% 100%);
}

.chat-inbox-stage .ai-composer--guided .flow-step-label {
  justify-self: start;
}

.chat-inbox-stage .ai-composer--guided .composer-label {
  align-items: flex-start;
}

.chat-inbox-stage .ai-composer--guided .composer-label b {
  font-size: 12px;
  line-height: 1.25;
}

.chat-inbox-stage .ai-composer--guided .prompt-chip {
  border-color: #cbc9e7;
  background: #fff;
}

.chat-inbox-stage .ai-composer--guided .prompt-chip:hover,
.chat-inbox-stage .ai-composer--guided .prompt-chip.is-selected {
  border-color: var(--primary);
  background: var(--primary);
}

.chat-inbox-stage .ai-composer--guided .ai-composer-draft {
  display: grid;
  gap: 5px;
  border-color: #cbc9f8;
  background: #f3f2ff;
}

.prompt-preview-label {
  color: #514cb7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.ai-attachment-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.ai-attachment-step__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--text-on-dark);
  background: var(--primary);
  font-size: 20px;
  font-weight: 800;
}

.ai-attachment-step__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ai-attachment-step__copy b {
  font-size: 14px;
  line-height: 1.15;
}

.ai-attachment-step__copy span {
  color: rgba(0, 0, 0, 0.58);
  font-size: 10px;
  line-height: 1.3;
}

.table-review-gate__copy {
  display: grid;
  gap: 3px;
}

.table-review-gate__copy b {
  font-size: 14px;
  line-height: 1.15;
}

.table-review-gate__copy span {
  color: rgba(0, 0, 0, 0.58);
  font-size: 10px;
  line-height: 1.3;
}

.chat-inbox-stage .ai-attachment-step__button {
  width: 100%;
  min-height: 40px;
}

.chat-inbox-stage .ai-chat-welcome {
  width: min(360px, 88%);
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: auto;
  color: #5c5871;
  text-align: center;
}

.chat-inbox-stage .ai-chat-welcome__mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: var(--text-on-dark);
  background: #7568ee;
  box-shadow: 0 12px 28px rgba(79, 67, 198, 0.2);
  font-size: 13px;
  font-weight: 900;
}

.chat-inbox-stage .ai-chat-welcome strong {
  color: var(--text);
  font-size: 18px;
}

.chat-inbox-stage .ai-chat-welcome > span:last-child {
  font-size: 11px;
  line-height: 1.4;
}

.chat-inbox-stage .ai-response-intro {
  padding-bottom: 2px;
  color: var(--text);
  font-size: 1em;
  line-height: 1.4;
}

.chat-inbox-stage .ai-response-intro strong {
  display: inline;
}

.chat-inbox-stage .ai-composer--guided .flow-step-label {
  color: #23451e;
  border-color: rgba(58, 123, 48, 0.18);
  background: #e9f8e2;
}

@media (min-width: 761px) {
  .chat-inbox-stage .work-chat {
    border: 1px solid #e1dff1;
    box-shadow: 0 18px 44px rgba(40, 36, 105, 0.12);
  }

  .chat-inbox-stage .ai-feed {
    padding-bottom: 12px;
  }

  .chat-inbox-stage .ai-composer--guided {
    margin: 0 14px 14px;
  }
}

@media (max-width: 760px) {
  .chat-inbox-stage .work-chat {
    background: #f3f2fa;
  }

  .chat-inbox-stage .work-chat-header {
    border-bottom-color: #e1dff0;
  }

  .chat-inbox-stage .ai-feed {
    padding: 12px 10px 9px;
  }

  .chat-inbox-stage .ai-composer--guided {
    gap: 9px;
    margin: 0 8px max(8px, env(safe-area-inset-bottom));
    padding: 16px 11px 11px;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(57, 53, 139, 0.17);
  }

  .chat-inbox-stage .ai-composer--guided .composer-label {
    display: grid;
    gap: 2px;
  }

  .chat-inbox-stage .ai-composer--guided .composer-label b {
    font-size: 13px;
  }

  .chat-inbox-stage .ai-composer--guided .composer-label span {
    font-size: 10px;
  }

  .chat-inbox-stage .ai-composer--guided .prompt-chip {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 10px;
  }

  .chat-inbox-stage .ai-composer--guided .ai-composer-draft {
    min-height: 58px;
    padding: 9px 10px;
    font-size: 10px;
    line-height: 1.3;
  }

  .chat-inbox-stage .ai-attachment-step__button {
    min-height: 42px;
  }
}

/* Экран 18: высокая и визуально разделённая рабочая область на десктопе. */
@media (min-width: 981px) {
  .fitting-shell .chat-inbox-stage .stage-main {
    grid-template-columns: minmax(300px, 0.84fr) minmax(420px, 1.16fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: clamp(12px, 1.2vw, 18px);
    row-gap: 7px;
    padding: 14px 20px 18px;
    background: var(--bg);
    box-shadow: none;
  }

  .chat-inbox-stage .stage-back {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .chat-inbox-stage .task-label {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    margin-left: 88px;
  }

  .chat-inbox-stage .screen-title {
    min-width: 0;
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-content: start;
  }

  .chat-inbox-stage .screen-title h2 {
    max-width: none;
    overflow: visible;
    font-size: clamp(18px, 1.55vw, 24px);
    letter-spacing: -0.025em;
    text-overflow: clip;
    white-space: nowrap;
  }

  .chat-inbox-stage .screen-title .body-copy {
    max-width: 620px;
    font-size: clamp(12px, 0.85vw, 14px);
    line-height: 1.35;
  }

  .chat-inbox-stage .ai-task-grid {
    display: contents;
  }

  .fitting-stage.chat-inbox-stage .source-panel {
    min-width: 0;
    min-height: 0;
    grid-column: 1;
    grid-row: 3;
    background: var(--bg);
  }

  .chat-inbox-stage .work-chat {
    min-width: 0;
    min-height: 0;
    grid-column: 2;
    grid-row: 1 / -1;
    border: 0;
    background: var(--surface);
    box-shadow: none;
  }

  .chat-inbox-stage .stage-main > .error {
    display: none;
  }

  .chat-inbox-stage .work-chat-header,
  .chat-inbox-stage .ai-composer--guided {
    border: 0;
    background: var(--bg);
    box-shadow: none;
  }

  .chat-inbox-stage .ai-feed {
    background: var(--surface);
  }

  .chat-inbox-stage .ai-composer--guided::before {
    background: var(--primary);
  }
}

/* Экран 20: большая таблица данных по mobile-first шаблону экрана 18. */
.table-analysis-stage {
  grid-template-columns: minmax(0, 1fr);
}

.fitting-shell .table-analysis-stage .stage-main {
  box-shadow: none;
}

.table-analysis-stage .ai-task-grid,
.fitting-stage.table-analysis-stage .source-panel,
.table-analysis-stage .analysis-table,
.table-analysis-stage .work-chat {
  min-width: 0;
  min-height: 0;
}

.fitting-stage.table-analysis-stage .source-panel {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  border: 0;
  box-shadow: none;
}

.analysis-table {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.analysis-table__header {
  min-height: 68px;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm, 12px);
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
}

.analysis-table__header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.analysis-table__eyebrow {
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.analysis-table__header b {
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.analysis-table__meta {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  color: var(--text-on-dark);
  background: var(--bg-dark, #000);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.analysis-table__scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.analysis-table table {
  width: 100%;
  min-width: 720px;
  border-spacing: 0 5px;
  padding: 0 8px;
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.analysis-table th,
.analysis-table td {
  padding: 9px 10px;
  text-align: right;
  white-space: nowrap;
}

.analysis-table th:first-child,
.analysis-table td:first-child {
  text-align: left;
}

.analysis-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--text-on-dark);
  background: var(--bg-dark, #000);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.analysis-table thead th:first-child,
.analysis-table tbody th,
.analysis-table tfoot th {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.analysis-table thead th:last-child,
.analysis-table tbody td:last-child,
.analysis-table tfoot td:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.analysis-table tbody th,
.analysis-table tbody td {
  background: var(--bg);
}

.analysis-table tbody th,
.analysis-table tfoot th,
.analysis-table tfoot td {
  font-weight: 600;
}

.analysis-table tfoot th,
.analysis-table tfoot td {
  background: var(--accent-lime, #d8ff28);
}

.analysis-table__note {
  max-width: 720px;
  margin: 3px 12px 12px;
  color: var(--text);
  font-size: 10px;
  line-height: 1.35;
}

.table-analysis-stage .mobile-ai-launch--single {
  box-shadow: none;
}

@media (min-width: 761px) {
  .table-analysis-stage .ai-task-grid,
  .table-analysis-stage .ai-task-grid.is-chat-open {
    grid-template-columns: minmax(390px, 0.96fr) minmax(450px, 1.04fr);
  }

  .table-analysis-stage .work-chat:not(.is-open),
  .table-analysis-stage .work-chat {
    display: grid;
  }

  .table-analysis-stage .mobile-ai-launch.mobile-ai-launch--single {
    display: none;
  }

  .fitting-stage.table-analysis-stage .source-panel {
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
    background: var(--bg);
  }

  .table-analysis-stage .work-chat {
    border: 0;
    background: var(--surface);
    box-shadow: none;
  }

  .chat-inbox-stage .observed-chat__eyebrow,
  .chat-inbox-stage .observed-chat__search {
    display: none;
  }

  .chat-inbox-stage .observed-chat__header b {
    overflow: visible;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.1;
    text-overflow: clip;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .table-analysis-stage .stage-main {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .table-analysis-stage .task-label {
    min-height: 28px;
    padding-inline: 12px;
    font-size: 12px;
  }

  .table-analysis-stage .screen-title {
    gap: 6px;
  }

  .table-analysis-stage .screen-title h2 {
    font-size: 27px;
    line-height: 1.02;
  }

  .table-analysis-stage .screen-title .body-copy {
    font-size: 13px;
    line-height: 1.35;
  }

  .fitting-stage.table-analysis-stage .source-panel {
    display: grid;
    padding: 10px;
  }

  .analysis-table__header {
    min-height: 60px;
    padding: 10px 11px;
  }

  .analysis-table__header b {
    font-size: 16px;
  }

  .analysis-table__meta {
    padding: 6px 8px;
    font-size: 9px;
  }

  .analysis-table table {
    min-width: 680px;
    font-size: 11px;
  }

  .analysis-table th,
  .analysis-table td {
    padding: 8px 9px;
  }

  .table-analysis-stage .mobile-ai-launch.mobile-ai-launch--single {
    min-height: 60px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 9px 12px;
    margin-top: 0;
  }

  .table-analysis-stage .ai-transfer-copy b {
    font-size: 13px;
  }

  .table-analysis-stage .ai-transfer-copy small {
    font-size: 10px;
  }
}

@media (min-width: 981px) {
  .fitting-shell .table-analysis-stage .stage-main {
    grid-template-columns: minmax(340px, 0.92fr) minmax(440px, 1.08fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: clamp(12px, 1.2vw, 18px);
    row-gap: 9px;
    padding: 14px 20px 18px;
    background: var(--bg);
  }

  .table-analysis-stage .stage-back {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .table-analysis-stage .task-label {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    margin-left: 88px;
  }

  .table-analysis-stage .screen-title {
    min-width: 0;
    display: grid;
    grid-column: 1;
    grid-row: 2;
    gap: 5px;
    align-content: start;
  }

  .table-analysis-stage .screen-title h2 {
    max-width: none;
    font-size: clamp(25px, 2vw, 32px);
  }

  .table-analysis-stage .screen-title .body-copy {
    max-width: 660px;
    font-size: clamp(12px, 0.85vw, 14px);
    line-height: 1.35;
  }

  .table-analysis-stage .ai-task-grid {
    display: contents;
  }

  .fitting-stage.table-analysis-stage .source-panel {
    grid-column: 1;
    grid-row: 3;
  }

  .table-analysis-stage .work-chat {
    grid-column: 2;
    grid-row: 1 / -1;
  }

  .table-analysis-stage .stage-main > .error {
    display: none;
  }
}

/* Content pass 2026-08-19: fitting flow, responsive density and realistic chats. */
.manager-brief {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  background: #f3f2ff;
}

.manager-brief__person {
  display: flex;
  gap: 10px;
  align-items: center;
}

.manager-brief__person > span {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  margin: 0;
  background-size: 882% auto;
}

.manager-brief__person > div {
  display: grid;
  gap: 1px;
}

.manager-brief__person strong {
  font-size: 14px;
}

.manager-brief__person span {
  color: rgba(0, 0, 0, 0.54);
  font-size: 10px;
}

.manager-brief p {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
}

.workspace-board {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dedee8;
  border-radius: 22px;
  background: #fff;
}

.workspace-board__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  font-weight: 750;
}

.workspace-board__header strong {
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  background: #000;
  font-size: 9px;
}

.workspace-board__tasks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.workspace-board__tasks > div {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 13px 34px 13px 13px;
  border-radius: 15px;
  background: #f4f4f6;
}

.workspace-board__tasks > div.is-next {
  color: #fff;
  background: var(--primary);
}

.workspace-board__tasks > div > b {
  font-size: 10px;
  opacity: 0.68;
}

.workspace-board__tasks > div > span {
  display: grid;
  gap: 3px;
}

.workspace-board__tasks strong {
  font-size: 13px;
  line-height: 1.2;
}

.workspace-board__tasks small {
  font-size: 10px;
  line-height: 1.25;
  opacity: 0.66;
}

.workspace-board__tasks i {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.case-brief,
.status-source {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 22px;
  background: #f4f4f6;
}

/* Tasks 3–4 use the same persistent desktop workspace as tasks 1–2,
   while their shorter source cards stay compact in the left column. */
.fitting-stage.change-case-stage .source-panel,
.fitting-stage.trust-status-stage .source-panel {
  grid-template-rows: auto;
  align-content: start;
}

@media (max-width: 760px) {
  .fitting-stage.change-case-stage .source-panel,
  .fitting-stage.trust-status-stage .source-panel {
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
  }

  .change-case-stage .mobile-ai-launch--single,
  .trust-status-stage .mobile-ai-launch--single {
    align-self: end;
  }
}

.case-brief__header,
.status-source__header {
  display: grid;
  gap: 5px;
}

.case-brief__header span,
.status-source__header span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.case-brief__header strong,
.status-source__header strong {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.05;
}

.case-brief > p,
.status-source__goal {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.case-brief__facts,
.status-source__list {
  display: grid;
  gap: 8px;
}

.case-brief__facts > div,
.status-source__list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding-top: 9px;
  border-top: 1px solid rgba(0, 0, 0, 0.11);
}

.case-brief__facts b,
.status-source__list > div > span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.case-brief__facts span,
.status-source__list p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

/* Screen 24: the results of the day are presented as a familiar work calendar. */
.status-calendar {
  min-height: 0;
  overflow: hidden;
  border: 1px solid #dadce0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(60, 64, 67, 0.09);
}

.status-calendar__toolbar {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border-bottom: 1px solid #dadce0;
}

.status-calendar__brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.status-calendar__brand > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.status-calendar__brand span {
  color: #5f6368;
  font-size: 10px;
  font-weight: 650;
}

.status-calendar__brand strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-calendar__icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 1px solid #dadce0;
  border-radius: 6px;
  padding-bottom: 4px;
  color: #3c4043 !important;
  background: #fff;
  font-size: 13px !important;
}

.status-calendar__icon::before {
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  content: "";
  background: #4285f4;
}

.status-calendar__icon b {
  font-size: 13px;
}

.status-calendar__view {
  flex: 0 0 auto;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 7px 10px;
  color: #3c4043;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
}

.status-calendar__week {
  display: grid;
  grid-template-columns: 48px repeat(5, minmax(0, 1fr));
  align-items: center;
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid #dadce0;
}

.status-calendar__week > div {
  display: grid;
  place-items: center;
  gap: 2px;
  color: #5f6368;
}

.status-calendar__week small {
  font-size: 7px;
  font-weight: 750;
}

.status-calendar__week b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
}

.status-calendar__week .is-today {
  color: #1a73e8;
}

.status-calendar__week .is-today b {
  color: #fff;
  background: #1a73e8;
}

.status-calendar__timeline {
  position: relative;
  height: clamp(320px, 39vh, 390px);
  padding-right: 10px;
}

.status-calendar__timeline::before {
  position: absolute;
  inset: 0 10px 0 48px;
  content: "";
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(12.5% - 1px),
    #e7e9ec calc(12.5% - 1px),
    #e7e9ec 12.5%
  );
}

.status-calendar__row {
  position: absolute;
  right: 10px;
  left: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 7px;
}

.status-calendar__row:nth-child(1) {
  top: 6.25%;
  height: 12.5%;
}

.status-calendar__row:nth-child(2) {
  top: 25%;
  height: 18.75%;
}

.status-calendar__row:nth-child(3) {
  top: 62.5%;
  height: 12.5%;
}

.status-calendar__row:nth-child(4) {
  top: 81.25%;
  height: 12.5%;
}

.status-calendar__row::before {
  display: none;
}

.status-calendar__row time {
  position: relative;
  top: -3px;
  color: #70757a;
  font-size: 8px;
  text-align: right;
}

.status-event {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  border-left: 4px solid var(--event-accent);
  border-radius: 5px;
  padding: 7px 9px;
  color: #202124;
  background: var(--event-bg);
}

.status-event > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.status-event strong {
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-event span {
  flex: 0 0 auto;
  color: var(--event-accent);
  font-size: 8px;
  font-weight: 800;
}

.status-event p {
  margin: 0;
  overflow: hidden;
  color: rgba(32, 33, 36, 0.72);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-event--blue {
  --event-accent: #1a73e8;
  --event-bg: #e8f0fe;
}

.status-event--green {
  --event-accent: #188038;
  --event-bg: #e6f4ea;
}

.status-event--violet {
  --event-accent: #7b61d9;
  --event-bg: #eee9ff;
}

.status-event--current {
  --event-accent: #ea4335;
  --event-bg: #fce8e6;
  box-shadow: 0 5px 14px rgba(234, 67, 53, 0.12);
}

.status-calendar__row--current::after {
  position: absolute;
  top: -1px;
  left: 44px;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: #ea4335;
}

@media (max-width: 760px) {
  .fitting-stage.trust-status-stage .source-panel {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .trust-status-stage .status-calendar {
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    border-radius: 13px;
  }

  .trust-status-stage .status-calendar__toolbar {
    min-height: 53px;
    padding: 7px 9px;
  }

  .trust-status-stage .status-calendar__brand {
    gap: 8px;
  }

  .trust-status-stage .status-calendar__icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .trust-status-stage .status-calendar__brand strong {
    font-size: 14px;
  }

  .trust-status-stage .status-calendar__brand span {
    font-size: 11px;
  }

  .trust-status-stage .status-calendar__view {
    padding: 6px 8px;
    font-size: 11px;
  }

  .trust-status-stage .status-calendar__week {
    grid-template-columns: 42px repeat(5, minmax(0, 1fr));
    padding: 4px 7px 4px 0;
  }

  .trust-status-stage .status-calendar__week b {
    width: 21px;
    height: 21px;
    font-size: 11px;
  }

  .trust-status-stage .status-calendar__week small {
    font-size: 8.5px;
  }

  .trust-status-stage .status-calendar__timeline {
    height: auto;
    min-height: 0;
    align-self: stretch;
    padding-right: 7px;
  }

  .trust-status-stage .status-calendar__timeline::before {
    right: 7px;
    left: 42px;
  }

  .trust-status-stage .status-calendar__row {
    right: 7px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px;
  }

  .trust-status-stage .status-calendar__row--current::after {
    top: -1px;
    left: 38px;
  }

  .trust-status-stage .status-event {
    gap: 1px;
    padding: 5px 7px;
  }

  .trust-status-stage .status-event strong {
    font-size: 11.5px;
  }

  .trust-status-stage .status-event span {
    font-size: 9.5px;
  }

  .trust-status-stage .status-event p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 9.5px;
    white-space: normal;
  }

  .trust-status-stage .status-calendar__row time {
    font-size: 9px;
  }
}

.table-review-claim {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 11px 12px;
  border-left: 3px solid var(--peach);
  border-radius: 8px 12px 12px 8px;
  background: #fff7ef;
  font-size: 11px;
  line-height: 1.35;
}

.table-review-claim span {
  color: rgba(0, 0, 0, 0.6);
}

.table-verdicts .prompt-chip {
  flex: 1 1 170px;
  justify-content: center;
  text-align: center;
}

/* The AI conversation is a separate workspace, without changing its position. */
.ai-stage .work-chat {
  border: 1px solid #dedbea;
  background: #f2f1f8;
  box-shadow: 0 18px 44px rgba(39, 35, 102, 0.12);
}

.ai-stage .work-chat-header,
.ai-stage .ai-composer {
  background: #fff;
}

.ai-stage .ai-feed {
  background: #f2f1f8;
}

.ai-stage .ai-chat-welcome {
  width: min(360px, 88%);
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: auto;
  color: #5c5871;
  text-align: center;
}

.ai-stage .ai-chat-welcome__mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: #7568ee;
  box-shadow: 0 12px 28px rgba(79, 67, 198, 0.2);
  font-size: 13px;
  font-weight: 900;
}

.ai-stage .ai-chat-welcome strong {
  color: var(--text);
  font-size: 18px;
}

.ai-stage .ai-chat-welcome > span:last-child {
  font-size: 11px;
  line-height: 1.4;
}

/* Result screens share the accepted-work chat pattern from screen 19. */
@media (min-width: 761px) {
  .chat-result-stage {
    width: min(1160px, calc(100% - 32px));
    grid-template-columns: 1fr;
  }

  .chat-result-stage .stage-main {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 16px 18px;
    align-content: start;
    padding: clamp(22px, 3vw, 38px);
  }

  .chat-result-stage .stage-back,
  .chat-result-stage .screen-title,
  .chat-result-stage .action-row {
    grid-column: 1 / -1;
  }

  .chat-result-stage .chat-result-card {
    grid-column: 1;
    grid-row: 3;
    align-self: stretch;
  }

  .chat-result-stage .chat-result-impact {
    grid-column: 2;
    grid-row: 3;
    align-content: center;
  }

  .chat-result-stage .action-row {
    grid-row: 4;
  }
}

/* Screen 18 desktop density: keep the complete team thread in view. */
@media (min-width: 981px) {
  .chat-inbox-stage .observed-chat {
    gap: 6px;
  }

  .chat-inbox-stage .observed-chat__header {
    gap: 8px;
    padding-bottom: 2px;
  }

  .chat-inbox-stage .observed-chat__header b {
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.1;
    white-space: nowrap;
  }

  .chat-inbox-stage .observed-chat__eyebrow {
    font-size: 9px;
  }

  .chat-inbox-stage .observed-chat__members .colleague-avatar {
    width: 28px;
    height: 28px;
  }

  .chat-inbox-stage .observed-chat__thread {
    gap: 5px;
  }

  .chat-inbox-stage .colleague-message {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
  }

  .chat-inbox-stage .colleague-avatar {
    width: 28px;
    height: 28px;
  }

  .chat-inbox-stage .colleague-message__content {
    gap: 1px;
    padding: 6px 8px 7px;
    border-radius: 9px;
  }

  .chat-inbox-stage .colleague-message__meta,
  .chat-inbox-stage .colleague-message__meta b {
    font-size: 9px;
  }

  .chat-inbox-stage .colleague-message p {
    font-size: clamp(10px, 0.72vw, 12px);
    line-height: 1.22;
  }

  /* Screen 20: show all key columns immediately on desktop. */
  .table-analysis-stage .analysis-table__scroll {
    overflow-x: hidden;
  }

  .table-analysis-stage .analysis-table table {
    min-width: 0;
    table-layout: fixed;
    border-spacing: 0 4px;
    padding-inline: 5px;
    font-size: clamp(9px, 0.64vw, 11px);
  }

  .table-analysis-stage .analysis-table th,
  .table-analysis-stage .analysis-table td {
    padding: 7px 5px;
  }

  .table-analysis-stage .analysis-table th:first-child,
  .table-analysis-stage .analysis-table td:first-child {
    width: 29%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .table-analysis-stage .analysis-table thead th {
    font-size: 8px;
    letter-spacing: 0;
  }
}

/* Screen 20: keep the complete sheet visible in short desktop viewports and at browser zoom. */
@media (min-width: 981px) and (max-height: 720px) {
  .table-analysis-stage .analysis-table__header {
    min-height: 54px;
    padding: 8px 12px;
  }

  .table-analysis-stage .analysis-table__header b {
    font-size: 16px;
  }

  .table-analysis-stage .analysis-table__eyebrow,
  .table-analysis-stage .analysis-table__meta {
    font-size: 9px;
  }

  .table-analysis-stage .analysis-table table {
    border-spacing: 0 2px;
  }

  .table-analysis-stage .analysis-table th,
  .table-analysis-stage .analysis-table td {
    padding: 3px 5px;
  }

  .table-analysis-stage .analysis-table__note {
    margin: 2px 10px 7px;
    font-size: 9px;
    line-height: 1.25;
  }
}

/* Loading screen: title, explanation and progress now read as one block. */
.fitting-processing-stage .stage-main {
  grid-template-rows: auto auto;
  gap: clamp(18px, 3vh, 30px);
  align-content: center;
}

.fitting-processing-stage .result-processing {
  align-self: start;
}

/* Mobile questionnaire uses the available height without a dead lower area. */
@media (max-width: 640px) {
  .question-screen .prep-main {
    gap: clamp(8px, 1.25dvh, 13px);
  }

  .question-screen .screen-title h2 {
    font-size: clamp(27px, 4.25dvh, 32px) !important;
  }

  .question-screen .screen-title .body-copy {
    font-size: clamp(13px, 2dvh, 15px) !important;
  }

  .question-screen .choice-grid {
    min-height: 0;
    grid-auto-rows: auto;
    align-content: start;
    gap: 6px !important;
  }

  .question-screen .choice-card {
    min-height: 48px !important;
    align-items: center;
    gap: 10px !important;
    padding: 9px 11px !important;
    border-radius: 13px !important;
  }

  .question-screen .choice-card.is-selected {
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.17);
  }

  .question-screen .choice-copy strong {
    font-size: 16px !important;
  }

  .question-screen .choice-copy span {
    font-size: 12px !important;
  }
}

@media (max-width: 760px) {
  .manager-brief {
    gap: 8px;
    padding: 11px 12px;
    border-radius: 16px;
  }

  .manager-brief__person > span {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .manager-brief p {
    font-size: 11px;
    line-height: 1.32;
  }

  .workspace-board {
    gap: 7px;
    padding: 10px;
    border-radius: 17px;
  }

  .workspace-board__tasks {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .workspace-board__tasks > div {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 7px;
    padding: 7px 32px 7px 9px;
  }

  .workspace-board__tasks > div > b {
    align-self: center;
  }

  .workspace-board__tasks strong {
    font-size: 11px;
  }

  .workspace-board__tasks small {
    font-size: 8px;
  }

  .case-brief,
  .status-source {
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
  }

  .case-brief__header strong,
  .status-source__header strong {
    font-size: 21px;
  }

  .case-brief > p,
  .status-source__goal {
    font-size: 12px;
  }

  .case-brief__facts > div,
  .status-source__list > div {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .case-brief__facts span,
  .status-source__list p {
    font-size: 10px;
  }
}

/* QA pass 2026-08-20: screens 17–25, resilient portraits and panel switching. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.colleague-avatar--portrait {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: inherit;
  background-image: none;
  background-size: auto;
  background-position: center;
}

.colleague-avatar--portrait .colleague-avatar__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  color: inherit;
  background: inherit;
  font-size: inherit;
  font-weight: 850;
}

.colleague-avatar--portrait img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  background: #ececf2;
}

.colleague-avatar--marina img { object-position: 50% 42%; }
.colleague-avatar--olga img { object-position: 50% 42%; }
.colleague-avatar--ilya img { object-position: 50% 42%; }
.colleague-avatar--denis img { object-position: 50% 42%; }

.chat-result-message--incoming > .colleague-avatar,
.manager-brief__person > .colleague-avatar {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  margin: 0;
  border: 2px solid #fff;
}

/* Screen 17 is a compact, continuous brief instead of a fixed-height canvas. */
.workday-start-stage {
  height: auto;
  min-height: 0;
  overflow: visible;
  align-self: center;
  align-items: start;
}

.workday-start-stage .stage-main {
  height: auto;
  min-height: 0;
  grid-template-rows: repeat(6, auto);
  align-content: start;
  overflow: visible;
}

.workday-start-stage .action-row {
  margin-top: 2px;
}

/* Result screens 19, 21, 23 and 25 stay inside one viewport. */
.workday-warmup-stage.chat-result-stage {
  height: calc(100dvh - 76px);
  min-height: 0;
  overflow: hidden;
  align-self: stretch;
  align-items: center;
}

.chat-result-stage .stage-main {
  height: auto;
  max-height: 100%;
  min-height: 0;
  align-content: start;
  align-self: center;
  overflow: hidden;
}

.chat-result-layout,
.chat-result-summary {
  min-width: 0;
  min-height: 0;
  display: grid;
}

.chat-result-stage .chat-result-card {
  grid-auto-rows: max-content;
  align-content: start;
  align-self: start;
  gap: 14px;
}

.chat-result-stage .chat-result-impact {
  align-content: start;
  align-self: start;
}

/* Screens 22 and 24 no longer reserve the removed sidebar column. */
.change-case-stage,
.trust-status-stage {
  width: min(1480px, calc(100% - 32px));
  grid-template-columns: minmax(0, 1fr);
}

.change-case-stage .stage-main,
.trust-status-stage .stage-main {
  width: 100%;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.table-analysis-stage .analysis-table {
  height: auto;
  grid-template-rows: auto auto;
  align-self: start;
}

.fitting-stage.table-analysis-stage .source-panel {
  align-content: start;
}

@media (min-width: 761px) {
  .change-case-stage .ai-task-grid.is-chat-open,
  .trust-status-stage .ai-task-grid.is-chat-open {
    grid-template-columns: minmax(360px, 0.82fr) minmax(560px, 1.18fr);
    gap: clamp(16px, 1.5vw, 24px);
  }

  .change-case-stage .work-chat,
  .trust-status-stage .work-chat {
    grid-template-rows: auto minmax(260px, 1fr) auto auto;
  }

  .change-case-stage .source-panel,
  .trust-status-stage .source-panel {
    height: auto;
    align-self: start;
  }

  .change-case-stage .ai-feed,
  .trust-status-stage .ai-feed {
    min-height: 260px;
  }

  .change-case-stage .ai-composer,
  .trust-status-stage .ai-composer,
  .table-analysis-stage .ai-composer {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .change-case-stage .ai-composer-draft,
  .trust-status-stage .ai-composer-draft,
  .table-analysis-stage .ai-composer-draft {
    min-height: 44px;
    max-height: 92px;
  }

  .chat-result-stage .stage-main {
    grid-template-rows: auto auto auto;
    gap: clamp(10px, 1.4vh, 16px);
    padding: clamp(16px, 2.2vh, 24px) clamp(20px, 2.4vw, 32px);
  }

  .chat-result-stage .stage-topline,
  .chat-result-stage .screen-title,
  .chat-result-stage .chat-result-layout {
    grid-column: 1 / -1;
  }

  .chat-result-stage .stage-topline {
    grid-row: 1;
  }

  .chat-result-stage .screen-title {
    grid-row: 2;
  }

  .chat-result-stage .chat-result-layout {
    grid-row: 3;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: clamp(14px, 1.5vw, 22px);
    align-items: center;
  }

  .chat-result-stage .chat-result-card {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .chat-result-stage .chat-result-summary {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: clamp(10px, 1.3vh, 14px);
  }

  .chat-result-stage .chat-result-summary .chat-result-impact,
  .chat-result-stage .chat-result-summary .action-row {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  .chat-result-stage .chat-result-card {
    gap: clamp(12px, 1.6vh, 18px);
    padding: clamp(20px, 2.6vh, 28px);
  }

  .chat-result-stage .chat-result-message__body {
    gap: clamp(5px, 0.75vh, 8px);
  }

  .chat-result-stage .chat-result-bubble {
    padding: clamp(13px, 1.8vh, 18px) clamp(15px, 1.55vw, 21px);
  }

  .chat-result-stage .chat-result-bubble--outgoing {
    padding-right: clamp(40px, 3.2vw, 50px);
  }

  .chat-result-stage .chat-result-bubble p {
    font-size: clamp(14px, 2.05vh, 19px);
    line-height: 1.36;
  }

  .chat-result-stage .chat-result-impact {
    gap: clamp(10px, 1.4vh, 14px);
    padding: clamp(22px, 3vh, 30px);
  }

  .chat-result-stage .chat-result-impact > strong {
    font-size: clamp(25px, 4vh, 36px);
  }

  .chat-result-stage .chat-result-impact p {
    padding-top: clamp(8px, 1.2vh, 12px);
    font-size: clamp(12px, 1.65vh, 15px);
  }

  .chat-result-stage .action-row .button {
    position: relative;
    width: 100%;
    min-height: clamp(56px, 7vh, 64px);
    justify-content: center;
    padding: 0 64px 0 24px;
    border: 2px solid #111;
    color: #fff;
    background: #111;
    box-shadow: 0 14px 28px rgba(20, 20, 20, 0.2);
    font-size: clamp(16px, 2.2vh, 20px);
    transition: transform var(--motion), box-shadow var(--motion), background var(--motion);
  }

  .chat-result-stage .action-row .button::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #111;
    background: var(--lime);
    font-size: 20px;
    font-weight: 850;
    transform: translateY(-50%);
  }

  .chat-result-stage .action-row .button:hover {
    color: #111;
    background: var(--lime);
    box-shadow: 0 18px 34px rgba(20, 20, 20, 0.24);
    transform: translateY(-2px);
  }

  .chat-result-stage .action-row .button:hover::after {
    color: #fff;
    background: #111;
  }
}

/* Screen 20 keeps the result check compact. */
.table-analysis-stage .table-review-claim {
  gap: 3px;
  padding: 9px 10px;
}

.table-analysis-stage .table-verdicts {
  gap: 6px;
}

.table-analysis-stage .table-verdicts .prompt-chip {
  min-height: 32px;
}

@media (max-width: 760px) {
  .dev-menu {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(300px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
  }

  .dev-menu:not([open]) {
    width: auto;
    max-width: calc(100vw - 24px);
    padding: 0;
    overflow: visible;
    border-radius: var(--radius-pill);
  }

  .dev-menu:not([open]) summary {
    min-height: 44px;
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-radius: inherit;
    cursor: pointer;
    touch-action: manipulation;
  }

  .dev-menu:not([open]) .dev-menu-title,
  .dev-menu:not([open]) .dev-menu-drag-hint,
  .dev-menu:not([open]) summary::after {
    display: none;
  }

  .dev-menu:not([open]) .dev-menu-compact-title {
    display: inline;
    white-space: nowrap;
  }

  .dev-menu[open] summary {
    cursor: grab;
  }

  .workday-start-stage,
  .workday-warmup-stage.chat-result-stage {
    width: calc(100% - 20px);
    min-height: 0;
  }

  .workday-warmup-stage.chat-result-stage {
    height: calc(100dvh - 64px);
    align-items: start;
    padding: 8px 0;
    overflow: hidden;
  }

  .workday-start-stage .stage-main,
  .chat-result-stage .stage-main {
    min-height: 0;
  }

  .chat-result-stage .stage-main {
    height: auto;
    max-height: calc(100% - 16px);
    grid-template-rows: auto auto auto;
    gap: clamp(6px, 0.9dvh, 9px);
    padding: clamp(8px, 1.2dvh, 12px) 12px;
    border-radius: 24px;
    overflow: hidden;
  }

  .chat-result-stage .chat-result-layout {
    min-height: 0;
    grid-template-rows: auto auto;
    gap: clamp(10px, 1.7dvh, 15px);
    align-content: start;
  }

  .chat-result-stage .chat-result-summary {
    gap: clamp(7px, 1dvh, 9px);
  }

  .chat-result-stage .chat-result-summary .chat-result-impact,
  .chat-result-stage .chat-result-summary .action-row {
    grid-column: auto;
    grid-row: auto;
  }

  .chat-result-stage .stage-topline {
    gap: 9px;
  }

  .chat-result-stage .result-delivery-status {
    min-height: 32px;
    gap: 7px;
    padding: 4px 9px 4px 4px;
  }

  .chat-result-stage .result-delivery-status__icon {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .chat-result-stage .result-delivery-status__copy strong {
    font-size: 9px;
  }

  .chat-result-stage .result-delivery-status__copy small {
    font-size: 8.5px;
  }

  .chat-result-stage .screen-title {
    gap: 3px;
  }

  .chat-result-stage .screen-title h2 {
    font-size: clamp(24px, 4.05dvh, 31px);
  }

  .chat-result-stage .screen-title .body-copy {
    font-size: clamp(11.5px, 1.75dvh, 13.5px);
    line-height: 1.25;
  }

  .workday-start-stage .mobile-action-dock,
  .chat-result-stage .mobile-action-dock {
    position: static;
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .chat-result-stage .chat-result-card {
    gap: clamp(7px, 1dvh, 10px);
    min-height: 0;
    padding: clamp(9px, 1.25dvh, 12px) 10px;
    overflow: hidden;
  }

  .chat-result-stage .chat-result-message__body {
    gap: 3px;
  }

  .chat-result-stage .chat-result-bubble {
    padding: clamp(8px, 1.1dvh, 10px) 10px;
  }

  .chat-result-stage .chat-result-bubble--outgoing {
    padding-right: 34px;
  }

  .chat-result-stage .chat-result-bubble p {
    font-size: clamp(10.5px, 1.62dvh, 12.5px);
    line-height: 1.3;
  }

  .chat-result-stage .chat-result-bubble--incoming {
    border-radius: 14px;
    border-bottom-left-radius: 8px;
  }

  .chat-result-stage .chat-result-bubble--followup {
    border-radius: 14px;
  }

  .chat-result-stage .chat-result-impact {
    margin-top: 0;
    gap: 5px;
    padding: clamp(10px, 1.35dvh, 13px) 12px;
  }

  .chat-result-stage .chat-result-impact > strong {
    font-size: clamp(17px, 2.7dvh, 20px);
  }

  .chat-result-stage .chat-result-impact p {
    padding-top: 6px;
    font-size: clamp(10px, 1.45dvh, 12px);
  }

  .chat-result-stage .mobile-action-dock .button {
    min-height: clamp(42px, 5.8dvh, 48px);
  }

  .chat-result-message--incoming > .colleague-avatar,
  .manager-brief__person > .colleague-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  /* On phones, opening AI replaces the source panel in the same workspace. */
  .fitting-stage.ai-stage .ai-task-grid.is-chat-open {
    height: 100%;
    min-height: 0;
    display: block;
    overflow: hidden;
  }

  .fitting-stage.ai-stage .ai-task-grid.is-chat-open > .source-panel,
  .fitting-stage.ai-stage .ai-task-grid.is-chat-open > .chat-drawer-backdrop {
    display: none;
  }

  .fitting-stage.ai-stage .ai-task-grid:not(.is-chat-open) > .work-chat {
    display: none;
  }

  .fitting-stage.ai-stage .ai-task-grid.is-chat-open > .work-chat {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(160px, 1fr) auto auto;
    border-radius: 16px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .fitting-stage.ai-stage .ai-task-grid.is-chat-open .ai-feed {
    min-height: 0;
    overflow-y: auto;
  }

  /* The data sheet scrolls sideways only and does not stretch the page. */
  .table-analysis-stage .stage-main {
    overflow-y: auto;
  }

  .table-analysis-stage .ai-task-grid:not(.is-chat-open) {
    height: auto;
    align-self: start;
    overflow: visible;
  }

  .fitting-stage.table-analysis-stage .ai-task-grid:not(.is-chat-open) > .source-panel {
    height: auto;
    grid-template-rows: auto auto;
    align-content: start;
    overflow: visible;
  }

  .table-analysis-stage .analysis-table {
    height: auto;
    grid-template-rows: auto auto;
    align-self: start;
    overflow: hidden;
  }

  .table-analysis-stage .analysis-table__header {
    min-height: 0;
    align-items: flex-start;
    padding: 10px 12px;
  }

  .table-analysis-stage .analysis-table__eyebrow,
  .table-analysis-stage .analysis-table__meta {
    display: none;
  }

  .table-analysis-stage .analysis-table__scroll {
    min-height: 0;
    overflow-x: auto;
    scrollbar-gutter: auto;
  }

  .table-analysis-stage .analysis-table table {
    width: 100%;
    min-width: 100%;
    padding-inline: 0;
    table-layout: fixed;
    font-size: 10px;
  }

  .table-analysis-stage .analysis-table th,
  .table-analysis-stage .analysis-table td {
    padding: 7px 2px;
  }

  .table-analysis-stage .analysis-table th:first-child,
  .table-analysis-stage .analysis-table td:first-child {
    width: 33%;
    max-width: none;
    padding-left: 6px;
    white-space: normal;
    line-height: 1.1;
  }

  .table-analysis-stage .analysis-table th:nth-child(2),
  .table-analysis-stage .analysis-table td:nth-child(2),
  .table-analysis-stage .analysis-table th:nth-child(3),
  .table-analysis-stage .analysis-table td:nth-child(3) {
    width: 11%;
  }

  .table-analysis-stage .analysis-table th:nth-child(4),
  .table-analysis-stage .analysis-table td:nth-child(4) {
    width: 10%;
  }

  .table-analysis-stage .analysis-table th:nth-child(5),
  .table-analysis-stage .analysis-table td:nth-child(5) {
    width: 21%;
    padding-left: 4px;
    text-align: left;
  }

  .table-analysis-stage .analysis-table th:nth-child(6),
  .table-analysis-stage .analysis-table td:nth-child(6) {
    width: 14%;
    padding-left: 4px;
    text-align: left;
  }

  .table-analysis-stage .analysis-table thead th {
    font-size: 8px;
    letter-spacing: 0;
  }
}

/* Screen 22: the change arrives as a real message from a teammate. */
.project-update-chat {
  min-height: clamp(360px, 48vh, 470px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dedee8;
  border-radius: 22px;
  background: #f3f4f7;
  box-shadow: 0 12px 30px rgba(30, 28, 71, 0.08);
}

.project-update-chat__header {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid #e4e4eb;
  background: rgba(255, 255, 255, 0.96);
}

.project-update-chat__channel {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #fff;
  background: var(--primary);
  font-size: 23px;
  font-weight: 800;
}

.project-update-chat__header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-update-chat__header > div > span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.project-update-chat__header strong {
  overflow: hidden;
  font-size: 17px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-update-chat__header small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 9px;
}

.project-update-chat__header small i {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #48b88a;
}

.project-update-chat__workspace {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(circle at 16% 12%, rgba(110, 120, 231, 0.09), transparent 34%),
    #f4f5f8;
}

.project-update-chat__day {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 4px;
  color: rgba(0, 0, 0, 0.42);
  font-size: 10px;
  font-weight: 650;
}

.project-update-chat__day::before,
.project-update-chat__day::after {
  height: 1px;
  content: "";
  flex: 1;
  background: rgba(54, 53, 72, 0.1);
}

.project-update-message {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-content: start;
  align-items: start;
  padding: 18px;
}

.change-case-stage .project-update-message > .colleague-avatar {
  width: 48px;
  height: 48px;
  border-width: 3px;
}

.project-update-message__body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.project-update-message__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
}

.project-update-message__meta strong {
  color: #505bc9;
  font-size: 13px;
}

.project-update-message__meta span,
.project-update-message__meta time {
  color: rgba(0, 0, 0, 0.48);
}

.project-update-message__bubble {
  display: grid;
  gap: 11px;
  padding: 16px 18px 17px;
  border: 1px solid rgba(34, 32, 62, 0.08);
  border-radius: 5px 18px 18px 18px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(30, 28, 71, 0.07);
}

.project-update-message__bubble p {
  margin: 0;
  font-size: clamp(13px, 0.9vw, 15px);
  line-height: 1.42;
}

@media (max-width: 760px) {
  .fitting-stage.change-case-stage .source-panel {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .project-update-chat {
    min-height: 0;
    height: 100%;
    border-radius: 18px;
  }

  .project-update-chat__header {
    gap: 9px;
    padding: 11px 12px;
  }

  .project-update-chat__channel {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 20px;
  }

  .project-update-chat__header > div > span {
    font-size: 8px;
  }

  .project-update-chat__header strong {
    font-size: 14px;
  }

  .project-update-chat__day {
    padding: 9px 12px 3px;
    font-size: 9px;
  }

  .project-update-message {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }

  .change-case-stage .project-update-message > .colleague-avatar {
    width: 38px;
    height: 38px;
  }

  .project-update-message__meta {
    gap: 5px;
    font-size: 9px;
  }

  .project-update-message__meta strong {
    font-size: 11px;
  }

  .project-update-message__bubble {
    gap: 8px;
    padding: 11px 12px 12px;
    border-radius: 4px 14px 14px 14px;
  }

  .project-update-message__bubble p {
    font-size: 11.5px;
    line-height: 1.36;
  }
}

/* WorkAI answers with readable prose; step badges remain in the composer only. */
.ai-change-options {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(32, 29, 82, 0.1);
  border-bottom: 1px solid rgba(32, 29, 82, 0.1);
}

.ai-change-option {
  display: grid;
  gap: 5px;
  padding: 11px 0;
}

.ai-change-option + .ai-change-option {
  border-top: 1px solid rgba(32, 29, 82, 0.1);
}

.ai-change-option > strong {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 12px;
  line-height: 1.3;
}

.ai-change-option > strong > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: var(--primary);
  font-size: 10px;
  font-weight: 800;
}

.ai-change-option p,
.ai-change-recommendation {
  margin: 0;
  font-size: 11px;
  line-height: 1.42;
}

.ai-change-option p {
  padding-left: 30px;
  color: rgba(0, 0, 0, 0.68);
}

.ai-change-recommendation {
  padding: 10px 12px;
  border-left: 3px solid #61a354;
  border-radius: 4px 11px 11px 4px;
  background: #edf8e8;
}

@media (max-width: 760px) {
  .ai-change-option {
    gap: 4px;
    padding: 9px 0;
  }

  .ai-change-option > strong {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 7px;
    font-size: 11px;
  }

  .ai-change-option > strong > span {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 9px;
  }

  .ai-change-option p,
  .ai-change-recommendation {
    font-size: 10px;
    line-height: 1.36;
  }

  .ai-change-option p {
    padding-left: 27px;
  }
}

/* Screen 22 desktop: all three choices fit without clipping or an inner scrollbar. */
@media (min-width: 761px) {
  .change-case-stage .change-option-list {
    max-height: none;
    gap: 5px;
    overflow: visible;
  }

  .change-case-stage .change-option {
    gap: 3px;
    padding: 7px 10px;
    border-radius: 10px;
  }

  .change-case-stage .change-option-head {
    gap: 9px;
    align-items: baseline;
  }

  .change-case-stage .change-option-head strong {
    font-size: 9.5px;
    line-height: 1.2;
  }

  .change-case-stage .change-option-head b {
    padding-right: 2px;
    font-size: 7.5px;
    white-space: nowrap;
  }

  .change-case-stage .change-option > span,
  .change-case-stage .change-option small {
    font-size: 8.5px;
    line-height: 1.2;
  }
}

@media (max-width: 760px) and (max-height: 760px) {
  .chat-result-stage .stage-main {
    gap: 5px;
    padding: 7px 10px;
  }

  .chat-result-stage .chat-result-layout {
    gap: 8px;
  }

  .chat-result-stage .chat-result-summary {
    gap: 6px;
  }

  .chat-result-stage .mobile-action-dock .button {
    min-height: 40px;
  }
}

@media (max-width: 350px) and (max-height: 760px) {
  .chat-result-stage .screen-title h2 {
    font-size: 26px;
  }

  .chat-result-stage .screen-title .body-copy {
    font-size: 11px;
  }

  .chat-result-stage .result-delivery-status__copy strong,
  .chat-result-stage .result-delivery-status__copy small {
    font-size: 8px;
  }

  .chat-result-stage .chat-result-bubble p {
    font-size: 10px;
    line-height: 1.27;
  }

  .chat-result-stage .chat-result-impact > strong {
    font-size: 17px;
  }

  .chat-result-stage .chat-result-impact p {
    font-size: 9.5px;
  }
}

/* Screen 18 mobile density: keep the task controls and chat header compact. */
@media (min-width: 761px) and (max-width: 980px) {
  .fitting-shell .table-analysis-stage .stage-main {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .table-analysis-stage .stage-back {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .table-analysis-stage .task-label {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    margin-left: 10px;
  }

  .table-analysis-stage .screen-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .table-analysis-stage .ai-task-grid {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 760px) {
  .chat-inbox-stage .stage-main {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 6px;
  }

  .chat-inbox-stage .stage-back {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .chat-inbox-stage .task-label {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    margin-left: 0;
  }

  .chat-inbox-stage .screen-title {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 4px;
  }

  .chat-inbox-stage .screen-title h2 {
    font-size: clamp(22px, 6vw, 25px);
    line-height: 1.02;
  }

  .chat-inbox-stage .screen-title .body-copy {
    font-size: 11px;
    line-height: 1.28;
  }

  .chat-inbox-stage .ai-task-grid {
    min-height: 0;
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .chat-inbox-stage .observed-chat__header {
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
  }

  .chat-inbox-stage .observed-chat__header-tools,
  .chat-inbox-stage .observed-chat__members,
  .chat-inbox-stage .observed-chat__eyebrow {
    display: none;
  }

  .chat-inbox-stage .observed-chat__identity {
    width: 100%;
    gap: 9px;
  }

  .chat-inbox-stage .observed-chat__identity > div {
    gap: 2px;
  }

  .chat-inbox-stage .observed-chat__identity small {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    color: rgba(0, 0, 0, 0.52);
    font-size: 9px;
    line-height: 1.2;
  }

  .chat-inbox-stage .observed-chat__header b {
    overflow: visible;
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.15;
    text-overflow: clip;
    white-space: nowrap;
  }

  .chat-inbox-stage .observed-chat__thread {
    align-content: space-between;
    gap: 5px;
    padding: 4px 8px 7px;
  }

  .chat-inbox-stage .colleague-message {
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 7px;
  }

  .chat-inbox-stage .colleague-avatar {
    width: 29px;
    height: 29px;
  }

  .chat-inbox-stage .colleague-message__content {
    gap: 2px;
    padding: 7.5px 9px;
  }

  .chat-inbox-stage .colleague-message__meta,
  .chat-inbox-stage .colleague-message__meta b {
    font-size: 9px;
  }

  .chat-inbox-stage .colleague-message p {
    font-size: 11.25px;
    line-height: 1.26;
  }

  /* An opened WorkAI chat replaces the whole task workspace on every assignment screen. */
  .fitting-stage.ai-stage.is-chat-open .stage-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 4px 6px 6px;
    overflow: hidden;
  }

  .fitting-stage.ai-stage.is-chat-open .stage-main > .stage-back,
  .fitting-stage.ai-stage.is-chat-open .stage-main > .task-label,
  .fitting-stage.ai-stage.is-chat-open .stage-main > .screen-title,
  .fitting-stage.ai-stage.is-chat-open .stage-main > .task-context-strip,
  .fitting-stage.ai-stage.is-chat-open .stage-main > .error {
    display: none;
  }

  .fitting-stage.ai-stage.is-chat-open .stage-main > .ai-task-grid.is-chat-open {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}
/* Screen 17: project brief and compact simulation progress. */
.workday-start-stage .screen-title .body-copy {
  max-width: 1050px;
  font-size: clamp(18px, 1.45vw, 21px);
}

.project-chat-brief {
  overflow: hidden;
  border: 1px solid rgba(61, 59, 255, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 12%, rgba(217, 255, 116, 0.36), transparent 28%),
    #f2f1ff;
}

.project-chat-brief__bar {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(61, 59, 255, 0.13);
  background: rgba(255, 255, 255, 0.58);
  font-size: 10px;
}

.project-chat-brief__bar span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-chat-brief__bar span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #52ce72;
  box-shadow: 0 0 0 3px rgba(82, 206, 114, 0.16);
}

.project-chat-brief__bar strong {
  font-size: 10px;
}

.project-chat-brief__message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 14px 16px 16px;
}

.project-chat-brief__message > .colleague-avatar {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  box-shadow: 0 0 0 4px #fff;
}

.project-chat-brief__content {
  display: grid;
  gap: 6px;
}

.project-chat-brief__person {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.project-chat-brief__person strong {
  font-size: 14px;
}

.project-chat-brief__person span {
  color: rgba(0, 0, 0, 0.54);
  font-size: 10px;
}

.project-chat-brief__content p {
  width: fit-content;
  max-width: 970px;
  margin: 0;
  padding: 12px 15px;
  border-radius: 4px 15px 15px 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(61, 59, 255, 0.08);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}

.workday-journey {
  padding: 14px;
  border: 1px solid rgba(61, 59, 255, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(61, 59, 255, 0.1), transparent 32%),
    linear-gradient(135deg, #f8f8ff 0%, #eeefff 100%);
}

.workday-journey__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.workday-journey--compact .workday-journey__header {
  margin-bottom: 0;
}

.workday-journey__header > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workday-journey__header span {
  font-size: 11px;
  font-weight: 800;
}

.workday-journey__header strong {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--primary);
  background: #fff;
  font-size: 9px;
}

.workday-journey__progress {
  display: grid;
  grid-template-columns: auto 62px auto;
  align-items: center;
  gap: 7px;
  color: rgba(0, 0, 0, 0.52);
  font-size: 11px;
}

.workday-journey__progress b {
  color: var(--primary);
}

.workday-journey__progress i {
  height: 4px;
  border-radius: 999px;
  background: rgba(61, 59, 255, 0.12);
  box-shadow: inset 16px 0 var(--primary);
}

@media (max-width: 760px) {
  .workday-start-stage .screen-title .body-copy {
    font-size: 14px;
  }

  .project-chat-brief {
    border-radius: 15px;
  }

  .project-chat-brief__bar {
    min-height: 32px;
    padding: 0 10px;
  }

  .project-chat-brief__bar strong {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-chat-brief__message {
    gap: 10px;
    padding: 10px;
  }

  .project-chat-brief__message > .colleague-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .project-chat-brief__person {
    display: grid;
    gap: 1px;
  }

  .project-chat-brief__person strong {
    font-size: 12px;
  }

  .project-chat-brief__person span {
    font-size: 8px;
  }

  .project-chat-brief__content p {
    padding: 10px 11px;
    font-size: 10px;
    line-height: 1.32;
  }

  .profile-marina-card .project-chat-brief__content p {
    padding: 12px 13px;
    font-size: 16px;
    line-height: 1.4;
  }

  .workday-journey {
    padding: 10px;
    border-radius: 15px;
  }

  .workday-journey__header {
    margin-bottom: 7px;
  }

  .workday-journey__header > div:first-child {
    display: grid;
    gap: 3px;
  }

  .workday-journey__header strong {
    padding: 4px 7px;
    font-size: 7px;
  }

  .workday-journey__progress {
    grid-template-columns: auto 34px auto;
  }

}
/* Compact result page — Skillbox style pack */
.result-stage {
  background: #ffffff;
  color: #000000;
}

.result-stage .stage-main {
  width: min(100%, 1180px);
  gap: 48px;
  padding-top: 24px;
  padding-bottom: 72px;
  background: #ffffff;
  border-radius: 0;
}

.result-hero {
  display: grid;
  gap: 20px;
}

.result-hero--side {
  grid-template-columns: minmax(0, 1.12fr) minmax(400px, 0.88fr);
  align-items: start;
  gap: 32px;
}

.result-hero__story {
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 0;
  padding-top: 4px;
  background: #ffffff;
  border-radius: 0;
}

.result-hero--side > .result-hero__story {
  padding: 4px 0 0;
  background: #ffffff;
  border-radius: 0;
}

.result-hero.result-hero--side > div.result-hero__story:first-child {
  padding: 4px 0 0;
  background: #ffffff;
  border-radius: 0;
}

.result-hero__footer {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 24px;
  margin-top: 8px;
}

.result-hero__cta {
  min-height: 52px;
  padding: 0 20px;
  color: #ffffff;
  background: #3d3bff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  text-decoration: none;
}

.result-hero__cta:hover {
  color: #ffffff;
  background: #3d3bff;
  transform: none;
}

.result-stage .screen-title {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 20px;
  max-width: none;
  padding: 0;
}

.result-stage .task-label {
  width: fit-content;
  padding: 8px 12px;
  color: #ffffff;
  background: #3d3bff;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.result-stage .screen-title h2 {
  max-width: 18ch;
  color: #000000;
  font-size: clamp(44px, 4.5vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.result-stage .screen-title .body-copy {
  max-width: 540px;
  margin: 0;
  color: #000000;
  font-size: 16px;
  line-height: 1.45;
}

.result-header {
  background: #ffffff;
  border-bottom: 0;
}

.result-header__inner {
  width: min(100%, 1180px);
  min-height: 64px;
  grid-template-columns: 1fr auto;
  margin: 0 auto;
  padding: 12px 0;
}

.result-header__inner .brand-logo-only {
  width: fit-content;
}

.result-header__inner .brand-logo-only img {
  width: 122px;
  height: auto;
}

.result-header__status {
  gap: 8px;
  padding: 8px 12px;
  color: #000000;
  background: #f5f5f5;
  border: 0;
  border-radius: 999px;
}

.result-header__status span {
  color: #ffffff;
  background: #3d3bff;
}

.result-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
}

.result-hero--side .result-overview {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 16px;
}

.result-hero--side .result-overview__metric,
.result-hero--side .result-overview__artifact {
  min-height: 0;
}

.result-hero--side .result-overview__proofs {
  max-width: 100%;
}

.result-hero--side .result-overview__metric,
.result-hero--side .result-overview__artifact {
  padding: 20px 24px;
  border-radius: 18px;
}

.result-hero--side .result-overview__metric::after {
  display: none;
}

.result-hero--side .result-overview__metric > strong {
  max-width: none;
  font-size: clamp(40px, 3.6vw, 54px);
  line-height: 0.96;
}

.result-hero--side .result-overview__metric > p {
  max-width: none;
}

.result-hero--side .result-overview__artifact {
  gap: 16px;
}

.result-hero--side .result-overview__artifact strong {
  max-width: none;
  font-size: clamp(26px, 2.4vw, 32px);
}

.result-hero--side .result-overview__artifact p {
  font-size: 15px;
  line-height: 1.42;
}

.result-overview__metric,
.result-overview__artifact {
  min-height: 240px;
  padding: 24px;
  border: 0;
  border-radius: 26px;
  box-shadow: none;
}

.result-overview__metric {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  color: #ffffff;
  background: #202020;
}

.result-overview__metric::after {
  position: absolute;
  z-index: -1;
  right: -12%;
  bottom: -30%;
  width: 72%;
  aspect-ratio: 1;
  content: "";
  background: url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat;
  border-radius: 50%;
}

.result-overview__metric > span {
  max-width: 22ch;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.result-overview__metric > strong {
  display: block;
  max-width: 7ch;
  color: #ffffff;
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.05em;
}

.result-overview__metric > p {
  max-width: 24ch;
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
}

.result-overview__proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 74%;
}

.result-overview__proofs > b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: #000000;
  background: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.result-overview__artifact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  color: #000000;
  background: #f5f5f5;
}

.result-overview__artifact > span {
  width: fit-content;
  padding: 8px 12px;
  color: #ffffff;
  background: #202020;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-overview__artifact strong {
  max-width: 16ch;
  color: #000000;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.result-overview__artifact p {
  max-width: 48ch;
  margin: 0;
  color: #000000;
  font-size: 16px;
  line-height: 1.5;
}

.result-focus {
  display: grid;
  gap: 24px;
  padding: 32px;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 26px;
}

.result-section__heading {
  display: grid;
  gap: 12px;
  max-width: 820px;
}

.result-section__heading > span {
  width: fit-content;
  padding: 8px 12px;
  color: #000000;
  background: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-section__heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.result-section__heading p {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.5;
}

.result-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.result-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 20px;
  color: #000000;
  background: #f5f5f5;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}

.result-task > b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  font-size: 13px;
}

.result-task > span {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.result-control-line {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  color: #ffffff;
  background: #202020;
  border-radius: 18px;
}

.result-control-line img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: cover;
  border-radius: 999px;
}

.result-control-line > div {
  display: grid;
  gap: 4px;
}

.result-control-line strong {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.3;
}

.result-control-line p {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.45;
}

.result-prompt {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 18px 20px;
  color: #000000;
  background: #f5f5f5;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}

.result-prompt summary {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.result-prompt .prompt-output {
  padding: 16px;
  color: #000000;
  background: #ffffff;
  border: 0;
  border-radius: 12px;
}

.result-prompt small,
.result-prompt[open] small {
  color: #000000;
  font-size: 13px;
  line-height: 1.45;
}

.result-prompt__button {
  width: fit-content;
}

.result-prompt__button.is-complete {
  color: #ffffff;
  background: #3d3bff;
  border-color: #3d3bff;
}

.result-course-offer {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 24px;
  padding: 24px;
  color: #ffffff;
  background: #202020;
  border: 0;
  border-radius: 26px;
  box-shadow: none;
}

.result-course-offer__content {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: space-between;
  gap: 16px;
  height: 100%;
  padding: 4px 0;
  min-width: 0;
}

.result-course-offer__copy {
  display: grid;
  gap: 8px;
}

.result-course-offer__copy > span {
  width: fit-content;
  padding: 8px 12px;
  color: #ffffff;
  background: #3d3bff;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.result-course-offer__copy h3 {
  max-width: 24ch;
  margin: 0;
  color: #ffffff;
  font-size: clamp(26px, 2.8vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.result-course-offer__copy p {
  max-width: 58ch;
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
}

.result-course-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-course-benefits li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 112px;
  padding: 12px 12px 12px 42px;
  color: #000000;
  background: #ffffff;
  border: 0;
  border-radius: 12px;
}

.result-course-benefits li::before {
  position: absolute;
  top: 12px;
  left: 14px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  content: "✓";
  font-size: 11px;
  font-weight: 700;
}

.result-course-benefits strong,
.result-course-benefits span {
  color: #000000;
}

.result-course-benefits strong {
  font-size: 13px;
  line-height: 1.25;
}

.result-course-benefits span {
  font-size: 11px;
  line-height: 1.3;
}

.result-course-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.result-course-facts span {
  padding: 7px 10px;
  color: #000000;
  background: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-course-offer .lead-review-form {
  align-self: start;
  display: grid;
  gap: 12px;
  padding: 20px;
  color: #000000;
  background: #ffffff;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}

.result-course-offer .lead-review-form__intro {
  display: grid;
  gap: 6px;
}

.result-course-offer .lead-review-form__intro > span {
  width: fit-content;
  padding: 6px 10px;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.result-course-offer .lead-review-form__intro h3 {
  margin: 0;
  color: #000000;
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.result-course-offer .lead-review-form__intro p,
.result-course-offer .lead-review-form__footnote,
.result-course-offer .consent-row span {
  color: #000000;
}

.result-course-offer .lead-review-form__intro p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.result-course-offer .lead-review-form__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.result-course-offer .lead-review-form .field,
.result-course-offer .lead-review-form .textarea {
  color: #000000;
  background: #ffffff;
  border-color: #d8d8d8;
  box-shadow: none;
}

.result-course-offer .lead-review-form .field::placeholder,
.result-course-offer .lead-review-form .textarea::placeholder {
  color: #777777;
}

.result-course-offer .lead-review-form__actions,
.result-course-offer .lead-review-form__actions .button {
  width: 100%;
}

.result-course-offer .lead-review-form__actions .button.primary {
  min-height: 52px;
  color: #ffffff;
  background: #3d3bff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.result-course-offer .lead-review-form__actions .button.primary:hover {
  background: #3d3bff;
  transform: none;
}

.result-course-offer .lead-review-form__marketing {
  margin-top: -2px;
  font-size: 11px;
  line-height: 1.3;
}

.result-course-offer .lead-review-form__footnote {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

#course-consultation-form {
  scroll-margin-top: 96px;
}

@media (max-width: 900px) {
  .result-stage .stage-main {
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .result-hero--side,
  .result-overview,
  .result-course-offer {
    grid-template-columns: 1fr;
  }

  .result-hero__story {
    padding-top: 0;
  }

  .result-hero.result-hero--side > div.result-hero__story:first-child {
    padding-top: 0;
  }

  .result-stage .screen-title {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
  }

  .result-overview__metric,
  .result-overview__artifact {
    min-height: 280px;
  }

  .result-course-offer .lead-review-form {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .result-header__inner {
    padding: 10px 16px;
  }

  .result-stage .stage-main {
    gap: 32px;
    padding: 24px 16px 48px;
  }

  .result-stage .screen-title h2 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .result-stage .screen-title .body-copy {
    font-size: 16px;
  }

  .result-hero__footer {
    align-items: stretch;
  }

  .result-hero__cta {
    flex: 1 1 auto;
    height: auto;
    min-height: 52px;
  }

  .result-overview__metric,
  .result-overview__artifact,
  .result-course-offer {
    padding: 24px;
    border-radius: 18px;
  }

  .result-overview__metric,
  .result-overview__artifact {
    min-height: 260px;
  }

  .result-overview__metric::after {
    right: -22%;
    bottom: -18%;
    width: 82%;
  }

  .result-overview__proofs {
    max-width: 100%;
  }

  .result-task-grid {
    grid-template-columns: 1fr;
  }

  .result-focus {
    padding: 24px 16px;
    border-radius: 18px;
  }

  .result-task {
    min-height: 0;
  }

  .result-control-line {
    align-items: flex-start;
    padding: 16px;
  }

  .result-control-line img {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .result-prompt {
    padding: 16px;
  }

  .result-course-offer {
    gap: 24px;
  }

  .result-course-benefits,
  .result-course-offer .lead-review-form__fields {
    grid-template-columns: 1fr;
  }

  .result-course-benefits li {
    min-height: 0;
  }

  .result-course-offer .lead-review-form {
    padding: 20px;
    border-radius: 18px;
  }

  .result-course-offer .lead-review-form__intro h3 {
    font-size: 26px;
  }
}

/* Small funnel refinements: compact desktop questions and living benefit screens. */
@media (min-width: 761px) and (max-height: 820px) {
  .question-screen {
    height: calc(100dvh - 76px) !important;
    min-height: 0 !important;
    padding: clamp(10px, 1.8dvh, 16px) !important;
    overflow: hidden !important;
  }

  .question-screen .prep-main {
    height: 100%;
    min-height: 0;
    padding: clamp(16px, 2.7dvh, 24px) 36px;
    gap: clamp(8px, 1.45dvh, 13px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden !important;
  }

  .question-screen .screen-title {
    gap: 5px;
  }

  .question-screen .screen-title h2 {
    font-size: clamp(28px, 4.8dvh, 38px) !important;
  }

  .question-screen .screen-title .body-copy {
    font-size: clamp(13px, 1.9dvh, 15px) !important;
    line-height: 1.34;
  }

  .question-screen .choice-grid {
    min-height: 0;
    grid-auto-rows: minmax(min-content, 1fr);
    gap: clamp(6px, 1dvh, 8px) !important;
  }

  .question-screen .choice-card {
    min-height: 60px !important;
    padding: 8px 14px !important;
  }

  .question-screen .question-actions {
    padding-top: 3px;
  }

  .question-screen .button {
    min-height: clamp(44px, 6.8dvh, 50px) !important;
  }

  .profile-screen,
  .workday-start-stage {
    height: calc(100dvh - 76px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .profile-screen .prep-main,
  .workday-start-stage .stage-main {
    height: 100%;
    min-height: 0 !important;
    max-height: 100%;
    overflow: hidden !important;
  }

  .profile-screen .activation-console {
    min-height: 80px;
  }

  .profile-screen .activation-console__bar {
    padding: 7px 12px;
  }

  .profile-screen .activation-steps {
    gap: 5px;
    padding: 7px;
  }

  .profile-screen .activation-steps > span {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    padding: 4px 6px;
  }

  .profile-screen .activation-steps b {
    width: 24px;
    height: 24px;
  }

  .profile-screen .activation-steps small {
    font-size: 11px;
  }
}

.chat-result-stage.benefit-motion-prototype .chat-result-card {
  position: relative;
  overflow: hidden;
}

.chat-result-stage.benefit-motion-prototype .chat-result-message--outgoing {
  opacity: 0;
  transform: translate3d(42px, 20px, 0) scale(0.97);
  animation: benefit-message-send 520ms cubic-bezier(0.22, 1, 0.36, 1) 140ms forwards;
}

.chat-result-stage.benefit-motion-prototype .chat-result-card::after {
  content: "↑";
  position: absolute;
  right: 24px;
  top: 46%;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-size: 20px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(61, 59, 255, 0.32);
  animation: benefit-send-signal 780ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
}

.chat-result-stage.benefit-motion-prototype .chat-result-read {
  color: rgba(255, 255, 255, 0.42);
  animation: benefit-read-receipt 360ms ease-out 700ms forwards;
}

.chat-result-stage.benefit-motion-prototype .chat-result-message--incoming {
  opacity: 0;
  transform: translate3d(-28px, 16px, 0);
  animation: benefit-feedback-arrive 520ms cubic-bezier(0.22, 1, 0.36, 1) 920ms forwards;
}

.chat-result-stage.benefit-motion-prototype .chat-result-bubble--followup {
  opacity: 0;
  transform: translateY(8px);
  animation: benefit-feedback-arrive 420ms cubic-bezier(0.22, 1, 0.36, 1) 1220ms forwards;
}

.chat-result-stage.benefit-motion-prototype .result-delivery-status {
  transform-origin: right center;
  animation: benefit-status-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) 760ms both;
}

.chat-result-stage.benefit-motion-prototype .chat-result-summary {
  opacity: 0;
  transform: translateY(14px);
  animation: benefit-summary-arrive 520ms cubic-bezier(0.22, 1, 0.36, 1) 1480ms forwards;
}

@keyframes benefit-message-send {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes benefit-send-signal {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.72);
  }
  36% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-54px, -42px, 0) scale(1.08);
  }
}

@keyframes benefit-read-receipt {
  50% {
    transform: scale(1.18);
  }
  to {
    color: #d9ff74;
    transform: scale(1);
  }
}

@keyframes benefit-feedback-arrive {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes benefit-status-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes benefit-summary-arrive {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-result-stage.benefit-motion-prototype .chat-result-message--outgoing,
  .chat-result-stage.benefit-motion-prototype .chat-result-message--incoming,
  .chat-result-stage.benefit-motion-prototype .chat-result-bubble--followup,
  .chat-result-stage.benefit-motion-prototype .result-delivery-status,
  .chat-result-stage.benefit-motion-prototype .chat-result-summary,
  .chat-result-stage.benefit-motion-prototype .chat-result-read,
  .chat-result-stage.benefit-motion-prototype .chat-result-card::after {
    animation: none !important;
  }

  .chat-result-stage.benefit-motion-prototype .chat-result-message--outgoing,
  .chat-result-stage.benefit-motion-prototype .chat-result-message--incoming,
  .chat-result-stage.benefit-motion-prototype .chat-result-bubble--followup,
  .chat-result-stage.benefit-motion-prototype .result-delivery-status,
  .chat-result-stage.benefit-motion-prototype .chat-result-summary {
    opacity: 1;
    transform: none;
  }

  .chat-result-stage.benefit-motion-prototype .chat-result-read {
    color: #d9ff74;
  }

  .chat-result-stage.benefit-motion-prototype .chat-result-card::after {
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .workday-start-stage .stage-main,
  .fitting-processing-stage .stage-main {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .fitting-processing-stage {
    height: calc(100dvh - 88px);
    min-height: 0;
    overflow: hidden;
  }
}

/* Screen 22: keep the source and the final action reachable at browser zoom. */
@media (min-width: 761px) {
  .fitting-stage.change-case-stage .source-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .change-case-stage .project-update-chat {
    min-height: 0;
    max-height: 100%;
  }

  .change-case-stage .project-update-chat__workspace {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .change-case-stage .work-chat,
  .trust-status-stage .work-chat {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  .change-case-stage .ai-feed,
  .trust-status-stage .ai-feed {
    min-height: 0;
  }

  .change-case-stage .work-chat:has(.ai-chat-welcome),
  .trust-status-stage .work-chat:has(.ai-chat-welcome) {
    grid-template-rows: auto auto auto 1fr;
  }

  .change-case-stage .ai-chat-welcome,
  .trust-status-stage .ai-chat-welcome {
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr);
    justify-items: start;
    column-gap: 12px;
    margin: 8px 0;
    text-align: left;
  }

  .change-case-stage .ai-chat-welcome__mark,
  .trust-status-stage .ai-chat-welcome__mark {
    grid-row: span 2;
    width: 42px;
    height: 42px;
  }

  /* The current step keeps its full height; only the conversation scrolls. */
  .change-case-stage .ai-composer,
  .trust-status-stage .ai-composer {
    min-height: min-content;
    max-height: none;
    grid-auto-rows: max-content;
    overflow: visible;
  }

  .change-case-stage .ai-composer-draft,
  .trust-status-stage .ai-composer-draft {
    max-height: none;
    font-size: 12px;
    line-height: 1.35;
  }

  .change-case-stage .composer-actions .button,
  .trust-status-stage .composer-actions .button {
    flex-shrink: 0;
  }

  .change-case-stage .composer-actions {
    position: static;
    padding-top: 6px;
    background: #fff;
  }

  .change-case-stage .ai-bubble {
    max-width: 100%;
  }

  .change-case-stage .ai-change-options,
  .change-case-stage .change-option-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .change-case-stage .ai-change-option {
    align-content: start;
    padding: 8px;
  }

  .change-case-stage .ai-change-option + .ai-change-option {
    border-top: 0;
  }

  .change-case-stage .ai-change-option p {
    padding-left: 0;
  }

  .change-case-stage .change-option {
    align-content: start;
  }

  .change-case-stage .change-option-head {
    flex-wrap: wrap;
    gap: 4px;
  }

  .change-case-stage .change-option-head strong {
    font-size: 11.5px;
  }

  .change-case-stage .change-option-head b {
    font-size: 9px;
  }

  .change-case-stage .change-option > span,
  .change-case-stage .change-option small {
    font-size: 11px;
    line-height: 1.3;
  }
}

@media (min-width: 761px) {
  .insight-modal {
    gap: 10px;
    padding: 12px;
  }

  .insight-modal .insight-modal__primary {
    gap: 10px;
    padding: 22px;
  }

  .insight-modal .insight-modal__primary h2 {
    font-size: clamp(28px, 4dvh, 36px);
    line-height: 1.04;
  }

  .insight-modal__lead {
    font-size: 16px;
    line-height: 1.32;
  }

  .insight-modal__metric {
    padding: 10px 14px;
  }

  .insight-modal__metric strong {
    font-size: 18px;
  }

  .insight-modal__actions .button {
    min-height: 44px;
  }
}

/* At high zoom, preserve the answer text and allow normal page scrolling. */
@media (min-width: 761px) and (max-height: 680px) {
  .question-screen {
    height: auto !important;
    overflow: visible !important;
  }

  .question-screen .prep-main {
    height: auto;
    grid-template-rows: auto auto auto auto;
    overflow: visible !important;
  }
}

@media (min-width: 761px) and (max-height: 860px) {
  .change-case-stage .project-update-message {
    gap: 9px;
    padding: 12px;
  }

  .change-case-stage .project-update-message__bubble {
    gap: 7px;
    padding: 11px 12px 12px;
  }

  .change-case-stage .project-update-message__bubble p {
    font-size: clamp(11px, 1.5dvh, 13px);
    line-height: 1.34;
  }
}

/* Profile data screens: compact live workspace. */
.profile-data-screen {
  width: 100% !important;
  max-width: none;
  height: auto !important;
  min-height: calc(100dvh - 76px) !important;
  margin: 0;
  align-items: start;
  padding: clamp(20px, 4dvh, 40px) 18px !important;
  overflow: visible !important;
  background: transparent;
}

.shell:has(> .profile-data-screen) {
  background:
    radial-gradient(circle at 8% 12%, rgba(207, 255, 0, 0.24), transparent 30%),
    radial-gradient(circle at 92% 78%, rgba(61, 59, 255, 0.15), transparent 34%),
    linear-gradient(145deg, #fbfbff 0%, #f3f2ff 56%, #fbffe9 100%);
}

.profile-data-screen .prep-main {
  width: min(760px, 100%);
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 10px !important;
  padding: 22px !important;
  align-content: start !important;
  overflow: visible !important;
  border: 1px solid rgba(61, 59, 255, 0.13);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 60px rgba(44, 39, 120, 0.11);
}

.profile-data-screen .eyebrow {
  min-height: 30px !important;
  padding: 0 11px;
  font-size: 12px !important;
}

.profile-data-screen .eyebrow:empty {
  display: none;
}

.profile-data-screen .profile-form {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.profile-mobile-chat-cue {
  display: flex;
}

.profile-data-screen .profile-marina-card {
  border-radius: 17px;
  background:
    radial-gradient(circle at 94% 10%, rgba(217, 255, 116, 0.42), transparent 30%),
    linear-gradient(135deg, #f2f1ff 0%, #f8f7ff 100%);
  box-shadow: 0 10px 30px rgba(61, 59, 255, 0.08);
}

.profile-data-screen .project-chat-brief__message {
  gap: 11px;
  padding: 11px 13px;
}

.profile-data-screen .profile-marina-card .project-chat-brief__message > .colleague-avatar {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

.profile-data-screen .project-chat-brief__content {
  gap: 4px;
}

.profile-data-screen .project-chat-brief__person strong {
  font-size: 14px;
}

.profile-data-screen .project-chat-brief__person span {
  font-size: 12px;
}

.profile-data-screen .profile-marina-card .project-chat-brief__content p {
  max-width: 610px;
  padding: 10px 13px;
  font-size: 17px;
  line-height: 1.38;
}

.profile-data-screen .field-block {
  gap: 6px;
}

.profile-data-screen .field-block > label {
  font-size: 15px;
}

.profile-data-screen .profile-form .field {
  min-height: 50px;
  border-color: rgba(0, 0, 0, 0.16);
  background: #fff;
  box-shadow: 0 7px 20px rgba(25, 24, 72, 0.04);
}

.profile-data-screen .profile-form__actions {
  gap: 8px;
}

.profile-data-screen .profile-form__actions .button {
  min-height: 48px !important;
}

.profile-data-screen .profile-form > [data-skb-consent="pd"] {
  min-height: 32px;
  margin: 0;
  gap: 10px;
  align-items: center;
  color: #3e3e3e;
  font-size: 14px;
  line-height: 1.4;
}

.profile-data-screen .profile-form > [data-skb-consent="pd"] .skb-consent__box {
  width: 22px;
  height: 22px;
  margin: 0;
}

.profile-data-screen .profile-legal {
  display: grid;
  gap: 7px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.profile-data-screen .profile-legal .skb-consent__item,
.profile-data-screen .profile-legal .skb-consent__note {
  margin: 0;
  color: #686868;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.profile-data-screen .profile-legal .skb-consent__item {
  min-height: 30px;
  gap: 9px;
  align-items: center;
}

.profile-data-screen .profile-legal .skb-consent__box {
  width: 22px;
  height: 22px;
  margin: 0;
}

.profile-data-screen .profile-legal a {
  color: inherit;
  text-underline-offset: 2px;
}

.profile-data-screen .profile-legal .consent-marketing-muted {
  padding: 0;
  color: #777;
  font-size: 12px;
  line-height: 1.4;
}

.profile-data-screen .profile-legal .consent-marketing-muted .skb-consent__box {
  width: 18px;
  height: 18px;
}

@media (max-width: 640px) {
  .profile-data-screen {
    width: 100% !important;
    padding: 24px 16px 32px !important;
    justify-items: center;
  }

  .profile-data-screen .prep-main {
    width: 100%;
    max-width: 390px !important;
    min-height: 0 !important;
    margin-top: 0;
    margin-inline: auto;
    justify-self: center;
    gap: 16px !important;
    padding: 24px 18px 28px !important;
    border-radius: 18px !important;
  }

  .profile-mobile-chat-cue {
    position: relative;
    order: -1;
    width: auto;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: -24px -18px 0;
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid rgba(61, 59, 255, 0.11);
    border-radius: 18px 18px 0 0;
    color: #3c3a58;
    background: rgba(248, 248, 255, 0.82);
    box-shadow: none;
    transform: none;
    font-size: 12px;
    line-height: 1.2;
  }

  .profile-mobile-chat-cue::after {
    content: none;
  }

  .profile-mobile-chat-cue__dots {
    display: flex;
    gap: 3px;
  }

  .profile-mobile-chat-cue__dots i,
  .profile-mobile-chat-cue__status i {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
  }

  .profile-mobile-chat-cue__dots i:nth-child(1) {
    background: #ff655d;
  }

  .profile-mobile-chat-cue__dots i:nth-child(2) {
    background: #ffbd2e;
  }

  .profile-mobile-chat-cue__dots i:nth-child(3),
  .profile-mobile-chat-cue__status i {
    background: #27c840;
  }

  .profile-mobile-chat-cue strong {
    font-size: 12px;
  }

  .profile-mobile-chat-cue__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: #77738e;
    font-size: 11px;
  }

  .profile-data-screen .eyebrow {
    min-height: 32px !important;
    padding: 0 11px;
    font-size: 13px !important;
  }

  .profile-data-screen .profile-form {
    gap: 16px;
    padding: 0;
  }

  .profile-data-screen .project-chat-brief__message {
    gap: 10px;
    padding: 12px;
  }

  .profile-data-screen .profile-marina-card .project-chat-brief__message > .colleague-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .profile-data-screen .project-chat-brief__person {
    display: grid;
    gap: 1px;
  }

  .profile-data-screen .project-chat-brief__person strong {
    font-size: 15px;
  }

  .profile-data-screen .project-chat-brief__person span {
    font-size: 12px;
  }

  .profile-data-screen .profile-marina-card .project-chat-brief__content p {
    padding: 11px 13px;
    font-size: 17px;
    line-height: 1.38;
  }

  .profile-data-screen .field-block > label {
    font-size: 15px;
  }

  .profile-data-screen .profile-form .field {
    min-height: 52px;
    font-size: 17px;
  }

  .profile-data-screen .profile-form__actions {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .profile-data-screen .profile-form__actions .button {
    min-height: 52px !important;
    font-size: 14px !important;
  }

  .profile-data-screen .profile-form > [data-skb-consent="pd"] {
    min-height: 40px;
    margin: 0;
    font-size: 14px;
  }

  .profile-data-screen .profile-form > [data-skb-consent="pd"] .skb-consent__box {
    width: 24px;
    height: 24px;
  }

  .profile-data-screen .profile-legal {
    gap: 6px;
    margin-top: 0;
    padding-top: 8px;
  }

  .profile-data-screen .profile-legal .skb-consent__item,
  .profile-data-screen .profile-legal .skb-consent__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
  }

  .profile-data-screen .profile-legal .skb-consent__item {
    min-height: 34px;
  }

  .profile-data-screen .profile-legal .skb-consent__box {
    width: 24px;
    height: 24px;
  }

  .profile-data-screen .profile-legal .consent-marketing-muted {
    font-size: 12px;
  }

  .profile-data-screen .profile-legal .consent-marketing-muted .skb-consent__box {
    width: 18px;
    height: 18px;
  }

  .profile-data-screen.simulation-flow-screen .prep-main,
  .profile-data-screen.project-start-screen .prep-main {
    margin-top: 0 !important;
  }
}

/* Result v3: scoped to the final screen and its consultation modal. */
body.result-modal-open {
  overflow: hidden;
}

.result-stage .stage-main {
  gap: clamp(48px, 7vw, 88px);
}

.result-stage .result-hero-v2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  align-items: start;
  gap: 24px;
}

.result-stage .result-hero-v2__story {
  display: grid;
  align-content: center;
  gap: 24px;
  min-height: min(520px, calc(100svh - 176px));
  padding: clamp(30px, 4vw, 44px);
  color: #ffffff;
  border-radius: 26px;
  box-shadow: 0 22px 70px rgba(49, 45, 116, 0.18);
}

.result-stage .result-hero.result-hero-v2 > .result-hero-v2__story {
  background:
    linear-gradient(135deg, rgba(13, 10, 44, 0.08), rgba(13, 10, 44, 0.52)),
    url("./assets/style-pack/assets/gradients/01_Gradient.webp") center / cover no-repeat,
    #504dd8;
}

.result-stage .result-hero-v2 .screen-title h2 {
  max-width: 18ch;
  color: #ffffff;
  font-size: clamp(38px, 3.5vw, 48px);
  line-height: 0.98;
}

.result-stage .result-hero-v2 .screen-title .body-copy {
  max-width: 620px;
  padding: 14px 16px;
  color: #ffffff;
  background: rgba(10, 8, 38, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

.result-stage .result-hero-v2 .task-label {
  margin: 0;
  color: #151515;
  background: #c8ff1a;
  border-color: #c8ff1a;
  box-shadow: 0 8px 28px rgba(200, 255, 26, 0.2);
}

.result-stage .result-hero-v2__practice {
  max-width: 620px;
  margin: 0;
  padding-left: 18px;
  border-left: 4px solid #c8ff1a;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.5;
}

.result-stage .result-proof-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 22px;
  min-height: 0;
  padding: 28px;
  overflow: hidden;
  color: #ffffff;
  background: #202020;
  border-radius: 26px;
}

.result-stage .result-hero.result-hero-v2 > .result-hero-v2__aside {
  display: grid;
  gap: 18px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.result-stage .result-hero-cta {
  display: grid;
  gap: 16px;
  padding: 22px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(61, 59, 255, 0.96), rgba(83, 78, 255, 0.9)),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat,
    #3d3bff;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(61, 59, 255, 0.18);
}

.result-stage .result-hero-cta p {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.result-stage .result-hero-cta__button {
  width: 100%;
  min-height: 56px;
  color: #151515;
  background: #ffffff;
  border: 0;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 700;
}

.result-stage .result-hero-cta__button:hover {
  color: #ffffff;
  background: #151515;
}

.result-stage .result-proof-panel::after {
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -120px;
  width: 330px;
  height: 330px;
  content: "";
  background: url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat;
  border-radius: 50%;
  opacity: 0.88;
}

.result-stage .result-proof-panel__primary {
  display: grid;
  gap: 10px;
}

.result-stage .result-proof-panel__primary > span,
.result-stage .result-proof-panel__projection span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.result-stage .result-proof-panel__primary > strong {
  max-width: 10ch;
  color: #ffffff;
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.result-stage .result-proof-panel__primary p,
.result-stage .result-proof-panel small {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}

.result-stage .result-proof-panel__primary p {
  font-size: 16px;
}

.result-stage .result-proof-panel__projection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.result-stage .result-proof-panel__projection > div {
  display: grid;
  gap: 5px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.result-stage .result-proof-panel__projection strong {
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
}

.result-stage .result-proof-panel small {
  max-width: 38ch;
  font-size: 11px;
}

@media (min-width: 901px) {
  .result-stage {
    padding-top: 24px;
  }

  .result-stage .stage-main {
    padding-top: 28px;
  }
}

.result-stage .result-section-heading {
  display: grid;
  gap: 12px;
  max-width: 760px;
}

.result-stage .result-section-heading > span,
.result-stage .result-transition > div > span,
.result-stage .result-sales-form__offer > span,
.result-stage .result-trust__copy > span {
  width: fit-content;
  padding: 8px 12px;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-stage .result-section-heading h3,
.result-stage .result-transition h3,
.result-stage .result-sales-form h3,
.result-stage .result-trust h3 {
  margin: 0;
  color: #000000;
  font-size: clamp(34px, 4.2vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.result-stage .result-section-heading--light > span {
  color: #000000;
  background: #ffffff;
}

.result-stage .result-section-heading--light h3 {
  color: #ffffff;
}

.result-stage .result-scenarios {
  display: grid;
  gap: 28px;
  padding: clamp(28px, 5vw, 48px);
  color: #ffffff;
  background: #3d3bff;
  border-radius: 26px;
}

.result-stage .result-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.result-stage .result-scenario {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 12px 14px;
  min-height: 220px;
  padding: 22px;
  color: #000000;
  background: #ffffff;
  border-radius: 18px;
}

.result-stage .result-scenario > b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  font-size: 13px;
}

.result-stage .result-scenario h4 {
  align-self: center;
  margin: 0;
  color: #000000;
  font-size: 18px;
  line-height: 1.2;
}

.result-stage .result-scenario p {
  grid-column: 1 / -1;
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 4px 0 0;
  color: #000000;
  font-size: 16px;
  line-height: 1.42;
}

.result-stage .result-scenario p i {
  color: #3d3bff;
  font-size: 22px;
  font-style: normal;
  line-height: 1;
}

.result-stage .result-prompt--universal {
  margin: 0;
  padding: 22px;
  background: #202020;
}

.result-stage .result-prompt--universal summary,
.result-stage .result-prompt--universal p,
.result-stage .result-prompt--universal small {
  color: #ffffff;
}

.result-stage .result-prompt--universal p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.result-stage .result-prompt--universal .prompt-output {
  white-space: pre-wrap;
}

.result-stage .result-transition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  padding: clamp(28px, 5vw, 48px);
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(32, 32, 32, 0.95), rgba(32, 32, 32, 0.75)),
    url("./assets/style-pack/assets/gradients/06_Gradient.webp") center / cover no-repeat,
    #202020;
  border-radius: 26px;
}

.result-stage .result-transition > div {
  display: grid;
  gap: 16px;
}

.result-stage .result-transition h3,
.result-stage .result-transition p {
  color: #ffffff;
}

.result-stage .result-transition p {
  max-width: 760px;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

.result-stage .result-cta {
  min-height: 54px;
  padding-inline: 22px;
  border: 0;
  border-radius: 12px;
  white-space: nowrap;
}

.result-stage .result-outcomes {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

.result-stage .result-outcomes__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-stage .result-outcomes__list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #d8d8d8;
}

.result-stage .result-outcomes__list li:last-child {
  border-bottom: 1px solid #d8d8d8;
}

.result-stage .result-outcomes__list b {
  color: #3d3bff;
  font-size: 13px;
}

.result-stage .result-outcomes__list span {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.result-stage .result-sales-form {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 24px;
  padding: 24px;
  color: #ffffff;
  background: #202020;
  border-radius: 26px;
}

.result-sales-form__form-slot,
.result-consultation-modal__form-slot {
  min-width: 0;
}

.result-stage .result-sales-form__offer {
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 100%;
  padding: 20px 12px 20px 16px;
}

.result-stage .result-sales-form h3 {
  max-width: 17ch;
  color: #ffffff;
}

.result-stage .result-sales-form__offer p {
  max-width: 62ch;
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.5;
}

.result-stage .result-sales-form__offer ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-stage .result-sales-form__offer li {
  position: relative;
  padding-left: 30px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.4;
}

.result-stage .result-sales-form__offer li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  content: "✓";
  font-size: 11px;
  font-weight: 700;
}

.result-stage .result-sales-form .lead-review-form,
.result-consultation-modal .lead-review-form {
  display: grid;
  gap: 14px;
  padding: 24px;
  color: #000000;
  background: #ffffff;
  border-radius: 18px;
}

.result-stage .result-sales-form .lead-review-form__intro,
.result-consultation-modal .lead-review-form__intro {
  display: grid;
  gap: 8px;
}

.result-stage .result-sales-form .lead-review-form__intro > span,
.result-consultation-modal .lead-review-form__intro > span {
  width: fit-content;
  padding: 6px 10px;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.result-stage .result-sales-form .lead-review-form__intro h3,
.result-consultation-modal .lead-review-form__intro h3 {
  margin: 0;
  color: #000000;
  font-size: 28px;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.result-stage .result-sales-form .lead-review-form__intro p,
.result-consultation-modal .lead-review-form__intro p {
  margin: 0;
  color: #000000;
  font-size: 14px;
  line-height: 1.45;
}

.result-stage .result-sales-form .lead-review-form__fields,
.result-consultation-modal .lead-review-form__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.result-stage .result-sales-form .lead-review-form__actions,
.result-stage .result-sales-form .lead-review-form__actions .button,
.result-consultation-modal .lead-review-form__actions,
.result-consultation-modal .lead-review-form__actions .button {
  width: 100%;
}

.result-stage .result-sales-form .lead-review-form__actions .button,
.result-consultation-modal .lead-review-form__actions .button {
  min-height: 52px;
  border-radius: 12px;
}

.result-stage .result-sales-form .lead-review-form__marketing,
.result-stage .result-sales-form .lead-review-form__footnote,
.result-consultation-modal .lead-review-form__marketing,
.result-consultation-modal .lead-review-form__footnote {
  font-size: 11px;
  line-height: 1.4;
}

.result-stage .result-course-skills {
  display: grid;
  gap: 28px;
  padding: clamp(28px, 5vw, 48px);
  color: #ffffff;
  background: #3d3bff;
  border-radius: 26px;
}

.result-stage .result-course-skills__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

.result-stage .result-course-skills__list article {
  display: grid;
  gap: 7px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.42);
}

.result-stage .result-course-skills__list strong,
.result-stage .result-course-skills__list p {
  color: #ffffff;
}

.result-stage .result-course-skills__list strong {
  font-size: 18px;
  line-height: 1.25;
}

.result-stage .result-course-skills__list p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.result-stage .result-course-skills .result-cta {
  justify-self: start;
  color: #000000;
  background: #ffffff;
}

.result-stage .result-trust {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: clamp(32px, 6vw, 72px);
  padding: clamp(30px, 5vw, 52px);
  color: #ffffff;
  background:
    linear-gradient(120deg, rgba(32, 32, 32, 0.98), rgba(32, 32, 32, 0.78)),
    url("./assets/style-pack/assets/gradients/01_Gradient.webp") center / cover no-repeat,
    #202020;
  border-radius: 26px;
}

.result-stage .result-trust__copy {
  display: grid;
  align-content: start;
  gap: 18px;
}

.result-stage .result-trust h3,
.result-stage .result-trust p {
  color: #ffffff;
}

.result-stage .result-trust p {
  max-width: 690px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.result-stage .result-trust .result-cta {
  justify-self: start;
  margin-top: 6px;
}

.result-stage .result-trust__proofs {
  display: grid;
  align-content: start;
  gap: 0;
}

.result-stage .result-trust__proofs > div {
  display: grid;
  gap: 5px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}

.result-stage .result-trust__proofs > div:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

.result-stage .result-trust__proofs strong,
.result-stage .result-trust__proofs span {
  color: #ffffff;
}

.result-stage .result-trust__proofs strong {
  font-size: 17px;
}

.result-stage .result-trust__proofs span {
  font-size: 14px;
  line-height: 1.45;
}

.result-consultation-modal {
  position: fixed;
  z-index: 2200;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
}

.result-consultation-modal.is-open {
  display: grid;
}

.result-consultation-modal__panel {
  position: relative;
  width: min(100%, 680px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 26px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
}

.result-consultation-modal__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  color: #000000;
  background: #f1f1f1;
  border-radius: 999px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}

.result-consultation-modal .lead-review-form {
  padding: 34px;
  border-radius: 26px;
}

.result-consultation-modal .lead-review-form__intro {
  padding-right: 48px;
}

.result-consultation-modal .lead-review-form__intro-list {
  display: grid;
  gap: 7px;
  margin: 4px 0 0;
  padding-left: 20px;
  color: #000000;
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .result-stage .result-hero-v2,
  .result-stage .result-outcomes,
  .result-stage .result-sales-form,
  .result-stage .result-trust {
    grid-template-columns: 1fr;
  }

  .result-stage .result-hero-v2__story,
  .result-stage .result-proof-panel {
    min-height: 0;
  }

  .result-stage .result-hero-v2__aside {
    grid-template-columns: 1fr;
  }

  .result-stage .result-scenario-grid {
    grid-template-columns: 1fr;
  }

  .result-stage .result-scenario {
    min-height: 0;
  }

  .result-stage .result-transition {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .result-stage .result-transition .result-cta {
    justify-self: start;
  }

  .result-stage .result-sales-form__offer {
    padding: 16px 8px 24px;
  }
}

@media (max-width: 640px) {
  .result-stage .stage-main {
    gap: 40px;
    padding-bottom: 48px;
  }

  .result-stage .result-hero-v2 {
    gap: 20px;
  }

  .result-stage .result-hero-v2__story {
    gap: 18px;
    padding: 24px 18px;
  }

  .result-stage .result-hero-v2 .screen-title h2 {
    font-size: clamp(32px, 9vw, 40px);
  }

  .result-stage .result-hero-v2 .screen-title .body-copy,
  .result-stage .result-hero-v2__practice,
  .result-stage .result-transition p,
  .result-stage .result-sales-form__offer p,
  .result-stage .result-sales-form__offer li,
  .result-stage .result-course-skills__list p,
  .result-stage .result-trust p,
  .result-stage .result-scenario p {
    font-size: 16px;
    line-height: 1.5;
  }

  .result-stage .result-proof-panel,
  .result-stage .result-scenarios,
  .result-stage .result-transition,
  .result-stage .result-course-skills,
  .result-stage .result-trust {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .result-stage .result-proof-panel {
    gap: 20px;
  }

  .result-stage .result-hero-cta {
    padding: 20px 18px;
    border-radius: 20px;
  }

  .result-stage .result-proof-panel__primary > strong {
    font-size: 44px;
  }

  .result-stage .result-proof-panel__projection,
  .result-stage .result-course-skills__list,
  .result-stage .result-sales-form .lead-review-form__fields,
  .result-consultation-modal .lead-review-form__fields {
    grid-template-columns: 1fr;
  }

  .result-stage .result-section-heading h3,
  .result-stage .result-transition h3,
  .result-stage .result-sales-form h3,
  .result-stage .result-trust h3 {
    font-size: 32px;
  }

  .result-stage .result-scenario {
    padding: 18px;
  }

  .result-stage .result-outcomes {
    gap: 22px;
  }

  .result-stage .result-outcomes__list span {
    font-size: 16px;
  }

  .result-stage .result-sales-form {
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
  }

  .result-stage .result-sales-form .lead-review-form,
  .result-consultation-modal .lead-review-form {
    padding: 20px;
  }

  .result-stage .result-cta {
    width: 100%;
    min-height: 54px;
    padding-inline: 16px;
    white-space: normal;
  }

  .result-consultation-modal {
    align-items: end;
    padding: 8px;
  }

  .result-consultation-modal__panel {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 22px;
  }

  .result-consultation-modal .lead-review-form__intro {
    padding-right: 38px;
  }

  .result-consultation-modal .lead-review-form__intro h3 {
    font-size: 28px;
  }

  .result-consultation-modal .lead-review-form__intro p,
  .result-consultation-modal .lead-review-form__intro-list {
    font-size: 16px;
  }
}

.result-stage .result-under18-next {
  display: grid;
  gap: 24px;
  padding: clamp(28px, 5vw, 48px);
  background: #f1f1f1;
  border-radius: 26px;
}

.result-stage .result-under18-next .result-section-heading p {
  max-width: 760px;
  margin: 0;
  color: #323232;
  font-size: 18px;
  line-height: 1.5;
}

.result-stage .result-under18-next .result-prompt {
  margin: 0;
  background: #ffffff;
}

.result-stage .result-under18-next__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.result-stage .result-under18-next__actions .button {
  flex: 0 0 auto;
}

.result-stage .result-under18-next__actions p {
  max-width: 620px;
  margin: 0;
  color: #565656;
  font-size: 14px;
  line-height: 1.45;
}

.result-mobile-action-dock {
  display: none;
}

@media (max-width: 760px) {
  .result-stage {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .result-mobile-action-dock {
    display: block;
  }

  .result-stage .result-under18-next {
    gap: 18px;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .result-stage .result-under18-next .result-section-heading p {
    font-size: 16px;
  }

  .result-stage .result-under18-next__actions {
    display: grid;
    gap: 12px;
  }

  .result-stage .result-under18-next__actions .button {
    width: 100%;
  }
}

/* Result design pass: stronger brand rhythm and role-specific visual language. */
.result-stage {
  background:
    radial-gradient(circle at 8% 18%, rgba(61, 59, 255, 0.08), transparent 24%),
    radial-gradient(circle at 92% 52%, rgba(216, 255, 40, 0.1), transparent 22%),
    #ffffff;
}

.result-stage .result-hero-v2__story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(41, 37, 112, 0.22);
}

.result-stage .result-hero-v2__story::before,
.result-stage .result-hero-v2__story::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.result-stage .result-hero-v2__story::before {
  right: -74px;
  bottom: -104px;
  width: 310px;
  height: 310px;
  background: url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat;
  border-radius: 42% 58% 54% 46%;
  box-shadow: -24px -18px 62px rgba(169, 160, 255, 0.22);
  transform: rotate(-18deg);
}

.result-stage .result-hero-v2__story::after {
  top: 34px;
  right: 36px;
  width: 74px;
  height: 74px;
  background: #d8ff28;
  border-radius: 26px;
  box-shadow: 0 18px 42px rgba(12, 9, 49, 0.22);
  transform: rotate(12deg);
}

.result-stage .result-hero-v2__story > * {
  position: relative;
  z-index: 1;
}

.result-stage .result-hero-v2 .screen-title .body-copy {
  max-width: 580px;
  background: #17133f;
  border: 0;
  box-shadow: 0 16px 44px rgba(8, 6, 35, 0.18);
}

.result-stage .result-hero-cta {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) 142px;
  align-items: center;
  min-height: 224px;
  overflow: hidden;
  padding: 24px;
}

.result-stage .result-hero-cta::after {
  position: absolute;
  z-index: -1;
  right: -60px;
  bottom: -86px;
  width: 220px;
  height: 220px;
  content: "";
  background: #151515;
  border-radius: 50%;
}

.result-stage .result-hero-cta__copy {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  gap: 10px;
}

.result-stage .result-hero-cta__copy > span {
  width: fit-content;
  padding: 7px 11px;
  color: #000000;
  background: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.result-stage .result-hero-cta__copy p {
  max-width: 25ch;
  text-align: left;
}

.result-stage .result-hero-cta__button {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  box-shadow: 0 12px 30px rgba(12, 9, 49, 0.2);
}

.result-role-visual {
  position: relative;
  min-width: 0;
}

.result-role-visual__halo {
  position: absolute;
  inset: 8% 2% 0 14%;
  background: url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat;
  border-radius: 50%;
  filter: saturate(1.15);
}

.result-role-visual__object {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform: rotate(5deg);
  transform-style: preserve-3d;
}

.result-role-visual__board {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 8px;
  width: 88%;
  height: 80%;
  padding: 13px;
  color: #000000;
  background: #ffffff;
  border-radius: 19px;
  box-shadow:
    0 18px 34px rgba(6, 4, 31, 0.3),
    inset 0 -8px 18px rgba(103, 94, 255, 0.09);
  transform: translateZ(20px);
}

.result-role-visual__label {
  max-width: 15ch;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
}

.result-role-visual__signal {
  display: flex;
  align-items: end;
  gap: 5px;
  min-height: 34px;
}

.result-role-visual__signal i {
  display: block;
  flex: 1;
  height: 42%;
  background: #3d3bff;
  border-radius: 999px;
}

.result-role-visual__signal i:nth-child(2) { height: 70%; }
.result-role-visual__signal i:nth-child(3) { height: 54%; }
.result-role-visual__signal i:nth-child(4) { height: 92%; background: #d8ff28; }

.result-role-visual__tags {
  display: flex;
  gap: 4px;
}

.result-role-visual__tags span {
  min-width: 0;
  padding: 4px 6px;
  overflow: hidden;
  color: #000000;
  background: #f1f1f1;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-role-visual__spark {
  position: absolute;
  right: -1px;
  bottom: 4px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #000000;
  background: #d8ff28;
  border-radius: 50%;
  box-shadow: 0 12px 24px rgba(7, 5, 34, 0.24);
  font-size: 17px;
  transform: translateZ(32px) rotate(-5deg);
}

.result-role-visual--hero {
  grid-column: 2;
  grid-row: 1;
  width: 142px;
  height: 126px;
}

.result-role-visual--timeline .result-role-visual__signal,
.result-role-visual--flow .result-role-visual__signal {
  display: grid;
  align-content: center;
  gap: 5px;
}

.result-role-visual--timeline .result-role-visual__signal i,
.result-role-visual--flow .result-role-visual__signal i {
  width: 100%;
  height: 6px;
}

.result-role-visual--timeline .result-role-visual__signal i:nth-child(2) { width: 74%; }
.result-role-visual--timeline .result-role-visual__signal i:nth-child(3) { width: 88%; }
.result-role-visual--flow .result-role-visual__signal i:nth-child(1) { width: 48%; }
.result-role-visual--flow .result-role-visual__signal i:nth-child(2) { width: 68%; }
.result-role-visual--flow .result-role-visual__signal i:nth-child(3) { width: 84%; }

.result-role-visual--ideas .result-role-visual__signal,
.result-role-visual--hub .result-role-visual__signal {
  position: relative;
  min-height: 38px;
}

.result-role-visual--ideas .result-role-visual__signal i,
.result-role-visual--hub .result-role-visual__signal i {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.result-role-visual--ideas .result-role-visual__signal i:nth-child(1),
.result-role-visual--hub .result-role-visual__signal i:nth-child(1) { left: 3%; bottom: 2px; }
.result-role-visual--ideas .result-role-visual__signal i:nth-child(2),
.result-role-visual--hub .result-role-visual__signal i:nth-child(2) { left: 30%; top: 0; }
.result-role-visual--ideas .result-role-visual__signal i:nth-child(3),
.result-role-visual--hub .result-role-visual__signal i:nth-child(3) { right: 24%; bottom: 0; }
.result-role-visual--ideas .result-role-visual__signal i:nth-child(4),
.result-role-visual--hub .result-role-visual__signal i:nth-child(4) { right: 0; top: 3px; }

.result-role-visual--stack .result-role-visual__signal {
  position: relative;
  min-height: 38px;
  perspective: 120px;
}

.result-role-visual--stack .result-role-visual__signal i {
  position: absolute;
  inset: 5px 8% auto;
  width: 84%;
  height: 23px;
  background: #3d3bff;
  border-radius: 8px;
  transform: translateY(0) rotateX(54deg);
}

.result-role-visual--stack .result-role-visual__signal i:nth-child(2) { transform: translateY(7px) rotateX(54deg); }
.result-role-visual--stack .result-role-visual__signal i:nth-child(3) { transform: translateY(14px) rotateX(54deg); }
.result-role-visual--stack .result-role-visual__signal i:nth-child(4) { transform: translateY(21px) rotateX(54deg); }

.result-stage .result-proof-panel {
  box-shadow: 0 24px 72px rgba(22, 19, 61, 0.18);
}

.result-stage .result-proof-panel::after {
  right: -74px;
  bottom: -108px;
  border-radius: 42% 58% 46% 54%;
  transform: rotate(-18deg);
}

.result-stage .result-proof-panel__projection > div {
  color: #000000;
  background: #ffffff;
}

.result-stage .result-proof-panel__projection > div:last-child {
  background: #d8ff28;
}

.result-stage .result-proof-panel__projection strong,
.result-stage .result-proof-panel__projection span {
  color: #000000;
}

.result-stage .result-scenarios {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(61, 59, 255, 0.9), rgba(61, 59, 255, 0.72)),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat,
    #3d3bff;
  box-shadow: 0 24px 72px rgba(61, 59, 255, 0.16);
}

.result-stage .result-scenario {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(24, 20, 89, 0.16);
}

.result-stage .result-scenario::after {
  position: absolute;
  top: -34px;
  right: -30px;
  width: 98px;
  height: 98px;
  content: "";
  background: #c5ece6;
  border-radius: 42% 58% 50% 50%;
  transform: rotate(18deg);
}

.result-stage .result-scenario:nth-child(2) {
  transform: translateY(14px);
}

.result-stage .result-scenario:nth-child(2)::after { background: #f7c8ff; }
.result-stage .result-scenario:nth-child(3)::after { background: #ffc38e; }

.result-stage .result-scenario > b,
.result-stage .result-scenario h4,
.result-stage .result-scenario p {
  position: relative;
  z-index: 1;
}

.result-stage .result-scenario p strong {
  width: fit-content;
  padding: 7px 10px;
  background: #f1f1f1;
  border-radius: 999px;
  font-size: 13px;
}

.result-stage .result-scenario p i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 50%;
  font-size: 17px;
}

.result-stage .result-transition {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(14, 11, 45, 0.16);
}

.result-stage .result-transition::after {
  position: absolute;
  z-index: -1;
  right: 10%;
  bottom: -104px;
  width: 230px;
  height: 230px;
  content: "";
  background: url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat;
  border: 34px solid #d8ff28;
  border-radius: 50%;
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.24);
  transform: rotate(-14deg);
}

.result-stage .result-transition .result-cta {
  position: relative;
  z-index: 1;
}

.result-stage .result-outcomes__list {
  gap: 10px;
}

.result-stage .result-outcomes__list li,
.result-stage .result-outcomes__list li:last-child {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  padding: 16px;
  background: #f5f5f5;
  border: 0;
  border-radius: 18px;
}

.result-stage .result-outcomes__list li:nth-child(3) {
  background: #dfffa3;
}

.result-stage .result-outcomes__list b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 50%;
}

.result-stage .result-sales-form {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(19, 16, 66, 0.96), rgba(32, 32, 32, 0.9)),
    url("./assets/style-pack/assets/gradients/06_Gradient.webp") center / cover no-repeat,
    #202020;
  box-shadow: 0 28px 84px rgba(20, 16, 74, 0.2);
}

.result-stage .result-sales-form::before {
  position: absolute;
  z-index: -1;
  left: -90px;
  bottom: -110px;
  width: 260px;
  height: 260px;
  content: "";
  background: url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat;
  border-radius: 42% 58% 50% 50%;
  transform: rotate(22deg);
}

.result-stage .result-sales-form .lead-review-form {
  box-shadow: 0 22px 58px rgba(5, 4, 27, 0.26);
}

.result-stage .result-course-skills {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(61, 59, 255, 0.88), rgba(61, 59, 255, 0.68)),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat,
    #3d3bff;
  box-shadow: 0 24px 72px rgba(61, 59, 255, 0.16);
}

.result-stage .result-course-skills__list {
  gap: 12px;
  counter-reset: course-skill;
}

.result-stage .result-course-skills__list article {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 18px;
  color: #000000;
  background: #ffffff;
  border: 0;
  border-radius: 18px;
  counter-increment: course-skill;
}

.result-stage .result-course-skills__list article::before {
  grid-row: 1 / span 2;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 50%;
  content: counter(course-skill, decimal-leading-zero);
  font-size: 11px;
  font-weight: 700;
}

.result-stage .result-course-skills__list strong,
.result-stage .result-course-skills__list p {
  grid-column: 2;
  color: #000000;
}

.result-stage .result-trust {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 26px 76px rgba(7, 5, 30, 0.2);
}

.result-stage .result-trust::after {
  position: absolute;
  z-index: -1;
  top: -110px;
  left: 42%;
  width: 250px;
  height: 250px;
  content: "";
  background: #3d3bff;
  border-radius: 44% 56% 50% 50%;
  transform: rotate(-22deg);
}

.result-stage .result-trust__proofs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.result-stage .result-trust__proofs > div,
.result-stage .result-trust__proofs > div:last-child {
  align-content: start;
  min-height: 150px;
  padding: 18px;
  color: #000000;
  background: #ffffff;
  border: 0;
  border-radius: 18px;
}

.result-stage .result-trust__proofs > div:nth-child(2) { background: #c5ece6; }
.result-stage .result-trust__proofs > div:nth-child(3) { background: #d8ff28; }

.result-stage .result-trust__proofs strong,
.result-stage .result-trust__proofs span {
  color: #000000;
}

.result-consultation-modal {
  background: rgba(7, 5, 24, 0.82);
}

.result-consultation-modal__panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(520px, 1.22fr);
  width: min(100%, 980px);
  overflow: auto;
  background: #ffffff;
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.48);
}

.result-consultation-modal__visual {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 36px 30px;
  overflow: hidden;
  color: #ffffff;
  background:
    linear-gradient(145deg, rgba(16, 12, 62, 0.24), rgba(12, 8, 51, 0.76)),
    url("./assets/style-pack/assets/gradients/01_Gradient.webp") center / cover no-repeat,
    #27238a;
}

.result-consultation-modal__visual::after {
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -110px;
  width: 250px;
  height: 250px;
  content: "";
  background: #d8ff28;
  border-radius: 42% 58% 46% 54%;
  transform: rotate(18deg);
}

.result-consultation-modal__visual > span {
  width: fit-content;
  padding: 7px 11px;
  color: #000000;
  background: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.result-consultation-modal__visual h3 {
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.result-role-visual--modal {
  width: min(100%, 260px);
  height: 190px;
  margin: 2px auto 0;
}

.result-role-visual--modal .result-role-visual__label { font-size: 14px; }
.result-role-visual--modal .result-role-visual__tags span { padding: 6px 8px; font-size: 9px; }
.result-role-visual--modal .result-role-visual__spark { width: 44px; height: 44px; font-size: 22px; }

.result-consultation-modal__visual ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-consultation-modal__visual li {
  position: relative;
  padding-left: 27px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.result-consultation-modal__visual li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #000000;
  background: #d8ff28;
  border-radius: 50%;
  content: "✓";
  font-size: 10px;
}

.result-consultation-modal__form-slot {
  display: grid;
  align-content: center;
  background: #ffffff;
}

.result-consultation-modal .lead-review-form {
  align-content: center;
  min-height: 100%;
  padding: 40px;
  border-radius: 0;
  box-shadow: none;
}

.result-consultation-modal .lead-review-form__intro > span {
  color: #000000;
  background: #d8ff28;
}

.result-consultation-modal .lead-review-form__intro h3 {
  max-width: 16ch;
  font-size: 34px;
}

.result-consultation-modal .lead-review-form__fields .field-block {
  padding: 10px 12px;
  background: #f5f5f5;
  border-radius: 14px;
}

.result-consultation-modal .lead-review-form__actions .button {
  min-height: 58px;
  font-size: 17px;
}

.result-stage .result-under18-next {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7)),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat,
    #f1f1f1;
  box-shadow: 0 22px 62px rgba(61, 59, 255, 0.12);
}

@media (max-width: 900px) {
  .result-consultation-modal__panel {
    grid-template-columns: minmax(250px, 0.7fr) minmax(440px, 1.3fr);
  }

  .result-stage .result-trust__proofs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .result-stage .result-hero-v2__story::before {
    right: -100px;
    bottom: -132px;
    width: 270px;
    height: 270px;
  }

  .result-stage .result-hero-v2__story::after {
    top: 22px;
    right: 22px;
    width: 48px;
    height: 48px;
    border-radius: 17px;
  }

  .result-stage .result-hero-cta {
    grid-template-columns: minmax(0, 1fr) 112px;
    min-height: 206px;
    padding: 20px 18px;
  }

  .result-role-visual--hero {
    width: 112px;
    height: 108px;
  }

  .result-role-visual--hero .result-role-visual__board {
    padding: 10px;
    border-radius: 16px;
  }

  .result-role-visual--hero .result-role-visual__label { font-size: 9px; }
  .result-role-visual--hero .result-role-visual__tags span { padding: 3px 4px; font-size: 6px; }
  .result-role-visual--hero .result-role-visual__spark { width: 30px; height: 30px; font-size: 14px; }

  .result-stage .result-scenario:nth-child(2) {
    transform: none;
  }

  .result-stage .result-transition::after {
    right: -90px;
    bottom: -120px;
    opacity: 0.65;
  }

  .result-stage .result-trust__proofs {
    grid-template-columns: 1fr;
  }

  .result-stage .result-trust__proofs > div,
  .result-stage .result-trust__proofs > div:last-child {
    min-height: 0;
  }

  .result-consultation-modal__panel {
    display: block;
    width: 100%;
  }

  .result-consultation-modal__visual {
    grid-template-columns: minmax(0, 1fr) 144px;
    gap: 10px 14px;
    min-height: 190px;
    padding: 22px 20px 18px;
  }

  .result-consultation-modal__visual > span,
  .result-consultation-modal__visual h3 {
    grid-column: 1;
  }

  .result-consultation-modal__visual h3 {
    font-size: 27px;
  }

  .result-role-visual--modal {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 144px;
    height: 126px;
    margin: 6px 0 0;
  }

  .result-role-visual--modal .result-role-visual__label { font-size: 9px; }
  .result-role-visual--modal .result-role-visual__tags span { padding: 4px; font-size: 6px; }
  .result-role-visual--modal .result-role-visual__spark { width: 30px; height: 30px; font-size: 14px; }

  .result-consultation-modal__visual ul {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .result-consultation-modal__visual li {
    padding: 9px;
    color: #000000;
    background: #ffffff;
    border-radius: 12px;
    font-size: 11px;
  }

  .result-consultation-modal__visual li::before {
    display: none;
  }

  .result-consultation-modal .lead-review-form {
    min-height: 0;
    padding: 22px 20px 24px;
  }

  .result-consultation-modal .lead-review-form__intro h3 {
    font-size: 27px;
  }
}

@media (max-width: 480px) {
  .result-stage .result-hero-cta {
    grid-template-columns: minmax(0, 1fr) 94px;
  }

  .result-role-visual--hero {
    width: 94px;
    height: 98px;
  }

  .result-stage .result-hero-cta__copy p {
    font-size: 14px;
  }

  .result-consultation-modal__visual {
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .result-role-visual--modal {
    width: 112px;
    height: 112px;
  }

  .result-consultation-modal__visual ul {
    grid-template-columns: 1fr;
  }

  .result-consultation-modal__visual li:nth-child(3) {
    display: none;
  }
}

/* Result experiment: personal value -> gift reveal -> consultation */
.result-future,
.result-gift-screen,
.result-done {
  --result-accent: #d8ff28;
  width: min(100%, 1220px);
  margin: 0 auto;
  padding: 28px 30px 72px;
}

.result-future--analyst,
.result-done--analyst { --result-accent: #b8e8b6; }
.result-future--marketer,
.result-done--marketer { --result-accent: #ffc38e; }
.result-future--lead,
.result-done--lead { --result-accent: #f7c8ff; }
.result-future--specialist,
.result-done--specialist { --result-accent: #a9c7ff; }
.result-future--other,
.result-done--other { --result-accent: #d8ff28; }

.result-future h1,
.result-future h2,
.result-future h3,
.result-gift-screen h1,
.result-gift-screen h2,
.result-done h1,
.result-done h2 {
  margin: 0;
  letter-spacing: -0.045em;
}

.result-future__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  gap: clamp(30px, 5vw, 72px);
  min-height: 610px;
  padding: clamp(34px, 6vw, 74px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--result-accent) 44%, transparent) 0, transparent 30%),
    linear-gradient(135deg, #090909 0%, #181818 62%, #272727 100%);
  border-radius: 30px;
  box-shadow: 0 28px 80px rgba(17, 14, 69, 0.18);
}

.result-future__hero::before,
.result-future__hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.result-future__hero::before {
  right: -110px;
  bottom: -160px;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(255, 255, 255, 0.025), 0 0 0 90px rgba(255, 255, 255, 0.02);
}

.result-future__hero::after {
  top: 42px;
  right: 42px;
  width: 12px;
  height: 12px;
  background: var(--result-accent);
  border-radius: 50%;
  box-shadow: -36px 32px 0 2px rgba(255, 255, 255, 0.8), 22px 54px 0 -2px rgba(255, 255, 255, 0.45);
}

.result-future__hero-copy,
.result-future__hero-visual {
  position: relative;
  z-index: 1;
}

.result-future__hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.result-future__eyebrow,
.result-gift-screen__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px 13px;
  color: #000000;
  background: var(--result-accent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.result-future__eyebrow span {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  color: #ffffff;
  background: #000000;
  border-radius: 50%;
  font-size: 11px;
}

.result-future__hero h1 {
  max-width: 13ch;
  color: #ffffff;
  font-size: clamp(46px, 5.8vw, 76px);
  line-height: 0.96;
}

.result-future__hero-copy > p {
  max-width: 640px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.48;
}

.result-future__action {
  margin-top: 34px;
}

.button.result-future__gift-cta {
  min-width: 248px;
  min-height: 62px;
  border: 0;
  background: var(--result-accent);
  color: #000000;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--result-accent) 24%, transparent);
  font-size: 18px;
}

.button.result-future__gift-cta:hover {
  color: #ffffff;
  background: #3d3bff;
  transform: translateY(-2px);
}

.result-future__gift-cta span {
  margin-left: auto;
  font-size: 24px;
}

.result-future__hero-visual {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
}

.result-role-visual--future {
  width: min(100%, 360px);
  height: 320px;
}

.result-role-visual--future .result-role-visual__board {
  padding: 28px;
  border-radius: 30px;
  box-shadow: 0 32px 60px rgba(0, 0, 0, 0.42), inset 0 -14px 28px rgba(61, 59, 255, 0.12);
}

.result-role-visual--future .result-role-visual__label {
  max-width: 11ch;
  font-size: 22px;
  line-height: 1.05;
}

.result-role-visual--future .result-role-visual__signal {
  min-height: 92px;
  gap: 12px;
}

.result-role-visual--future .result-role-visual__tags {
  gap: 8px;
}

.result-role-visual--future .result-role-visual__tags span {
  padding: 8px 10px;
  font-size: 10px;
}

.result-role-visual--future .result-role-visual__spark {
  right: 2%;
  bottom: 2%;
  width: 64px;
  height: 64px;
  font-size: 30px;
}

.result-future__signal {
  width: min(100%, 330px);
  padding: 19px 22px;
  color: #000000;
  background: var(--result-accent);
  border-radius: 20px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.28);
  transform: rotate(-2deg);
}

.result-future__signal span,
.result-future__signal p {
  display: block;
  margin: 0;
  font-size: 12px;
}

.result-future__signal strong {
  display: block;
  margin: 3px 0;
  font-size: 36px;
  line-height: 1;
}

.result-future__proof,
.result-future__day,
.result-future__market,
.result-done__next,
.result-done__role,
.result-done__program,
.result-done__faq {
  margin-top: 24px;
  padding: clamp(30px, 5vw, 58px);
  border-radius: 28px;
}

.result-future__proof,
.result-done__next,
.result-done__program,
.result-done__faq {
  background: #f3f3f3;
}

.result-future__section-heading {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin-bottom: 30px;
}

.result-future__section-heading > span,
.result-future__market > div > span,
.result-done__role > div:first-child > span {
  width: max-content;
  padding: 7px 11px;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-future__section-heading h2,
.result-future__market h2,
.result-done__role h2 {
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1;
}

.result-future__proof-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 0.9fr;
  gap: 14px;
}

.result-future__metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 225px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 20px;
}

.result-future__metric--accent {
  color: #ffffff;
  background: #3d3bff;
  border-color: #3d3bff;
}

.result-future__metric > span {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
}

.result-future__metric strong {
  margin: 18px 0;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.result-future__metric:not(.result-future__metric--accent) strong {
  font-size: clamp(22px, 2.4vw, 31px);
}

.result-future__metric p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.72;
}

.result-future__day {
  color: #ffffff;
  background:
    linear-gradient(110deg, rgba(14, 14, 14, 0.96), rgba(14, 14, 14, 0.78)),
    url("./assets/style-pack/assets/gradients/06_Gradient.webp") center / cover no-repeat,
    #121212;
}

.result-future__day .result-future__section-heading > span {
  color: #000000;
  background: var(--result-accent);
}

.result-future__day .result-future__section-heading h2 {
  color: #ffffff;
}

.result-future__day-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}

.result-future__day-flow article {
  min-height: 190px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
}

.result-future__day-flow article.is-after {
  color: #000000;
  background: var(--result-accent);
  border-color: var(--result-accent);
}

.result-future__day-flow article > span {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.result-future__day-flow article p {
  margin: 36px 0 0;
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 600;
  line-height: 1.25;
}

.result-future__day-arrow {
  display: grid;
  width: 50px;
  place-items: center;
  font-size: 34px;
}

.result-future__role-use {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  margin-top: 18px;
  padding: 24px;
  color: #000000;
  background: #ffffff;
  border-radius: 20px;
}

.result-future__role-use span {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.result-future__role-use h3 {
  max-width: 780px;
  margin-top: 9px;
  font-size: clamp(23px, 2.8vw, 36px);
  line-height: 1.08;
}

.result-future__role-use ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 310px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-future__role-use li {
  padding: 8px 11px;
  background: #eeeeee;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-future__market {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(30px, 6vw, 74px);
  align-items: center;
  color: #000000;
  background: var(--result-accent);
}

.result-future__market-number {
  font-size: clamp(86px, 13vw, 166px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.09em;
}

.result-future__market > div {
  display: grid;
  gap: 15px;
}

.result-future__market h2 {
  max-width: 19ch;
}

.result-future__market p,
.result-future__market small {
  max-width: 700px;
  margin: 0;
}

.result-future__market p {
  font-size: 18px;
  line-height: 1.5;
}

.result-future__market small {
  font-size: 11px;
  opacity: 0.66;
}

/* Adult consultation and supergift: scoped separately from the under18 route. */
.shell:has(.gift-consult) { grid-template-rows: auto 1fr; }
.shell:has(.gift-consult) .simple-header { background: transparent; }
.shell:has(.gift-consult) .simple-header-inner { min-height: 56px; width: min(944px, calc(100% - 56px)); }
.shell:has(.gift-consult) .brand img { width: 106px; }
.result-gift-screen.gift-consult { width: min(100%, 1000px); min-height: calc(100svh - 56px); padding: 0 28px 24px; color: #171717; }
.result-gift-screen.gift-consult::before { background: radial-gradient(ellipse at 50% 30%, #ebe5ff 0, transparent 54%), linear-gradient(140deg, #faf9ff, #fffaf5); }
.gift-consult-layout { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gift-consult-intro { align-self: stretch; }
.gift-consult-eyebrow { display: inline-block; margin-bottom: 6px; padding: 4px 9px; border-radius: 6px; background: #d8ff28; color: #171717; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.gift-consult h1, .gift-consult-offer h2 { max-width: none; margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -.045em; }
.gift-consult-intro > p { margin: 7px 0 3px; font-size: 14px; line-height: 1.4; color: #191919; }
.gift-consult-card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: min(100%, 460px); height: 172px; flex: none; margin: 0; padding: 12px 20px; overflow: hidden; border: 1px solid #fefcff; border-radius: 24px; color: #171717; background: radial-gradient(ellipse at 80% 90%, #f5d6b9, transparent 65%), linear-gradient(130deg, #f8f3ff, #e4dbf8); box-shadow: 0 12px 32px #7161831a, inset 0 0 0 4px #ffffff50; text-align: center; font: inherit; }
button.gift-consult-card { cursor: pointer; transition: box-shadow 180ms ease, border-color 180ms ease; }
button.gift-consult-card:hover { border-color: #c9b8ee; box-shadow: 0 14px 38px #71618330, inset 0 0 0 4px #ffffff66; }
.gift-consult-card:focus-visible, .gift-consult .gift-saved-contact summary:focus-visible { outline: 2px solid #3d3bff; outline-offset: 4px; }
.gift-consult-card__eyebrow { padding: 3px 9px; border-radius: 6px; background: #3d3bff; color: #ffffff; position: relative; z-index: 2; font-size: 10px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.gift-consult-card__title { position: relative; z-index: 2; font-size: 20px; letter-spacing: -.025em; line-height: 1.15; }
.gift-consult-card__visual { position: relative; display: grid; place-items: center; width: 180px; height: 68px; flex: none; transform: scale(.68); }
.gift-orbit { position: absolute; width: 144px; height: 110px; border-radius: 50%; border: 1px solid #b1a0cd70; background: repeating-conic-gradient(from -6deg, #9687b754 0deg 1deg, transparent 1deg 15deg); mask: radial-gradient(ellipse, transparent 64%, #000 66%, #000 69%, transparent 71%); }
.gift-orbit-marker { position: absolute; width: 150px; height: 110px; border-radius: 50%; transform: rotate(-25deg); }
.gift-orbit-marker::before { content: ''; position: absolute; top: 48%; left: -2px; width: 8px; height: 8px; border-radius: 50%; background: #3d3bff; box-shadow: 0 0 0 5px #3d3bff0a; }
.gift-box { position: relative; display: block; width: 78px; height: 74px; margin-top: 12px; transform: rotate(-8deg); filter: drop-shadow(0 13px 9px #62429c38); }
.gift-box__body { position: absolute; inset: 18px 4px 0; border-radius: 5px 5px 13px 13px; background: linear-gradient(105deg, #9680ef, #6851c7 60%, #513d9b); box-shadow: inset 2px 0 2px #c7b2ff; }
.gift-box__body::after { content: ''; position: absolute; width: 13px; inset: 0 auto 0 28px; background: linear-gradient(90deg, #d8ff28, #efffa5); }
.gift-box__lid { position: absolute; z-index: 2; inset: 8px 0 auto; height: 20px; border-radius: 5px; background: linear-gradient(110deg, #b09af4, #765dcc 80%); box-shadow: inset 0 2px 1px #dbcaff, 0 3px 3px #35225d33; }
.gift-box__lid::after { content: ''; position: absolute; width: 13px; inset: 0 auto 0 32px; background: #e2ff6c; }
.gift-box__bow { position: absolute; z-index: 3; top: -10px; left: 16px; width: 47px; height: 23px; }
.gift-box__bow::before, .gift-box__bow::after { content: ''; position: absolute; width: 26px; height: 20px; border: 5px solid #d8ef72; border-radius: 70% 70% 15% 70%; transform: rotate(20deg); }
.gift-box__bow::after { right: 0; transform: rotate(70deg); }
.gift-box > b { position: absolute; z-index: 3; right: 9px; bottom: 9px; color: #ebe1ff; font-size: 17px; }
.gift-consult-card__action { position: relative; z-index: 2; font-size: 11px; font-weight: 600; color: #3d3bff; }
.gift-consult-card__action i { font-style: normal; margin-left: 4px; }
.gift-consult-card.is-opening .gift-orbit-marker { animation: giftOrbit 1200ms cubic-bezier(.45,0,.15,1) both; }
.gift-consult-card.is-opening .gift-orbit { animation: giftRing 1200ms ease both; }
.gift-consult-card.is-opening .gift-box__lid, .gift-consult-card.is-opening .gift-box__bow { animation: giftLid 1200ms ease both; }
.gift-consult-card.is-opening .gift-box__body { animation: giftBody 1200ms ease both; }
.gift-consult-card.is-opening::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, #fff, #ffffff00 68%); animation: giftFlash 1200ms ease both; }
.gift-consult-card.is-open { gap: 5px; background: radial-gradient(ellipse at 100% 100%, #e3f6a9, transparent 58%), linear-gradient(130deg, #f6d9c0, #ede2fa 70%); }
.gift-consult-card__discount { position: relative; display: flex; justify-content: center; align-items: center; gap: 26px; width: 100%; margin: 0; line-height: 1; }
.gift-consult-card__discount strong { font-size: 72px; letter-spacing: -.075em; }
.gift-consult-card__discount > span { color: #3d3bff; font-size: 38px; }
.gift-consult-card__note { margin: 0; font-size: 15px; line-height: 1.2; font-weight: 600; }
.gift-consult-card__bonus { padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; background: #e4faad; color: #465723; }
.gift-consult-card__sparks { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.gift-consult-card__sparks i { position: absolute; opacity: 0; font-style: normal; font-size: 22px; color: #3d3bff; left: 9%; top: 40%; --spark-x: -12px; --spark-y: -40px; }
.gift-consult-card__sparks i:nth-child(2) { left: 28%; top: 18%; --spark-x: -22px; --spark-y: -25px; color: #7d9620; }
.gift-consult-card__sparks i:nth-child(3) { left: 82%; top: 27%; --spark-x: 25px; --spark-y: -15px; }
.gift-consult-card__sparks i:nth-child(4) { left: 86%; top: 76%; --spark-x: 16px; --spark-y: 25px; color: #859e20; }
.gift-consult-card__sparks i:nth-child(5) { left: 10%; top: 76%; --spark-x: -20px; --spark-y: 18px; color: #a18aca; }
.gift-consult-card__sparks i:nth-child(6) { left: 62%; top: 12%; --spark-x: 18px; --spark-y: -12px; color: #a18aca; }
.gift-consult-card.is-unveiling .gift-consult-card__discount { animation: giftWinScale 400ms ease both; }
.gift-consult-card.is-unveiling .gift-consult-card__sparks i { animation: giftWinSpark 650ms ease-out both; }
@keyframes giftOrbit { from { transform: rotate(-25deg); } to { transform: rotate(695deg); } }
@keyframes giftRing { 45% { transform: scale(1.1); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
@keyframes giftLid { 0%, 35% { transform: translateY(0); } 75%, 100% { transform: translate(8px, -22px) rotate(9deg); } }
@keyframes giftBody { 0%, 45% { transform: scale(1); } 75%, 100% { transform: scale(1.05); } }
@keyframes giftFlash { 0%, 55% { opacity: 0; } 85% { opacity: .85; } 100% { opacity: 1; } }
@keyframes giftWinScale { from { opacity: .25; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes giftWinSpark { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(1.2); } }
.gift-consult-notes { display: grid; justify-items: center; gap: 6px; width: 100%; }
.gift-consult-availability { margin: 0; color: #ab2041; font-weight: 600; font-size: 11px; line-height: 1.35; text-align: center; }
.gift-consult-availability::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #db315d; }
.gift-consult-terms { max-width: 780px; margin: 0; color: #242424; font-size: 11px; line-height: 1.4; text-align: center; }
.gift-consult-offer { align-self: stretch; padding: 0; border: 0; text-align: left; }
.gift-consult-offer h2 span { white-space: nowrap; color: #3d3bff; }
.gift-consult .gift-consult-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 7px 20px; width: 100%; min-width: 0; margin: 0; padding: 14px 18px; border: 2px solid #b3a1f2; border-radius: 18px; background: #eee8ff; box-shadow: 0 6px 20px #6950a80a; }
.gift-consult .lead-review-form__intro { grid-column: 1 / -1; margin: 0; }
.gift-consult .lead-review-form__intro > span, .gift-consult .lead-review-form__intro p, .gift-consult .lead-review-form__footnote { display: none; }
.gift-consult .lead-review-form__intro h3 { max-width: none; margin: 0; font-size: 16px; line-height: 1.25; letter-spacing: -.015em; }
.gift-consult .lead-demo-note { display: grid; grid-column: 1 / -1; }
.gift-consult .lead-demo-note > span { display: block; }
.gift-consult .lead-review-form__fields { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0; }
.gift-consult .field-block { min-width: 0; margin: 0; padding: 0; gap: 4px; background: none; border: 0; }
.gift-consult .field-block > label { font-size: 11px; margin: 0; }
.gift-consult .field-block input:not([type='checkbox']) { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 16px; border: 1px solid #dcd7e6; border-radius: 10px; background: #fff; color: #171717; }
.gift-consult .gift-saved-contact { margin: 14px 0 0; }
.gift-consult .gift-saved-contact summary { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 12px; color: #333333; cursor: pointer; }
.gift-consult .gift-saved-contact summary::before { content: '›'; padding-right: 7px; font-size: 18px; }
.gift-consult .gift-saved-contact[open] summary::before { content: '⌄'; }
.gift-consult .gift-saved-contact[open] { display: grid; gap: 7px; }
.gift-consult .skb-consent__item { grid-column: 1 / -1; margin: 0; min-height: 30px; align-items: center; gap: 8px; }
.gift-consult .skb-consent__label, .gift-consult .skb-consent__note { font-size: 10px; line-height: 1.4; color: #737373; }
.gift-consult .skb-consent a { color: #737373; }
.gift-consult .skb-consent__note { grid-column: 1 / -1; margin: 0; color: #737373; }
.gift-consult .lead-review-form__actions { grid-column: 1 / -1; margin: 0; }
.gift-consult .lead-review-form__actions .button { width: 100%; min-height: 50px; padding: 12px; font-size: 14px; border-radius: 12px; background: #3d3bff; color: #fff; border: 0; }
.gift-consult .lead-submit-status { grid-column: 1 / -1; }
.gift-consult .lead-submit-status:empty { display: none; }
.gift-consult .field-error { font-size: 12px; }
.gift-consult-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 760px) {
  .shell:has(.gift-consult) .simple-header-inner { min-height: 48px; width: calc(100% - 32px); }
  .shell:has(.gift-consult) .brand img { width: 88px; }
  .result-gift-screen.gift-consult { width: 100%; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); min-height: calc(100svh - 48px); }
  .gift-consult-layout { min-height: calc(100svh - 64px - env(safe-area-inset-bottom)); justify-content: space-between; gap: 7px; }
  .gift-consult-eyebrow { font-size: 9px; padding: 3px 7px; margin-bottom: 5px; }
  .gift-consult h1, .gift-consult-offer h2 { font-size: 25px; line-height: 1.04; }
  .gift-consult-intro > p { margin: 6px 0 0; font-size: 12px; line-height: 1.35; }
  .gift-consult-card { width: 100%; height: 124px; padding: 12px; border-radius: 18px; gap: 5px; }
  button.gift-consult-card { display: grid; grid-template-columns: minmax(0, 1fr) 90px; grid-template-rows: auto 1fr auto; justify-items: start; text-align: left; }
  button.gift-consult-card > :not(.gift-consult-card__visual) { grid-column: 1; }
  .gift-consult-card__title { font-size: 17px; }
  .gift-consult-card__visual { grid-column: 2; grid-row: 1 / 4; width: 90px; height: 90px; transform: scale(.75); }
  .gift-consult-card.is-open { display: grid; grid-template-columns: minmax(100px, .8fr) 1fr; grid-template-rows: auto 1fr 1fr; gap: 4px 10px; }
  .gift-consult-card.is-open .gift-consult-card__eyebrow { grid-column: 1 / -1; justify-self: center; }
  .gift-consult-card.is-open .gift-consult-card__discount { grid-column: 1; grid-row: 2 / 4; }
  .gift-consult-card.is-open .gift-consult-card__discount > span { display: none; }
  .gift-consult-card.is-open .gift-consult-card__note { grid-column: 2; grid-row: 2; align-self: end; }
  .gift-consult-card.is-open .gift-consult-card__bonus { grid-column: 2; grid-row: 3; align-self: start; padding: 3px 6px; font-size: 9px; line-height: 1.2; }
  .gift-consult-card__discount strong { font-size: 52px; }
  .gift-consult-card__discount { gap: 20px; }
  .gift-consult-card__note { font-size: 13px; }
  .gift-consult-availability { font-size: 10px; }
  .gift-consult-terms { font-size: 10px; line-height: 1.4; }
  .gift-consult-offer h2 { text-wrap: balance; }
  .gift-consult .gift-consult-form { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 12px; border-radius: 16px; }
  .gift-consult .lead-review-form__intro h3 { font-size: 16px; }
  .gift-consult .gift-saved-contact { margin: 0; }
  .gift-consult .gift-saved-contact summary { min-height: 32px; font-size: 11px; }
  .gift-consult .skb-consent__item { min-height: 32px; }
  .gift-consult .skb-consent__box { width: 16px; height: 16px; min-width: 16px; min-height: 16px; accent-color: #3d3bff; }
  .gift-consult .skb-consent__label, .gift-consult .skb-consent__note { font-size: 10px; }
  .gift-consult .lead-review-form__actions { min-height: 0; }
  .gift-consult .lead-review-form__actions .button { width: 100%; min-height: 48px; border-radius: 12px; font-size: 13px; box-shadow: none; }
  .gift-consult:has(input:not([type='checkbox']):focus) .lead-review-form__actions .button,
  .gift-consult.gift-keyboard-open .lead-review-form__actions .button { position: static; width: 100%; box-shadow: none; }
  .gift-consult input, .gift-consult .skb-consent__item { scroll-margin-block: 24px 100px; }
}
/* Let taller phones use their available height for readable type and spacing. */
@media (max-width: 760px) and (min-height: 820px) {
  .gift-consult h1, .gift-consult-offer h2 { font-size: clamp(24px, 6.5vw, 28px); line-height: 1.12; }
  .gift-consult-intro > p { font-size: clamp(12px, 1.6svh, 14px); line-height: 1.4; margin-top: 8px; }
  .gift-consult-card { height: clamp(124px, 16svh, 168px); padding: 14px; }
  .gift-consult-card__title { font-size: 19px; }
  .gift-consult-card__visual { transform: scale(.9); }
  .gift-consult-card.is-open { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .gift-consult-card__discount strong { font-size: clamp(52px, 15vw, 64px); }
  .gift-consult-card__note { font-size: 14px; }
  .gift-consult-card.is-open .gift-consult-card__bonus { font-size: 10px; padding: 4px 6px; }
  .gift-consult-availability, .gift-consult-terms { font-size: 11px; }
  .gift-consult .gift-consult-form { gap: clamp(5px, .7svh, 8px); padding: clamp(12px, 1.8svh, 18px); }
  .gift-consult .lead-review-form__intro h3 { font-size: clamp(16px, 4.4vw, 18px); }
  .gift-consult .field-block > label, .gift-consult .gift-saved-contact summary { font-size: 12px; }
  .gift-consult .field-block input:not([type='checkbox']) { min-height: 48px; }
  .gift-consult .gift-saved-contact summary { min-height: 36px; }
  .gift-consult .skb-consent__label, .gift-consult .skb-consent__note { font-size: 11px; }
  .gift-consult .skb-consent__box { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }
  .gift-consult .lead-review-form__actions .button { min-height: 52px; font-size: 14px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .gift-consult-layout { gap: 6px; }
  .gift-consult-eyebrow { display: none; }
  .gift-consult-card { height: 100px; gap: 4px; padding: 8px 10px; }
  .gift-consult-card__title { font-size: 16px; }
  .gift-consult-card__visual { height: 76px; transform: scale(.76); margin-block: -1px; }
  .gift-consult-card__discount strong { font-size: 44px; }
  .gift-consult-card__note { font-size: 12px; }
  .gift-consult h1 { font-size: 22px; }
  /* The course and one-month duration are already stated above the gift. */
  .gift-consult-offer { display: none; }
  .gift-consult .gift-consult-form { gap: 4px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  button.gift-consult-card { transition: none; }
  .gift-consult-card *, .gift-consult-card::after { animation: none !important; }
}

.result-gift-screen {
  position: relative;
  min-height: calc(100vh - 86px);
  padding-top: 34px;
}

.result-gift-screen::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(216, 255, 40, 0.38), transparent 24%),
    radial-gradient(circle at 15% 78%, rgba(247, 200, 255, 0.5), transparent 30%),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat,
    #eceaff;
  content: "";
}

.result-gift-screen__back {
  margin: 0 0 22px;
}

.result-gift-screen__intro {
  max-width: 980px;
  margin: 0 auto 26px;
  text-align: center;
}

.result-gift-screen__intro h1 {
  max-width: 17ch;
  margin-inline: auto;
  font-size: clamp(43px, 6vw, 72px);
  line-height: 0.95;
}

.result-gift-screen__intro p {
  max-width: 660px;
  margin: 18px auto 0;
  font-size: 18px;
  line-height: 1.45;
}

.result-gift-screen__eyebrow {
  margin-bottom: 18px;
  background: #d8ff28;
}

.result-gift-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(230px, 0.75fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  width: min(100%, 1060px);
  min-height: 400px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 42px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(51, 41, 140, 0.24);
  isolation: isolate;
}

.result-gift-stage::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 189, 134, 0.5), transparent 30%),
    radial-gradient(circle at 88% 86%, rgba(216, 255, 40, 0.42), transparent 33%);
  content: "";
}

.result-gift-stage.is-open {
  animation: resultGiftStageOpen 1.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result-gift-skill-card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 22px;
  min-width: 0;
  padding: clamp(25px, 4vw, 38px);
  color: #171717;
  background: rgba(247, 245, 241, 0.95);
  border: 1px solid rgba(23, 23, 23, 0.13);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(36, 28, 103, 0.14);
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.result-gift-skill-card.is-locked::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(227, 222, 216, 0.2));
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.result-gift-skill-card.is-unlocked {
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.9), transparent 25%),
    linear-gradient(135deg, #ffd3b0 0%, #f7c8ff 52%, #d8ff28 115%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 24px 60px rgba(91, 64, 181, 0.24);
  animation: resultGiftSkillUnlock 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result-gift-skill-card__topline {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.result-gift-skill-card__status {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 10px;
  color: rgba(0, 0, 0, 0.64);
  background: rgba(255, 255, 255, 0.66);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.result-gift-skill-card__status i {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: #ffffff;
  background: #565656;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
}

.result-gift-skill-card.is-unlocked .result-gift-skill-card__status i {
  color: #000000;
  background: #d8ff28;
  animation: resultGiftLockRelease 720ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.result-gift-skill-card__core {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.result-gift-skill-card__spark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(61, 59, 255, 0.28);
  font-size: 29px;
  transform: rotate(-7deg);
}

.result-gift-skill-card__core p,
.result-gift-skill-card__core h2,
.result-gift-skill-card__outcome {
  margin: 0;
}

.result-gift-skill-card__core p {
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.58);
  font-size: 12px;
}

.result-gift-skill-card__core h2 {
  font-size: clamp(31px, 4.1vw, 48px);
  line-height: 0.98;
}

.result-gift-skill-card__personal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.result-gift-skill-card__personal span {
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-size: 12px;
}

.result-gift-skill-card__personal span:first-child {
  color: #ffffff;
  background: #171717;
}

.result-gift-skill-card.is-unlocked .result-gift-skill-card__personal span:not(:first-child) {
  animation: resultGiftTaskConnect 720ms 340ms ease-out both;
}

.result-gift-skill-card.is-locked .result-gift-skill-card__personal,
.result-gift-skill-card.is-locked .result-gift-skill-card__outcome {
  opacity: 0.6;
}

.result-gift-skill-card__outcome {
  display: grid;
  gap: 5px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.result-gift-skill-card__outcome span {
  color: rgba(0, 0, 0, 0.58);
  font-size: 11px;
}

.result-gift-skill-card__outcome strong {
  font-size: 15px;
  line-height: 1.4;
}

.result-gift-stage__action {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 20px;
  min-width: 0;
  align-content: center;
}

.result-gift-package {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 28px 20px;
  text-align: center;
}

.result-gift-package__icon {
  display: grid;
  width: 104px;
  height: 104px;
  margin-bottom: 17px;
  place-items: center;
  background: #ffc08b;
  border: 8px solid rgba(255, 255, 255, 0.78);
  border-radius: 32px;
  box-shadow: 0 22px 44px rgba(89, 51, 135, 0.22);
  font-size: 52px;
  transform: rotate(5deg);
}

.result-gift-package > span:not(.result-gift-package__icon),
.result-gift-package strong {
  display: block;
}

.result-gift-package > span:not(.result-gift-package__icon) {
  font-size: 13px;
  font-weight: 600;
}

.result-gift-package strong {
  max-width: 220px;
  margin-top: 7px;
  font-size: 22px;
  line-height: 1.08;
}

.result-gift-package.is-open .result-gift-package__icon {
  background: #d8ff28;
  animation: resultGiftPackageOpen 1.1s 100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.button.result-gift-stage__open {
  justify-self: center;
  min-width: min(100%, 360px);
  min-height: 66px;
  padding-inline: 34px;
  color: #ffffff;
  background: #3d3bff;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(61, 59, 255, 0.3);
  font-size: 20px;
}

.button.result-gift-stage__open:hover {
  background: #2927e8;
}

.button.result-gift-stage__open:focus-visible {
  outline: 3px solid #171717;
  outline-offset: 4px;
}

.result-gift-stage.is-closed .button.result-gift-stage__open {
  position: fixed;
  z-index: 40;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
}

.result-gift-stage.is-closed .button.result-gift-stage__open:hover {
  transform: translate(-50%, -2px);
}

.result-gift-stage__connections,
.result-gift-stage__particles {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.result-gift-stage__connections i {
  position: absolute;
  top: 50%;
  left: 51%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, #3d3bff, #d8ff28);
  border-radius: 999px;
  opacity: 0.16;
  transform: scaleX(0.2);
  transform-origin: left center;
}

.result-gift-stage__connections i:nth-child(1) { transform: rotate(-24deg) scaleX(0.2); }
.result-gift-stage__connections i:nth-child(3) { transform: rotate(24deg) scaleX(0.2); }

.result-gift-stage.is-open .result-gift-stage__connections i {
  animation: resultGiftConnection 760ms 300ms ease-out both;
}

.result-gift-stage.is-open .result-gift-stage__connections i:nth-child(1) { --connection-angle: -24deg; }
.result-gift-stage.is-open .result-gift-stage__connections i:nth-child(2) { --connection-angle: 0deg; }
.result-gift-stage.is-open .result-gift-stage__connections i:nth-child(3) { --connection-angle: 24deg; }

.result-gift-stage__particles i {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #3d3bff;
  border-radius: 3px;
  opacity: 0;
}

.result-gift-stage__particles i:nth-child(1) { top: 14%; left: 10%; background: #ffac6a; }
.result-gift-stage__particles i:nth-child(2) { top: 16%; right: 12%; background: #d8ff28; }
.result-gift-stage__particles i:nth-child(3) { bottom: 12%; left: 44%; background: #f7a9ed; }
.result-gift-stage__particles i:nth-child(4) { top: 48%; right: 5%; background: #3d3bff; }
.result-gift-stage__particles i:nth-child(5) { bottom: 18%; left: 6%; background: #d8ff28; }

.result-gift-stage.is-open .result-gift-stage__particles i {
  animation: resultGiftParticle 900ms 180ms ease-out both;
}

.result-gift-screen__safety {
  max-width: 900px;
  margin: 16px auto 0;
  color: rgba(0, 0, 0, 0.58);
  font-size: 12px;
  text-align: center;
}

.result-gift-opened {
  width: min(100%, 1060px);
  margin: 28px auto 0;
  padding: clamp(28px, 5vw, 52px);
  background: #161616;
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(24, 20, 74, 0.2);
  animation: resultGiftOfferReveal 620ms 680ms ease-out both;
}

.result-gift-opened__heading {
  display: grid;
  gap: 12px;
  max-width: 780px;
  margin-bottom: 26px;
  color: #ffffff;
}

.result-gift-opened__heading > span {
  width: max-content;
  padding: 7px 11px;
  color: #000000;
  background: #d8ff28;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-gift-opened__heading h2 {
  color: #ffffff;
  font-size: clamp(37px, 5vw, 58px);
  line-height: 0.98;
}

.result-gift-opened__heading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.48;
}

.result-gift-opened__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.result-gift-opened__benefits article {
  min-height: 120px;
  padding: 19px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}

.result-gift-opened__benefits strong,
.result-gift-opened__benefits span {
  display: block;
}

.result-gift-opened__benefits strong {
  color: #d8ff28;
  font-size: 20px;
  line-height: 1.08;
}

.result-gift-opened__benefits span {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.result-gift-opened__form {
  margin-top: 20px;
}

.result-gift-opened .lead-review-form {
  width: min(100%, 820px);
  min-width: 0;
  margin: 0 auto;
  padding: 26px;
  background: #ffffff;
  border-radius: 20px;
}

.result-gift-opened .lead-review-form__intro > span {
  color: #000000;
  background: #d8ff28;
}

.result-gift-opened .lead-review-form__intro h3 {
  max-width: 25ch;
  font-size: clamp(27px, 3.2vw, 40px);
  line-height: 1;
}

.result-gift-opened .lead-review-form__fields .field-block {
  padding: 10px 12px;
  background: #f3f3f3;
  border-radius: 14px;
}

.result-gift-opened .lead-review-form__actions .button {
  min-height: 58px;
  font-size: 17px;
}

.result-gift-opened--under18 {
  color: #000000;
  background: #ffffff;
}

.result-gift-opened--under18 .result-gift-opened__heading,
.result-gift-opened--under18 .result-gift-opened__heading h2 {
  color: #000000;
}

.result-gift-opened--under18 .result-gift-opened__heading p {
  color: rgba(0, 0, 0, 0.64);
}

.result-gift-opened--under18 .result-under18-next {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.result-done {
  display: grid;
  gap: 0;
}

.result-done__hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 220px;
  gap: 28px;
  align-items: center;
  min-height: 370px;
  padding: clamp(34px, 6vw, 64px);
  overflow: hidden;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 30px;
}

.result-done__check {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  color: #000000;
  background: var(--result-accent);
  border-radius: 22px;
  font-size: 34px;
  font-weight: 700;
  transform: rotate(-7deg);
}

.result-done__hero > div:nth-child(2) > span {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.result-done__hero h1 {
  max-width: 15ch;
  margin-top: 10px;
  color: #ffffff;
  font-size: clamp(42px, 5vw, 66px);
  line-height: 0.98;
}

.result-done__hero p {
  max-width: 650px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
}

.result-role-visual--done {
  width: 220px;
  height: 200px;
}

.result-role-visual--done .result-role-visual__label { font-size: 14px; }
.result-role-visual--done .result-role-visual__tags span { padding: 5px 7px; font-size: 8px; }

.result-done__next ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.result-done__next li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  min-height: 145px;
  padding: 20px;
  background: #ffffff;
  border-radius: 18px;
}

.result-done__next li > b {
  color: #3d3bff;
  font-size: 12px;
}

.result-done__next li div,
.result-done__next li strong,
.result-done__next li span {
  display: block;
}

.result-done__next li span {
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.62);
  font-size: 14px;
  line-height: 1.42;
}

.result-done__role {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 6vw, 70px);
  color: #ffffff;
  background: #151515;
}

.result-done__role h2 {
  margin-top: 16px;
  color: #ffffff;
}

.result-done__role > div:first-child > p {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.5;
}

.result-done__skills {
  display: grid;
  gap: 10px;
}

.result-done__skills article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 13px;
  padding: 17px;
  color: #000000;
  background: #ffffff;
  border-radius: 16px;
}

.result-done__skills article > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  background: var(--result-accent);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.result-done__skills p {
  margin: 5px 0 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
}

.result-done__program-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.result-done__program-grid article {
  min-height: 160px;
  padding: 21px;
  background: #ffffff;
  border-radius: 18px;
}

.result-done__program-grid strong {
  display: block;
  color: #3d3bff;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.04em;
}

.result-done__program-grid p {
  margin: 30px 0 0;
  color: rgba(0, 0, 0, 0.62);
  font-size: 13px;
}

.result-done__faq details {
  padding: 19px 0;
  border-top: 1px solid #d3d3d3;
}

.result-done__faq details:last-child {
  border-bottom: 1px solid #d3d3d3;
}

.result-done__faq summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
}

.result-done__faq details p {
  max-width: 780px;
  margin: 13px 0 0;
  color: rgba(0, 0, 0, 0.66);
}

.result-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 34px 0 0;
}

@keyframes resultGiftStageOpen {
  0% { filter: brightness(0.96); transform: scale(0.985); }
  45% { filter: brightness(1.08); transform: scale(1.008); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes resultGiftSkillUnlock {
  0% { filter: grayscale(0.75); transform: translateY(8px) scale(0.98); }
  45% { filter: grayscale(0); transform: translateY(-3px) scale(1.015); }
  100% { filter: grayscale(0); transform: translateY(0) scale(1); }
}

@keyframes resultGiftLockRelease {
  0% { opacity: 0; transform: scale(0.45) rotate(-30deg); }
  70% { opacity: 1; transform: scale(1.14) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes resultGiftPackageOpen {
  0% { filter: saturate(0.7); transform: translateY(10px) rotate(5deg) scale(0.9); }
  55% { filter: saturate(1.1); transform: translateY(-9px) rotate(-5deg) scale(1.08); }
  100% { filter: saturate(1); transform: translateY(0) rotate(2deg) scale(1); }
}

@keyframes resultGiftConnection {
  0% { opacity: 0.12; transform: rotate(var(--connection-angle)) scaleX(0.12); }
  100% { opacity: 0.62; transform: rotate(var(--connection-angle)) scaleX(1); }
}

@keyframes resultGiftTaskConnect {
  0% { background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 rgba(61, 59, 255, 0); transform: translateX(-8px); }
  100% { background: rgba(255, 255, 255, 0.86); box-shadow: 0 7px 20px rgba(61, 59, 255, 0.14); transform: translateX(0); }
}

@keyframes resultGiftParticle {
  0% { opacity: 0; transform: translateY(14px) scale(0.4) rotate(0); }
  45% { opacity: 0.95; }
  100% { opacity: 0.58; transform: translateY(-20px) scale(1) rotate(42deg); }
}

@keyframes resultGiftOfferReveal {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .result-future__hero {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    min-height: 560px;
  }

  .result-role-visual--future {
    width: 280px;
    height: 270px;
  }

  .result-future__proof-grid {
    grid-template-columns: 1fr 1fr;
  }

  .result-future__metric--accent {
    grid-row: span 2;
  }

  .result-future__market {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .result-gift-opened__form,
  .result-done__role {
    grid-template-columns: 1fr;
  }

  .result-done__program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .result-future,
  .result-gift-screen,
  .result-done {
    padding: 14px 14px 92px;
  }

  .result-future__hero {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 25px 20px 22px;
    border-radius: 22px;
  }

  .result-future__hero h1 {
    max-width: 15ch;
    font-size: clamp(38px, 11.4vw, 52px);
  }

  .result-future__hero-copy > p {
    margin-top: 18px;
    font-size: 15px;
  }

  .result-future__eyebrow {
    margin-bottom: 18px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .result-future__hero-visual {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 10px;
    justify-items: stretch;
    margin-top: 16px;
  }

  .result-role-visual--future {
    width: 128px;
    height: 124px;
  }

  .result-role-visual--future .result-role-visual__board {
    padding: 10px;
    border-radius: 15px;
  }

  .result-role-visual--future .result-role-visual__label { font-size: 9px; }
  .result-role-visual--future .result-role-visual__signal { min-height: 34px; gap: 4px; }
  .result-role-visual--future .result-role-visual__tags { gap: 3px; }
  .result-role-visual--future .result-role-visual__tags span { padding: 3px 4px; font-size: 6px; }
  .result-role-visual--future .result-role-visual__spark { width: 30px; height: 30px; font-size: 14px; }

  .result-future__signal {
    align-self: center;
    width: 100%;
    padding: 14px;
    border-radius: 15px;
  }

  .result-future__signal strong {
    font-size: 28px;
  }

  .result-future__signal p {
    font-size: 10px;
  }

  .result-future__action {
    height: 58px;
    margin-top: 24px;
  }

  .result-future__gift-cta {
    position: fixed;
    z-index: 25;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    min-height: 58px;
    box-shadow: 0 14px 34px rgba(28, 25, 74, 0.3);
  }

  .result-future__proof,
  .result-future__day,
  .result-future__market,
  .result-done__next,
  .result-done__role,
  .result-done__program,
  .result-done__faq {
    margin-top: 12px;
    padding: 25px 20px;
    border-radius: 22px;
  }

  .result-future__section-heading {
    gap: 9px;
    margin-bottom: 20px;
  }

  .result-future__section-heading h2,
  .result-future__market h2,
  .result-done__role h2 {
    font-size: clamp(31px, 9vw, 40px);
  }

  .result-future__proof-grid,
  .result-future__day-flow,
  .result-future__market,
  .result-gift-screen__intro,
  .result-done__hero,
  .result-done__next ol {
    grid-template-columns: 1fr;
  }

  .result-future__metric,
  .result-future__metric--accent {
    grid-row: auto;
    min-height: 150px;
    padding: 19px;
  }

  .result-future__metric strong {
    margin: 14px 0;
  }

  .result-future__day-flow {
    gap: 9px;
  }

  .result-future__day-flow article {
    min-height: 142px;
    padding: 18px;
  }

  .result-future__day-flow article p {
    margin-top: 24px;
    font-size: 20px;
  }

  .result-future__day-arrow {
    width: auto;
    height: 35px;
    transform: rotate(90deg);
  }

  .result-future__role-use {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 19px;
  }

  .result-future__role-use ul {
    justify-content: flex-start;
  }

  .result-future__market-number {
    font-size: 92px;
  }

  .result-future__market p {
    font-size: 15px;
  }

  .result-gift-screen {
    min-height: calc(100vh - 70px);
    padding-top: 14px;
  }

  .result-gift-screen__back {
    margin-bottom: 16px;
  }

  .result-gift-screen__intro {
    margin-bottom: 14px;
  }

  .result-gift-screen__intro h1 {
    font-size: clamp(38px, 11vw, 50px);
  }

  .result-gift-screen__intro p {
    margin-top: 13px;
    font-size: 14px;
  }

  .result-gift-screen__eyebrow {
    font-size: 10px;
  }

  .result-gift-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    min-height: 0;
    padding: 16px;
    border-radius: 22px;
  }

  .result-gift-skill-card {
    gap: 17px;
    padding: 20px;
    border-radius: 18px;
  }

  .result-gift-skill-card__topline {
    font-size: 10px;
  }

  .result-gift-skill-card__core {
    gap: 13px;
  }

  .result-gift-skill-card__spark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 23px;
  }

  .result-gift-skill-card__core h2 {
    font-size: clamp(28px, 8.5vw, 35px);
  }

  .result-gift-skill-card__personal span {
    padding: 7px 9px;
    font-size: 10px;
  }

  .result-gift-skill-card__outcome {
    padding-top: 14px;
  }

  .result-gift-skill-card__outcome strong {
    font-size: 13px;
  }

  .result-gift-package {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    padding: 6px 8px;
    text-align: left;
  }

  .result-gift-stage__action {
    order: -1;
  }

  .result-gift-package__icon {
    grid-row: 1 / span 2;
    width: 72px;
    height: 72px;
    margin: 0 14px 0 0;
    border-width: 5px;
    border-radius: 23px;
    font-size: 36px;
  }

  .result-gift-package strong {
    margin-top: 3px;
    font-size: 18px;
  }

  .button.result-gift-stage__open {
    width: 100%;
    min-height: 60px;
    font-size: 18px;
  }

  .result-gift-stage.is-closed .button.result-gift-stage__open {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    width: auto;
    min-width: 0;
    transform: none;
  }

  .result-gift-stage.is-closed .button.result-gift-stage__open:hover {
    transform: translateY(-2px);
  }

  .result-gift-stage__connections i {
    top: 57%;
    left: 50%;
    width: 110px;
  }

  .result-gift-stage.is-open .result-gift-stage__connections i:nth-child(1) { --connection-angle: 78deg; left: 38%; }
  .result-gift-stage.is-open .result-gift-stage__connections i:nth-child(2) { --connection-angle: 90deg; }
  .result-gift-stage.is-open .result-gift-stage__connections i:nth-child(3) { --connection-angle: 102deg; left: 62%; }

  .result-gift-stage__particles i:nth-child(3) {
    bottom: 5%;
  }

  .result-gift-opened {
    margin-top: 14px;
    padding: 25px 18px;
    border-radius: 22px;
  }

  .result-gift-opened__heading h2 {
    font-size: 36px;
  }

  .result-gift-opened__benefits {
    grid-template-columns: 1fr;
  }

  .result-gift-opened__benefits article {
    min-height: 82px;
  }

  .result-gift-opened__benefits span {
    margin-top: 5px;
  }

  .result-gift-opened .lead-review-form {
    padding: 21px 16px;
  }

  .result-gift-opened .lead-review-form__intro h3 {
    font-size: 31px;
  }

  .result-done__hero {
    gap: 18px;
    min-height: 0;
    padding: 27px 20px;
    border-radius: 22px;
  }

  .result-done__check {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 25px;
  }

  .result-done__hero h1 {
    font-size: 40px;
  }

  .result-role-visual--done {
    position: absolute;
    top: 20px;
    right: 14px;
    width: 100px;
    height: 96px;
    opacity: 0.86;
  }

  .result-role-visual--done .result-role-visual__board { padding: 8px; border-radius: 13px; }
  .result-role-visual--done .result-role-visual__label { font-size: 7px; }
  .result-role-visual--done .result-role-visual__tags span { padding: 2px 3px; font-size: 5px; }
  .result-role-visual--done .result-role-visual__spark { width: 24px; height: 24px; font-size: 11px; }

  .result-done__hero > div:nth-child(2) {
    padding-right: 52px;
  }

  .result-done__next li {
    min-height: 0;
  }

  .result-done__program-grid {
    grid-template-columns: 1fr 1fr;
  }

  .result-done__program-grid article {
    min-height: 135px;
    padding: 16px;
  }

  .result-done__program-grid p {
    margin-top: 18px;
  }

  .result-done__actions {
    display: grid;
  }
}

@media (max-width: 390px), (max-height: 720px) and (max-width: 760px) {
  .result-future__hero {
    padding-top: 20px;
  }

  .result-future__hero h1 {
    font-size: 36px;
  }

  .result-future__hero-copy > p {
    font-size: 14px;
  }

  .result-future__hero-visual {
    margin-top: 9px;
  }

  .result-gift-screen__intro h1 {
    font-size: 36px;
  }

  .result-gift-screen__intro p {
    font-size: 13px;
  }

  .result-gift-stage {
    padding: 12px;
  }

  .result-gift-skill-card {
    gap: 14px;
    padding: 17px;
  }

  .result-gift-skill-card__status {
    padding: 5px 7px;
  }

  .result-gift-skill-card__outcome strong {
    line-height: 1.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .result-gift-stage.is-open,
  .result-gift-skill-card.is-unlocked,
  .result-gift-skill-card.is-unlocked .result-gift-skill-card__status i,
  .result-gift-package.is-open .result-gift-package__icon,
  .result-gift-skill-card.is-unlocked .result-gift-skill-card__personal span:not(:first-child),
  .result-gift-stage.is-open .result-gift-stage__connections i,
  .result-gift-stage.is-open .result-gift-stage__particles i,
  .result-gift-opened {
    animation: none;
  }
}

/* Result research pass: task evidence -> role application -> personal takeaway */
.result-research {
  --research-accent: var(--result-accent, #d8ff28);
}

.result-research__hero,
.result-research__basis,
.result-research__role,
.result-research__pain {
  border-radius: 28px;
}

.result-research__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
  gap: clamp(28px, 5vw, 70px);
  min-height: 570px;
  padding: clamp(36px, 6vw, 70px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--research-accent) 38%, transparent), transparent 27%),
    linear-gradient(135deg, #0d0d0d 0%, #1b1b1b 62%, #2a2a2a 100%);
  box-shadow: 0 28px 80px rgba(17, 14, 69, 0.17);
}

.result-research__hero::before {
  position: absolute;
  right: -130px;
  bottom: -190px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 46px rgba(255, 255, 255, 0.025), 0 0 0 94px rgba(255, 255, 255, 0.018);
  content: "";
}

.result-research__hero-copy,
.result-research__artifact {
  position: relative;
  z-index: 1;
}

.result-research__hero-copy {
  display: grid;
  align-content: center;
  justify-items: start;
}

.result-research__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 7px 11px;
  color: #000000;
  background: var(--research-accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-research__status span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #ffffff;
  background: #000000;
  border-radius: 50%;
  font-size: 10px;
}

.result-research__hero h1 {
  display: grid;
  gap: 10px;
  max-width: 850px;
  color: #ffffff;
  line-height: 1;
}

.result-research__hero h1 > span {
  max-width: 25ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(25px, 3vw, 39px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.result-research__hero h1 > strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 16px;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 600;
  line-height: 0.9;
}

.result-research__hero h1 b {
  color: var(--research-accent);
  font-size: clamp(92px, 12vw, 158px);
  font-weight: 700;
  letter-spacing: -0.085em;
}

.result-research--fallback .result-research__hero h1 b {
  font-size: clamp(102px, 13vw, 170px);
}

.result-research__hero-copy > p {
  max-width: 720px;
  margin: 27px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.5;
}

.result-research__artifact {
  display: grid;
  place-items: center;
}

.result-research__artifact::before {
  position: absolute;
  width: min(100%, 320px);
  aspect-ratio: 1;
  background: url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat;
  border-radius: 50%;
  content: "";
  filter: saturate(1.12);
}

.result-research__artifact-card {
  position: relative;
  display: grid;
  align-content: space-between;
  width: min(100%, 300px);
  min-height: 300px;
  padding: 25px;
  color: #000000;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 27px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.34);
  transform: rotate(4deg);
}

.result-research__artifact-card > span,
.result-research__artifact-card > small {
  font-size: 11px;
  font-weight: 600;
}

.result-research__artifact-card > strong {
  color: #3d3bff;
  font-size: clamp(46px, 5vw, 70px);
  line-height: 1;
  letter-spacing: -0.065em;
}

.result-research__artifact-card > div {
  display: grid;
  gap: 8px;
}

.result-research__artifact-card i {
  display: block;
  height: 9px;
  background: #3d3bff;
  border-radius: 999px;
}

.result-research__artifact-card i:nth-child(2) { width: 82%; }
.result-research__artifact-card i:nth-child(3) { width: 62%; background: var(--research-accent); }

.result-research__basis,
.result-research__role,
.result-research__pain {
  margin-top: 18px;
  padding: clamp(28px, 5vw, 52px);
}

.result-research__basis {
  background: #f2f2f2;
}

.result-research__section-heading {
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  margin-bottom: 26px;
}

.result-research__section-heading > span,
.result-research__role-heading > div > span {
  width: max-content;
  padding: 7px 11px;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-research__section-heading h2,
.result-research__role h2 {
  max-width: 18ch;
  font-size: clamp(34px, 4.3vw, 54px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.result-research__basis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.result-research__basis-grid article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: start;
  gap: 11px 10px;
  min-height: 190px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 18px;
}

.result-research__basis-grid b {
  grid-row: 1 / span 2;
  color: #3d3bff;
  font-size: 12px;
}

.result-research__basis-grid span {
  font-size: 13px;
  font-weight: 700;
}

.result-research__basis-grid p {
  margin: 0;
  color: rgba(0, 0, 0, 0.64);
  font-size: 14px;
  line-height: 1.46;
}

.result-research__source {
  margin-top: 12px;
  padding: 15px 18px;
  background: #ffffff;
  border-radius: 15px;
}

.result-research__source summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.result-research__source p {
  max-width: 820px;
  margin: 13px 0 8px;
  color: rgba(0, 0, 0, 0.64);
  font-size: 13px;
  line-height: 1.45;
}

.result-research__source a,
.result-research__source > span {
  color: #3d3bff;
  font-size: 12px;
  font-weight: 600;
}

.result-research__role {
  color: #ffffff;
  background:
    linear-gradient(110deg, rgba(20, 20, 20, 0.97), rgba(20, 20, 20, 0.82)),
    url("./assets/style-pack/assets/gradients/06_Gradient.webp") center / cover no-repeat,
    #171717;
}

.result-research__role-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 34px;
  align-items: center;
  margin-bottom: 28px;
}

.result-research__role-heading > div {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.result-research__role h2 {
  max-width: 20ch;
  color: #ffffff;
}

.result-research__role-heading p {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.5;
}

.result-role-visual--research {
  width: 210px;
  height: 185px;
}

.result-role-visual--research .result-role-visual__board { padding: 18px; }
.result-role-visual--research .result-role-visual__label { font-size: 14px; }
.result-role-visual--research .result-role-visual__tags span { padding: 5px 7px; font-size: 8px; }

.result-research__scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.result-research__scenarios article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: start;
  gap: 11px 9px;
  min-height: 210px;
  padding: 19px;
  color: #000000;
  background: #ffffff;
  border-radius: 18px;
}

.result-research__scenarios article > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 50%;
  font-size: 10px;
}

.result-research__scenarios h3 {
  align-self: center;
  margin: 0;
  font-size: 17px;
  line-height: 1.18;
}

.result-research__scenarios p {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 5px 0 0;
  color: rgba(0, 0, 0, 0.68);
  font-size: 14px;
  line-height: 1.4;
}

.result-research__scenarios p span {
  color: #000000;
  font-weight: 600;
}

.result-research__scenarios p i {
  color: #3d3bff;
  font-size: 18px;
  font-style: normal;
  line-height: 1;
}

.result-research__pain {
  display: grid;
  grid-template-columns: minmax(160px, 0.3fr) minmax(0, 0.7fr);
  gap: clamp(22px, 5vw, 62px);
  align-items: center;
  color: #000000;
  background: var(--research-accent);
}

.result-research__pain > span {
  width: max-content;
  padding: 7px 11px;
  background: #ffffff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.result-research__pain strong {
  display: block;
  max-width: 22ch;
  font-size: clamp(26px, 3.7vw, 45px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.result-research__pain p {
  margin: 14px 0 0;
  font-size: 14px;
}

.result-research__action {
  display: flex;
  justify-content: center;
  padding: 30px 0 0;
}

.button.result-research__gift-cta {
  min-width: 280px;
  min-height: 62px;
  color: #000000;
  background: var(--research-accent);
  border: 0;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--research-accent) 26%, transparent);
  font-size: 18px;
}

.button.result-research__gift-cta:hover {
  color: #ffffff;
  background: #3d3bff;
  transform: translateY(-2px);
}

.result-research__gift-cta span {
  margin-left: auto;
  font-size: 24px;
}

@media (max-width: 900px) {
  .result-research__hero {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 26px;
  }

  .result-research__artifact-card {
    min-height: 250px;
    padding: 21px;
  }

  .result-research__section-heading {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 760px) {
  .result-research {
    padding-bottom: 92px;
  }

  .result-research__hero,
  .result-research__basis,
  .result-research__role,
  .result-research__pain {
    border-radius: 22px;
  }

  .result-research__hero {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 25px 20px 22px;
  }

  .result-research__status {
    margin-bottom: 18px;
    font-size: 10px;
  }

  .result-research__hero h1 {
    gap: 7px;
  }

  .result-research__hero h1 > span {
    font-size: clamp(22px, 6.8vw, 28px);
  }

  .result-research__hero h1 > strong {
    display: grid;
    gap: 1px;
    font-size: clamp(31px, 9vw, 39px);
  }

  .result-research__hero h1 b,
  .result-research--fallback .result-research__hero h1 b {
    font-size: clamp(76px, 24vw, 104px);
  }

  .result-research__hero-copy > p {
    margin-top: 18px;
    font-size: 14px;
  }

  .result-research__artifact {
    position: absolute;
    right: 12px;
    bottom: 14px;
  }

  .result-research__artifact::before {
    width: 118px;
  }

  .result-research__artifact-card {
    width: 112px;
    min-height: 112px;
    padding: 10px;
    border-radius: 14px;
    opacity: 0.93;
  }

  .result-research__artifact-card > span,
  .result-research__artifact-card > small { font-size: 5px; }
  .result-research__artifact-card > strong { font-size: 27px; }
  .result-research__artifact-card i { height: 4px; }

  .result-research__basis,
  .result-research__role,
  .result-research__pain {
    margin-top: 12px;
    padding: 25px 20px;
  }

  .result-research__section-heading {
    gap: 11px;
    margin-bottom: 19px;
  }

  .result-research__section-heading h2,
  .result-research__role h2 {
    font-size: clamp(30px, 8.7vw, 38px);
  }

  .result-research__basis-grid,
  .result-research__scenarios {
    grid-template-columns: 1fr;
  }

  .result-research__basis-grid article,
  .result-research__scenarios article {
    min-height: 0;
    padding: 17px;
  }

  .result-research__role-heading {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 10px;
    align-items: start;
    margin-bottom: 20px;
  }

  .result-research__role-heading p {
    grid-column: 1 / -1;
    font-size: 14px;
  }

  .result-role-visual--research {
    width: 92px;
    height: 92px;
  }

  .result-role-visual--research .result-role-visual__board { padding: 7px; border-radius: 12px; }
  .result-role-visual--research .result-role-visual__label { font-size: 7px; }
  .result-role-visual--research .result-role-visual__tags span { padding: 2px 3px; font-size: 5px; }
  .result-role-visual--research .result-role-visual__spark { width: 23px; height: 23px; font-size: 11px; }

  .result-research__pain {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .result-research__pain strong {
    font-size: 29px;
  }

  .result-research__action {
    height: 58px;
    padding: 0;
  }

  .button.result-research__gift-cta {
    position: fixed;
    z-index: 25;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    min-height: 58px;
    box-shadow: 0 14px 34px rgba(28, 25, 74, 0.3);
  }
}

@media (max-width: 390px), (max-height: 720px) and (max-width: 760px) {
  .result-research__hero {
    padding-top: 20px;
  }

  .result-research__hero h1 b,
  .result-research--fallback .result-research__hero h1 b {
    font-size: 74px;
  }

  .result-research__hero h1 > strong {
    font-size: 30px;
  }
}

/* Result composition: personal work change first, research as supporting proof */
.result-research__hero {
  display: block;
  min-height: 0;
  padding: clamp(34px, 5vw, 60px);
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--research-accent) 34%, transparent), transparent 24%),
    radial-gradient(circle at 8% 95%, rgba(61, 59, 255, 0.28), transparent 30%),
    linear-gradient(135deg, #0c0c0d 0%, #18181b 58%, #252527 100%);
}

.result-research__intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}

.result-research__hero-copy {
  display: block;
}

.result-research__status {
  margin-bottom: 25px;
}

.result-research__address,
.result-research__hero-copy > p.result-research__address {
  max-width: 50ch;
  margin: 0 0 13px;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.4;
}

.result-research__hero h1 {
  display: block;
  max-width: 900px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(45px, 5.9vw, 74px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.result-research__explanation,
.result-research__hero-copy > p.result-research__explanation {
  max-width: 760px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.5;
}

.result-research__artifact {
  position: relative;
  display: grid;
  width: 230px;
  min-height: 210px;
  place-items: center;
}

.result-research__artifact::before {
  width: 220px;
}

.result-role-visual--research {
  width: 205px;
  height: 178px;
}

.result-research__proof {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: 16px 28px;
  align-items: center;
  margin-top: 34px;
  padding: 22px 24px;
  color: #111111;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
}

.result-research__proof-main {
  display: grid;
  grid-template-columns: minmax(210px, 0.58fr) minmax(0, 1fr);
  gap: 6px 24px;
  align-items: end;
}

.result-research__proof-main > span {
  grid-column: 1 / -1;
  color: #3d3bff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-research__proof-main strong {
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.result-research__proof-main p {
  margin: 0;
  color: rgba(0, 0, 0, 0.67);
  font-size: 14px;
  line-height: 1.45;
}

.result-research__proof-note {
  padding: 13px 15px;
  color: rgba(0, 0, 0, 0.72);
  background: color-mix(in srgb, var(--research-accent) 55%, #ffffff);
  border-radius: 13px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.result-research__source {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 0 0;
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

.result-research__source summary {
  width: max-content;
  color: #111111;
}

.result-research__source > div {
  max-width: 880px;
  padding-top: 8px;
}

.result-research__source p {
  margin: 7px 0;
}

.result-research__application {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.result-research__application-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.result-research__application-heading span {
  padding: 7px 11px;
  color: #ffffff;
  background: #3d3bff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
}

.result-research__application-heading strong {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  font-weight: 500;
}

.result-research__scenarios {
  gap: 9px;
}

.result-research__scenarios article {
  min-height: 178px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.result-research__scenarios h2 {
  align-self: center;
  margin: 0;
  color: #111111;
  font-size: 16px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.result-research__pain {
  position: relative;
  z-index: 1;
  display: flex;
  grid-template-columns: none;
  gap: 12px;
  align-items: center;
  margin: 15px 0 0;
  padding: 13px 16px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 560;
  line-height: 1.4;
}

.result-research__pain > span {
  flex: 0 0 auto;
  width: max-content;
  padding: 6px 9px;
  color: #000000;
  background: var(--research-accent);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.result-research__action {
  position: relative;
  z-index: 1;
  justify-content: flex-start;
  padding-top: 22px;
}

@media (max-width: 900px) {
  .result-research__intro {
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 24px;
  }

  .result-research__artifact {
    width: 170px;
    min-height: 165px;
  }

  .result-research__artifact::before {
    width: 165px;
  }

  .result-role-visual--research {
    width: 155px;
    height: 145px;
  }

  .result-research__proof-main {
    grid-template-columns: 1fr;
  }

  .result-research__proof-main > span {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .result-research__hero {
    display: block;
    padding: 23px 18px 22px;
  }

  .result-research__intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .result-research__status {
    margin-bottom: 20px;
  }

  .result-research__address,
  .result-research__hero-copy > p.result-research__address {
    max-width: 32ch;
    margin-bottom: 11px;
    font-size: 14px;
  }

  .result-research__hero h1 {
    font-size: clamp(36px, 11vw, 46px);
    line-height: 0.99;
  }

  .result-research__explanation,
  .result-research__hero-copy > p.result-research__explanation {
    margin-top: 17px;
    font-size: 14px;
  }

  .result-research__artifact {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: end;
    width: 108px;
    min-height: 82px;
    margin-top: -13px;
  }

  .result-research__artifact::before {
    width: 92px;
  }

  .result-role-visual--research {
    width: 98px;
    height: 88px;
  }

  .result-research__proof {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 20px;
    padding: 17px;
    border-radius: 17px;
  }

  .result-research__proof-main {
    gap: 8px;
  }

  .result-research__proof-main strong {
    font-size: 28px;
  }

  .result-research__proof-main p {
    font-size: 13px;
  }

  .result-research__proof-note {
    padding: 11px 12px;
    font-size: 11px;
  }

  .result-research__source {
    padding-top: 11px;
  }

  .result-research__source summary {
    width: auto;
    font-size: 12px;
  }

  .result-research__application {
    margin-top: 24px;
    padding-top: 22px;
  }

  .result-research__application-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .result-research__application-heading strong {
    display: none;
  }

  .result-research__scenarios {
    grid-template-columns: 1fr;
  }

  .result-research__scenarios article {
    min-height: 0;
    padding: 15px;
  }

  .result-research__scenarios h2 {
    font-size: 15px;
  }

  .result-research__pain {
    display: grid;
    gap: 9px;
    margin-top: 12px;
    padding: 13px;
    font-size: 13px;
  }

  .result-research__pain > span {
    justify-self: start;
  }

  .result-research__action {
    height: 58px;
    padding: 0;
  }
}

@media (max-width: 390px), (max-height: 720px) and (max-width: 760px) {
  .result-research__hero {
    padding-top: 20px;
  }

  .result-research__hero h1 {
    font-size: 35px;
  }
}

/* Manager result story prototype: exact messages + control + switching scenario */
.manager-story {
  --manager-lime: #d8ff28;
  --manager-violet: #3d3bff;
  --manager-ink: #111112;
  --manager-muted: #68686c;
  width: min(100%, 1280px);
  padding: 28px 30px calc(150px + env(safe-area-inset-bottom));
}

.manager-story h1,
.manager-story h2,
.manager-story h3,
.manager-story p {
  margin-top: 0;
}

.manager-story__hero,
.manager-story__profile,
.manager-story__scenarios,
.manager-story__value,
.manager-story__growth,
.manager-story__future {
  margin-top: 18px;
}

.manager-story__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
  gap: clamp(34px, 5vw, 76px);
  min-height: 650px;
  padding: clamp(42px, 6vw, 76px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 86% 20%, rgba(216, 255, 40, 0.22), transparent 25%),
    radial-gradient(circle at 8% 96%, rgba(61, 59, 255, 0.38), transparent 34%),
    linear-gradient(138deg, #09090a 0%, #17171a 58%, #242426 100%);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(23, 20, 75, 0.2);
}

.manager-story__hero::before {
  position: absolute;
  top: -130px;
  right: -100px;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.025), 0 0 0 110px rgba(255, 255, 255, 0.018);
  content: "";
}

.manager-story__hero-copy,
.manager-story__hero-visual {
  position: relative;
  z-index: 1;
}

.manager-story__hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.manager-story__eyebrow,
.manager-story__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 8px 12px;
  color: #000000;
  background: var(--manager-lime);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
}

.manager-story__eyebrow {
  margin-bottom: 24px;
}

.manager-story__eyebrow span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #ffffff;
  background: #000000;
  border-radius: 50%;
  font-size: 10px;
}

.manager-story__hero h1 {
  max-width: 12.5ch;
  color: #ffffff;
  font-size: clamp(45px, 5.5vw, 72px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.manager-story__hero-metric {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}

.manager-story__hero-metric > strong {
  color: var(--manager-lime);
  font-size: clamp(82px, 9vw, 124px);
  line-height: 0.78;
  letter-spacing: -0.09em;
}

.manager-story__hero-metric > div {
  display: grid;
  gap: 3px;
  max-width: 230px;
}

.manager-story__hero-metric b {
  color: #ffffff;
  font-size: clamp(27px, 3vw, 39px);
  line-height: 1;
}

.manager-story__hero-metric span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  line-height: 1.35;
}

.manager-story__hero-copy > p {
  max-width: 660px;
  margin: 27px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
}

.manager-story__simulation-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.manager-story__simulation-note span {
  padding: 7px 10px;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.manager-story__hero-visual {
  min-height: 470px;
  align-self: center;
  perspective: 1000px;
}

.manager-story__inbox,
.manager-story__plan,
.manager-story__time-orbit,
.manager-story__ai-node {
  position: absolute;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
}

.manager-story__inbox {
  top: 24px;
  left: -8px;
  display: grid;
  gap: 9px;
  width: 230px;
  padding: 20px;
  color: #111111;
  background: #ffffff;
  border-radius: 22px;
  transform: rotate(-7deg) translateZ(-10px);
}

.manager-story__inbox span,
.manager-story__plan > span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.manager-story__inbox i {
  display: block;
  width: 100%;
  height: 13px;
  background: #ededee;
  border-radius: 999px;
}

.manager-story__inbox i:nth-of-type(2) { width: 82%; }
.manager-story__inbox i:nth-of-type(3) { width: 63%; }

.manager-story__inbox small {
  color: #7a7a80;
  font-size: 9px;
}

.manager-story__ai-node {
  z-index: 3;
  top: 185px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
  color: #ffffff;
  background: var(--manager-violet);
  border: 4px solid #17171a;
  border-radius: 999px;
  transform: rotate(-2deg);
}

.manager-story__ai-node span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: #000000;
  background: var(--manager-lime);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.manager-story__ai-node b { font-size: 11px; }

.manager-story__plan {
  z-index: 2;
  top: 135px;
  right: 0;
  display: grid;
  gap: 13px;
  width: 270px;
  min-height: 260px;
  padding: 25px;
  color: #111111;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 27px;
  transform: rotate(5deg);
}

.manager-story__plan > span {
  color: var(--manager-violet);
}

.manager-story__plan > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 13px;
  background: #f2f2f3;
  border-radius: 13px;
}

.manager-story__plan i {
  display: block;
  height: 8px;
  background: var(--manager-violet);
  border-radius: 99px;
}

.manager-story__plan > div:nth-of-type(2) i { width: 73%; background: #ffb88f; }
.manager-story__plan > div:nth-of-type(3) i { width: 48%; background: var(--manager-lime); }
.manager-story__plan b { font-size: 10px; }

.manager-story__time-orbit {
  z-index: 4;
  right: 8px;
  bottom: 0;
  display: grid;
  width: 142px;
  height: 142px;
  place-content: center;
  color: #000000;
  background: var(--manager-lime);
  border: 7px solid #19191b;
  border-radius: 50%;
  text-align: center;
  transform: rotate(-7deg);
}

.manager-story__time-orbit b {
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.05em;
}

.manager-story__time-orbit span { font-size: 10px; font-weight: 650; }

.manager-story__profile {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  gap: 18px;
  padding: clamp(30px, 5vw, 58px);
  color: #ffffff;
  background:
    linear-gradient(112deg, rgba(16, 16, 17, 0.94), rgba(16, 16, 17, 0.78)),
    url("./assets/style-pack/assets/gradients/06_Gradient.webp") center / cover no-repeat,
    #121214;
  border-radius: 28px;
}

.manager-story__profile-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-right: clamp(0px, 3vw, 32px);
}

.manager-story__profile h2,
.manager-story__value h2,
.manager-story__future h2 {
  margin: 20px 0 0;
  font-size: clamp(35px, 4.5vw, 57px);
  line-height: 0.99;
  letter-spacing: -0.05em;
}

.manager-story__profile h2 { max-width: 17ch; color: #ffffff; }

.manager-story__profile-main > p {
  max-width: 720px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.52;
}

.manager-story__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.manager-story__tags span {
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.manager-story__tags span.is-accent {
  color: #000000;
  background: var(--manager-lime);
  border-color: var(--manager-lime);
}

.manager-story__meeting-proof {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  padding: 27px;
  overflow: hidden;
  color: #111111;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 23px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.manager-story__meeting-proof::after {
  position: absolute;
  right: -62px;
  bottom: -70px;
  width: 200px;
  height: 200px;
  background: url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat;
  border-radius: 50%;
  content: "";
  opacity: 0.65;
}

.manager-story__meeting-proof > span {
  color: var(--manager-violet);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.manager-story__meeting-proof > strong {
  position: relative;
  z-index: 1;
  max-width: 7ch;
  margin-top: 35px;
  color: var(--manager-violet);
  font-size: clamp(50px, 6vw, 76px);
  line-height: 0.86;
  letter-spacing: -0.07em;
}

.manager-story__meeting-proof h3 {
  position: relative;
  z-index: 1;
  max-width: 15ch;
  margin: 12px 0 0;
  font-size: 22px;
  line-height: 1.05;
}

.manager-story__meeting-proof p {
  position: relative;
  z-index: 1;
  margin: 20px 0 0;
  color: rgba(0, 0, 0, 0.64);
  font-size: 12px;
  line-height: 1.4;
}

.manager-story__meeting-proof > div {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  margin-top: 22px;
  font-size: 10px;
}

.manager-story__meeting-proof > div i {
  height: 4px;
  background: linear-gradient(90deg, #d3d3d4 0 72%, var(--manager-lime) 72%);
  border-radius: 99px;
}

.manager-story__meeting-proof em { color: var(--manager-violet); font-style: normal; font-weight: 700; }

.manager-story__scenarios {
  padding: clamp(34px, 5vw, 58px);
  background: #f0f0f2;
  border-radius: 28px;
}

.manager-story__heading {
  display: grid;
  grid-template-columns: minmax(130px, 0.28fr) minmax(0, 0.9fr) minmax(220px, 0.42fr);
  gap: clamp(18px, 4vw, 52px);
  align-items: end;
  margin-bottom: 30px;
}

.manager-story__heading > span {
  justify-self: start;
  padding: 7px 11px;
  color: #ffffff;
  background: var(--manager-violet);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
}

.manager-story__heading h2 {
  margin: 0;
  font-size: clamp(35px, 4.3vw, 55px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.manager-story__heading > p {
  margin: 0;
  color: var(--manager-muted);
  font-size: 14px;
  line-height: 1.45;
}

.manager-story__scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.manager-story__scenario-grid article {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #dfdfe2;
  border-radius: 20px;
  box-shadow: 0 13px 30px rgba(31, 29, 76, 0.06);
}

.manager-story__scenario-top {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8ea;
}

.manager-story__scenario-top b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #ffffff;
  background: var(--manager-violet);
  border-radius: 50%;
  font-size: 10px;
}

.manager-story__scenario-top span {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.16;
}

.manager-story__scenario-grid article > p {
  margin: 20px 0 0;
  color: #5f5f64;
  font-size: 13px;
  line-height: 1.42;
}

.manager-story__scenario-grid p small {
  display: block;
  margin-bottom: 5px;
  color: #9a9aa0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.manager-story__scenario-ai {
  display: grid;
  gap: 9px;
  margin-top: 17px;
  padding: 14px;
  color: #ffffff;
  background: #171719;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
}

.manager-story__scenario-ai span {
  color: var(--manager-lime);
  font-size: 10px;
  font-weight: 700;
}

.manager-story__scenario-grid article > p.is-result {
  margin-top: auto;
  padding-top: 18px;
  color: #111111;
  font-weight: 600;
}

.manager-story__scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.manager-story__scenario-grid > article.manager-story__scenario-item {
  display: contents;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.manager-story__scenario-trigger {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  grid-row: 1;
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 12px 14px;
  color: #111112;
  background: #f4f4f7;
  border: 1px solid #dedee3;
  border-radius: 16px;
  text-align: left;
}

.manager-story__scenario-item:nth-child(1) .manager-story__scenario-trigger { grid-column: 1; }
.manager-story__scenario-item:nth-child(2) .manager-story__scenario-trigger { grid-column: 2; }
.manager-story__scenario-item:nth-child(3) .manager-story__scenario-trigger { grid-column: 3; }

.manager-story__scenario-trigger > span,
.manager-story__scenario-trigger > i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.manager-story__scenario-trigger > span {
  color: #ffffff;
  background: #111112;
}

.manager-story__scenario-trigger > i {
  color: #111112;
  background: #ffffff;
  font-size: 18px;
}

.manager-story__scenario-trigger > strong {
  font-size: 16px;
  line-height: 1.2;
}

.manager-story__scenario-trigger:hover,
.manager-story__scenario-trigger:focus-visible {
  border-color: var(--manager-violet);
}

.manager-story__scenario-item.is-active .manager-story__scenario-trigger {
  color: #ffffff;
  background: #111112;
  border-color: #111112;
}

.manager-story__scenario-item.is-active .manager-story__scenario-trigger > span {
  background: var(--manager-violet);
}

.manager-story__scenario-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
  grid-column: 1 / -1;
  grid-row: 2;
  gap: 10px;
  align-items: stretch;
  padding: 18px;
  background: linear-gradient(135deg, #f6f4ff, #fff7ef);
  border: 1px solid #e4e1ec;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(20, 20, 28, 0.06);
}

.manager-story__scenario-panel[hidden] {
  display: none;
}

.manager-story__scenario-panel > i {
  display: grid;
  place-items: center;
  color: var(--manager-violet);
  font-size: 23px;
  font-style: normal;
}

.manager-story__scenario-stage {
  display: flex;
  min-width: 0;
  min-height: 128px;
  flex-direction: column;
  justify-content: center;
  padding: 17px;
  background: #ffffff;
  border-radius: 14px;
}

.manager-story__scenario-stage > span {
  color: #686870;
  font-size: 11px;
  font-weight: 700;
}

.manager-story__scenario-stage p {
  margin: 9px 0 0;
  color: #111112;
  font-size: 15px;
  font-weight: 620;
  line-height: 1.32;
}

.manager-story__scenario-stage.is-manual { background: #ffe2c8; }
.manager-story__scenario-stage.is-ai { background: #eceaff; }
.manager-story__scenario-stage.is-ready { background: #ffffff; }
.manager-story__scenario-stage.is-focus { background: #eaff8d; }

.manager-story__value {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(35px, 6vw, 82px);
  padding: clamp(38px, 6vw, 70px);
  overflow: hidden;
  color: #111111;
  background: var(--manager-lime);
  border-radius: 28px;
}

.manager-story__value::after {
  position: absolute;
  top: -105px;
  left: -90px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255, 255, 255, 0.13), 0 0 0 90px rgba(255, 255, 255, 0.09);
  content: "";
}

.manager-story__value-intro,
.manager-story__value-list,
.manager-story__value-note { position: relative; z-index: 1; }

.manager-story__value .manager-story__kicker {
  color: #ffffff;
  background: var(--manager-violet);
}

.manager-story__value-intro > p {
  max-width: 500px;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.5;
}

.manager-story__value-list {
  display: grid;
}

.manager-story__value-list article {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.manager-story__value-list article:first-child { border-top: 0; padding-top: 0; }

.manager-story__value-list article > b {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #ffffff;
  background: #111111;
  border-radius: 50%;
  font-size: 10px;
}

.manager-story__value-list h3 {
  margin: 0;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.08;
}

.manager-story__value-list p {
  margin: 9px 0 0;
  color: rgba(0, 0, 0, 0.66);
  font-size: 14px;
  line-height: 1.45;
}

.manager-story__value-note {
  grid-column: 1 / -1;
  justify-self: end;
  margin: 7px 0 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.manager-story__growth {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
}

.manager-story__market,
.manager-story__income {
  display: flex;
  flex-direction: column;
  min-height: 570px;
  padding: clamp(31px, 4.5vw, 52px);
  overflow: hidden;
  border-radius: 28px;
}

.manager-story__market {
  position: relative;
  color: #ffffff;
  background:
    radial-gradient(circle at 92% 92%, rgba(216, 255, 40, 0.24), transparent 31%),
    linear-gradient(145deg, #2622d7, #3d3bff 55%, #6967ff);
}

.manager-story__market::after {
  position: absolute;
  right: -92px;
  bottom: -105px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.05), 0 0 0 80px rgba(255, 255, 255, 0.035);
  content: "";
}

.manager-story__market .manager-story__kicker {
  color: #111111;
  background: var(--manager-lime);
}

.manager-story__market > strong,
.manager-story__income > strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 52px;
  font-size: clamp(78px, 10vw, 130px);
  line-height: 0.78;
  letter-spacing: -0.09em;
}

.manager-story__market > strong { color: var(--manager-lime); }

.manager-story__market h2,
.manager-story__income h2 {
  position: relative;
  z-index: 1;
  max-width: 17ch;
  margin: 23px 0 0;
  font-size: clamp(27px, 3.3vw, 42px);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.manager-story__market h2 { color: #ffffff; }

.manager-story__market > p,
.manager-story__income > p {
  position: relative;
  z-index: 1;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.manager-story__market > p { color: rgba(255, 255, 255, 0.72); }

.manager-story__market ul {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: auto 0 0;
  padding: 28px 0 0;
  list-style: none;
}

.manager-story__market li {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.manager-story__income {
  color: #111111;
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.75), transparent 28%),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat,
    #ffba94;
}

.manager-story__income .manager-story__kicker {
  color: #ffffff;
  background: #111111;
}

.manager-story__income > strong {
  max-width: 8ch;
  color: #111111;
  font-size: clamp(55px, 7.4vw, 96px);
  line-height: 0.84;
}

.manager-story__income > p { color: rgba(0, 0, 0, 0.68); }

.manager-story__income > small {
  margin-top: auto;
  padding-top: 24px;
  color: rgba(0, 0, 0, 0.58);
  font-size: 10px;
  line-height: 1.4;
}

.manager-story__future {
  padding: clamp(38px, 6vw, 68px);
  color: #ffffff;
  background:
    linear-gradient(115deg, rgba(11, 11, 12, 0.95), rgba(11, 11, 12, 0.82)),
    url("./assets/style-pack/assets/gradients/01_Gradient.webp") center / cover no-repeat,
    #101012;
  border-radius: 28px;
}

.manager-story__heading--dark {
  grid-template-columns: minmax(130px, 0.25fr) minmax(0, 1fr);
  align-items: start;
}

.manager-story__heading--dark > span {
  color: #111111;
  background: var(--manager-lime);
}

.manager-story__heading--dark h2 {
  max-width: 18ch;
  color: #ffffff;
}

.manager-story__transformation {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 74px minmax(0, 1.1fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 38px;
}

.manager-story__transformation article {
  min-height: 400px;
  padding: 24px;
  border-radius: 22px;
}

.manager-story__transformation article > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.manager-story__before {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.manager-story__clutter {
  position: relative;
  min-height: 310px;
  margin-top: 25px;
}

.manager-story__clutter p {
  position: absolute;
  width: 76%;
  margin: 0;
  padding: 16px;
  color: rgba(255, 255, 255, 0.74);
  background: #27272b;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.22);
}

.manager-story__clutter p:nth-child(1) { top: 0; left: 0; transform: rotate(-2deg); }
.manager-story__clutter p:nth-child(2) { top: 72px; right: 0; transform: rotate(2deg); }
.manager-story__clutter p:nth-child(3) { top: 151px; left: 8px; transform: rotate(-3deg); }
.manager-story__clutter p:nth-child(4) { top: 230px; right: 6px; transform: rotate(2.5deg); }

.manager-story__transform-node {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
}

.manager-story__transform-node span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #111111;
  background: var(--manager-lime);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(216, 255, 40, 0.1), 0 0 35px rgba(216, 255, 40, 0.25);
  font-size: 14px;
  font-weight: 800;
}

.manager-story__transform-node i {
  color: rgba(255, 255, 255, 0.6);
  font-size: 28px;
  font-style: normal;
}

.manager-story__after {
  display: flex;
  flex-direction: column;
  color: #111111;
  background: var(--manager-lime);
}

.manager-story__ready-plan {
  display: grid;
  gap: 9px;
  margin-top: 25px;
}

.manager-story__ready-plan p {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 13px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 13px;
  font-size: 13px;
  font-weight: 600;
}

.manager-story__ready-plan i {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #ffffff;
  background: var(--manager-violet);
  border-radius: 50%;
  font-size: 10px;
  font-style: normal;
}

.manager-story__after > strong {
  max-width: 15ch;
  margin-top: auto;
  padding-top: 30px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.manager-story__gift-dock {
  position: fixed;
  z-index: 26;
  right: max(22px, calc((100vw - 1220px) / 2));
  bottom: max(18px, env(safe-area-inset-bottom));
  left: max(22px, calc((100vw - 1220px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: auto;
  min-height: 84px;
  padding: 12px 14px 12px 22px;
  color: #ffffff;
  background: #111112;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  box-shadow: 0 20px 55px rgba(18, 16, 59, 0.32);
  backdrop-filter: blur(14px);
}

.manager-story__gift-dock > div {
  display: grid;
  gap: 3px;
}

.manager-story__gift-dock > div span {
  color: var(--manager-lime);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.manager-story__gift-dock > div strong {
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.1;
}

.manager-story__gift-dock .button {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  color: #111111;
  background: var(--manager-lime);
  border: 0;
  font-size: 18px;
}

.manager-story__gift-dock .button:hover {
  color: #ffffff;
  background: var(--manager-violet);
  transform: translateY(-1px);
}

.manager-story__gift-dock .button span {
  margin-left: auto;
  font-size: 22px;
}

@media (max-width: 940px) {
  .manager-story__hero { grid-template-columns: minmax(0, 1fr) 320px; }
  .manager-story__hero-visual { min-height: 400px; transform: scale(0.86); transform-origin: center right; }
  .manager-story__profile { grid-template-columns: minmax(0, 1fr) 300px; }
  .manager-story__heading { grid-template-columns: 1fr 2fr; }
  .manager-story__heading > p { grid-column: 2; }
  .manager-story__market,
  .manager-story__income { min-height: 610px; }
}

@media (max-width: 760px) {
  .manager-story {
    width: min(100%, calc(100% - 24px));
    padding: 18px 0 calc(126px + env(safe-area-inset-bottom));
  }

  .manager-story__hero,
  .manager-story__profile,
  .manager-story__scenarios,
  .manager-story__value,
  .manager-story__growth,
  .manager-story__future { margin-top: 11px; }

  .manager-story__hero {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 0;
    padding: 25px 19px 20px;
    border-radius: 23px;
  }

  .manager-story__eyebrow { margin-bottom: 18px; padding: 7px 10px; font-size: 10px; }
  .manager-story__eyebrow span { width: 16px; height: 16px; font-size: 8px; }

  .manager-story__hero h1 {
    max-width: 12ch;
    font-size: clamp(37px, 11vw, 48px);
  }

  .manager-story__hero-metric { gap: 12px; margin-top: 23px; }
  .manager-story__hero-metric > strong { font-size: clamp(72px, 22vw, 96px); }
  .manager-story__hero-metric b { font-size: 25px; }
  .manager-story__hero-metric span { max-width: 155px; font-size: 9px; }
  .manager-story__hero-copy > p { margin-top: 20px; font-size: 14px; }
  .manager-story__simulation-note { margin-top: 17px; }

  .manager-story__hero-visual {
    width: 100%;
    min-height: 255px;
    transform: none;
  }

  .manager-story__inbox { top: 5px; left: 0; width: 160px; padding: 13px; border-radius: 15px; }
  .manager-story__inbox i { height: 8px; }
  .manager-story__inbox small { font-size: 6px; }
  .manager-story__ai-node { top: 98px; left: 43px; padding: 6px 9px 6px 6px; border-width: 3px; }
  .manager-story__ai-node span { width: 25px; height: 25px; font-size: 8px; }
  .manager-story__ai-node b { font-size: 8px; }
  .manager-story__plan { top: 62px; right: 2px; width: 184px; min-height: 170px; gap: 7px; padding: 15px; border-radius: 18px; }
  .manager-story__plan > div { gap: 7px; padding: 7px; border-radius: 8px; }
  .manager-story__plan i { height: 5px; }
  .manager-story__plan b { font-size: 7px; }
  .manager-story__time-orbit { right: 7px; bottom: -2px; width: 82px; height: 82px; border-width: 4px; }
  .manager-story__time-orbit b { font-size: 23px; }
  .manager-story__time-orbit span { font-size: 7px; }

  .manager-story__profile {
    grid-template-columns: 1fr;
    gap: 23px;
    padding: 27px 19px 19px;
    border-radius: 23px;
  }

  .manager-story__profile h2,
  .manager-story__value h2,
  .manager-story__future h2 { margin-top: 16px; font-size: clamp(32px, 9.5vw, 41px); }
  .manager-story__profile-main > p { margin-top: 18px; font-size: 14px; }
  .manager-story__tags { gap: 6px; margin-top: 20px; }
  .manager-story__tags span { padding: 7px 9px; font-size: 9px; }

  .manager-story__meeting-proof { min-height: 300px; padding: 20px; border-radius: 18px; }
  .manager-story__meeting-proof > strong { margin-top: 27px; font-size: 58px; }
  .manager-story__meeting-proof h3 { font-size: 21px; }

  .manager-story__scenarios { padding: 27px 19px; border-radius: 23px; }
  .manager-story__heading,
  .manager-story__heading--dark { grid-template-columns: 1fr; gap: 11px; margin-bottom: 21px; }
  .manager-story__heading > p { grid-column: auto; font-size: 13px; }
  .manager-story__heading h2 { font-size: clamp(32px, 9.5vw, 41px); }
  .manager-story__scenario-grid { grid-template-columns: 1fr; }
  .manager-story__scenario-grid article { min-height: 0; padding: 17px; }
  .manager-story__scenario-grid article > p.is-result { margin-top: 18px; }

  .manager-story__value {
    grid-template-columns: 1fr;
    gap: 29px;
    padding: 30px 19px 24px;
    border-radius: 23px;
  }

  .manager-story__value-intro > p { margin-top: 18px; font-size: 14px; }
  .manager-story__value-list article { grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 0; }
  .manager-story__value-list article > b { width: 31px; height: 31px; }
  .manager-story__value-list h3 { font-size: 21px; }
  .manager-story__value-list p { font-size: 13px; }
  .manager-story__value-note { justify-self: start; padding: 9px 11px; border-radius: 12px; font-size: 10px; }

  .manager-story__growth { grid-template-columns: 1fr; }
  .manager-story__market,
  .manager-story__income { min-height: 485px; padding: 29px 20px; border-radius: 23px; }
  .manager-story__market > strong,
  .manager-story__income > strong { margin-top: 42px; }
  .manager-story__market > strong { font-size: 86px; }
  .manager-story__income > strong { font-size: 63px; }
  .manager-story__market h2,
  .manager-story__income h2 { margin-top: 20px; font-size: 29px; }
  .manager-story__market > p,
  .manager-story__income > p { font-size: 14px; }

  .manager-story__future { padding: 29px 19px 23px; border-radius: 23px; }
  .manager-story__transformation { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .manager-story__transformation article { min-height: 350px; padding: 18px; border-radius: 17px; }
  .manager-story__transform-node { grid-template-columns: auto 1fr; justify-content: center; padding: 8px 0; }
  .manager-story__transform-node span { width: 49px; height: 49px; }
  .manager-story__transform-node i { transform: rotate(90deg); }
  .manager-story__after > strong { font-size: 31px; }

  .manager-story__gift-dock {
    grid-template-columns: 1fr;
    gap: 7px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    min-height: 0;
    padding: 9px;
    border-radius: 18px;
  }

  .manager-story__gift-dock > div { display: grid; }
  .manager-story__gift-dock > div span { display: none; }
  .manager-story__gift-dock > div strong { padding-left: 5px; font-size: 11px; line-height: 1.2; }
  .manager-story__gift-dock .button { min-height: 54px; font-size: 16px; }
}

@media (max-width: 390px), (max-height: 720px) and (max-width: 760px) {
  .manager-story__hero { padding-top: 21px; }
  .manager-story__hero h1 { font-size: 36px; }
  .manager-story__hero-metric > strong { font-size: 73px; }
  .manager-story__hero-visual { min-height: 238px; }
  .manager-story__plan { width: 172px; }
}

@media (prefers-reduced-motion: reduce) {
  .manager-story__gift-dock .button { transition: none; }
}

/* Manager result imagery: role context and AI transformation */
.manager-story__meeting-proof {
  display: block;
  min-height: 0;
  padding: 0;
  background: #111114;
}

.manager-story__meeting-proof::after {
  display: none;
}

.manager-story__meeting-proof-visual {
  display: block;
  width: 100%;
  aspect-ratio: 1.48 / 1;
  object-fit: cover;
  object-position: center;
}

.manager-story--analyst .manager-story__meeting-proof-visual,
.manager-story--marketer .manager-story__meeting-proof-visual,
.manager-story--lead .manager-story__meeting-proof-visual,
.manager-story--specialist .manager-story__meeting-proof-visual,
.manager-story--other .manager-story__meeting-proof-visual {
  object-position: 64% center;
}

.manager-story__meeting-proof--without-proof .manager-story__meeting-proof-visual {
  min-height: 100%;
  aspect-ratio: 1.2 / 1;
}

.manager-story__meeting-proof > .manager-story__meeting-proof-card {
  position: relative;
  z-index: 1;
  display: block;
  margin: -86px 16px 16px;
  padding: 18px;
  color: #111111;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

.manager-story__meeting-proof-card > span {
  color: var(--manager-violet);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.manager-story__meeting-proof-card > strong {
  display: block;
  max-width: 7ch;
  margin-top: 14px;
  color: var(--manager-violet);
  font-size: clamp(43px, 4.4vw, 58px);
  line-height: 0.88;
  letter-spacing: -0.07em;
}

.manager-story__meeting-proof-card h3 {
  margin-top: 9px;
  font-size: 21px;
}

.manager-story__meeting-proof-card p {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.45;
}

.manager-story__meeting-proof-scale {
  display: grid;
  grid-template-columns: auto minmax(34px, 1fr) auto;
  gap: 7px;
  align-items: center;
  margin-top: 15px;
  font-size: 11px;
}

.manager-story__meeting-proof-scale i {
  height: 4px;
  background: linear-gradient(90deg, #d8d8dc 0 72%, var(--manager-lime) 72% 100%);
}

.manager-story__transform-visual {
  display: block;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 0 0 7px rgba(61, 59, 255, 0.12), 0 18px 42px rgba(0, 0, 0, 0.25);
}

@media (max-width: 760px) {
  .manager-story__meeting-proof-visual {
    aspect-ratio: 1.36 / 1;
    object-position: 57% center;
  }

  .manager-story__meeting-proof > .manager-story__meeting-proof-card {
    margin: -42px 12px 12px;
    padding: 17px;
  }

  .manager-story__meeting-proof-card > strong {
    font-size: 46px;
  }

  .manager-story__transform-visual {
    width: 64px;
    height: 64px;
    border-radius: 17px;
  }
}

/* Unified manager result pass */
.dev-menu-hero-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.dev-menu-hero-switch > span {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
}

.dev-menu-hero-switch .dev-menu-button {
  min-height: 34px;
  padding: 7px 9px;
}

.dev-menu-hero-switch .dev-menu-button.is-active {
  color: #ffffff;
  background: #3d3bff;
}

.manager-story__hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
  gap: clamp(34px, 5vw, 76px);
  min-height: clamp(560px, 66vh, 650px);
  align-items: center;
  background:
    linear-gradient(115deg, rgba(10, 9, 31, 0.92) 0 46%, rgba(28, 23, 73, 0.52) 78%, rgba(255, 195, 142, 0.18)),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover no-repeat,
    #27245f;
  box-shadow: 0 24px 80px rgba(45, 38, 108, 0.19);
}

.manager-story__hero-copy {
  align-self: center;
}

.manager-story__hero h1,
.manager-story--hero-thirty .manager-story__hero h1 {
  max-width: 14ch;
  font-size: clamp(42px, 4.7vw, 62px);
}

.manager-story__hero-copy > p {
  max-width: 670px;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
}

.manager-story__hero-outcome {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 410px;
  padding: 22px;
  overflow: hidden;
  color: #111112;
  background:
    radial-gradient(circle at 20% 6%, rgba(255, 255, 255, 0.78), transparent 32%),
    linear-gradient(145deg, #ffc38e 0%, #f7c8ff 48%, #c5ece6 100%);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(61, 59, 255, 0.26);
}

.manager-story__hero-outcome::after {
  position: absolute;
  right: -65px;
  bottom: -105px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(17, 17, 18, 0.14);
  border-radius: 50%;
  content: "";
}

.manager-story__metric-card {
  position: relative;
  z-index: 1;
  padding: 20px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
}

.manager-story__metric-heading {
  margin: 0;
}

.manager-story__metric-heading strong {
  display: block;
  color: var(--manager-violet);
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.manager-story__metric-heading small {
  font-size: 24px;
  letter-spacing: 0;
}

.manager-story__metric-heading span {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}

.manager-story__hero-outcome > b {
  margin-top: 13px;
  font-size: 30px;
}

.manager-story__metric-copy {
  margin: 8px 0 0;
  color: rgba(17, 17, 18, 0.78);
  font-size: 16px;
  line-height: 1.35;
}

.manager-story__hero-flower {
  position: absolute;
  z-index: 2;
  top: 34px;
  right: 34px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform: rotate(8deg);
}

.manager-story__profile-main > p {
  max-width: 650px;
}

.manager-story__profile h2 {
  font-size: clamp(32px, 3.65vw, 47px);
}

.manager-story__tags {
  gap: 10px;
}

.manager-story__tags span {
  padding: 11px 15px;
  color: #ffffff;
  background: #2b2b30;
  border-color: #505057;
  font-size: 14px;
}

.manager-story__meeting-proof-card > strong {
  max-width: 10ch;
  font-size: clamp(37px, 3.35vw, 47px);
  line-height: 0.94;
}

.manager-story__meeting-proof > .manager-story__meeting-proof-card {
  margin-top: -72px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.manager-story__scenarios,
.manager-story__value,
.manager-story__future {
  padding: clamp(36px, 5vw, 64px);
}

.manager-story__scenarios {
  background: #ffffff;
}

.manager-story__heading,
.manager-story__heading--dark {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 35px;
}

.manager-story__heading h2,
.manager-story__heading--dark h2 {
  grid-column: 1;
  max-width: 18ch;
  margin: 0;
}

.manager-story__heading > p {
  grid-column: 2;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.manager-story__value {
  display: block;
  background:
    radial-gradient(circle at 3% 5%, rgba(255, 255, 255, 0.3), transparent 24%),
    var(--manager-lime);
}

.manager-story__value-intro h2 {
  max-width: 19ch;
  margin: 0;
}

.manager-story__value-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 38px;
}

.manager-story__value-list article {
  display: block;
  padding: 24px;
  background: #f4ffd1;
  border: 0;
  border-radius: 18px;
}

.manager-story__value-list article:first-child {
  padding: 24px;
}

.manager-story__value-list article > b {
  margin-bottom: 22px;
}

.manager-story__value-note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 18px 0 0;
  padding: 17px 20px;
  background: #ffffff;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.35;
}

.manager-story__value-note::before {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  color: #ffffff;
  background: var(--manager-violet);
  border-radius: 50%;
  content: "✓";
  font-size: 12px;
  font-weight: 800;
}

.manager-story__market,
.manager-story__income {
  min-height: 500px;
  padding: clamp(32px, 4vw, 50px);
  border-radius: 28px;
}

.manager-story__market {
  color: #111112;
  background: linear-gradient(135deg, #ffc38e 0%, #f7c8ff 52%, #d9d7ff 100%);
}

.manager-story__market::after {
  display: none;
}

.manager-story__market .manager-story__kicker {
  color: #ffffff;
  background: #111112;
}

.manager-story__market > strong,
.manager-story__income > strong {
  color: var(--manager-violet);
}

.manager-story__market h2 {
  color: #111112;
}

.manager-story__income {
  background: linear-gradient(140deg, #f2efff 0%, #c5ece6 60%, #ffcfa8 100%);
}

.manager-story__market > p,
.manager-story__income > p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
}

.manager-story__income > p {
  color: rgba(0, 0, 0, 0.7);
}

.manager-story__market > p {
  color: rgba(17, 17, 18, 0.74);
}

.manager-story__market h2,
.manager-story__income h2 {
  max-width: 19ch;
}

.manager-story__income > strong {
  font-size: clamp(51px, 5.8vw, 76px);
  white-space: nowrap;
}

.manager-story__future .manager-story__heading {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.45fr);
  align-items: end;
}

.manager-story__heading--dark h2 {
  max-width: 18ch;
  font-size: clamp(38px, 4.4vw, 54px);
}

.manager-story__future .manager-story__heading > p {
  color: rgba(255, 255, 255, 0.68);
}

.manager-story__transformation {
  grid-template-columns: minmax(0, 0.92fr) 164px minmax(0, 1.08fr);
  gap: 18px;
  align-items: stretch;
}

.manager-story__transformation article {
  min-height: 450px;
  padding: 28px;
  border: 0;
  border-radius: 24px;
}

.manager-story__before {
  color: #ffffff;
  background: #202024;
}

.manager-story__after {
  color: #111112;
  background: #ffffff;
}

.manager-story__transform-card-heading > span {
  display: inline-flex;
  width: max-content;
  padding: 7px 11px;
  color: #111112;
  background: #ffc38e;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.manager-story__after .manager-story__transform-card-heading > span {
  color: #ffffff;
  background: var(--manager-violet);
}

.manager-story__transform-card-heading h3 {
  max-width: 12ch;
  margin: 22px 0 0;
  color: inherit;
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.manager-story__workday-list {
  display: grid;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.manager-story__workday-list li {
  display: grid;
  grid-template-columns: 24px 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
}

.manager-story__before .manager-story__workday-list li {
  color: #ffffff;
  background: #303036;
}

.manager-story__workday-list li::before {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
}

.manager-story__before .manager-story__workday-list li::before {
  color: #111112;
  background: #ffc38e;
  content: "×";
}

.manager-story__after .manager-story__workday-list li {
  background: #f2f2f4;
}

.manager-story__after .manager-story__workday-list li::before {
  color: #ffffff;
  background: var(--manager-violet);
  content: "✓";
}

.manager-story__workday-list b {
  color: inherit;
  font-size: 11px;
  font-weight: 700;
}

.manager-story__before .manager-story__workday-list b {
  color: rgba(255, 255, 255, 0.58);
}

.manager-story__workday-list span {
  font-weight: 600;
}

.manager-story__transform-orb {
  display: block;
  width: 132px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(61, 59, 255, 0.32));
}

.manager-story__transform-node strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
}

.manager-story__transform-node i {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #111112;
  background: var(--manager-lime);
  border-radius: 50%;
  font-size: 22px;
}

.manager-story__future-result {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 18px 0 0;
  padding: 23px 26px;
  color: #111112;
  background: var(--manager-lime);
  border-radius: 20px;
}

.manager-story__future-result > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #ffffff;
  background: var(--manager-violet);
  border-radius: 50%;
  font-size: 22px;
}

.manager-story__future-result strong {
  max-width: 35ch;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.manager-story__gift-note {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 18px 0 0;
  padding: 21px 28px;
  color: #ffffff;
  background: rgba(17, 17, 18, 0.96);
  border: 1px solid rgba(216, 255, 40, 0.32);
  border-radius: 20px;
}

.manager-story__gift-note > span {
  font-size: 36px;
  line-height: 1;
}

.manager-story__gift-note strong {
  max-width: 42ch;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.28;
}

.manager-story__celebration {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.manager-story__celebration i {
  position: absolute;
  top: 18%;
  left: 16%;
  width: 7px;
  height: 7px;
  color: #d8ff28;
  background: currentColor;
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    0 -46px 0 -1px currentColor,
    33px -33px 0 -1px currentColor,
    46px 0 0 -1px currentColor,
    33px 33px 0 -1px currentColor,
    0 46px 0 -1px currentColor,
    -33px 33px 0 -1px currentColor,
    -46px 0 0 -1px currentColor,
    -33px -33px 0 -1px currentColor;
  animation: managerStoryFirework 2.35s ease-out both;
}

.manager-story__celebration i:nth-child(2) {
  top: 23%;
  left: 58%;
  color: #ffc38e;
  animation-delay: 0.3s;
}

.manager-story__celebration i:nth-child(3) {
  top: 62%;
  left: 35%;
  color: #c5ece6;
  animation-delay: 0.62s;
}

.manager-story__celebration i:nth-child(4) {
  top: 66%;
  left: 84%;
  color: #f7c8ff;
  animation-delay: 0.9s;
}

.manager-story__hero > :not(.manager-story__celebration) {
  position: relative;
  z-index: 1;
}

@keyframes managerStoryFirework {
  0% {
    opacity: 0;
    transform: scale(0.08);
  }

  16% {
    opacity: 0.95;
  }

  58% {
    opacity: 0.82;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

.manager-story__gift-dock {
  position: fixed;
  z-index: 26;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: none;
}

.manager-story__gift-dock > div {
  gap: 8px;
}

.manager-story__gift-dock > div span {
  font-size: 11px;
}

.manager-story__gift-dock > div strong {
  font-size: clamp(25px, 3vw, 38px);
}

.manager-story__gift-dock .button {
  position: relative;
  overflow: hidden;
  min-height: 76px;
  color: #111112;
  background: linear-gradient(110deg, #d8ff28 0 32%, #ffffff 45%, #ffc38e 54%, #d8ff28 68% 100%);
  background-size: 230% 100%;
  box-shadow: 0 13px 30px rgba(216, 255, 40, 0.25);
  border-radius: 999px;
  font-size: 24px;
  animation: landingCtaShimmer 3.4s ease-in-out infinite;
}

.manager-story__gift-dock .button:hover,
.manager-story__gift-dock .button:focus-visible {
  color: #ffffff;
  background: var(--manager-violet);
  animation: none;
}

.manager-story__gift-dock .button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

@media (max-width: 940px) and (min-width: 761px) {
  .manager-story__scenario-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manager-story__scenario-panel > i {
    display: none;
  }

  .manager-story__scenario-stage p {
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  .manager-story__hero {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
  }

  .manager-story__hero h1,
  .manager-story--hero-thirty .manager-story__hero h1 {
    max-width: 14ch;
    font-size: clamp(32px, 9.2vw, 38px);
  }

  .manager-story__hero-copy > p {
    margin-top: 22px;
    font-size: 16px;
  }

  .manager-story__hero-flower {
    top: 25px;
    right: 25px;
    width: 40px;
    height: 40px;
  }

  .manager-story__hero-outcome {
    gap: 10px;
    min-height: 0;
    padding: 14px;
    border-radius: 20px;
  }

  .manager-story__metric-card {
    padding: 16px;
    border-radius: 14px;
  }

  .manager-story__metric-heading strong {
    font-size: 44px;
  }

  .manager-story__metric-heading small {
    font-size: 20px;
  }

  .manager-story__metric-heading span {
    font-size: 20px;
  }

  .manager-story__metric-copy {
    font-size: 15px;
  }

  .manager-story__profile-main > p {
    font-size: 16px;
  }

  .manager-story__tags span {
    padding: 10px 13px;
    font-size: 13px;
  }

  .manager-story__meeting-proof-card > strong {
    font-size: 39px;
  }

  .manager-story__scenarios,
  .manager-story__value,
  .manager-story__future {
    padding: 29px 19px;
  }

  .manager-story__heading,
  .manager-story__heading--dark {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }

  .manager-story__heading h2,
  .manager-story__heading--dark h2,
  .manager-story__value-intro h2 {
    grid-column: 1;
    max-width: 16ch;
    font-size: clamp(30px, 8.5vw, 36px);
  }

  .manager-story__heading > p {
    grid-column: 1;
    font-size: 15px;
  }

  .manager-story__scenario-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .manager-story__scenario-grid > article.manager-story__scenario-item {
    display: block;
  }

  .manager-story__scenario-trigger,
  .manager-story__scenario-item:nth-child(n) .manager-story__scenario-trigger {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-height: 64px;
  }

  .manager-story__scenario-panel {
    grid-template-columns: 1fr;
    grid-column: 1;
    grid-row: auto;
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
  }

  .manager-story__scenario-panel > i {
    height: 18px;
    transform: rotate(90deg);
  }

  .manager-story__scenario-stage {
    min-height: 0;
    padding: 15px;
  }

  .manager-story__scenario-stage p {
    font-size: 16px;
  }

  .manager-story__value-list {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 26px;
  }

  .manager-story__value-list article {
    padding: 19px;
  }

  .manager-story__value-list article:first-child {
    padding: 19px;
  }

  .manager-story__value-list article > b {
    margin-bottom: 14px;
  }

  .manager-story__market,
  .manager-story__income {
    min-height: 0;
    padding: 31px 20px;
  }

  .manager-story__market > p,
  .manager-story__income > p {
    font-size: 15px;
  }

  .manager-story__income > strong {
    font-size: clamp(46px, 13.5vw, 54px);
  }

  .manager-story__future .manager-story__heading {
    grid-template-columns: 1fr;
  }

  .manager-story__transformation {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .manager-story__transformation article {
    min-height: 0;
    padding: 20px;
  }

  .manager-story__transform-node {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .manager-story__transform-orb {
    width: 100px;
    height: 82px;
  }

  .manager-story__transform-node i {
    font-size: 0;
    transform: none;
  }

  .manager-story__transform-node i::before {
    font-size: 24px;
    content: "↓";
  }

  .manager-story__transform-card-heading h3 {
    max-width: 13ch;
    font-size: 30px;
  }

  .manager-story__workday-list {
    margin-top: 22px;
  }

  .manager-story__workday-list li {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: 13px;
  }

  .manager-story__workday-list b {
    display: none;
  }

  .manager-story__future-result {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 18px;
    border-radius: 17px;
  }

  .manager-story__future-result > span {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .manager-story__future-result strong {
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  .manager-story__gift-note {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 17px 18px;
    border-radius: 17px;
  }

  .manager-story__gift-note > span {
    font-size: 30px;
  }

  .manager-story__gift-note strong {
    font-size: 16px;
  }

  .manager-story__gift-dock {
    position: fixed;
    grid-template-columns: 1fr;
    gap: 0;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    margin-top: 0;
    padding: 0;
    border-radius: 999px;
    backdrop-filter: none;
  }

  .manager-story__gift-dock > div {
    gap: 3px;
  }

  .manager-story__gift-dock > div strong {
    font-size: 11px;
  }

  .manager-story__gift-dock .button {
    min-height: 54px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manager-story__celebration i {
    animation: none;
  }

  .manager-story__gift-dock .button {
    animation: none;
  }
}

/* Final spacing audit: local safe zones for existing interactive and result components. */
.brand {
  min-height: 44px;
}

.stage-back,
.reset-button,
.chat-history-back,
.fitting-stage .button.compact {
  min-height: 44px;
}

.stage-back {
  padding-inline: 4px;
}

.profile-data-screen .profile-form > [data-skb-consent="pd"],
.profile-data-screen .profile-legal .skb-consent__item,
.result-gift-opened .skb-consent__item {
  min-height: 44px;
  align-items: center;
}

.result-done__faq summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding-block: 8px;
}

.manager-story .manager-story__value-list {
  gap: 18px;
  margin: 42px 0 24px;
}

.manager-story .manager-story__value-list article,
.manager-story .manager-story__value-list article:first-child {
  padding: 32px;
}

.manager-story .manager-story__value-list article > b {
  margin-bottom: 26px;
}

.manager-story p.manager-story__value-note {
  gap: 16px;
  margin: 0;
  padding: 22px 26px;
}

.manager-story__value-note::before {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

.manager-story p.manager-story__future-result {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 28px;
  margin: 24px 0 0;
  padding: 32px 40px;
}

.manager-story .manager-story__future-result > span {
  width: 56px;
  height: 56px;
}

.manager-story p.manager-story__gift-note {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 28px;
  margin: 24px 0 0;
  padding: 28px 36px;
}

.manager-story .manager-story__gift-note > span {
  display: grid;
  width: 64px;
  min-height: 56px;
  place-items: center;
}

@media (min-width: 761px) and (max-width: 820px) {
  .fitting-stage.ai-stage .ai-task-grid {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
  }

  .fitting-stage.ai-stage .ai-task-grid:not(.is-chat-open) > .work-chat {
    display: none;
  }

  .fitting-stage.ai-stage .ai-task-grid.is-chat-open {
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .fitting-stage.ai-stage .ai-task-grid.is-chat-open > .source-panel,
  .fitting-stage.ai-stage .ai-task-grid.is-chat-open > .chat-drawer-backdrop {
    display: none;
  }

  .fitting-stage.ai-stage .ai-task-grid.is-chat-open > .work-chat {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(170px, 1fr) auto auto;
    transform: none;
  }
}

@media (max-width: 760px) {
  .result-done {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }

  .result-done > *,
  .result-done__program-grid {
    min-width: 0;
  }

  .result-done__program-grid article {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .manager-story .manager-story__value-list {
    gap: 12px;
    margin: 28px 0 18px;
  }

  .manager-story .manager-story__value-list article,
  .manager-story .manager-story__value-list article:first-child {
    padding: 22px;
  }

  .manager-story .manager-story__value-list article > b {
    margin-bottom: 18px;
  }

  .manager-story p.manager-story__value-note {
    gap: 16px;
    margin: 0;
    padding: 20px;
  }

  .manager-story p.manager-story__future-result {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    margin: 20px 0 0;
    padding: 20px;
  }

  .manager-story .manager-story__future-result > span {
    width: 44px;
    height: 44px;
  }

  .manager-story p.manager-story__gift-note {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    margin: 20px 0 0;
    padding: 20px;
  }

  .manager-story .manager-story__gift-note > span {
    width: 48px;
    min-height: 48px;
  }
}

/* Confirmation: the final step after the consultation form. */
.confirmation {
  display: grid;
  align-content: start;
  gap: 22px;
  width: min(1040px, calc(100% - 40px));
  min-width: 0;
  margin: 0 auto;
  padding: 10px 0 40px;
  color: #191724;
}

.confirmation h1,
.confirmation h2,
.confirmation h3,
.confirmation p { margin: 0; max-width: none; }
.confirmation h1,
.confirmation h2,
.confirmation h3 { letter-spacing: -.035em; }
.confirmation h2 { font-size: 26px; line-height: 1.2; }
.confirmation h3 { font-size: 17px; line-height: 1.25; }
.confirmation p { font-size: 15px; line-height: 1.5; }
.confirmation ul,
.confirmation ol { margin: 0; padding: 0; list-style: none; }
.confirmation > * { min-width: 0; }

.confirmation__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 30px 40px;
  border-radius: 28px;
  color: #fff;
  background:
    linear-gradient(115deg, rgba(10, 9, 31, .94) 0 44%, rgba(28, 23, 73, .45) 85%),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover,
    #27245f;
}
.confirmation__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #d8ff28;
  color: #141414;
  font-size: 11px;
  font-weight: 600;
}
.confirmation__hero h1 { position: relative; margin: 15px 0 12px; color: #fff; font-size: 48px; line-height: 1.08; }
.confirmation__hero p { position: relative; max-width: 620px; color: #efedf8; font-size: 17px; overflow-wrap: anywhere; }
.confirmation__flower { position: absolute; z-index: -1; width: 110px; height: auto; right: 40px; top: 55px; transform: rotate(12deg); }

.confirmation__consultation { padding: 4px 4px 0; }
.confirmation .confirmation__topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.confirmation__topics li { display: flex; gap: 12px; padding: 18px; border-radius: 18px; background: #eeebff; }
.confirmation__topics li > span { color: #3d3bff; font-size: 12px; font-weight: 600; padding-top: 3px; }
.confirmation__topics p { font-size: 14px; }

.confirmation__program { padding: 28px; border: 1px solid #d6ccf5; border-radius: 26px; background: linear-gradient(125deg, #e8dfff, #ffead5 75%, #e2f3e9); }
.confirmation__program h2 { max-width: 860px; font-size: 30px; }
.confirmation__program h2 > span { color: #3d3bff; }
.confirmation__kicker { display: block; margin-bottom: 10px; color: #30293f; font-size: 12px; line-height: 1.4; font-weight: 600; }
.confirmation .confirmation__intro { max-width: 750px; margin-top: 12px; color: #24202f; }
.confirmation__outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.confirmation__outcomes article { min-width: 0; padding: 18px; border: 1px solid #fff; border-radius: 18px; background: rgba(255,255,255,.8); }
.confirmation__outcome-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 10px; background: #3d3bff; color: #fff; font-size: 22px; font-weight: 600; }
.confirmation__outcomes p { margin-top: 8px; color: #24202f; font-size: 14px; }
.confirmation__learning { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.confirmation__learning > section { min-width: 0; padding: 22px; border-radius: 22px; }
.confirmation__learning h2 { font-size: 22px; }
.confirmation__study { background: #e7f5d3; border: 1px solid #c8dfa7; }
.confirmation .confirmation__format { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; color: #24202f; font-size: 14px; }
.confirmation__format li::before { content: "✓"; margin-right: 6px; color: #3d3bff; }
.confirmation__audience { background: #f0eaff; border: 1px solid #d8ccef; }
.confirmation__audience ul { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.confirmation__audience li { padding: 6px 10px; border-radius: 9px; background: #fff; color: #24202f; font-size: 13px; }

.confirmation__income {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 26px; align-items: center; padding: 24px 28px; border-radius: 24px; color: #fff;
  background:
    linear-gradient(115deg, rgba(10, 9, 31, .94) 0 44%, rgba(28, 23, 73, .45) 85%),
    url("./assets/style-pack/assets/gradients/15_Gradient.webp") center / cover,
    #27245f;
}
.confirmation .confirmation__income h2 { max-width: 370px; color: #fff; font-size: 16px; line-height: 1.4; letter-spacing: -.02em; }
.confirmation__income h2 strong { display: block; margin-bottom: 7px; color: #e5ff84; font-size: 38px; line-height: 1.1; white-space: nowrap; }
.confirmation__income p { color: #fff; font-size: 14px; }
.confirmation__income small { display: block; margin-top: 10px; color: #fff; font-size: 12px; line-height: 1.45; }

.confirmation__terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.confirmation__terms article { min-width: 0; padding: 24px; border-radius: 24px; }
.confirmation__terms h2 { font-size: 22px; }
.confirmation__terms p { margin-top: 14px; font-size: 14px; }
.confirmation__discount { background: radial-gradient(ellipse at 100% 100%, #e3f6a9, transparent 65%), linear-gradient(130deg, #f6d9c0, #ede2fa 70%); }
.confirmation__discount h2 > span { display: block; margin-top: 4px; color: #3d3bff; font-size: 36px; }
.confirmation__price { background: #eeebff; border: 1px solid #cfc5ff; }
.confirmation .confirmation__price-value { margin-top: 16px; color: #3d3bff; font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
.confirmation__price-value span { font-size: 17px; letter-spacing: -.02em; }
.confirmation .confirmation__price-period { margin-top: 6px; font-size: 14px; font-weight: 600; }
.confirmation .confirmation__payment-benefits { display: grid; gap: 8px; margin-top: 16px; padding-left: 16px; list-style: disc; color: #24202f; font-size: 14px; line-height: 1.45; }
.confirmation__employer { border: 1px solid #efc9ac; background: #fff0e3; }
.confirmation__employer p { color: #24202f; }

.confirmation__proof { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; padding: 22px 26px; border: 1px solid #c8ddcf; border-radius: 22px; background: #edf6ef; }
.confirmation__proof h2 { font-size: 23px; }
.confirmation__proof > div > p { margin-top: 9px; color: #24202f; font-size: 12px; }
.confirmation__proof-stat { display: flex; align-items: center; gap: 16px; }
.confirmation__proof-stat strong { color: #3d3bff; font-size: 42px; line-height: 1; letter-spacing: -.045em; }
.confirmation .confirmation__proof-stat p { margin: 0; font-size: 14px; }

.confirmation__closing { display: flex; align-items: flex-start; gap: 14px; padding: 6px 4px; }
.confirmation__closing-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: #eeebff; color: #3d3bff; }
.confirmation__closing h2 { font-size: 22px; }
.confirmation__closing p { margin-top: 7px; font-size: 14px; }
.confirmation .confirmation__prepare { max-width: 700px; color: #302b3b; font-size: 14px; }

@media (max-width: 1000px) {
  .confirmation__outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confirmation__flower { width: 90px; right: 22px; top: 28px; opacity: .55; }
  .confirmation__hero p { max-width: 580px; }
  .confirmation__terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confirmation__employer { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .confirmation { width: calc(100% - 24px); gap: 18px; padding: 0 0 28px; }
  .confirmation h2 { font-size: 23px; }
  .confirmation__hero { padding: 24px 20px; border-radius: 22px; }
  .confirmation__hero h1 { margin: 17px 0 12px; font-size: 34px; }
  .confirmation__hero p { font-size: 15px; }
  .confirmation__flower { top: 14px; right: 12px; width: 48px; opacity: .8; }
  .confirmation .confirmation__topics { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .confirmation__topics li { padding: 13px 14px; border-radius: 14px; }
  .confirmation__program { padding: 20px 16px; border-radius: 22px; }
  .confirmation__kicker { max-width: 240px; }
  .confirmation .confirmation__intro { margin-top: 10px; font-size: 14px; }
  .confirmation__outcomes { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .confirmation__outcomes article { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; }
  .confirmation__outcome-icon { flex: 0 0 30px; height: 30px; margin: 0; font-size: 20px; }
  .confirmation__outcomes h3 { font-size: 16px; }
  .confirmation__outcomes p { margin-top: 5px; }
  .confirmation .confirmation__format { flex-direction: column; gap: 6px; margin-top: 14px; }
  .confirmation__learning { grid-template-columns: 1fr; gap: 12px; }
  .confirmation__learning > section { padding: 18px 16px; border-radius: 20px; }
  .confirmation__learning h2 { font-size: 21px; }
  .confirmation__audience ul { gap: 6px; margin-top: 12px; }
  .confirmation__audience li { padding: 5px 8px; }
  .confirmation__income { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .confirmation__income h2 strong { font-size: 32px; }
  .confirmation__terms { grid-template-columns: 1fr; gap: 12px; }
  .confirmation__terms article { padding: 22px 20px; border-radius: 22px; }
  .confirmation__terms h2 { font-size: 22px; }
  .confirmation__discount h2 > span { font-size: 30px; }
  .confirmation .confirmation__price-value { font-size: 32px; }
  .confirmation__proof { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .confirmation__proof h2 { font-size: 21px; }
  .confirmation__closing { gap: 10px; }
  .confirmation__closing h2 { font-size: 21px; }
}