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

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

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

:root {
  --color-ink: #111111;
  --color-ink-soft: #555555;
  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  --color-surface-soft: #fbfbf8;
  --color-line: #dfdfda;
  --color-primary: #3d3bff;
  --color-primary-hover: #2927d9;
  --color-primary-soft: #eeedff;
  --color-sky: #eaf6ff;
  --color-mint: #dcf4e8;
  --color-coral: #ffc4bd;
  --color-lime: #d8ff54;
  --color-pink-soft: #f7c8ff;
  --color-success: #24734e;
  --color-workspace: #171817;
  --color-workspace-soft: #232421;
  --color-focus: rgba(61, 59, 255, 0.28);
  --color-selected-ring: rgba(61, 59, 255, 0.14);
  --font-sans: "Graphik", Arial, sans-serif;
  --text-display: 58px;
  --text-h1: 46px;
  --text-h2: 36px;
  --text-h3: 26px;
  --text-h4: 21px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-micro: 11px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-line);
  --shadow-soft: 0 14px 34px rgba(17, 17, 17, 0.08);
  --shadow-elevated: 0 22px 60px rgba(17, 17, 17, 0.12);
  --shadow-floating: 0 28px 80px rgba(17, 17, 17, 0.18);
  --motion-fast: 0.16s ease;
  --motion-base: 0.22s ease;
  --motion-slow: 0.35s ease;
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --paper: var(--color-bg);
  --white: var(--color-surface);
  --blue: var(--color-primary);
  --blue-dark: var(--color-primary-hover);
  --blue-soft: var(--color-primary-soft);
  --sky: var(--color-sky);
  --mint: var(--color-mint);
  --coral: var(--color-coral);
  --lime: var(--color-lime);
  --line: var(--color-line);
  --shadow: var(--shadow-elevated);
  --radius: var(--radius-md);
  --content: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.raster-picture {
  display: contents;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 64px;
  padding: 0 var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-bottom: 1px solid rgba(232, 232, 230, 0.7);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.brand img {
  width: 102px;
  display: block;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.topbar__action {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  font-size: var(--text-body-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--motion-fast);
}

.topbar__action:hover {
  color: var(--ink-soft);
}

body:not([data-screen]) .topbar__actions,
body[data-screen="hero"] .topbar__actions {
  visibility: hidden;
  pointer-events: none;
}

.progress {
  position: fixed;
  top: 63px;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 35;
  background: transparent;
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--color-pink-soft), var(--lime));
  transition: width var(--motion-slow);
}

.stage {
  min-height: calc(100vh - 64px);
}

.screen {
  min-height: calc(100vh - 64px);
  padding: 64px max(24px, calc((100vw - var(--content)) / 2));
  animation: screen-in var(--motion-slow) both;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

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

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

h1 {
  max-width: 790px;
  margin-bottom: var(--space-6);
  font-size: var(--text-display);
  line-height: 0.98;
  font-weight: 700;
}

h2 {
  font-size: var(--text-h1);
  line-height: 1.04;
  font-weight: 700;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.14;
  font-weight: 600;
}

.eyebrow,
.panel-label,
.form-kicker {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--blue);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.button {
  min-height: 56px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: transform var(--motion-base), background var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base), color var(--motion-base);
}

.button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.button--primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 12px 26px rgba(61, 59, 255, 0.22);
}

.button--primary:hover:not(:disabled) {
  background: var(--blue-dark);
  box-shadow: 0 16px 34px rgba(61, 59, 255, 0.28);
}

.button--dark {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 12px 26px rgba(17, 17, 17, 0.16);
}

.button--dark:hover:not(:disabled) {
  background: #242424;
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.2);
}

.button--wide {
  width: 100%;
}

.hero-screen {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(430px, 0.9fr) minmax(500px, 1.1fr);
  gap: clamp(28px, 3.4vw, 50px);
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 20%, rgba(238, 237, 255, 0.72), rgba(238, 237, 255, 0) 34%),
    radial-gradient(circle at 92% 76%, rgba(216, 255, 84, 0.2), rgba(216, 255, 84, 0) 26%),
    linear-gradient(90deg, #fbfbf8 0%, #f7fbff 48%, #eef7ff 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 690px;
}

.hero-pills {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-pill {
  min-height: 38px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.07);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.hero-pill::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.78;
}

.hero-time {
  width: max-content;
  margin-bottom: 14px;
  padding: 7px 10px;
  display: block;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--lime);
  font-size: 12px;
  font-weight: 600;
}

.hero-time::before {
  background:
    linear-gradient(currentColor, currentColor) 50% 26% / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 64% 55% / 6px 2px no-repeat;
}

.hero-pills .hero-time {
  margin-bottom: 0;
  display: inline-flex;
}

.hero-pill--free {
  border-color: var(--color-line);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.06);
}

.hero-pill--free::before {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border: 0;
  background: currentColor;
  opacity: 0.5;
}

.hero-copy h1 {
  max-width: 610px;
  font-size: 52px;
}

.hero-title-nowrap {
  white-space: nowrap;
}

.hero-lead {
  max-width: 560px;
  margin-bottom: 24px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.45;
}

.value-list {
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.value-list span {
  min-height: 58px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.56);
  background-blend-mode: screen;
  background-position: center;
  background-size: cover;
  font-size: 15px;
  line-height: 1.18;
}

.value-list span:nth-child(1) {
  background-image: url("assets/style-pack/gradients/04_Gradient.png");
  background-image: image-set(url("assets/style-pack/gradients/04_Gradient.webp") type("image/webp"), url("assets/style-pack/gradients/04_Gradient.png") type("image/png"));
}

.value-list span:nth-child(2) {
  background-image: url("assets/style-pack/gradients/08_Gradient.png");
  background-image: image-set(url("assets/style-pack/gradients/08_Gradient.webp") type("image/webp"), url("assets/style-pack/gradients/08_Gradient.png") type("image/png"));
}

.value-list span:nth-child(3) {
  background-image: url("assets/style-pack/gradients/17_Gradient.png");
  background-image: image-set(url("assets/style-pack/gradients/17_Gradient.webp") type("image/webp"), url("assets/style-pack/gradients/17_Gradient.png") type("image/png"));
}

.value-list b {
  font-weight: 600;
}

.value-list img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.hero-screen .value-list {
  margin-bottom: 28px;
  gap: 14px;
}

.hero-screen .value-list span {
  position: relative;
  min-height: 126px;
  padding: 20px 18px 18px;
  display: grid;
  grid-template-rows: 42px 1fr;
  align-items: start;
  border-color: rgba(17, 17, 17, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18px 18px, rgba(216, 255, 84, 0.34), transparent 30px),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.08);
  font-size: 14px;
  line-height: 1.18;
}

.hero-screen .value-list p {
  margin: 0;
}

.hero-screen .value-list b {
  font-weight: 700;
}

.hero-screen .value-list img {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 50%;
  background: var(--blue-soft);
  box-shadow: 0 8px 18px rgba(61, 59, 255, 0.12);
}

.hero-screen .value-list span:nth-child(2) img {
  background: color-mix(in srgb, var(--coral) 70%, var(--white));
}

.hero-screen .value-list span:nth-child(3) img {
  background: color-mix(in srgb, var(--mint) 76%, var(--white));
}

.hero-copy > small,
.consultation-copy > small {
  display: block;
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 12px;
}

.hero-scene {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.hero-scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(900px, calc(100% + 180px));
  height: 112%;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
  background:
    radial-gradient(ellipse at 26% 72%, rgba(216, 255, 84, 0.24), rgba(216, 255, 84, 0) 35%),
    radial-gradient(ellipse at 80% 40%, rgba(111, 93, 255, 0.24), rgba(111, 93, 255, 0) 42%),
    radial-gradient(ellipse at 58% 22%, rgba(255, 122, 210, 0.15), rgba(255, 122, 210, 0) 38%),
    radial-gradient(ellipse at 72% 78%, rgba(157, 188, 255, 0.16), rgba(157, 188, 255, 0) 44%);
  box-shadow: none;
}

.hero-scene::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 54px;
  bottom: 20px;
  width: 216px;
  height: 216px;
  background: url("designe/hero-dashed-loop.png") center / contain no-repeat;
  background-image: image-set(url("designe/hero-dashed-loop.webp") type("image/webp"), url("designe/hero-dashed-loop.png") type("image/png"));
  pointer-events: none;
  opacity: 0.92;
}

.hero-social-post {
  position: relative;
  z-index: 6;
  isolation: isolate;
  width: min(410px, 70%);
  margin: 12px 70px 0 auto;
  padding: 15px 15px 12px;
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: 24px;
  background: var(--white);
  box-shadow:
    0 34px 82px rgba(17, 17, 17, 0.16),
    0 2px 0 rgba(255, 255, 255, 0.88) inset;
  transform: rotate(4.5deg) translateZ(0);
}

.hero-social-post::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18px -18px -18px 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 22px 54px rgba(61, 59, 255, 0.12);
  transform: rotate(-7deg);
}

.hero-post-header {
  min-height: 38px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.hero-post-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #6f8793 url("cafephotos/identity-logo-cutout.png") center / 124% no-repeat;
  background-image: image-set(url("cafephotos/identity-logo-cutout.webp") type("image/webp"), url("cafephotos/identity-logo-cutout.png") type("image/png"));
  color: transparent;
  font-size: 0;
  font-weight: 600;
  overflow: hidden;
}

.hero-post-header strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-post-header > span:last-child {
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}

.hero-post-image {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 1 / 1.08;
  background: var(--color-surface-soft);
}

.hero-post-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 56%;
}

.hero-post-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  line-height: 1;
}

.hero-post-actions span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: rgba(17, 17, 17, 0.78);
}

.hero-post-actions svg {
  width: 20px;
  height: 20px;
  display: block;
}

.hero-post-actions path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.hero-post-actions span:first-child {
  color: #ef4e49;
}

.hero-post-actions span:first-child path {
  fill: currentColor;
  stroke: currentColor;
}

.hero-post-actions span:last-child {
  margin-left: auto;
}

.hero-social-post p {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.hero-message,
.hero-reaction,
.hero-metric {
  position: absolute;
  z-index: 8;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.12);
}

.hero-message {
  top: 98px;
  left: -34px;
  width: 220px;
  padding: 15px 16px 15px 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-radius: 20px;
  border: 1px solid rgba(61, 59, 255, 0.1);
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(14px);
  transform: rotate(-5deg);
}

.hero-message-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: #ffffff url("designe/anya-avatar.jpg") center 38% / cover no-repeat;
  color: transparent;
  font-size: 0;
  font-weight: 600;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(61, 59, 255, 0.18);
}

.hero-message-avatar::before,
.hero-message-avatar::after {
  content: "";
  display: none;
  position: absolute;
  border-radius: 50%;
}

.hero-message-avatar::before {
  width: 25px;
  height: 22px;
  left: 8px;
  bottom: -5px;
  background: #ffffff;
  border-radius: 12px 12px 4px 4px;
}

.hero-message-avatar::after {
  width: 4px;
  height: 4px;
  top: 16px;
  left: 15px;
  background: #171817;
  box-shadow: 8px 0 0 #171817;
}

.hero-message div {
  min-width: 0;
}

.hero-message p {
  margin: 0;
  font-size: 14px;
  line-height: 1.32;
}

.hero-message p span {
  display: block;
  white-space: nowrap;
}

.hero-reaction {
  top: 144px;
  right: 14px;
  padding: 15px 20px 15px 18px;
  border-radius: 20px 22px 22px 8px;
  background: linear-gradient(135deg, #ff3d52, #ff6b6b);
  color: var(--white);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  box-shadow: 0 22px 48px rgba(255, 61, 82, 0.34);
  transform: rotate(7deg);
}

.hero-reaction::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: inherit;
  transform: rotate(45deg);
}

.hero-reaction-strip {
  position: absolute;
  z-index: 8;
  left: 198px;
  bottom: 4px;
  width: 214px;
  height: 72px;
  min-height: 0;
  padding: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: url("designe/hero-reactions.png") center / contain no-repeat;
  background-image: image-set(url("designe/hero-reactions.webp") type("image/webp"), url("designe/hero-reactions.png") type("image/png"));
  box-shadow: none;
  backdrop-filter: none;
  transform: rotate(8deg);
}

.hero-reaction-strip span {
  display: none;
}

.hero-reaction-strip span:nth-child(4) {
  background: var(--blue);
  color: var(--white);
}

.hero-metric {
  right: -68px;
  bottom: 88px;
  width: 180px;
  height: 142px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("designe/hero-metric-card-tight.png") center / contain no-repeat;
  background-image: image-set(url("designe/hero-metric-card-tight.webp") type("image/webp"), url("designe/hero-metric-card-tight.png") type("image/png"));
  color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-metric span,
.hero-metric strong {
  display: none;
}

.hero-metric span {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.2;
}

.hero-metric strong {
  margin-top: 6px;
  color: var(--blue);
  font-size: 34px;
  line-height: 1;
}

.hero-metric svg {
  display: none;
}

.hero-metric__area {
  fill: rgba(61, 59, 255, 0.08);
}

.hero-metric__line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4.5;
}

.hero-metric__dot {
  fill: currentColor;
}

.hero-scene-accent,
.hero-trajectory,
.hero-dots,
.hero-spiral,
.hero-spark {
  position: absolute;
  display: block;
  pointer-events: none;
}

.hero-scene-accent--lime-blob {
  z-index: 1;
  right: -98px;
  bottom: 62px;
  width: 380px;
  height: 360px;
  border-radius: 0;
  background: url("designe/hero-lime-blob.png") center / contain no-repeat;
  background-image: image-set(url("designe/hero-lime-blob.webp") type("image/webp"), url("designe/hero-lime-blob.png") type("image/png"));
  box-shadow: none;
  transform: rotate(0deg);
}

.hero-scene-accent--plane {
  z-index: 1;
  top: 100px;
  right: -40px;
  width: 356px;
  height: 368px;
  border-radius: 0;
  background: url("designe/hero-purple-blur.png") center / contain no-repeat;
  background-image: image-set(url("designe/hero-purple-blur.webp") type("image/webp"), url("designe/hero-purple-blur.png") type("image/png"));
  box-shadow: none;
  transform: none;
}

.hero-spiral {
  z-index: 5;
  bottom: 152px;
  left: -44px;
  width: 230px;
  height: 144px;
  overflow: visible;
  background: url("designe/hero-spiral.png") center / contain no-repeat;
  background-image: image-set(url("designe/hero-spiral.webp") type("image/webp"), url("designe/hero-spiral.png") type("image/png"));
  filter: none;
  transform: rotate(-9deg);
}

.hero-spiral * {
  display: none;
}

.hero-spiral__shadow,
.hero-spiral__tube,
.hero-spiral__shine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-spiral__shadow {
  stroke: rgba(119, 151, 21, 0.28);
  stroke-width: 27;
  transform: translate(7px, 10px);
}

.hero-spiral__tube {
  stroke: url("#heroSpiralTube");
  stroke-width: 25;
}

.hero-spiral__shine {
  opacity: 0.82;
  stroke: rgba(255, 255, 255, 0.58);
  stroke-width: 5;
}

.hero-trajectory {
  z-index: 7;
  top: 178px;
  left: 54px;
  width: 144px;
  height: 94px;
  overflow: visible;
  background: url("designe/hero-arrow.png") center / contain no-repeat;
  background-image: image-set(url("designe/hero-arrow.webp") type("image/webp"), url("designe/hero-arrow.png") type("image/png"));
  color: var(--blue);
  filter: none;
  opacity: 1;
  transform: none;
}

.hero-trajectory * {
  display: none;
}

.hero-trajectory__line,
.hero-trajectory__arrow {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.hero-dots {
  z-index: 2;
  left: 72px;
  bottom: 230px;
  width: 122px;
  height: 116px;
  opacity: 0.78;
  background: url("designe/hero-dots.png") center / contain no-repeat;
  background-image: image-set(url("designe/hero-dots.webp") type("image/webp"), url("designe/hero-dots.png") type("image/png"));
  transform: none;
}

.hero-spark {
  z-index: 4;
  right: -20px;
  top: 46px;
  width: 104px;
  height: 104px;
  overflow: visible;
  background: url("designe/hero-star.png") center / contain no-repeat;
  background-image: image-set(url("designe/hero-star.webp") type("image/webp"), url("designe/hero-star.png") type("image/png"));
  filter: none;
  transform: rotate(0deg);
}

.hero-spark * {
  display: none;
}

.hero-spark__shadow path,
.hero-spark__rays path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-spark__shadow {
  opacity: 0.35;
  transform: translate(5px, 7px);
}

.hero-spark__shadow path {
  stroke: #201cad;
  stroke-width: 11;
}

.hero-spark__rays path {
  stroke: url("#heroSparkRay");
  stroke-width: 10;
}

.hero-spark__core {
  fill: #4f4cff;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 2;
}

.scene-window {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  margin: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
  transform: rotate(2deg);
}

.window-bar {
  height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f1f1ed;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.window-bar i,
.window-lights i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #ff6b63;
}

.window-bar i:nth-child(2),
.window-lights i:nth-child(2) { background: #f5bb3d; }
.window-bar i:nth-child(3),
.window-lights i:nth-child(3) { background: #38be62; }
.window-bar b { margin-left: 7px; font-weight: 400; color: var(--ink-soft); }

.scene-chat {
  padding: 30px 24px 18px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.scene-chat .bubble {
  max-width: 82%;
}

.scene-brief {
  margin: 12px 24px 28px;
  padding: 24px;
  background: var(--blue-soft);
  border: 1px solid #d6d4ff;
  border-radius: var(--radius);
}

.scene-brief > span {
  display: block;
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 11px;
  text-transform: uppercase;
}

.scene-brief > strong {
  display: block;
  font-size: 28px;
  line-height: 1.1;
}

.scene-brief > div {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scene-brief b {
  padding: 7px 10px;
  border-radius: 4px;
  background: var(--white);
  font-size: 11px;
  font-weight: 400;
}

.onboarding-screen {
  display: flex;
  justify-content: center;
  background: var(--sky);
}

.onboarding-card {
  width: min(920px, 100%);
  padding: 44px 0;
}

.onboarding-card h2 {
  max-width: 900px;
  margin-bottom: 24px;
  font-size: 64px;
  line-height: 1.02;
}

.onboarding-card > p {
  max-width: 820px;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1.5;
}

.onboarding-form {
  max-width: 760px;
  margin-top: 58px;
  display: grid;
  gap: 14px;
}

.onboarding-form label {
  display: grid;
  gap: 10px;
  color: var(--ink);
  font-size: 18px;
}

.onboarding-form input,
.access-field input {
  width: 100%;
  min-height: 62px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  text-transform: none;
  outline: 0;
}

.onboarding-form input:focus,
.access-field input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(61,59,255,0.12);
}

.access-field {
  display: grid;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 11px;
  text-transform: uppercase;
}

.access-screen {
  display: grid;
  place-items: center;
  background: var(--sky);
}

.access-device {
  width: min(820px, 100%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.access-bar {
  min-height: 68px;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #f4f4f1;
}

.access-bar > div:last-child {
  justify-self: center;
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  column-gap: 9px;
}

.access-bar b,
.access-bar small { grid-column: 2; }
.access-bar b { font-size: 13px; }
.access-bar small { color: var(--ink-soft); font-size: 10px; }

.access-avatar {
  width: 34px;
  height: 34px;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: #ffffff url("designe/anya-avatar.jpg") center 38% / cover no-repeat;
  color: transparent;
  font-size: 0;
  font-weight: 600;
  overflow: hidden;
}

.access-chat {
  min-height: 250px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.access-message {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}

.access-message p {
  width: max-content;
  max-width: 72%;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid #d6e8ff;
  border-radius: 16px 16px 16px 5px;
  background: #eaf3ff;
  font-size: 16px;
  line-height: 1.45;
}

.access-form {
  padding: 24px 36px 30px;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  background: #fbfbf8;
}

.consent-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.consent-option input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--blue);
}

.consent-option u {
  color: var(--blue);
  text-underline-offset: 2px;
}

.access-form > small {
  color: var(--ink-soft);
  font-size: 10px;
}

.quiz-screen {
  display: grid;
  align-items: center;
  background: var(--sky);
}

.quiz-wrap {
  width: min(760px, 100%);
  margin: 0 auto;
  display: block;
}

.quiz-heading {
  margin-bottom: 28px;
  padding-top: 0;
}

.quiz-heading h2 {
  margin-bottom: 12px;
}

.quiz-heading p {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}

.quiz-options {
  display: grid;
  gap: 12px;
}

.quiz-option {
  width: 100%;
  min-height: 62px;
  padding: 15px 18px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.quiz-option:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(61, 59, 255, 0.08);
}

.quiz-option.selected {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 2px rgba(61, 59, 255, 0.1);
}

.quiz-option b {
  color: var(--blue);
  text-align: right;
}

.radio-dot {
  width: 20px;
  height: 20px;
  border: 1.5px solid #a8a8a2;
  border-radius: 50%;
}

.quiz-option:hover .radio-dot {
  border: 6px solid var(--blue);
}

.quiz-option.selected .radio-dot {
  border: 6px solid var(--blue);
}

body.has-quiz-popup {
  overflow: hidden;
}

.quiz-feedback-overlay {
  position: fixed;
  z-index: 300;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.quiz-feedback-overlay.is-visible {
  opacity: 1;
}

.quiz-feedback-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.68);
  backdrop-filter: blur(6px);
}

.quiz-feedback-popup {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  padding: 34px;
  position: relative;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(17,17,17,0.24);
  transform: translateY(14px);
  transition: transform 0.18s ease;
}

.quiz-feedback-overlay.is-visible .quiz-feedback-popup {
  transform: translateY(0);
}

.feedback-mark {
  width: 54px;
  height: 54px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
}

.feedback-mark img {
  width: 32px;
  height: 32px;
}

.quiz-feedback-popup .eyebrow {
  color: var(--blue);
}

.quiz-feedback-popup h2 {
  margin-bottom: 12px;
  font-size: 34px;
}

.quiz-feedback-popup > p {
  margin-bottom: 26px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.5;
}

.insight-screen {
  display: grid;
  place-items: center;
  background: var(--paper);
}

.insight-card {
  width: min(620px, 100%);
  padding: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.insight-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 38px;
}

.insight-card h2 {
  margin-bottom: 16px;
}

.insight-card p {
  margin-bottom: 30px;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1.45;
}

.answer-analysis-screen {
  display: grid;
  place-items: center;
  background: var(--sky);
}

.answer-analysis-card {
  width: min(720px, 100%);
  padding: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.answer-analysis-card h2 {
  max-width: 560px;
  margin-bottom: 16px;
  font-size: 52px;
}

.answer-analysis-card > p {
  max-width: 570px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.5;
}

.answer-analysis-loader {
  height: 8px;
  margin: 38px 0 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.answer-analysis-loader i {
  display: block;
  border-radius: 2px;
  background: #dce4e8;
  animation: answerLoader 1.25s ease-in-out infinite;
}

.answer-analysis-loader i:nth-child(1) { background: var(--blue); animation-delay: 0s; }
.answer-analysis-loader i:nth-child(2) { background: #76c8ff; animation-delay: 0.12s; }
.answer-analysis-loader i:nth-child(3) { background: var(--lime); animation-delay: 0.24s; }
.answer-analysis-loader i:nth-child(4) { background: #f6c85f; animation-delay: 0.36s; }

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

.answer-analysis-status span {
  min-height: 74px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #42423f;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.48;
  transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease;
}

.answer-analysis-status i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dce4e8;
  color: var(--ink);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.answer-analysis-status span.is-active {
  border-color: #9ab0ff;
  background: #f3f6ff;
  opacity: 1;
}

.answer-analysis-status span.is-active i {
  background: var(--blue);
  animation: answerPulse 0.55s ease-in-out infinite alternate;
}

.answer-analysis-status span.is-complete {
  border-color: #cfe2a4;
  background: #f7fbe9;
  opacity: 1;
}

.answer-analysis-status span.is-complete i {
  background: var(--lime);
  animation: none;
}

.answer-analysis-status span.is-complete i::after { content: "✓"; }

.answer-analysis-ready {
  min-height: 28px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #3f5e06;
  opacity: 0;
  transform: translateY(4px);
  visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease;
}

.answer-analysis-ready i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  font-style: normal;
  font-weight: 700;
}

.answer-analysis-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.answer-analysis-card.is-ready .answer-analysis-loader i {
  opacity: 1;
  transform: scaleX(1);
  animation-play-state: paused;
}

@keyframes answerLoader {
  0%, 100% { opacity: 0.3; transform: scaleX(0.92); }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes answerPulse {
  from { opacity: 0.25; transform: scale(0.75); }
  to { opacity: 1; transform: scale(1); }
}

.transition-screen {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--white);
}

.transition-copy {
  width: min(920px, 100%);
  text-align: center;
}

.transition-copy .eyebrow {
  color: var(--lime);
}

.transition-copy h2 {
  margin-bottom: 20px;
  font-size: 58px;
}

.transition-copy > p {
  max-width: 690px;
  margin: 0 auto 42px;
  color: #c9c9c5;
  font-size: 19px;
  line-height: 1.5;
}

.task-track {
  margin-bottom: 42px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid #393936;
  border-radius: var(--radius);
  overflow: hidden;
}

.task-track span {
  min-height: 110px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-right: 1px solid #393936;
  color: #d6d6d2;
  font-size: 13px;
}

.task-track span:last-child { border-right: 0; }
.task-track b { color: var(--lime); font-size: 22px; }

.workday-screen {
  display: flex;
  align-items: center;
  background: #f4f8ff;
  color: var(--ink);
}

.workday-intro {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.workday-heading {
  max-width: 760px;
  margin-bottom: 30px;
}

.workday-welcome {
  margin-bottom: 14px;
  display: block;
  color: var(--blue);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workday-heading h2 {
  max-width: 740px;
  margin-bottom: 16px;
  color: var(--ink);
  font-size: 56px;
  line-height: 1;
}

.workday-heading > p {
  max-width: 720px;
  margin-bottom: 0;
  color: #5b5b60;
  font-size: 18px;
  line-height: 1.48;
}

.workday-project {
  width: 100%;
  max-width: 1040px;
  margin-bottom: 20px;
  padding: 22px 28px;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #e3f58f;
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.1);
}

.workday-project::after {
  content: "";
  width: 150px;
  height: 150px;
  position: absolute;
  right: -48px;
  bottom: -92px;
  border-radius: 50%;
  background: var(--coral);
}

.workday-project > span {
  width: max-content;
  margin-bottom: 14px;
  display: block;
  padding: 8px 12px;
  position: relative;
  z-index: 1;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workday-project > div {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.workday-project h3 {
  margin: 0 0 6px;
  color: inherit;
  font-size: 27px;
  line-height: 1.12;
}

.workday-project p {
  max-width: 680px;
  margin: 0;
  color: rgba(17, 17, 17, 0.72);
  font-size: 15px;
  line-height: 1.4;
}

.workday-process {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #cbdbe6;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.62);
}

.workday-process span {
  min-height: 64px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-right: 1px solid #cbdbe6;
  font-size: 12px;
}

.workday-process span:last-child { border-right: 0; }
.workday-process b { color: var(--blue); font-size: 16px; }

.workday-task-grid {
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.workday-task-grid article {
  min-height: 148px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.05);
}

.workday-task-grid article:nth-child(1) { background: #e8e8ff; }
.workday-task-grid article:nth-child(2) { background: #ffe4d7; }
.workday-task-grid article:nth-child(3) { background: #dff3e7; }

.workday-task-grid article > div {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.workday-task-grid article > div b {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.workday-task-grid img {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.62);
  object-fit: contain;
}

.workday-task-grid h3 {
  max-width: 310px;
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.16;
}

.workday-task-grid p {
  margin: 0;
  color: #4a4a50;
  font-size: 14px;
  line-height: 1.48;
}

.workday-footer {
  max-width: 1040px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.workday-footer p {
  max-width: 650px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.workday-footer .button {
  flex: 0 0 auto;
  min-width: 0;
  padding-right: 24px;
  padding-left: 24px;
}

.messenger-screen {
  background: var(--sky);
}

.messenger {
  width: min(820px, 100%);
  min-height: calc(100vh - 176px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.messenger-screen--with-task .messenger {
  min-height: calc(100vh - 286px);
}

.messenger-task-card {
  width: min(820px, 100%);
  min-height: 92px;
  margin: 0 auto 18px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  border: 2px solid rgba(17, 17, 17, 0.14);
  border-radius: 22px;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 18px 46px rgba(17, 17, 17, 0.16);
}

.messenger-task-card span {
  color: var(--lime);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.messenger-task-card strong {
  max-width: 620px;
  font-size: 28px;
  line-height: 1.08;
}

.messenger-bar {
  position: relative;
  min-height: 62px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #f4f4f1;
}

.window-lights {
  display: flex;
  gap: 6px;
}

.mentor {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
}

.mentor-avatar,
.avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: #ffffff url("designe/anya-avatar.jpg") center 38% / cover no-repeat;
  color: transparent;
  font-size: 0;
  font-weight: 600;
  overflow: hidden;
}

.mentor--client .mentor-avatar,
.avatar--client {
  background: #ffffff url("designe/oleg-avatar.jpg") center 42% / cover no-repeat;
  color: transparent;
  font-size: 0;
}

.mentor div {
  display: grid;
  gap: 2px;
}

.mentor b { font-size: 13px; }
.mentor small { color: var(--ink-soft); font-size: 10px; }

.task-kicker {
  color: var(--ink-soft);
  font-size: 11px;
}

.message-feed {
  flex: 1;
  min-height: 260px;
  max-height: 430px;
  overflow-y: auto;
  padding: 28px 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
}

.message-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}

[data-chat-message][hidden],
[data-messenger-typing][hidden],
[data-messenger-action][hidden] {
  display: none !important;
}

.message-row.is-message-visible,
.access-message.is-message-visible {
  animation: messenger-message-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes messenger-message-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.message-row--me {
  justify-content: flex-end;
}

.bubble {
  width: max-content;
  max-width: 78%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.42;
}

.bubble.them {
  border: 1px solid #d6e8ff;
  background: #eaf3ff;
  border-bottom-left-radius: 5px;
}

.client-bubble {
  border: 1px solid #cfe3d8;
  background: #edf7f1 !important;
}

.bubble.me {
  background: var(--blue);
  color: var(--white);
  border-bottom-right-radius: 5px;
}

.message-row--ai {
  padding: 8px 0 8px 43px;
  align-items: flex-start;
}

.ai-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  font-size: 10px;
  font-weight: 600;
}

.bubble.ai {
  border: 1px solid #bee4d1;
  border-radius: 6px;
  background: #f2fbf7;
  white-space: pre-line;
}

.bubble.ai small {
  display: block;
  margin-bottom: 6px;
  color: #22764d;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.bubble.ai.ai-note {
  border-color: #d7d6ff;
  background: var(--blue-soft);
  white-space: normal;
}

.bubble.ai.ai-note small {
  color: var(--blue);
}

.messenger-typing {
  min-height: 38px;
}

.typing-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: #ffffff url("designe/anya-avatar.jpg") center 38% / cover no-repeat;
  color: transparent;
  font-size: 0;
  font-weight: 600;
  overflow: hidden;
}

.messenger-typing--client .typing-avatar {
  background: #ffffff url("designe/oleg-avatar.jpg") center 42% / cover no-repeat;
  color: transparent;
  font-size: 0;
}

.messenger-typing--ai .typing-avatar {
  background: var(--mint);
  border: 0;
  color: var(--ink);
  font-size: 9px;
}

.typing-bubble {
  min-width: 62px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.typing-bubble i {
  width: 6px;
  height: 6px;
  margin: 0 2px;
  display: block;
  border-radius: 50%;
  background: #7f8581;
  animation: messenger-typing-dot 1.1s infinite;
}

.typing-bubble i:nth-child(2) { animation-delay: 0.14s; }
.typing-bubble i:nth-child(3) { animation-delay: 0.28s; }

@keyframes messenger-typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.action-panel {
  padding: 20px 28px 28px;
  border-top: 1px solid var(--line);
  background: #fbfbf8;
}

.action-panel.is-action-visible,
.access-form.is-action-visible {
  animation: messenger-action-in 0.35s ease both;
}

@keyframes messenger-action-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.brief-dialog-prompt {
  margin-bottom: 14px;
  padding: 14px 16px;
  display: grid;
  gap: 5px;
  border-left: 6px solid #93a765;
  border-radius: 6px;
  background: #181b19;
  color: var(--white);
  box-shadow: 0 8px 20px rgba(24, 27, 25, 0.13);
}

.brief-dialog-prompt span {
  color: #b9c99a;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.brief-dialog-prompt strong {
  font-size: 16px;
  line-height: 1.3;
}

.brief-dialog-ready {
  margin-bottom: 14px;
  display: grid;
  gap: 4px;
}

.brief-dialog-ready span {
  color: #285b47;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.brief-dialog-ready p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

.panel-label {
  margin-bottom: 10px;
  color: var(--ink-soft);
  font-size: 11px;
}

.choice-panel,
.channel-picks,
.metric-actions {
  display: grid;
  gap: 8px;
}

.choice-row {
  width: 100%;
  min-height: 52px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.choice-row:hover,
.choice-row.selected {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.choice-row b {
  color: var(--blue);
  text-align: center;
}

.brief-result {
  margin-bottom: 14px;
  padding: 20px;
  border-left: 4px solid var(--blue);
  border-radius: 0 6px 6px 0;
  background: var(--blue-soft);
}

.brief-result span {
  display: block;
  margin-bottom: 9px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.brief-result strong {
  display: block;
  font-size: 21px;
  line-height: 1.28;
}

.brief-result p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.brand-brief-screen {
  background: var(--paper);
}

.neighborhood-brand-screen {
  background-color: #edf2ed;
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}

.brand-brief-editorial {
  width: min(var(--content), 100%);
  margin: 0 auto;
}

.neighborhood-brand-hero {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 12px 12px 0 rgba(17, 17, 17, 0.12);
}

.neighborhood-wordmark {
  min-height: 370px;
  padding: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}

.neighborhood-wordmark::before {
  content: "";
  width: 180px;
  height: 180px;
  position: absolute;
  right: -58px;
  top: -58px;
  border: 42px solid #f25f3a;
  border-radius: 50%;
}

.neighborhood-wordmark::after {
  content: "";
  width: 126px;
  height: 22px;
  position: absolute;
  right: 26px;
  bottom: 30px;
  background: var(--lime);
  transform: rotate(-9deg);
}

.brand-file-label {
  position: relative;
  z-index: 1;
  color: #b9b9b4;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.brand-wordmark {
  margin: auto 0;
  position: relative;
  z-index: 1;
  font-size: 68px;
  font-weight: 600;
  line-height: 0.82;
  text-transform: lowercase;
}

.brand-location {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 11px auto 1fr;
  align-items: center;
  gap: 8px;
}

.brand-location i {
  width: 11px;
  height: 11px;
  border: 3px solid var(--lime);
  border-radius: 50%;
}

.brand-location b {
  font-size: 14px;
}

.brand-location span {
  color: #b9b9b4;
  font-size: 10px;
}

.neighborhood-brief-copy {
  min-height: 370px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  background: var(--lime);
}

.neighborhood-brief-copy .eyebrow {
  color: #474700;
}

.neighborhood-brief-copy h2 {
  max-width: 680px;
  margin-bottom: 18px;
  font-size: 52px;
}

.neighborhood-brief-copy > p {
  max-width: 660px;
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1.45;
}

.brand-core-idea {
  margin-top: auto;
  padding: 15px 17px;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-left: 5px solid #f25f3a;
  background: var(--white);
}

.brand-core-idea small {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.brand-core-idea strong {
  font-size: 17px;
  line-height: 1.25;
}

.district-route {
  min-height: 54px;
  margin: 18px 0;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.district-route span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.district-route i {
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 50%;
  background: var(--blue);
}

.district-route span:nth-of-type(2) i { background: #f25f3a; }
.district-route span:nth-of-type(3) i { background: #26794c; }
.district-route span:nth-of-type(4) i { background: #ba477f; }
.district-route b { color: #8b8b86; font-size: 16px; }

.brand-world-section,
.brand-opening-section {
  padding: 26px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: #f9faf6;
}

.brand-opening-section {
  margin-top: 18px;
}

.brand-section-heading {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.brand-section-heading > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-size: 10px;
  font-weight: 600;
}

.brand-section-heading small {
  display: block;
  margin-bottom: 2px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.brand-section-heading h3 {
  margin: 0;
  font-size: 28px;
}

.brand-channels {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-channels small {
  margin: 0 5px 0 0;
}

.brand-channels b {
  padding: 7px 9px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--white);
  font-size: 10px;
}

.brand-story-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(340px, 0.95fr) 190px;
  gap: 10px;
}

.brand-life-scene,
.brand-photo-pair figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.brand-life-scene {
  min-height: 394px;
}

.brand-life-scene img,
.brand-photo-pair img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.brand-life-scene::after,
.brand-photo-pair figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 50%;
  background: linear-gradient(transparent, rgba(17, 17, 17, 0.78));
}

.brand-life-scene::before {
  content: "пара кварталов";
  padding: 9px 13px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 54%;
  background: var(--lime);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
  transform: rotate(-2deg);
}

.brand-life-scene figcaption {
  padding: 22px;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--white);
}

.brand-life-scene figcaption span,
.brand-life-scene figcaption b {
  display: block;
}

.brand-life-scene figcaption span {
  margin-bottom: 8px;
  color: var(--lime);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.brand-life-scene figcaption b {
  font-size: 25px;
}

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

.brand-traits-grid article {
  min-height: 193px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.brand-traits-grid article:nth-child(1) { background: var(--lime); }
.brand-traits-grid article:nth-child(2) { background: #ffd8cf; }
.brand-traits-grid article:nth-child(3) { background: #dcecff; }
.brand-traits-grid article:nth-child(4) { background: #dff1e4; }

.brand-traits-grid small {
  color: #474743;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.brand-traits-grid b {
  font-size: 17px;
  line-height: 1.2;
}

.brand-photo-pair {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.brand-photo-pair figure {
  min-height: 192px;
}

.brand-photo-pair span {
  position: absolute;
  z-index: 1;
  left: 12px;
  right: 12px;
  bottom: 12px;
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
}

.brand-formula {
  margin-top: 10px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
}

.brand-formula i {
  color: var(--lime);
  font-size: 16px;
  font-style: normal;
}

.opening-poster-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.opening-poster-grid article {
  min-height: 132px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--ink);
  border-radius: 6px;
}

.opening-poster-grid article:nth-child(1) { background: #dcecff; }
.opening-poster-grid article:nth-child(2) { background: var(--lime); }
.opening-poster-grid article:nth-child(3) { background: #ffd8cf; }
.opening-poster-grid article:nth-child(4) { background: #f8d8e8; }

.opening-poster-grid i {
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.opening-poster-grid b {
  max-width: 220px;
  font-size: 17px;
  line-height: 1.22;
}

.brand-smm-note {
  margin-top: 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-radius: 6px;
  background: var(--blue);
  color: var(--white);
}

.brand-smm-note span {
  color: #d9d8ff;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.brand-smm-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.brand-brief-next {
  margin: 20px 0 0 auto;
}

.brand-card-brief-screen {
  padding: 24px max(20px, calc((100vw - 1120px) / 2)) 42px;
  background: var(--sky);
}

.brand-card-brief {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.brand-card-task {
  position: static;
  z-index: 4;
  min-height: 88px;
  margin-bottom: 16px;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  border-radius: 24px;
  background: var(--color-workspace);
  color: var(--white);
  box-shadow: 0 24px 54px rgba(61, 59, 255, 0.08);
}

.brand-card-task span {
  color: var(--lime);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-card-task strong {
  max-width: 800px;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.07;
  font-weight: 700;
}

.brand-card-shell {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-soft);
}

.brand-card-progress {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.brand-card-progress span {
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.brand-card-progress div {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.brand-card-progress i {
  width: 25%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--blue);
  transition: width var(--motion-base);
}

.brand-info-card {
  min-height: 500px;
  display: none;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.78fr);
  gap: 18px;
}

.brand-info-card.is-active {
  display: grid;
  animation: brandCardIn var(--motion-base) both;
}

.brand-info-card--photo {
  grid-template-columns: minmax(260px, 0.65fr) minmax(480px, 1.2fr);
}

@keyframes brandCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.brand-info-copy,
.brand-card-side,
.brand-audience-stack,
.brand-identity-board,
.brand-photo-board,
.brand-visual-board {
  border-radius: 24px;
}

.brand-info-copy {
  padding: clamp(28px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
}

.brand-card-kicker {
  margin-bottom: 20px;
  display: block;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-info-copy h2 {
  max-width: 620px;
  margin: 0 0 20px;
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1.05;
  font-weight: 700;
}

.brand-info-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.45;
}

.brand-audience-list {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brand-audience-list span {
  min-height: 58px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  border-radius: 14px;
  background: var(--color-surface-soft);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.brand-audience-list span:nth-child(1) { background: color-mix(in srgb, var(--coral) 28%, var(--white)); }
.brand-audience-list span:nth-child(2) { background: var(--blue-soft); }
.brand-audience-list span:nth-child(3) { background: color-mix(in srgb, var(--mint) 46%, var(--white)); }
.brand-audience-list span:nth-child(4) { background: color-mix(in srgb, var(--lime) 26%, var(--white)); }

.brand-card-note {
  margin-top: 24px;
  padding: 16px 18px;
  border-left: 7px solid color-mix(in srgb, var(--coral) 66%, var(--color-workspace));
  border-radius: 16px;
  background: var(--color-surface-soft);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.brand-card-highlights {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}

.brand-card-note--fact {
  min-height: 78px;
  margin-top: 0;
  display: grid;
  gap: 10px;
  font-weight: 600;
}

.brand-card-note--fact b {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
}

.brand-card-note--fact span {
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}

.brand-card-side {
  overflow: hidden;
  background: var(--color-workspace);
}

.brand-card-side figure {
  height: 100%;
  min-height: 500px;
  margin: 0;
}

.brand-card-side img,
.brand-visual-board img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.brand-card-facts {
  padding: 18px;
  display: grid;
  gap: 8px;
}

.brand-card-facts span {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #e8e8e4;
  font-size: 14px;
  line-height: 1.36;
}

.brand-card-facts b,
.brand-audience-stack b {
  margin-bottom: 5px;
  display: block;
  color: var(--lime);
  font-size: 13px;
}

.brand-audience-stack {
  min-height: 500px;
  padding: 22px;
  display: grid;
  align-content: center;
  gap: 14px;
  border: 2px solid rgba(17, 17, 17, 0.06);
  background: var(--white);
  box-shadow: 0 22px 46px rgba(17, 17, 17, 0.07);
}

.brand-audience-stack div {
  min-height: 90px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  border: 2px solid rgba(17, 17, 17, 0.06);
  border-left: 8px solid color-mix(in srgb, var(--coral) 66%, var(--color-workspace));
  border-radius: 18px;
  background: var(--color-surface-soft);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.04);
}

.brand-audience-stack div:nth-child(2) {
  border-left-color: var(--blue);
  background: var(--blue-soft);
}

.brand-audience-stack div:nth-child(3) {
  border-left-color: color-mix(in srgb, var(--mint) 45%, var(--color-workspace));
  background: color-mix(in srgb, var(--mint) 42%, var(--white));
}

.brand-audience-stack div:nth-child(4) {
  border-left-color: color-mix(in srgb, var(--lime) 55%, var(--color-workspace));
  background: color-mix(in srgb, var(--lime) 30%, var(--white));
}

.brand-audience-stack b {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.12;
}

.brand-audience-stack span {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.32;
}

.brand-audience-stack.brand-voice-card {
  min-height: 0;
  padding: 42px;
  align-self: center;
  align-content: center;
  gap: 16px;
  border-color: rgba(17, 17, 17, 0.06);
  background: var(--blue-soft);
}

.brand-voice-card > h3 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
}

.brand-voice-card > strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.brand-voice-card > p {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

.brand-visual-board {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  background: var(--color-workspace);
}

.brand-color-strip {
  margin-top: 30px;
  padding: 26px 28px 30px;
  min-height: 238px;
  display: grid;
  align-content: center;
  gap: 22px;
  border-left: 7px solid color-mix(in srgb, var(--coral) 66%, var(--color-workspace));
  border-radius: 16px;
  background: var(--color-surface-soft);
}

.brand-color-strip span {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.brand-color-strip div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  justify-items: center;
}

.brand-color-strip i {
  width: min(88px, 100%);
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 50%;
  background: var(--swatch);
}

.brand-identity-board {
  align-self: center;
  height: 500px;
  min-height: 500px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-rows: 220px minmax(220px, 1fr);
  gap: 14px;
  border: 2px solid rgba(17, 17, 17, 0.08);
  background: color-mix(in srgb, var(--coral) 20%, var(--color-surface-soft));
}

.brand-identity-tile {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(17, 17, 17, 0.06);
  border-radius: 22px;
  background-color: color-mix(in srgb, var(--color-surface-soft) 82%, var(--coral));
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.06);
}

.brand-identity-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.2));
  pointer-events: none;
}

.brand-identity-tile span {
  min-height: 31px;
  padding: 7px 12px;
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.08);
}

.brand-identity-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.brand-identity-tile--logo {
  height: 100%;
  aspect-ratio: auto;
  align-self: stretch;
  width: 100%;
  max-width: none;
  border-radius: 50%;
}

.brand-identity-tile--logo,
.brand-identity-tile--type {
  height: 100%;
  padding: 0 0 34px;
  grid-template-rows: minmax(0, 1fr);
  overflow: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.brand-identity-tile--logo::after,
.brand-identity-tile--type::after {
  display: none;
}

.brand-identity-tile--logo span,
.brand-identity-tile--type span {
  margin: 0;
  min-height: 0;
  padding: 0;
  position: absolute;
  left: 50%;
  bottom: 2px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  transform: translateX(-50%);
}

.brand-identity-tile--type {
  padding: 0 0 34px;
}

.brand-identity-tile--logo img,
.brand-identity-tile--type img {
  object-position: center bottom;
}

.brand-identity-tile--type img {
  transform: translateY(-10px);
}

.brand-identity-tile--people {
  grid-column: 1 / 3;
  min-height: 215px;
  padding: 24px 36px 18px;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 14px;
  align-items: end;
  justify-items: stretch;
}

.brand-identity-person {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.brand-identity-person--main {
  grid-column: 2;
  grid-row: 1;
}

.brand-identity-person--extra {
  grid-column: 1;
  grid-row: 1;
}

.brand-identity-person img {
  max-width: 100%;
}

.brand-identity-tile--people img {
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-identity-people-main {
  max-width: 178px;
  max-height: 180px;
}

.brand-identity-people-extra {
  max-width: 136px;
  max-height: 170px;
}

.brand-identity-tile--people span {
  top: 14px;
  bottom: auto;
}

.brand-photo-board {
  min-height: 500px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.02fr 0.98fr;
  gap: 10px;
  background: var(--white);
  box-shadow: 0 22px 46px rgba(17, 17, 17, 0.07);
}

.brand-photo-board figure {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-surface-soft);
}

.brand-photo-board__wide {
  grid-column: 1 / 3;
}

.brand-photo-board img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.brand-photo-board figure:nth-child(2) img {
  object-position: center 48%;
}

.brand-photo-board figure:nth-child(3) img {
  object-position: 66% 48%;
}

.brand-visual-board figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

.brand-visual-board figure:first-child {
  grid-row: 1 / 3;
}

.brand-visual-palette {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  border-radius: 18px;
  background: var(--color-workspace);
}

.brand-visual-palette i:nth-child(1) { background: var(--mint); }
.brand-visual-palette i:nth-child(2) { background: var(--coral); }
.brand-visual-palette i:nth-child(3) { background: var(--sky); }
.brand-visual-palette i:nth-child(4) { background: color-mix(in srgb, var(--lime) 50%, var(--white)); }

.brand-visual-palette b {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--white);
  font-size: 52px;
  transform: translate(-50%, -50%);
  text-shadow: 0 2px 22px rgba(17, 17, 17, 0.4);
}

.brand-card-controls {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 240px;
  gap: 18px;
  align-items: center;
}

.brand-card-controls .button {
  min-width: 0;
}

.brand-card-controls .button--ghost {
  background: #ececeb;
  color: var(--ink);
  box-shadow: none;
}

.brand-card-controls .button--primary {
  grid-column: 3;
  width: 100%;
}

.clear-brand-brief {
  width: min(var(--content), 100%);
  margin: 0 auto;
}

.clear-main-heading {
  max-width: 930px;
  margin-bottom: 20px;
}

.clear-main-heading h2 {
  margin: 0;
  font-size: 51px;
}

.clear-brief-hero {
  display: grid;
  grid-template-columns: minmax(520px, 2fr) minmax(260px, 1fr);
  overflow: hidden;
  border: 1px solid #1b211d;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 10px 10px 0 rgba(27, 33, 29, 0.12);
}

.clear-brand-media {
  min-height: 250px;
  position: relative;
  overflow: hidden;
  background: #181b19;
}

.clear-brand-mark {
  width: 112px;
  height: 112px;
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: #181b19;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.clear-brand-symbol {
  width: 80px;
  height: 80px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  transform: rotate(-3deg);
}

.clear-brand-symbol i {
  display: block;
  border-radius: 4px;
}

.clear-brand-symbol i:nth-child(1) { background: #d9e7dc; }
.clear-brand-symbol i:nth-child(2) { background: #d6684f; }
.clear-brand-symbol i:nth-child(3) { background: #4b7187; }
.clear-brand-symbol i:nth-child(4) { background: #93a765; }

.clear-brand-symbol b {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--white);
  font-size: 26px;
  transform: translate(-50%, -50%) rotate(3deg);
  text-shadow: 0 2px 16px rgba(17, 17, 17, 0.38);
}

.clear-brand-description {
  min-height: 250px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #edf1ec;
}

.clear-brand-description strong {
  max-width: 520px;
  margin-bottom: 10px;
  display: block;
  font-size: 27px;
  line-height: 1.13;
}

.clear-brand-description p {
  max-width: 520px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.45;
}

.clear-hero-photo {
  width: 100%;
  height: 100%;
  min-height: 250px;
  margin: 0;
  overflow: hidden;
}

.clear-hero-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.clear-launch-task {
  margin: 0 0 18px;
  padding: 28px 32px;
  border-left: 8px solid #d6684f;
  border-radius: var(--radius);
  background: #181b19;
  color: var(--white);
}

.clear-launch-task > span {
  margin-bottom: 12px;
  display: block;
  color: #e18a75;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.clear-launch-task strong {
  max-width: 900px;
  display: block;
  font-size: 34px;
  line-height: 1.08;
}

.clear-launch-task p {
  max-width: 780px;
  margin: 14px 0 0;
  color: #c6ccc7;
  font-size: 16px;
  line-height: 1.45;
}

.clear-brief-facts,
.clear-brand-visuals,
.clear-opening-section {
  margin-top: 22px;
}

.clear-brief-facts {
  padding: 26px;
  border-radius: var(--radius);
  background: #181b19;
  color: var(--white);
}

.clear-section-heading {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.clear-section-heading > span {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: #d6684f;
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
}

.clear-section-heading h3 {
  margin: 0;
  font-size: 28px;
}

.clear-brief-facts .clear-section-heading h3 {
  color: var(--white);
}

.clear-facts-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.clear-facts-grid article {
  min-height: 190px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid #3c423e;
  border-top: 5px solid #7e9a89;
  border-radius: 6px;
  background: #222622;
}

.clear-facts-grid article:nth-child(2) { border-top-color: #cf664f; }
.clear-facts-grid article:nth-child(3) { border-top-color: #567e98; }
.clear-facts-grid article:nth-child(4) { border-top-color: #8b6b91; }
.clear-facts-grid article:nth-child(5) { border-top-color: #93a765; }

.clear-facts-grid small {
  margin-bottom: 20px;
  color: #aeb7b1;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.clear-facts-grid b {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.22;
}

.clear-facts-grid p {
  margin: auto 0 0;
  color: #bbc2bd;
  font-size: 11px;
  line-height: 1.38;
}

.clear-visual-grid {
  height: 320px;
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.7fr;
  gap: 8px;
}

.clear-visual-grid figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #d9ddd8;
}

.clear-visual-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.clear-visual-grid figure:first-child::after {
  content: "";
  width: 52%;
  height: 30px;
  position: absolute;
  left: 24%;
  top: 52%;
  background: #dce8df;
  transform: rotate(-2deg);
}

.clear-brand-poster {
  padding: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #181b19;
}

.clear-brand-poster span {
  position: relative;
  z-index: 2;
  color: var(--white);
  font-size: 46px;
  font-weight: 600;
}

.clear-brand-poster i {
  position: absolute;
  display: block;
}

.clear-brand-poster i:nth-of-type(1) {
  width: 120px;
  height: 120px;
  right: -32px;
  top: -30px;
  border: 26px solid #d6684f;
  border-radius: 50%;
}

.clear-brand-poster i:nth-of-type(2) {
  width: 74px;
  height: 74px;
  left: 24px;
  bottom: 30px;
  background: #4b7187;
  transform: rotate(12deg);
}

.clear-brand-poster i:nth-of-type(3) {
  width: 92px;
  height: 18px;
  right: 18px;
  bottom: 32px;
  background: #93a765;
  transform: rotate(-8deg);
}

.clear-opening-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.clear-opening-grid article {
  min-height: 116px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #bdc8c0;
  border-radius: 6px;
}

.clear-opening-grid article:nth-child(1) { background: #e4ece6; }
.clear-opening-grid article:nth-child(2) { background: #e2ebf0; }
.clear-opening-grid article:nth-child(3) { background: #f0e3df; }
.clear-opening-grid article:nth-child(4) { background: #ebe5ec; }

.clear-opening-grid i {
  color: var(--ink-soft);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
}

.clear-opening-grid b {
  max-width: 220px;
  font-size: 15px;
  line-height: 1.25;
}

.clear-brief-handoff {
  margin-top: 20px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  border-radius: var(--radius);
  background: #181b19;
  color: var(--white);
}

.clear-handoff-copy {
  max-width: 850px;
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.28;
}

.clear-handoff-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #bfc9c2;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.clear-handoff-status i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #93a765;
  color: #181b19;
  font-size: 12px;
  font-style: normal;
}

.clear-handoff-message {
  max-width: 790px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.clear-handoff-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d6684f;
  color: var(--white);
  font-weight: 600;
}

.clear-handoff-message b {
  display: block;
  margin-bottom: 8px;
  color: #e3e7e4;
  font-size: 11px;
}

.clear-handoff-message p {
  margin: 0;
  color: #c6ccc7;
  font-size: 14px;
  line-height: 1.42;
}

.clear-handoff-message p + p {
  margin-top: 7px;
  color: var(--white);
}

.clear-brief-next {
  margin: 0;
  white-space: nowrap;
}

.brand-brief {
  width: min(var(--content), 100%);
  margin: 0 auto;
}

.brief-topline {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.fictional-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.fictional-brand span {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
}

.fictional-brand small,
.brief-status {
  color: var(--ink-soft);
  font-size: 11px;
}

.brief-status {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.brief-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #37ac63;
}

.brand-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 180px minmax(360px, 0.9fr);
  gap: 12px;
}

.brand-main-photo,
.brand-side-photos,
.brand-summary {
  min-height: 440px;
}

.brand-main-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.brand-main-photo img,
.brand-side-photos img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.brand-main-photo span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--white);
  font-size: 11px;
  font-weight: 600;
}

.brand-side-photos {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brand-side-photos img {
  min-height: 0;
  border-radius: var(--radius);
}

.brand-summary {
  padding: 34px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
}

.brand-summary .eyebrow {
  color: #d8d7ff;
}

.brand-summary h2 {
  margin-bottom: 18px;
  font-size: 36px;
}

.brand-summary > p {
  color: #e0dfff;
  font-size: 15px;
  line-height: 1.5;
}

.brand-facts {
  margin-top: auto;
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.5fr;
  border-top: 1px solid rgba(255,255,255,0.26);
}

.brand-facts > span {
  padding: 16px 10px 0 0;
  color: #d8d7ff;
  font-size: 10px;
}

.brand-facts b {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
  font-size: 18px;
}

.brand-social-fact small {
  display: block;
  color: #d8d7ff;
  font-size: 10px;
}

.brand-social-fact em {
  margin-top: 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: #d8d7ff;
  font-size: 9px;
  font-style: normal;
}

.brand-social-fact strong {
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  color: var(--white);
  font-size: 9px;
  font-weight: 500;
}

.brief-details {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.brief-details article {
  min-height: 260px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.brief-details img {
  width: 42px;
  height: 42px;
  margin-bottom: 30px;
}

.brief-details article > span {
  display: block;
  margin-bottom: 9px;
  color: var(--blue);
  font-size: 10px;
  text-transform: uppercase;
}

.brief-details h3 {
  margin-bottom: 10px;
  font-size: 19px;
}

.brief-details p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.opening-feature {
  min-height: 510px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
}

.opening-feature__image {
  min-height: 510px;
  position: relative;
}

.opening-feature__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.opening-feature__copy {
  padding: 42px;
  display: flex;
  flex-direction: column;
}

.opening-feature__copy .eyebrow { color: var(--lime); }
.opening-feature__copy h2 { max-width: 720px; margin-bottom: 18px; font-size: 46px; line-height: 1.06; }
.opening-feature__copy > p { max-width: 650px; margin-bottom: 30px; color: #bdbdb8; font-size: 17px; line-height: 1.5; }

.opening-program {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #41413d;
  border-radius: 6px;
  overflow: hidden;
}

.opening-program span {
  min-height: 112px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #41413d;
  border-bottom: 1px solid #41413d;
  font-size: 16px;
  line-height: 1.25;
}

.opening-program span:nth-child(2n) { border-right: 0; }
.opening-program span:nth-last-child(-n + 2) { border-bottom: 0; }
.opening-program b { color: var(--lime); font-size: 12px; text-transform: uppercase; }

.brief-ready {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.brief-ready span { display: block; margin-bottom: 10px; color: var(--blue); font-size: 10px; text-transform: uppercase; }
.brief-ready p { max-width: 420px; margin: 0; font-size: 16px; line-height: 1.4; }
.brief-ready--wide { margin-top: 12px; padding: 24px; }
.brief-ready--wide p { max-width: 760px; }
.brief-start-button { margin: 24px 0 0 auto; }

.mentor-handoff {
  margin-top: 12px;
  padding: 22px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.mentor-handoff p,
.mentor-next p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.profession-insight {
  margin-bottom: 12px;
  padding: 20px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--white);
}

.profession-insight span {
  display: block;
  margin-bottom: 18px;
  color: var(--lime);
  font-size: 10px;
  text-transform: uppercase;
}

.profession-insight b {
  display: block;
  font-size: 18px;
  line-height: 1.3;
}

.profession-insight p {
  margin: 8px 0 0;
  color: #bdbdb8;
  font-size: 12px;
  line-height: 1.4;
}

.brief-outcome-screen,
.audience-result-screen,
.publication-result-screen,
.metrics-result-screen {
  background: var(--paper);
}

.brief-outcome,
.audience-result,
.publication-result,
.metrics-result {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.outcome-heading {
  max-width: 820px;
  margin-bottom: 32px;
}

.outcome-heading h2 { margin-bottom: 14px; }
.outcome-heading > p { max-width: 720px; color: var(--ink-soft); font-size: 17px; line-height: 1.5; }

.brief-inputs {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brief-inputs div {
  min-height: 150px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.brief-inputs span,
.working-statement > span {
  color: var(--blue);
  font-size: 10px;
  text-transform: uppercase;
}

.brief-inputs b { max-width: 430px; font-size: 20px; line-height: 1.35; }

.working-statement {
  margin-bottom: 24px;
  padding: 34px;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
}

.working-statement > span { color: #d8d7ff; }
.working-statement strong { max-width: 900px; margin: 18px 0 30px; display: block; font-size: 36px; line-height: 1.16; }
.brief-validation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.brief-validation i {
  min-height: 72px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

.brief-validation i b {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  font-size: 15px;
}

.brief-role-summary {
  margin-bottom: 26px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.brief-role-summary > div:first-child > span {
  display: block;
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 10px;
  text-transform: uppercase;
}

.brief-role-summary h3 {
  margin-bottom: 10px;
  font-size: 30px;
}

.brief-role-summary p {
  max-width: 850px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}

.brief-role-chain {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.2fr 24px 1fr 24px 1fr 24px 1fr;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.brief-role-chain span {
  min-height: 72px;
  padding: 14px;
  display: grid;
  place-items: center;
  background: var(--paper);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.brief-role-chain span:last-child {
  background: var(--lime);
}

.brief-role-chain i {
  color: var(--ink-soft);
  font-style: normal;
  text-align: center;
}

.brief-role-summary > small {
  margin-top: 18px;
  padding-top: 18px;
  display: block;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
}

.brief-role-summary > small b { color: var(--ink); }

.brief-outcome--lesson {
  width: min(980px, 100%);
}

.brief-outcome-heading {
  max-width: 850px;
  margin-bottom: 24px;
}

.brief-outcome-heading > span,
.brief-next-task > div > span {
  display: block;
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 10px;
  text-transform: uppercase;
}

.brief-outcome-heading h2 {
  max-width: 800px;
  margin-bottom: 14px;
  font-size: 48px;
  line-height: 1.02;
}

.brief-outcome-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
}

.brief-role-summary--standalone {
  margin-bottom: 14px;
  border: 0;
  background: var(--ink);
  color: var(--white);
}

.brief-role-summary--standalone > div:first-child > span {
  color: var(--lime);
}

.brief-role-summary--standalone p {
  color: #d6d6d0;
}

.brief-role-summary--standalone .brief-role-chain {
  max-width: 760px;
  grid-template-columns: 1fr 30px 1.1fr 30px 1.35fr;
  border-color: #41413d;
}

.brief-role-summary--standalone .brief-role-chain span {
  background: #2c2c29;
  color: var(--white);
}

.brief-role-summary--standalone .brief-role-chain span:last-child {
  background: var(--lime);
  color: var(--ink);
}

.brief-role-summary--standalone .brief-role-chain i {
  color: #bdbdb8;
}

.brief-next-task {
  padding: 24px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.brief-next-task h3 {
  max-width: 560px;
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 1.15;
}

.brief-next-task p {
  max-width: 620px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.brief-next-task .button {
  white-space: nowrap;
}

.post-builder-screen,
.post-visual-screen,
.post-result-screen {
  background: var(--paper);
}

.post-builder,
.post-visual-workspace,
.post-result {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.post-builder-heading {
  max-width: 830px;
  margin-bottom: 30px;
}

.post-builder-heading h2 {
  margin-bottom: 14px;
  font-size: 52px;
  line-height: 1.02;
}

.post-builder-heading > p {
  max-width: 720px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
}

.post-builder-progress {
  margin-bottom: 22px;
  display: flex;
  gap: 6px;
}

.post-builder-progress i {
  width: 54px;
  height: 5px;
  border-radius: 4px;
  background: var(--line);
}

.post-builder-progress i.active {
  background: var(--blue);
}

.audience-scene-screen {
  background: #f7f1e8;
}

.audience-scene-workspace {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: block;
}

.audience-map-sequence {
  border-radius: var(--radius);
  min-width: 0;
}

.audience-map-sequence.is-motive-step {
  overflow: hidden;
  border: 1px solid #eadfd2;
  background: #fbf1e6;
  box-shadow: 0 16px 38px rgba(58, 48, 39, 0.12);
}

.audience-scene-heading {
  max-width: 850px;
  margin-bottom: 22px;
  padding-top: 0;
}

.audience-neighborhood {
  --cafe-milk: #f7e3be;
  --cafe-paper: #fbf4ec;
  --cafe-blue: #83a7b6;
  --cafe-blue-deep: #648697;
  --cafe-terracotta: #bd7445;
  --cafe-yellow: #f0ce77;
  --cafe-graphite: #2e2a31;
  --cafe-line: #eadfd2;
  --cafe-street: rgba(214, 194, 170, 0.52);
  --cafe-block: rgba(226, 207, 184, 0.52);
  --cafe-block-line: rgba(173, 139, 104, 0.3);
  min-height: 580px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cafe-line);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(240, 206, 119, 0.2), transparent 31%),
    radial-gradient(circle at 18% 14%, rgba(131, 167, 182, 0.12), transparent 22%),
    radial-gradient(circle at 82% 84%, rgba(189, 116, 69, 0.11), transparent 24%),
    var(--cafe-paper);
  box-shadow: 0 16px 38px rgba(58, 48, 39, 0.12);
}

.audience-map-sequence.is-motive-step .audience-neighborhood {
  min-height: 420px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.audience-neighborhood::before,
.audience-neighborhood::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.audience-neighborhood::before {
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 18%, var(--cafe-street) 18% calc(18% + 2px), transparent calc(18% + 2px) 40%, var(--cafe-street) 40% calc(40% + 3px), transparent calc(40% + 3px) 64%, var(--cafe-street) 64% calc(64% + 3px), transparent calc(64% + 3px) 88%, var(--cafe-street) 88% calc(88% + 2px), transparent calc(88% + 2px)),
    linear-gradient(0deg, transparent 0 24%, var(--cafe-street) 24% calc(24% + 2px), transparent calc(24% + 2px) 49%, var(--cafe-street) 49% calc(49% + 3px), transparent calc(49% + 3px) 73%, var(--cafe-street) 73% calc(73% + 2px), transparent calc(73% + 2px));
  opacity: 0.52;
}

.audience-neighborhood::after {
  z-index: 1;
  inset: 23% 30% 22%;
  border: 2px solid rgba(173, 139, 104, 0.22);
  border-radius: 7px;
  background: rgba(251, 244, 236, 0.22);
  opacity: 0.72;
}

.audience-map-blocks {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.audience-map-blocks i {
  position: absolute;
  display: block;
  border: 2px solid var(--cafe-block-line);
  border-radius: 2px;
  background: var(--cafe-block);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 242, 0.42);
}

.audience-map-blocks i:nth-child(1) { width: 28px; height: 72px; left: 4%; top: 7%; }
.audience-map-blocks i:nth-child(2) { width: 118px; height: 34px; left: 13%; top: 8%; }
.audience-map-blocks i:nth-child(3) { width: 96px; height: 46px; left: 31%; top: 6%; }
.audience-map-blocks i:nth-child(4) { width: 92px; height: 42px; left: 47%; top: 7%; }
.audience-map-blocks i:nth-child(5) { width: 34px; height: 92px; right: 31%; top: 5%; }
.audience-map-blocks i:nth-child(6) { width: 138px; height: 46px; right: 10%; top: 8%; }
.audience-map-blocks i:nth-child(7) { width: 30px; height: 76px; right: 3%; top: 16%; }
.audience-map-blocks i:nth-child(8) { width: 100px; height: 54px; left: 4%; top: 34%; }
.audience-map-blocks i:nth-child(9) { width: 108px; height: 64px; left: 18%; top: 32%; }
.audience-map-blocks i:nth-child(10) { width: 76px; height: 40px; left: 36%; top: 37%; }
.audience-map-blocks i:nth-child(11) { width: 112px; height: 64px; right: 20%; top: 32%; }
.audience-map-blocks i:nth-child(12) { width: 92px; height: 56px; right: 5%; top: 35%; }
.audience-map-blocks i:nth-child(13) { width: 122px; height: 38px; left: 4%; bottom: 8%; }
.audience-map-blocks i:nth-child(14) { width: 86px; height: 72px; left: 24%; bottom: 7%; }
.audience-map-blocks i:nth-child(15) { width: 116px; height: 48px; left: 44%; bottom: 9%; }
.audience-map-blocks i:nth-child(16) { width: 94px; height: 70px; right: 22%; bottom: 7%; }
.audience-map-blocks i:nth-child(17) { width: 96px; height: 40px; right: 5%; bottom: 11%; }
.audience-map-blocks i:nth-child(18) { width: 78px; height: 28px; right: 14%; bottom: 27%; }

.audience-scene-routes {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.audience-route {
  opacity: 0.72;
  transition: opacity 0.18s ease;
}

.route-arrow-tip {
  display: none !important;
}

.audience-route .route-line {
  fill: none;
  stroke: var(--cafe-blue-deep);
  stroke-width: 3.2;
  stroke-dasharray: 10 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(251, 244, 236, 0.72));
  vector-effect: non-scaling-stroke;
}

.audience-route circle {
  fill: var(--cafe-blue-deep);
  stroke: var(--cafe-paper);
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
}

.audience-neighborhood.is-office .audience-route:not(.route--office),
.audience-neighborhood.is-home .audience-route:not(.route--home),
.audience-neighborhood.is-student .audience-route:not(.route--student),
.audience-neighborhood.is-weekend .audience-route:not(.route--weekend) {
  opacity: 0.22;
}

.audience-neighborhood.is-office .route--office,
.audience-neighborhood.is-home .route--home,
.audience-neighborhood.is-student .route--student,
.audience-neighborhood.is-weekend .route--weekend {
  opacity: 1;
  animation: audience-route-in 0.52s ease both;
}

.audience-neighborhood.is-office .route--office .route-line,
.audience-neighborhood.is-home .route--home .route-line,
.audience-neighborhood.is-student .route--student .route-line,
.audience-neighborhood.is-weekend .route--weekend .route-line {
  stroke: var(--cafe-terracotta);
  stroke-width: 3.9;
}

.audience-neighborhood.is-office .route--office circle,
.audience-neighborhood.is-home .route--home circle,
.audience-neighborhood.is-student .route--student circle,
.audience-neighborhood.is-weekend .route--weekend circle {
  fill: var(--cafe-terracotta);
}

@keyframes audience-route-in {
  from { stroke-dashoffset: 16; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

.audience-map-caption {
  position: absolute;
  z-index: 2;
  display: none;
  color: rgba(46, 42, 49, 0.44);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
}

.audience-map-caption--office { left: 8%; top: 4%; }
.audience-map-caption--home { right: 7%; top: 4%; }
.audience-map-caption--student { left: 7%; bottom: 4%; }
.audience-map-caption--weekend { right: 7%; bottom: 4%; }

.audience-scene-cafe {
  width: 270px;
  min-height: 218px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

.scene-cafe-building {
  width: 246px;
  height: 190px;
  position: relative;
  filter: drop-shadow(0 12px 18px rgba(58, 48, 39, 0.14));
}

.scene-cafe-building::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 28px;
  bottom: 18px;
  left: 28px;
  height: 124px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 6px 6px 3px 3px;
  background:
    linear-gradient(180deg, rgba(255, 251, 242, 0.72), rgba(255, 251, 242, 0) 38%),
    linear-gradient(180deg, #f9e8c8, var(--cafe-milk));
}

.scene-cafe-building::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 24px;
  right: 44px;
  left: 44px;
  height: 44px;
  border: 2px solid var(--cafe-graphite);
  background: #fff3dd;
}

.scene-cafe-sign {
  width: 206px;
  min-height: 46px;
  padding: 0 14px;
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 5;
  top: 3px;
  left: 50%;
  border: 2px solid var(--cafe-graphite);
  border-radius: 5px;
  background: var(--cafe-graphite);
  color: var(--cafe-paper);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scene-cafe-awning {
  height: 34px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: absolute;
  z-index: 4;
  top: 49px;
  right: 20px;
  left: 20px;
  overflow: hidden;
  border: 2px solid var(--cafe-graphite);
  border-radius: 0 0 18px 18px;
}

.scene-cafe-awning i {
  display: block;
  background: #fbedd5;
}

.scene-cafe-awning i:nth-child(even) {
  background: var(--cafe-terracotta);
}

.scene-cafe-front {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 22px;
  left: 34px;
  height: 104px;
}

.scene-cafe-window,
.scene-cafe-door {
  position: absolute;
  bottom: 0;
  border: 2px solid var(--cafe-graphite);
  background: var(--cafe-paper);
}

.scene-cafe-window {
  width: 72px;
  height: 56px;
  left: 10px;
  bottom: 8px;
}

.scene-cafe-window::before,
.scene-cafe-window::after {
  content: "";
  position: absolute;
  background: var(--cafe-terracotta);
}

.scene-cafe-window::before {
  width: 50px;
  height: 5px;
  bottom: 8px;
  left: 10px;
  border-radius: 6px;
  transform: none;
}

.scene-cafe-window::after {
  width: 9px;
  height: 16px;
  bottom: 13px;
  left: 20px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 8px 8px 3px 3px;
  background: #8fa08f;
  box-shadow: 24px 0 0 -2px #8fa08f, 24px 0 0 0 var(--cafe-graphite);
}

.scene-cafe-door {
  width: 50px;
  height: 82px;
  right: 13px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #9bbac6, var(--cafe-blue-deep));
}

.scene-cafe-door::before {
  content: "";
  width: 20px;
  height: 15px;
  position: absolute;
  top: 25px;
  left: 14px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 2px;
  background: #fff4df;
}

.scene-cafe-door::after {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 45px;
  left: 8px;
  border-radius: 50%;
  background: var(--cafe-graphite);
}

.scene-cafe-map {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 5;
  right: -1px;
  top: 86px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 6px;
  background: var(--cafe-paper);
}

.scene-cafe-map::before {
  content: "";
  width: 28px;
  height: 16px;
  position: absolute;
  border-bottom: 2px solid rgba(100, 134, 151, 0.72);
  border-left: 2px solid rgba(100, 134, 151, 0.72);
  border-radius: 0 0 0 12px;
  transform: rotate(-15deg);
}

.scene-cafe-map i {
  width: 11px;
  height: 11px;
  display: block;
  border: 2px solid var(--cafe-graphite);
  border-radius: 50%;
  background: var(--cafe-terracotta);
}

.scene-cafe-plant {
  width: 24px;
  height: 36px;
  position: absolute;
  z-index: 4;
  bottom: 14px;
  border-bottom: 12px solid var(--cafe-terracotta);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.scene-cafe-plant::before,
.scene-cafe-plant::after {
  content: "";
  width: 21px;
  height: 32px;
  position: absolute;
  bottom: 10px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 50% 50% 40% 40%;
  background: #8fa08f;
  transform-origin: bottom center;
}

.scene-cafe-plant::before {
  left: -11px;
  transform: rotate(-24deg);
}

.scene-cafe-plant::after {
  right: -11px;
  transform: rotate(24deg);
}

.scene-cafe-plant--left {
  left: 9px;
}

.scene-cafe-plant--right {
  right: 16px;
}

.audience-scene-cafe small {
  margin-top: 4px;
  padding: 5px 9px;
  border: 1px solid rgba(46, 42, 49, 0.16);
  border-radius: 999px;
  background: rgba(251, 244, 236, 0.86);
  color: rgba(46, 42, 49, 0.72);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.audience-scene-person {
  width: 258px;
  min-height: 150px;
  padding: 12px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 8px 12px;
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(46, 42, 49, 0.12);
  border-radius: 8px;
  background: rgba(255, 252, 247, 0.92);
  color: var(--cafe-graphite);
  box-shadow: 0 12px 28px rgba(58, 48, 39, 0.1);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease, background 0.16s ease;
}

.audience-scene-person--office {
  left: 4%;
  top: 5%;
}

.audience-scene-person--home {
  right: 4%;
  top: 5%;
}

.audience-scene-person--student {
  left: 4%;
  bottom: 5%;
}

.audience-scene-person--weekend {
  right: 4%;
  bottom: 5%;
}

.scene-person-figure {
  width: 104px;
  height: 98px;
  grid-row: 1 / span 2;
  position: relative;
  border-radius: 6px;
  background: #f5eadc;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(46, 42, 49, 0.08);
}

.audience-scene-person--home .scene-person-figure {
  background: #f7e2d2;
}

.audience-scene-person--student .scene-person-figure {
  background: #eef4eb;
}

.audience-scene-person--weekend .scene-person-figure {
  background: #f8efd9;
}

.scene-context {
  height: 44px;
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
}

.scene-context i {
  display: block;
  position: absolute;
  border: 2px solid var(--cafe-graphite);
  background: var(--cafe-paper);
}

.scene-context--office i {
  width: 18px;
  height: 31px;
  bottom: 0;
  background:
    linear-gradient(var(--cafe-blue) 0 0) 50% 7px / 8px 3px no-repeat,
    linear-gradient(var(--cafe-blue) 0 0) 50% 15px / 8px 3px no-repeat,
    #dfeef2;
}

.scene-context--office i:nth-child(1) { left: 6px; height: 24px; }
.scene-context--office i:nth-child(2) { left: 31px; height: 36px; }
.scene-context--office i:nth-child(3) { right: 8px; height: 28px; }

.scene-context--home i:nth-child(1) {
  width: 37px;
  height: 25px;
  left: 12px;
  bottom: 0;
  border-radius: 2px;
  background:
    linear-gradient(var(--cafe-yellow) 0 0) 9px 8px / 7px 7px no-repeat,
    linear-gradient(var(--cafe-blue) 0 0) 24px 8px / 7px 7px no-repeat,
    #fff5e4;
}

.scene-context--home i:nth-child(1)::before {
  content: "";
  width: 26px;
  height: 26px;
  position: absolute;
  top: -16px;
  left: 5px;
  border-top: 2px solid var(--cafe-graphite);
  border-left: 2px solid var(--cafe-graphite);
  background: #e6b46d;
  transform: rotate(45deg);
}

.scene-context--home i:nth-child(2) {
  width: 31px;
  height: 22px;
  right: 7px;
  bottom: 0;
  border-radius: 2px;
  background:
    linear-gradient(var(--cafe-blue) 0 0) 16px 8px / 7px 7px no-repeat,
    #fff1d7;
}

.scene-context--home i:nth-child(2)::before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  top: -14px;
  left: 4px;
  border-top: 2px solid var(--cafe-graphite);
  border-left: 2px solid var(--cafe-graphite);
  background: var(--cafe-blue);
  transform: rotate(45deg);
}

.scene-context--home i:nth-child(3) {
  width: 7px;
  height: 18px;
  right: 40px;
  bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #7e987d;
}

.scene-context--student i:nth-child(1) {
  width: 58px;
  height: 29px;
  left: 8px;
  bottom: 0;
  border-radius: 3px;
  background:
    linear-gradient(var(--cafe-blue) 0 0) 11px 10px / 8px 8px no-repeat,
    linear-gradient(var(--cafe-yellow) 0 0) 29px 10px / 8px 8px no-repeat,
    #fff4df;
}

.scene-context--student i:nth-child(1)::before {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  top: -12px;
  left: 20px;
  border-top: 2px solid var(--cafe-graphite);
  border-left: 2px solid var(--cafe-graphite);
  background: var(--cafe-terracotta);
  transform: rotate(45deg);
}

.scene-context--student i:nth-child(2) {
  width: 14px;
  height: 18px;
  right: 12px;
  bottom: 0;
  border-radius: 2px;
  background: var(--cafe-blue);
}

.scene-context--student i:nth-child(3) {
  width: 48px;
  height: 4px;
  left: 13px;
  bottom: -7px;
  border-radius: 2px;
  background: var(--cafe-graphite);
}

.scene-context--weekend i:nth-child(1) {
  width: 32px;
  height: 29px;
  left: 8px;
  bottom: 0;
  border-radius: 3px;
  background:
    linear-gradient(var(--cafe-terracotta) 0 0) 0 0 / 100% 8px no-repeat,
    linear-gradient(90deg, transparent 0 7px, rgba(46, 42, 49, 0.24) 7px 9px, transparent 9px 18px, rgba(46, 42, 49, 0.24) 18px 20px, transparent 20px),
    var(--cafe-paper);
}

.scene-context--weekend i:nth-child(2) {
  width: 32px;
  height: 20px;
  right: 8px;
  bottom: 0;
  border-radius: 3px;
  background: var(--cafe-yellow);
}

.scene-context--weekend i:nth-child(2)::before {
  content: "";
  position: absolute;
  right: -2px;
  left: -2px;
  top: -8px;
  border-right: 16px solid transparent;
  border-bottom: 10px solid var(--cafe-terracotta);
  border-left: 16px solid transparent;
}

.scene-context--weekend i:nth-child(3) {
  width: 16px;
  height: 25px;
  right: 39px;
  bottom: 0;
  border-radius: 50% 50% 35% 35%;
  background: #8fa08f;
}

.scene-avatar {
  width: 36px;
  height: 54px;
  position: absolute;
  bottom: 7px;
  left: 34px;
}

.scene-avatar > i {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  left: 10px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 50%;
  background: #f6d9c6;
}

.scene-avatar > i::before {
  content: "";
  width: 18px;
  height: 10px;
  position: absolute;
  top: -4px;
  left: -5px;
  border-radius: 10px 10px 4px 4px;
  background: var(--cafe-graphite);
}

.scene-avatar > b {
  width: 24px;
  height: 28px;
  position: absolute;
  top: 18px;
  left: 6px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 10px 10px 5px 5px;
  background: var(--cafe-blue);
}

.scene-avatar > b::before,
.scene-avatar > b::after {
  content: "";
  width: 7px;
  height: 14px;
  position: absolute;
  bottom: -15px;
  border: 2px solid var(--cafe-graphite);
  border-top: 0;
  background: var(--cafe-graphite);
}

.scene-avatar > b::before { left: 3px; }
.scene-avatar > b::after { right: 3px; }

.scene-avatar > em {
  position: absolute;
  display: block;
  font-style: normal;
}

.scene-avatar--office > b {
  background: var(--cafe-blue);
}

.scene-avatar--office {
  left: 48px;
  bottom: 8px;
}

.scene-avatar--office > b {
  height: 31px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 0 10px, #fff3dd 10px 13px, transparent 13px),
    var(--cafe-blue);
}

.scene-avatar--office > em {
  width: 19px;
  height: 14px;
  right: -12px;
  bottom: 13px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 2px;
  background: var(--cafe-terracotta);
}

.scene-avatar--office > em::before {
  content: "";
  width: 8px;
  height: 4px;
  position: absolute;
  top: -6px;
  left: 4px;
  border: 2px solid var(--cafe-graphite);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.scene-avatar--home > b {
  background: #f2d9bf;
}

.scene-avatar--home {
  left: 18px;
  bottom: 8px;
  transform: rotate(-4deg);
}

.scene-avatar--home > i::before {
  width: 17px;
  height: 17px;
  top: -5px;
  left: -4px;
  border-radius: 9px 9px 8px 4px;
}

.scene-avatar--home > b {
  height: 32px;
  border-radius: 13px 13px 5px 5px;
  background: var(--cafe-terracotta);
}

.scene-avatar--home > em {
  width: 15px;
  height: 19px;
  right: -10px;
  bottom: 10px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 3px 3px 6px 6px;
  background: var(--cafe-yellow);
}

.scene-avatar--student > b {
  background: var(--cafe-yellow);
}

.scene-avatar--student {
  left: 39px;
  bottom: 8px;
}

.scene-avatar--student > i::before {
  width: 18px;
  height: 10px;
  top: -5px;
  left: -5px;
  border-radius: 10px 10px 3px 3px;
}

.scene-avatar--student > em {
  width: 17px;
  height: 22px;
  right: -12px;
  bottom: 12px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 6px 3px 3px 6px;
  background: var(--cafe-blue);
}

.scene-avatar--weekend > b {
  background: var(--cafe-terracotta);
}

.scene-avatar--weekend {
  left: 48px;
  bottom: 29px;
  transform: rotate(-11deg);
}

.scene-avatar--weekend > i {
  width: 14px;
  height: 14px;
}

.scene-avatar--weekend > b {
  width: 21px;
  height: 26px;
  top: 16px;
  border-radius: 12px 8px 5px 5px;
}

.scene-avatar--weekend > em {
  width: 18px;
  height: 20px;
  right: -12px;
  bottom: 10px;
  border: 2px solid var(--cafe-graphite);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: #f9dca1;
}

.scene-avatar--weekend > em::before {
  content: "";
  width: 10px;
  height: 6px;
  position: absolute;
  top: -7px;
  left: 2px;
  border: 2px solid var(--cafe-graphite);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.scene-extra {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene-extra i {
  position: absolute;
  display: block;
}

.scene-extra--office i:nth-child(1) {
  width: 25px;
  height: 14px;
  right: 7px;
  bottom: 11px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 2px;
  background: #fff4df;
  transform: skewX(-7deg);
}

.scene-extra--office i:nth-child(2) {
  width: 18px;
  height: 4px;
  right: 10px;
  bottom: 7px;
  border-radius: 5px;
  background: var(--cafe-graphite);
}

.scene-extra--office i:nth-child(3) {
  display: none;
}

.scene-extra--home i:nth-child(1) {
  width: 24px;
  height: 12px;
  right: 11px;
  bottom: 10px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 50% 48% 42% 42%;
  background: #f7dca8;
}

.scene-extra--home i:nth-child(1)::before {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  right: -7px;
  top: -3px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 50%;
  background: #f7dca8;
}

.scene-extra--home i:nth-child(1)::after {
  content: "";
  width: 10px;
  height: 2px;
  position: absolute;
  left: -8px;
  top: 2px;
  border-radius: 5px;
  background: var(--cafe-graphite);
  transform: rotate(-22deg);
}

.scene-extra--home i:nth-child(2) {
  width: 5px;
  height: 7px;
  right: 26px;
  bottom: 4px;
  border-radius: 0 0 3px 3px;
  background: var(--cafe-graphite);
  box-shadow: 11px 0 0 var(--cafe-graphite);
}

.scene-extra--home i:nth-child(3) {
  width: 22px;
  height: 14px;
  left: 43px;
  bottom: 13px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 3px 3px 6px 6px;
  background: var(--cafe-yellow);
}

.scene-extra--student i:nth-child(1),
.scene-extra--student i:nth-child(2) {
  width: 18px;
  height: 28px;
  bottom: 8px;
}

.scene-extra--student i:nth-child(1) {
  left: 16px;
}

.scene-extra--student i:nth-child(2) {
  right: 15px;
}

.scene-extra--student i:nth-child(1)::before,
.scene-extra--student i:nth-child(2)::before {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  left: 3px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 50%;
  background: #f6d9c6;
}

.scene-extra--student i:nth-child(1)::after,
.scene-extra--student i:nth-child(2)::after {
  content: "";
  width: 18px;
  height: 17px;
  position: absolute;
  bottom: 0;
  left: 0;
  border: 2px solid var(--cafe-graphite);
  border-radius: 8px 8px 4px 4px;
}

.scene-extra--student i:nth-child(1)::after {
  background: var(--cafe-blue);
}

.scene-extra--student i:nth-child(2)::after {
  background: #f2d9bf;
}

.scene-extra--student i:nth-child(3) {
  width: 18px;
  height: 12px;
  left: 68px;
  bottom: 20px;
  border: 2px solid var(--cafe-graphite);
  border-radius: 3px 6px 6px 3px;
  background: var(--cafe-blue);
}

.scene-extra--weekend i:nth-child(1),
.scene-extra--weekend i:nth-child(2) {
  width: 25px;
  height: 25px;
  bottom: 6px;
  border: 3px solid var(--cafe-graphite);
  border-radius: 50%;
  background: transparent;
}

.scene-extra--weekend i:nth-child(1) {
  left: 17px;
}

.scene-extra--weekend i:nth-child(2) {
  right: 10px;
}

.scene-extra--weekend i:nth-child(3) {
  width: 42px;
  height: 24px;
  left: 38px;
  bottom: 16px;
  border-bottom: 3px solid var(--cafe-graphite);
  border-left: 3px solid var(--cafe-graphite);
  border-radius: 0 0 0 22px;
  transform: skewX(-18deg);
}

.audience-scene-person > strong {
  align-self: end;
  font-size: 15px;
  line-height: 1.15;
}

.audience-scene-person > em {
  max-width: 100%;
  margin: 0;
  display: block;
  color: rgba(46, 42, 49, 0.68);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.audience-scene-person:hover,
.audience-scene-person.selected {
  border-color: rgba(189, 116, 69, 0.78);
  background: #fffaf4;
  box-shadow: 0 0 0 4px rgba(189, 116, 69, 0.16), 0 16px 30px rgba(58, 48, 39, 0.13);
  transform: translateY(-3px);
}

.audience-scene-person:focus-visible {
  outline: 3px solid rgba(131, 167, 182, 0.48);
  outline-offset: 4px;
}

.audience-scene-person.selected > strong {
  color: #8b4f2f;
}

.audience-scene-person.selected > em {
  color: var(--cafe-graphite);
  animation: scene-quote-in 0.24s ease both;
}

.audience-neighborhood.is-office .audience-scene-person:not(.selected),
.audience-neighborhood.is-home .audience-scene-person:not(.selected),
.audience-neighborhood.is-student .audience-scene-person:not(.selected),
.audience-neighborhood.is-weekend .audience-scene-person:not(.selected) {
  opacity: 0.45;
}

.audience-neighborhood.is-motive-step .audience-scene-person:not(.selected) {
  opacity: 0;
  pointer-events: none;
}

.audience-neighborhood.is-motive-step .audience-map-caption {
  opacity: 0.28;
}

.audience-neighborhood.is-motive-step .audience-scene-routes {
  display: block;
  z-index: 4;
}

.audience-neighborhood.is-motive-step .audience-scene-person.selected {
  width: 245px;
  min-height: 136px;
  right: auto;
  bottom: auto;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
}

.audience-neighborhood.is-motive-step .audience-scene-person.selected > em {
  max-width: 100%;
}

.audience-neighborhood.is-motive-step .audience-scene-cafe {
  right: 4%;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
}

.audience-neighborhood.has-motive .audience-scene-cafe {
  filter: drop-shadow(0 0 0 var(--cafe-yellow)) drop-shadow(0 14px 20px rgba(58, 48, 39, 0.18));
}

.map-motive-axis {
  height: 0;
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 14%;
  left: 18%;
  border-top: 3px dashed rgba(189, 116, 69, 0.58);
}

.map-motive-axis::before,
.map-motive-axis::after {
  content: "";
  width: 11px;
  height: 11px;
  position: absolute;
  top: -7px;
  border: 2px solid var(--cafe-terracotta);
  border-radius: 50%;
  background: var(--cafe-paper);
}

.map-motive-axis::before {
  left: 0;
}

.map-motive-axis::after {
  right: 0;
}

.map-motive-card-links {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.motive-card-links path {
  fill: none;
  stroke: rgba(100, 134, 151, 0.55);
  stroke-width: 3;
  stroke-dasharray: 10 10;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.motive-card-links--mobile {
  display: none;
}

.map-motive-point {
  width: 208px;
  min-height: 0;
  padding: 13px 15px;
  display: block;
  position: absolute;
  z-index: 7;
  border: 2px solid rgba(100, 134, 151, 0.66);
  border-radius: 7px;
  background: #fff;
  color: var(--cafe-graphite);
  box-shadow: 0 12px 26px rgba(58, 48, 39, 0.13);
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.map-motive-point::after {
  display: none;
}

.map-motive-point--near {
  left: 27%;
  top: 10%;
}

.map-motive-point--near::after,
.map-motive-point--rhythm::after {
  display: none;
}

.map-motive-point--program {
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
}

.map-motive-point--program::after {
  display: none;
}

.map-motive-point--rhythm {
  right: auto;
  left: 47%;
  top: 10%;
}

.map-motive-point > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.map-motive-point b {
  font-size: 14px;
  line-height: 1.15;
}

.map-motive-point small {
  color: rgba(46, 42, 49, 0.64);
  font-size: 10px;
  line-height: 1.32;
}

.map-motive-point:hover,
.map-motive-point:focus-visible {
  border-color: var(--cafe-blue-deep);
  outline: 0;
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px rgba(100, 134, 151, 0.16), 0 14px 28px rgba(58, 48, 39, 0.15);
}

.map-motive-point--program:hover,
.map-motive-point--program:focus-visible {
  transform: translate(-50%, -3px);
}

.map-motive-point.selected {
  border-color: var(--cafe-blue-deep);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(100, 134, 151, 0.18), 0 14px 28px rgba(58, 48, 39, 0.15);
}

.map-motive-point.selected small {
  color: rgba(46, 42, 49, 0.68);
}

@keyframes scene-quote-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.motive-game-screen,
.tone-mixer-screen {
  background: var(--paper);
}

.motive-game-workspace,
.tone-mixer-workspace {
  width: min(var(--content), 100%);
  margin: 0 auto;
}

.tone-mixer-screen .tone-mixer-workspace {
  width: min(980px, 100%);
  display: block;
}

.motive-game-heading,
.tone-mixer-heading {
  max-width: 850px;
  margin-bottom: 24px;
}

.tone-mixer-heading {
  margin-bottom: 20px;
  padding-top: 0;
}

.tone-mixer-screen .tone-mixer-workspace .brand-tone-console {
  grid-row: auto;
  grid-column: auto;
  min-width: 0;
  margin-bottom: 18px;
}

.tone-mixer-screen .tone-build-button {
  margin-top: 0;
  align-self: auto;
  justify-self: start;
}

.motive-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 38px rgba(17, 17, 17, 0.1);
}

.motive-token-tray {
  min-height: 430px;
  padding: 28px;
  background: var(--ink);
  color: var(--white);
}

.motive-token-tray > span,
.motive-post-slot > span,
.tone-control-panel > span {
  display: block;
  margin-bottom: 24px;
  color: var(--lime);
  font-size: 10px;
  text-transform: uppercase;
}

.motive-token-tray > div {
  min-height: 330px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
}

.motive-token {
  min-width: 0;
  min-height: 290px;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 0;
  background: transparent;
  color: var(--white);
  text-align: center;
  cursor: grab;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.motive-token:active {
  cursor: grabbing;
}

.motive-token:hover,
.motive-token:focus-visible {
  outline: 0;
  transform: translateY(-5px);
}

.motive-token__art {
  width: 112px;
  height: 112px;
  margin-bottom: 24px;
  display: grid;
  place-items: center;
  position: relative;
  background: var(--blue);
  color: var(--white);
  font-style: normal;
  box-shadow: 7px 7px 0 rgba(255, 255, 255, 0.16);
  transform: rotate(-3deg);
}

.motive-token--near .motive-token__art {
  border-radius: 50%;
}

.motive-token--program .motive-token__art {
  width: 130px;
  height: 82px;
  border: 3px dashed #8f453c;
  background: var(--coral);
  color: #6f342d;
  transform: rotate(3deg);
}

.motive-token--rhythm .motive-token__art {
  border-radius: 6px;
  background: #2f7d58;
  transform: rotate(-1deg);
}

.motive-token__art b {
  position: relative;
  z-index: 2;
  font-size: 18px;
}

.motive-token--program .motive-token__art b {
  font-size: 12px;
  letter-spacing: 1px;
}

.motive-token--rhythm .motive-token__art b {
  font-size: 19px;
}

.motive-token__art em {
  width: 36px;
  height: 4px;
  position: absolute;
  right: 10px;
  bottom: 12px;
  background: var(--lime);
}

.motive-token strong {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.2;
}

.motive-token small {
  color: #bdbdb8;
  font-size: 11px;
  line-height: 1.4;
}

.motive-post-slot {
  min-height: 430px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  background: var(--sky);
}

.motive-post-slot > span {
  color: var(--blue);
}

.motive-post-slot > div {
  flex: 1;
  padding: 26px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 2px dashed #8ca9bc;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.motive-post-slot i {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  font-size: 20px;
  font-style: normal;
}

.motive-post-slot b {
  max-width: 240px;
  font-size: 21px;
  line-height: 1.18;
}

.motive-post-slot small {
  max-width: 230px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.motive-workbench.is-dragging .motive-post-slot > div,
.motive-post-slot.drag-over > div {
  border-color: var(--blue);
  background: var(--white);
  transform: scale(1.02);
}

.motive-post-slot.selected > div {
  border-style: solid;
  border-color: var(--blue);
  background: var(--white);
}

.motive-post-slot.selected i {
  background: var(--lime);
  color: var(--ink);
}

.motive-workbench.has-selection .motive-token:not(.selected) {
  opacity: 0.32;
}

.motive-token.selected {
  transform: translateX(46%) scale(0.92);
}

.brand-tone-console {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 38px rgba(17, 17, 17, 0.1);
}

.tone-control-panel {
  min-height: 420px;
  padding: 30px;
  background: var(--ink);
  color: var(--white);
}

.tone-track {
  min-height: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
  gap: 8px;
}

.tone-track::before {
  content: "";
  height: 4px;
  position: absolute;
  top: 32px;
  left: 16%;
  right: 16%;
  background: #555550;
}

.tone-dial {
  min-width: 0;
  padding: 0 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  border: 0;
  background: transparent;
  color: var(--white);
  text-align: center;
  cursor: pointer;
}

.tone-dial > i {
  width: 66px;
  height: 66px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border: 3px solid #686863;
  border-radius: 50%;
  background: #30302d;
  font-style: normal;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.tone-dial > i b {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8b8b85;
}

.tone-dial:hover > i,
.tone-dial:focus-visible > i {
  border-color: var(--white);
  outline: 0;
  transform: scale(1.05);
}

.tone-dial:focus-visible {
  outline: 0;
}

.tone-dial.active > i {
  border-color: var(--lime);
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(216, 255, 84, 0.16);
}

.tone-dial.active > i b {
  background: var(--lime);
}

.tone-dial strong {
  margin-bottom: 7px;
  font-size: 15px;
}

.tone-dial small {
  color: #a9a9a4;
  font-size: 10px;
  line-height: 1.35;
}

.tone-readout {
  min-height: 74px;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid #4b4b47;
  border-radius: 6px;
  background: #292926;
}

.tone-readout b {
  color: var(--lime);
  font-size: 13px;
}

.tone-readout span {
  color: #bdbdb8;
  font-size: 11px;
}

.tone-preview-panel {
  min-height: 420px;
  padding: 30px;
  background: #dce9ef;
}

.tone-preview-bar {
  max-width: 500px;
  margin: 0 auto;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 7px 7px 0 0;
  background: #2481cc;
  color: var(--white);
}

.tone-preview-bar > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-size: 10px;
  font-weight: 600;
}

.tone-preview-bar > div {
  display: grid;
  gap: 2px;
}

.tone-preview-bar b {
  font-size: 13px;
}

.tone-preview-bar small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 9px;
}

.tone-preview-message {
  max-width: 500px;
  min-height: 260px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 0 0 7px 7px;
  background: var(--white);
  box-shadow: 0 5px 16px rgba(31, 71, 94, 0.14);
  font-size: 14px;
  line-height: 1.5;
}

.tone-preview-message p {
  margin: 0 0 12px;
}

.tone-preview-message p:last-child {
  margin-bottom: 0;
}

.tone-build-button {
  min-width: 240px;
}

.post-choice-grid {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.post-choice-card {
  min-height: 230px;
  padding: 22px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  position: relative;
  border: 1px solid var(--line);
  border-top: 5px solid var(--blue);
  border-radius: var(--radius);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.post-choice-card:nth-child(2) {
  border-top-color: #e06d5f;
}

.post-choice-card:nth-child(3) {
  border-top-color: #2f7d58;
}

.post-choice-card:hover,
.post-choice-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.08);
}

.post-choice-card.selected {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: 0 0 0 2px var(--blue);
}

.post-choice-card > i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

.post-choice-card > span {
  align-self: end;
}

.post-choice-card b,
.post-choice-card small {
  display: block;
}

.post-choice-card b {
  margin-bottom: 9px;
  font-size: 22px;
  line-height: 1.14;
}

.post-choice-card small {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.post-choice-card > em {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 18px;
  right: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 16px;
  font-style: normal;
}

.post-choice-card.selected > em {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.post-choice-next {
  min-width: 220px;
}

.post-generation-screen {
  display: grid;
  place-items: center;
  background: var(--sky);
}

.post-generation {
  width: min(760px, 100%);
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.ai-generation-mark {
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-size: 18px;
  font-weight: 600;
}

.post-generation h2 {
  margin-bottom: 24px;
  font-size: 48px;
}

.generation-selections {
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.generation-selections span {
  padding: 9px 12px;
  border-radius: 5px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 600;
}

.generation-statuses {
  display: grid;
  gap: 8px;
}

.generation-statuses > div {
  min-height: 54px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(8px);
  animation: generation-item 0.28s ease forwards;
  animation-delay: var(--delay);
}

.generation-statuses i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  font-size: 12px;
  font-style: normal;
}

.generation-line {
  height: 5px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--line);
}

.generation-line span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  transform-origin: left;
  animation: generation-progress 1.9s ease forwards;
}

@keyframes generation-item {
  to { opacity: 1; transform: none; }
}

@keyframes generation-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.post-builder-heading--visual,
.post-builder-heading--result {
  max-width: 920px;
}

.post-result {
  width: min(var(--content), 100%);
}

.post-result-screen {
  animation-name: post-result-screen-in;
}

@keyframes post-result-screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@supports selector(:has(*)) {
  html:has(body[data-screen="task"] .post-result-screen),
  body[data-screen="task"]:has(.post-result-screen) {
    overflow-x: clip;
  }
}

.post-result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.9fr);
  align-items: start;
  gap: 24px;
}

.post-result-preview {
  min-width: 0;
}

.post-result-preview .telegram-window {
  width: 100%;
  margin: 0;
  border-color: var(--line);
  background: var(--sky);
  box-shadow: var(--shadow);
}

.post-result-preview .telegram-window__chat {
  background: var(--sky);
}

.post-result-summary {
  min-width: 0;
  padding: 24px;
  display: grid;
  gap: 18px;
  position: sticky;
  top: 92px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.post-result-summary h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.14;
}

.post-result-summary .post-result-checks {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.post-result-summary .post-result-checks span {
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.post-result-summary .post-result-checks i {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: #24734e;
  font-size: 11px;
  font-style: normal;
}

.post-result-submit {
  width: 100%;
}

@media (min-width: 981px) {
  .post-result {
    width: min(1008px, 100%);
  }

  .post-result .post-builder-heading--result {
    max-width: 680px;
  }

  .post-result-layout {
    grid-template-columns: minmax(0, min(640px, calc((100% - 24px) * 0.66))) minmax(300px, 1fr);
  }

  .post-result-preview .telegram-window {
    max-width: 640px;
    margin-left: 0;
  }
}

.post-visual-workspace--question {
  width: min(1120px, 100%);
}

.post-builder-heading--visual-question {
  max-width: 820px;
  margin-bottom: 24px;
}

.telegram-window {
  width: min(780px, 100%);
  margin: 0 auto 24px;
  overflow: hidden;
  border: 1px solid #b7c9d3;
  border-radius: var(--radius);
  background: #dce9ef;
  box-shadow: 0 16px 38px rgba(31, 71, 94, 0.15);
}

.telegram-window__bar {
  min-height: 58px;
  padding: 9px 16px;
  display: grid;
  grid-template-columns: 24px 36px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  background: #2481cc;
  color: var(--white);
}

.telegram-window__back {
  font-size: 28px;
  line-height: 1;
}

.telegram-window__logo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: #2481cc;
  font-size: 15px;
  transform: rotate(-28deg);
}

.telegram-window__bar > div {
  display: grid;
  gap: 2px;
}

.telegram-window__bar b {
  font-size: 14px;
}

.telegram-window__bar small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
}

.telegram-window__bar > i {
  font-style: normal;
  letter-spacing: 2px;
}

.telegram-window__chat {
  min-height: 420px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  background: #dce9ef;
}

.telegram-message {
  width: min(650px, 88%);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(31, 71, 94, 0.16);
}

.telegram-message .telegram-channel {
  padding: 16px 18px 11px;
  border-bottom: 1px solid #edf0f2;
}

.telegram-message__visual {
  width: 100%;
  max-height: 470px;
  display: block;
  object-fit: cover;
}

.telegram-message__copy {
  padding: 16px 18px 10px;
  color: #171717;
  font-size: 14px;
  line-height: 1.46;
}

.telegram-message__copy p {
  margin: 0 0 10px;
}

.telegram-message__copy p:last-child {
  margin-bottom: 0;
}

.telegram-message__draft {
  padding: 3px 18px 13px;
  color: #7693a3;
  font-size: 10px;
  text-align: right;
}

.telegram-message__meta {
  padding: 0 18px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: #7693a3;
  font-size: 10px;
}

.telegram-message__meta time {
  color: #5c7f91;
}

.telegram-message__reactions {
  padding: 10px 14px 12px;
  display: flex;
  gap: 7px;
  border-top: 1px solid #edf0f2;
}

.telegram-message__reactions span {
  padding: 6px 9px;
  border-radius: 14px;
  background: #edf5fa;
  color: #357eaa;
  font-size: 11px;
}

.telegram-post-preview {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.telegram-post-preview .telegram-channel,
.post-result-copy .telegram-channel {
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--line);
}

.telegram-post-preview__copy {
  padding: 22px 24px 26px;
  font-size: 15px;
  line-height: 1.55;
}

.post-visual-choice {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--ink);
}

.post-visual-choice > span {
  display: block;
  margin-bottom: 14px;
  color: var(--lime);
  font-size: 11px;
  text-transform: uppercase;
}

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

.post-visual-grid button {
  aspect-ratio: 3 / 4;
  min-width: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #2c2c29;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.post-visual-grid button:hover,
.post-visual-grid button:focus-visible {
  border-color: var(--lime);
  outline: 0;
  transform: translateY(-3px);
}

.post-visual-grid button.selected {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(216, 255, 84, 0.22);
}

.post-visual-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.post-visual-grid i {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 12px;
  right: 12px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.25);
}

.post-visual-grid button:hover i,
.post-visual-grid button:focus-visible i,
.post-visual-grid button.selected i {
  border: 8px solid var(--lime);
  background: var(--ink);
}

.post-visual-build {
  min-width: 240px;
  margin-top: 18px;
}

.post-result-publication {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.post-result-visual {
  min-height: 540px;
}

.post-result-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.post-result-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.post-result-copy .telegram-post-preview__copy {
  font-size: 14px;
}

.post-result-checks {
  width: min(780px, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.post-result-checks span {
  min-height: 62px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #bddfcf;
  border-radius: 6px;
  background: var(--mint);
  color: #35634c;
  font-size: 12px;
  line-height: 1.35;
}

.post-result-checks i {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #24734e;
  color: var(--white);
  font-size: 10px;
  font-style: normal;
}

.career-pulse {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
}

.career-pulse span { display: block; margin-bottom: 16px; color: var(--lime); font-size: 10px; text-transform: uppercase; }
.career-pulse b { display: block; max-width: 780px; font-size: 24px; line-height: 1.3; }
.career-pulse p { max-width: 780px; margin: 8px 0 0; color: #bdbdb8; font-size: 13px; line-height: 1.45; }

.mentor-next,
.manager-note,
.route-disclaimer {
  margin-bottom: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}

.mentor-next p { margin: 0; }

.game-guide {
  margin-bottom: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--ink-soft);
  font-size: 11px;
}

.game-guide b {
  margin-right: auto;
  color: var(--blue);
}

.game-guide span {
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--white);
}

.persona-card,
.motive-card {
  min-height: 70px;
  padding: 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: 0.16s ease;
}

.persona-card {
  touch-action: pan-y;
}

body.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.persona-card.drag-ghost {
  position: fixed;
  z-index: 200;
  width: min(300px, calc(100vw - 28px));
  pointer-events: none;
  opacity: 0.94;
  transform: rotate(1deg);
  box-shadow: var(--shadow);
}

.motive-card {
  grid-template-columns: minmax(0, 1fr) 24px;
}

.persona-card:hover,
.motive-card:hover,
.persona-card.selected,
.motive-card.drag-over {
  border-color: var(--pair);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pair) 18%, transparent);
}

.persona-card.paired,
.motive-card.paired {
  border-color: var(--pair);
  background: var(--pair-soft);
}

.persona-card > span:nth-child(2),
.motive-card > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.persona-card b,
.motive-card b {
  font-size: 13px;
  line-height: 1.25;
}

.persona-card small,
.motive-card small {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.3;
}

.persona-card > i,
.motive-card > i {
  color: var(--pair);
  font-style: normal;
  font-weight: 600;
}

.persona-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pair);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
}

.audience-map-screen {
  padding-top: 44px;
  padding-bottom: 44px;
  background: color-mix(in srgb, var(--mint) 52%, var(--sky));
}

.audience-map-workspace {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.map-heading {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: end;
  gap: 40px;
}

.map-heading h2 { margin: 0; font-size: 46px; }
.map-heading > p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }

.audience-map-board {
  min-height: 520px;
  padding: 54px 30px 30px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px minmax(260px, 1fr);
  gap: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mint) 70%, var(--line));
  border-radius: var(--radius);
  background-color: var(--color-surface-soft);
  background-image:
    linear-gradient(color-mix(in srgb, var(--mint) 48%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--mint) 48%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
}

.audience-map-board::before,
.audience-map-board::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,0.75);
  transform: rotate(-12deg);
}

.audience-map-board::before { width: 140%; height: 46px; left: -20%; top: 40%; }
.audience-map-board::after { width: 46px; height: 140%; left: 48%; top: -20%; transform: rotate(8deg); }

.map-landmark {
  position: absolute;
  z-index: 1;
  padding: 5px 7px;
  border-radius: 3px;
  background: #dfe7df;
  color: #697469;
  font-size: 9px;
  text-transform: uppercase;
}

.map-landmark--office { left: 32%; top: 16px; }
.map-landmark--homes { right: 9%; top: 16px; }
.map-landmark--campus { left: 45%; bottom: 12px; }

.audience-map-board .match-column,
.connection-map {
  position: relative;
  z-index: 2;
}

.audience-map-board .match-column { gap: 10px; }
.audience-map-board .panel-label { min-height: 18px; color: #546054; }
.audience-map-board .persona-card,
.audience-map-board .motive-card { min-height: 82px; box-shadow: 0 8px 24px rgba(41,55,43,0.06); }

.connection-map {
  min-height: 400px;
}

.connection-map svg {
  width: 100%;
  height: 380px;
  position: absolute;
  left: 0;
  top: 22px;
  overflow: visible;
}

.connection-map path {
  fill: none;
  stroke: var(--pair);
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.map-pin {
  width: 90px;
  min-height: 72px;
  padding: 12px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 4px solid #f7faf6;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  box-shadow: 0 10px 25px rgba(17,17,17,0.2);
  text-align: center;
}

.map-pin span {
  font-size: 13px;
  font-weight: 600;
  line-height: 0.92;
  text-align: center;
  text-transform: lowercase;
}
.map-pin small { color: #aaa9a4; font-size: 8px; text-transform: uppercase; }

.map-progress {
  height: 7px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 6px;
  background: #dce3dc;
}

.map-progress span { height: 100%; display: block; border-radius: inherit; background: var(--blue); transition: width 0.25s ease; }

.neighborhood-result-map {
  min-height: 520px;
  margin-bottom: 18px;
  padding: 40px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 120px 220px;
  border: 1px solid #cbd5cb;
  border-radius: var(--radius);
  background-color: #edf2ed;
  background-image: linear-gradient(#dfe7df 1px, transparent 1px), linear-gradient(90deg, #dfe7df 1px, transparent 1px);
  background-size: 48px 48px;
}

.neighborhood-result-map::before,
.neighborhood-result-map::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,0.78);
}

.neighborhood-result-map::before { width: 100%; height: 52px; left: 0; top: calc(50% - 26px); }
.neighborhood-result-map::after { width: 52px; height: 100%; left: calc(50% - 26px); top: 0; }

.map-cafe {
  width: 126px;
  height: 126px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  transform: translate(-50%, -50%);
  border: 8px solid #edf2ed;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  box-shadow: 0 12px 30px rgba(17,17,17,0.2);
}

.map-cafe span {
  font-size: 19px;
  font-weight: 600;
  line-height: 0.9;
  text-align: center;
  text-transform: lowercase;
}
.map-cafe small { margin-top: 4px; color: #aaa9a4; font-size: 9px; }

.route-card {
  min-height: 150px;
  padding: 22px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--pair);
  border-radius: var(--radius);
  background: var(--pair-soft);
  box-shadow: 0 10px 24px rgba(41,55,43,0.08);
}

.route-card::after {
  content: "";
  width: 110px;
  height: 3px;
  position: absolute;
  z-index: -1;
  background: var(--pair);
}

.route-card--1::after,
.route-card--3::after { right: -112px; }
.route-card--2::after,
.route-card--4::after { left: -112px; }
.route-card--1::after,
.route-card--2::after { bottom: -32px; transform: rotate(20deg); }
.route-card--3::after,
.route-card--4::after { top: -32px; transform: rotate(-20deg); }
.route-card i { color: var(--pair); font-size: 11px; font-style: normal; }
.route-card span { margin: auto 0 6px; font-size: 12px; }
.route-card b { font-size: 17px; line-height: 1.3; }
.audience-result .career-pulse { margin-bottom: 24px; }

.match-lines span.active {
  color: var(--pair);
}

.match-result-list {
  margin-bottom: 12px;
  display: grid;
  gap: 7px;
}

.match-result-list div {
  min-height: 48px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-left: 4px solid var(--pair);
  border-radius: 0 5px 5px 0;
  background: var(--pair-soft);
  font-size: 11px;
}

.match-result-list b { color: var(--pair); text-align: center; }
.match-result-list strong { font-size: 12px; }

.result-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.result-label span,
.result-label small {
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.result-label b { font-size: 15px; }

.content-result,
.campaign-result {
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}

.telegram-preview {
  width: min(520px, 100%);
  margin: 14px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(17,17,17,0.08);
}

.telegram-cover {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.telegram-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.telegram-cover span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 9px;
  border-radius: 4px;
  background: var(--lime);
  font-size: 10px;
  font-weight: 600;
}

.telegram-channel {
  padding: 14px 16px 8px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
}

.brand-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.telegram-channel div { display: grid; gap: 2px; }
.telegram-channel b { font-size: 12px; }
.telegram-channel small { color: var(--ink-soft); font-size: 9px; }
.telegram-channel i { color: var(--ink-soft); font-style: normal; }

.telegram-copy {
  padding: 10px 16px 16px;
  font-size: 12px;
  line-height: 1.48;
}

.telegram-stats {
  padding: 10px 16px;
  display: flex;
  gap: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 9px;
}

.published-post {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 16px 42px rgba(17,17,17,0.09);
}

.published-visual {
  min-height: 640px;
  position: relative;
  overflow: hidden;
}

.published-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.published-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(transparent, rgba(17,17,17,0.8));
}

.published-visual::before {
  content: "пара кварталов";
  padding: 10px 14px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  background: var(--lime);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-transform: lowercase;
  transform: rotate(-2deg);
}

.published-visual > div {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 28px;
  color: var(--white);
}

.published-visual span,
.published-visual b,
.published-visual small { display: block; }
.published-visual span { margin-bottom: 34px; color: var(--lime); font-size: 20px; font-weight: 600; }
.published-visual b { max-width: 360px; font-size: 38px; line-height: 1.05; }
.published-visual small { margin-top: 10px; color: #dddcd6; font-size: 12px; }

.published-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

.published-copy .telegram-channel { padding: 22px 24px 12px; border-bottom: 1px solid var(--line); }
.published-copy .telegram-copy { padding: 24px; font-size: 14px; line-height: 1.54; }
.published-copy .telegram-stats { margin-top: auto; padding: 16px 24px; justify-content: space-between; font-size: 10px; }

.published-post--picking {
  grid-template-columns: minmax(570px, 1.12fr) minmax(410px, 0.88fr);
}

.visual-picker-panel {
  min-height: 520px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--ink);
}

.visual-picker-panel > span {
  color: var(--lime);
  font-size: 10px;
  text-transform: uppercase;
}

.visual-picker-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: 14px;
}

.visual-picker-grid button {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  background: #2a2a27;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.visual-picker-grid button:hover,
.visual-picker-grid button:focus-visible {
  border-color: var(--lime);
  transform: translateY(-2px);
  outline: 0;
}

.visual-picker-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.visual-picker-grid button > span {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.visual-picker-grid button > i {
  width: 24px;
  height: 24px;
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.35);
}

.visual-picker-grid button:hover > i,
.visual-picker-grid button:focus-visible > i {
  border: 7px solid var(--lime);
  background: var(--ink);
}

.visual-picker-grid button[data-visual="event"]::after {
  content: "пара кварталов";
  padding: 6px 8px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 52%;
  background: var(--lime);
  color: var(--ink);
  font-size: 9px;
  font-weight: 600;
  text-transform: lowercase;
  transform: rotate(-2deg);
}

.publication-checks {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.publication-checks span {
  min-height: 64px;
  padding: 12px;
  display: flex;
  align-items: center;
  border: 1px solid #bddfcf;
  border-radius: 6px;
  background: var(--mint);
  color: #35634c;
  font-size: 11px;
}

.campaign-center {
  width: 180px;
  min-height: 74px;
  margin: 24px auto;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-size: 12px;
}

.campaign-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.campaign-routes span {
  min-height: 72px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 3px solid var(--blue);
  border-radius: 4px;
  background: var(--blue-soft);
  font-size: 11px;
}

.campaign-routes i {
  color: var(--blue);
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

.mini-case-result {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(0, 1.3fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}

.case-visual {
  position: relative;
  min-height: 330px;
}

.case-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.case-visual span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--lime);
  font-size: 9px;
  font-weight: 600;
}

.case-copy {
  padding: 18px;
}

.case-copy .result-label {
  margin-bottom: 20px;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}

.case-copy > div:not(.result-label) {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  border-top: 1px solid var(--line);
}

.case-copy i { color: var(--blue); font-size: 10px; font-style: normal; }
.case-copy p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.case-copy p b { color: var(--ink); }

.manager-screen {
  display: grid;
  place-items: center;
  background: var(--mint);
}

.manager-confirmation {
  width: min(900px, 100%);
  padding: 54px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: center;
}

.confirmation-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 30px;
}

.manager-confirmation > p {
  max-width: 660px;
  margin: 0 auto 32px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
}

.call-agenda {
  margin-bottom: 26px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.call-agenda span {
  min-height: 100px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
}

.call-agenda span:last-child { border-right: 0; }
.call-agenda b { color: var(--blue); }

.manager-note {
  margin-bottom: 26px;
  text-align: left;
  background: var(--paper);
}

.manager-note p,
.route-disclaimer p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }

.course-screen {
  background: var(--paper);
}

.course-intro {
  max-width: 920px;
  margin-bottom: 46px;
}

.course-intro h2 {
  margin-bottom: 18px;
  font-size: 54px;
}

.course-intro p {
  max-width: 760px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
}

.course-numbers {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.course-numbers div {
  min-height: 180px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
}

.course-numbers div:last-child { border-right: 0; }
.course-numbers strong { color: var(--blue); font-size: 50px; line-height: 1; }
.course-numbers span { max-width: 190px; font-size: 13px; line-height: 1.35; }

.practice-bridge {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.bridge-head,
.practice-bridge > div:not(.bridge-head) {
  display: grid;
  grid-template-columns: 50px minmax(0, 0.8fr) 44px minmax(0, 1.2fr);
  align-items: center;
}

.bridge-head {
  padding: 12px 20px 12px 70px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
}

.bridge-head span:first-child { grid-column: 1 / 3; }
.bridge-head span:last-child { grid-column: 4; }

.practice-bridge > div:not(.bridge-head) {
  min-height: 70px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.practice-bridge > div:last-child { border-bottom: 0; }
.practice-bridge b { color: var(--blue); }
.practice-bridge i { color: var(--blue); font-style: normal; text-align: center; }
.practice-bridge strong { font-size: 12px; line-height: 1.35; }

.course-support {
  margin: 14px 0 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.course-support span {
  min-height: 72px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  background: var(--blue-soft);
  font-size: 11px;
}

.course-support img { width: 32px; height: 32px; }

body[data-screen="course"],
body[data-screen="course"] .app-shell,
body[data-screen="course"] .stage {
  background: #191919;
}

body[data-screen="course"] .app-shell > .topbar,
body[data-screen="course"] .app-shell > .progress {
  display: none;
}

body[data-screen="course"] .stage {
  min-height: 100vh;
}

body[data-screen="course"] .course-one-page {
  width: 100%;
  max-width: 1280px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 4px 4px 112px;
  display: block;
  animation: none;
  background: #191919;
  color: #fff;
}

.course-page-header {
  height: 84px;
  padding: 0 52px;
  display: flex;
  align-items: center;
}

.course-page-header__logo {
  width: 110px;
  display: block;
}

.course-thankyou-banner {
  margin: 0 16px 8px;
  padding: 28px 32px;
  border-radius: 24px;
  background: #4c4bff;
  color: #fff;
  text-align: center;
}

.course-thankyou-banner > div {
  max-width: 960px;
  margin: 0 auto;
}

.course-thankyou-banner h2 {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.course-thankyou-banner p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.35;
}

.course-thankyou-banner .course-thankyou-banner__lead {
  margin-top: 10px;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}

.course-hero {
  min-height: 440px;
  margin: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(410px, 1fr);
  gap: 4px;
  color: var(--ink);
  box-shadow: none;
}

.course-hero__content {
  min-width: 0;
  min-height: 440px;
  padding: 30px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  border-radius: 24px;
  background: #a5d9d1;
}

.course-hero__benefits {
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.course-hero__benefits li {
  padding: 9px 13px 10px;
  border-radius: var(--radius-pill);
  background: #242424;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

.course-hero h1 {
  max-width: 640px;
  margin: 0 0 18px;
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 48px;
}

.course-hero__lead {
  max-width: 620px;
  margin: 0;
  color: #111;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.28;
}

.course-hero__footer {
  width: 100%;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.course-hero__rating {
  min-width: 205px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.course-hero__rating > strong {
  font-size: 50px;
  font-weight: 500;
  line-height: 0.9;
}

.course-hero__rating > span {
  display: grid;
  gap: 4px;
}

.course-hero__rating b {
  display: flex;
  gap: 2px;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}

.course-hero__rating b i {
  position: relative;
  overflow: hidden;
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1.5px #111;
}

.course-hero__rating b i::before {
  content: "★";
  width: 52%;
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: #111;
  -webkit-text-stroke: 0;
}

.course-hero__rating small {
  font-size: 13px;
}

.course-hero__visual {
  min-width: 0;
  min-height: 440px;
  margin: 0;
  padding: 18px 12px 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  background: #a5d9d1;
}

.course-hero__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.course-advantages {
  margin: 12px 16px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.course-advantages article {
  min-height: 140px;
  padding: 20px;
  border-radius: 24px;
  background: #2a2a2a;
  color: #fff;
}

.course-advantages strong {
  display: block;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.08;
}

.course-advantages p {
  margin: 12px 0 0;
  color: #cfcfcf;
  font-size: 15px;
  line-height: 1.35;
}

.course-advantages__conditions {
  background: #fff357 !important;
  color: #111 !important;
}

.course-advantages__conditions p {
  color: #333;
}

.course-profession {
  margin: 40px 16px 0;
  padding: 24px 36px;
  display: grid;
  grid-template-columns: minmax(0, 452px) minmax(0, 1fr);
  gap: 48px;
  color: #e7e7e7;
}

.course-profession h2,
.course-salary h2 {
  margin: 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-profession__copy p {
  margin: 28px 0 0;
  color: #a9a9a9;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.course-profession__visual {
  height: 376px;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
}

.course-profession__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.course-growth {
  margin: 24px 16px 0;
  padding: 24px 36px 40px;
  color: #e7e7e7;
}

.course-growth h2 {
  max-width: 820px;
  margin: 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-growth__layout {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 668px) minmax(0, 1fr);
  align-items: stretch;
  gap: 48px;
}

.course-growth__visual {
  min-height: 376px;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fff38a;
}

.course-growth__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.course-growth__list {
  border-top: 1px solid #383838;
}

.course-growth__item {
  padding: 16px 0 18px;
  border-bottom: 1px solid #383838;
}

.course-growth__item h3 {
  margin: 0;
  color: #e7e7e7;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.12;
}

.course-growth__item p {
  margin: 8px 0 0;
  color: #a9a9a9;
  font-size: 15px;
  line-height: 1.32;
}

.course-salary {
  margin: 24px 16px 0;
  padding: 24px 36px 40px;
  color: #e7e7e7;
}

.course-salary h2 {
  max-width: 780px;
}

.course-salary__intro {
  max-width: 650px;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.course-salary__intro img {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 50%;
}

.course-salary__intro p {
  margin: 0;
  color: #a9a9a9;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.course-salary__cards {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.course-salary-card {
  padding: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  overflow: hidden;
  border-radius: 24px;
  background: #2a2a2a;
}

.course-salary-card--entry { min-height: 164px; }
.course-salary-card--middle { min-height: 244px; }
.course-salary-card--senior { min-height: 340px; }

.course-salary-card__amount {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}

.course-salary-card__projects {
  grid-column: 1;
  grid-row: 3;
  padding: 9px 13px;
  align-self: center;
  justify-self: start;
  border-radius: var(--radius-pill);
  background: #181818;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.course-salary-card__period {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  color: #a9a9a9;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
}

.course-salary-card__infinity {
  width: 208px;
  max-width: 80%;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
}

.course-outcomes {
  margin: 24px 16px 0;
  padding: 24px 36px 48px;
  color: #e7e7e7;
}

.course-outcomes h2 {
  margin: 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-outcomes__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-outcome-card {
  min-height: 248px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 24px;
  background: #2a2a2a;
}

.course-outcome-card__check {
  width: 28px;
  height: 28px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7e7e7;
  color: #222;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.course-outcome-card h3 {
  margin: 0;
  color: #e7e7e7;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.12;
}

.course-outcome-card p {
  margin: 10px 0 0;
  color: #a9a9a9;
  font-size: 16px;
  line-height: 1.32;
}

.course-outcome-card strong {
  margin-top: auto;
  padding-top: 20px;
  color: #a9a9a9;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.course-career {
  margin: 24px 16px 0;
  padding: 24px 36px 48px;
  color: #e7e7e7;
}

.course-career h2 {
  max-width: 780px;
  margin: 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-career__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
}

.course-career-card {
  min-width: 0;
}

.course-career-card__visual {
  width: 164px;
  height: 164px;
  margin: 0 0 24px;
  position: relative;
}

.course-career-card__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.course-career-card h3 {
  margin: 0;
  color: #e7e7e7;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.12;
}

.course-career-card p {
  margin: 10px 0 0;
  color: #c2c2c2;
  font-size: 16px;
  line-height: 1.35;
}

.course-practice {
  margin: 24px 16px 0;
  padding: 24px 36px 48px;
  color: #e7e7e7;
}

.course-practice__eyebrow {
  display: block;
  color: #a9a9a9;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.course-practice h2 {
  max-width: 820px;
  margin: 12px 0 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-practice__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-practice-card {
  min-width: 0;
  padding: 16px 16px 24px;
  border-radius: 24px;
  background: #2a2a2a;
}

.course-practice-visual {
  height: 164px;
  margin-bottom: 24px;
  padding: 18px;
  overflow: hidden;
  border-radius: 18px;
}

.course-practice-visual--levels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff38a;
}

.course-practice-levels,
.course-practice-platforms {
  display: flex;
  gap: 8px;
}

.course-practice-levels span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 18px;
  font-weight: 600;
}

.course-practice-levels span:last-child {
  background: #4c4bff;
  color: #fff;
}

.course-practice-platforms {
  flex-wrap: wrap;
}

.course-practice-platforms b {
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  background: #222;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.course-practice-visual--cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background: #a5d9d1;
}

.course-practice-visual--cases span {
  padding: 12px;
  display: flex;
  align-items: flex-end;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: #222;
  font-size: 13px;
  font-weight: 500;
}

.course-practice-visual--cases span:last-child {
  grid-column: 1 / -1;
}

.course-practice-visual--feedback {
  display: grid;
  align-content: center;
  gap: 10px;
  background: #ddd9ff;
}

.course-practice-visual--feedback span {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: 500;
}

.course-practice-visual--feedback span:last-child {
  margin-left: 24px;
  color: #656565;
}

.course-practice-visual--feedback b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #4c4bff;
  color: #fff;
}

.course-practice-card h3 {
  margin: 0;
  color: #e7e7e7;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.12;
}

.course-practice-card p {
  margin: 12px 0 0;
  color: #a9a9a9;
  font-size: 16px;
  line-height: 1.35;
}

.course-ai {
  margin: 24px 16px 0;
  padding: 36px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  border-radius: 24px;
  background: #2a2a2a;
  color: #e7e7e7;
}

.course-ai__visual {
  width: 340px;
  height: 340px;
  margin: 0;
  display: grid;
  place-items: center;
}

.course-ai__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.course-ai h2 {
  max-width: 680px;
  margin: 0;
  color: #e7e7e7;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.course-ai__lead {
  margin: 22px 0 0;
  color: #c2c2c2;
  font-size: 20px;
  line-height: 1.3;
}

.course-ai ul {
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
  list-style: none;
}

.course-ai li {
  padding-left: 25px;
  position: relative;
  color: #e7e7e7;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

.course-ai li::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 0.48em;
  left: 0;
  border-radius: 50%;
  background: #4c4bff;
}

.course-ai__result {
  margin: 26px 0 0;
  padding: 15px 18px;
  border-radius: 14px;
  background: #a5d9d1;
  color: #111;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

.course-portfolio {
  margin: 24px 16px 0;
  padding: 24px 36px 48px;
  color: #e7e7e7;
}

.course-portfolio h2 {
  max-width: 820px;
  margin: 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-portfolio__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-portfolio-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: #2a2a2a;
}

.course-portfolio-card figure {
  margin: 0;
  position: relative;
  aspect-ratio: 768 / 436;
  overflow: hidden;
}

.course-portfolio-card figure span {
  padding: 8px 11px;
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  border-radius: var(--radius-pill);
  background: rgba(24, 24, 24, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.course-portfolio-card figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.course-portfolio-card__content {
  min-height: 300px;
  padding: 24px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.course-portfolio-card h3 {
  margin: 0;
  color: #e7e7e7;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.12;
}

.course-portfolio-card p {
  margin: 12px 0 0;
  color: #a9a9a9;
  font-size: 16px;
  line-height: 1.35;
}

.course-portfolio-card strong {
  margin-top: auto;
  padding-top: 24px;
  color: #a5d9d1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.course-teachers {
  margin: 24px 16px 0;
  padding: 24px 36px 48px;
  color: #e7e7e7;
}

.course-teachers__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.course-teachers h2 {
  max-width: 760px;
  margin: 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-teachers__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.course-teachers__controls > span {
  margin-right: 8px;
  color: #a9a9a9;
  font-size: 14px;
  white-space: nowrap;
}

.course-teachers__controls button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #2a2a2a;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.course-teachers__controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

.course-teachers__viewport {
  margin-top: 40px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.course-teachers__viewport::-webkit-scrollbar {
  display: none;
}

.course-teachers__track {
  display: grid;
  grid-auto-columns: calc((100% - 16px) / 3);
  grid-auto-flow: column;
  gap: 8px;
}

.course-teacher-card {
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 24px;
  background: #2a2a2a;
}

.course-teacher-card figure {
  height: 380px;
  margin: 0;
  overflow: hidden;
  background: #343434;
}

.course-teacher-card figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

.course-teacher-card__content {
  min-height: 154px;
  padding: 20px;
}

.course-teacher-card h3 {
  margin: 0;
  color: #e7e7e7;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.12;
}

.course-teacher-card p {
  margin: 9px 0 0;
  color: #a9a9a9;
  font-size: 15px;
  line-height: 1.3;
}

.course-support-team {
  margin: 24px 16px 0;
  padding: 48px 36px;
  color: #e7e7e7;
}

.course-support-team h2 {
  max-width: 760px;
  margin: 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-support-team__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-support-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 384 / 476;
  border-radius: 24px;
  background: #2a2a2a;
}

.course-support-card::after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  background: linear-gradient(180deg, transparent, rgba(13, 13, 13, 0.86));
}

.course-support-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.course-support-card__content {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 26px;
  left: 24px;
}

.course-support-card h3 {
  margin: 0;
  color: #fff;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.08;
}

.course-support-card p {
  margin: 12px 0 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.3;
}

.course-graduates {
  margin: 24px 16px 0;
  padding: 48px 36px;
  color: #e7e7e7;
}

.course-graduates__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.course-graduates h2 {
  max-width: 900px;
  margin: 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-graduates__controls {
  display: flex;
  gap: 8px;
}

.course-graduates__controls button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #2a2a2a;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.course-graduates__controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

.course-graduates__viewport {
  margin-top: 40px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.course-graduates__viewport::-webkit-scrollbar {
  display: none;
}

.course-graduates__track {
  display: grid;
  grid-auto-columns: calc((100% - 8px) / 2);
  grid-auto-flow: column;
  gap: 8px;
}

.course-graduate-card {
  height: 420px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 24px;
  background: #2a2a2a;
}

.course-graduate-card figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #343434;
}

.course-graduate-card figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.course-graduate-card__content {
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.course-graduate-card__content > p {
  margin: 0;
  color: #b9b9b9;
  font-size: 15px;
  line-height: 1.36;
}

.course-graduate-card__career {
  margin-top: auto;
  padding-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.course-graduate-card__career span {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.course-graduate-card__career small {
  color: #777;
  font-size: 12px;
}

.course-graduate-card__career strong {
  color: #e7e7e7;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.course-graduate-card__career b {
  color: #a5d9d1;
  font-size: 18px;
  font-weight: 500;
}

.course-graduate-card__content > a {
  width: fit-content;
  margin-top: 22px;
  padding: 11px 14px;
  border-radius: 9px;
  background: #f3f3f3;
  color: #1d1d1d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.course-program {
  margin: 24px 16px 0;
  padding: 48px 36px 56px;
  border-radius: 24px;
  background: #2a2a2a;
  color: #e7e7e7;
}

.course-program h2 {
  max-width: 780px;
  margin: 0;
  color: #e7e7e7;
  font-size: 54px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-program__facts {
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  list-style: none;
}

.course-program__facts li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d0d0d0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.course-program__facts span {
  color: #a5d9d1;
  font-size: 18px;
}

.course-program__groups {
  margin-top: 48px;
  display: grid;
  gap: 30px;
}

.course-program-group h3 {
  width: fit-content;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #383838;
  color: #e7e7e7;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.course-program-group__modules {
  overflow: hidden;
  border: 1px solid #393939;
  border-radius: 24px;
  background: #222;
}

.course-program-module + .course-program-module {
  border-top: 1px solid #393939;
}

.course-program-module summary {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  cursor: pointer;
}

.course-program-module summary::-webkit-details-marker {
  display: none;
}

.course-program-module summary > span {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.course-program-module strong {
  color: #e7e7e7;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
}

.course-program-module small {
  color: #929292;
  font-size: 15px;
  line-height: 1.3;
}

.course-program-module summary i {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #303030;
  color: #e7e7e7;
  font-size: 23px;
  font-style: normal;
  line-height: 1;
  transition: transform 180ms ease;
}

.course-program-module[open] summary i {
  transform: rotate(180deg);
}

.course-program-module > ul {
  margin: 0;
  padding: 0 82px 28px 50px;
  display: grid;
  gap: 10px;
  color: #bdbdbd;
  font-size: 16px;
  line-height: 1.4;
}

.course-program-module > ul li::marker {
  color: #a5d9d1;
}

.course-certificate {
  height: 468px;
  margin: 24px 16px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 24px;
  background: #343434;
  color: #e7e7e7;
}

.course-certificate__visual {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #303030;
}

.course-certificate__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.course-certificate__content {
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.course-certificate h2 {
  max-width: 520px;
  margin: 0;
  color: #e7e7e7;
  font-size: 50px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.course-certificate p {
  max-width: 480px;
  margin: 28px 0 0;
  color: #f0f0f0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}

.course-certificate a {
  color: inherit;
  text-underline-offset: 3px;
}

@media (min-width: 981px) {
  .course-hero,
  .course-hero__content,
  .course-hero__visual {
    height: 440px;
    min-height: 0;
  }
}

.course-choice-screen,
.route-picker-screen {
  background: var(--sky);
}

.choice-heading,
.route-picker-heading {
  max-width: 820px;
  margin-bottom: 36px;
}

.choice-heading h2,
.route-picker-heading h2 { margin-bottom: 16px; }
.choice-heading p,
.route-picker-heading p { color: var(--ink-soft); font-size: 16px; line-height: 1.5; }

.course-priority-grid {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.priority-card {
  min-height: 260px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: 0.16s ease;
}

.priority-card:hover,
.priority-card.selected {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.priority-card.selected { background: var(--blue-soft); }
.priority-card > b { margin-bottom: 36px; color: var(--blue); }
.priority-card > span { margin-bottom: 10px; font-size: 18px; font-weight: 600; line-height: 1.25; }
.priority-card p { color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.priority-card i { margin-top: auto; color: var(--blue); font-size: 10px; font-style: normal; text-transform: uppercase; }

.diploma-toggle {
  margin-bottom: 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
}

.diploma-toggle input { opacity: 0; width: 0; height: 0; }
.diploma-toggle span { display: grid; gap: 4px; }
.diploma-toggle small { color: var(--ink-soft); }
.diploma-toggle i { position: relative; width: 44px; height: 24px; border-radius: 20px; background: #cdcdc8; }
.diploma-toggle i::after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: var(--white); transition: 0.16s ease; }
.diploma-toggle input:checked ~ i { background: var(--blue); }
.diploma-toggle input:checked ~ i::after { transform: translateX(20px); }

.track-tabs {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.track-tabs button {
  min-height: 54px;
  padding: 10px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
}

.track-tabs button:last-child { border-right: 0; }
.track-tabs button.active { background: var(--blue); color: var(--white); }

.track-detail {
  min-height: 360px;
  padding: 34px;
  display: none;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 70px;
  border-radius: var(--radius);
  background: var(--white);
}

.track-detail.active { display: grid; }
.track-detail > div > span { color: var(--blue); font-size: 11px; text-transform: uppercase; }
.track-detail h3 { margin: 40px 0 14px; font-size: 42px; }
.track-detail p { color: var(--ink-soft); line-height: 1.5; }
.track-detail ul { margin: 0; padding: 0; display: grid; list-style: none; }
.track-detail li { padding: 16px 0 16px 28px; position: relative; border-bottom: 1px solid var(--line); line-height: 1.35; }
.track-detail li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); }

.route-disclaimer {
  margin: 12px 0 20px;
}

.finish-screen {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--white);
}

.finish-card {
  width: min(900px, 100%);
}

.finish-card .eyebrow { color: var(--lime); }
.finish-card > p { max-width: 680px; color: #bdbdb8; font-size: 18px; line-height: 1.5; }

.finish-summary {
  margin: 36px 0 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #41413d;
  border-radius: var(--radius);
  overflow: hidden;
}

.finish-summary div {
  min-height: 130px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #41413d;
}

.finish-summary div:last-child { border-right: 0; }
.finish-summary span { color: #969691; font-size: 10px; text-transform: uppercase; }
.finish-summary b { font-size: 18px; }

.question-notes {
  margin-bottom: 28px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--lime);
  color: var(--ink);
}

.question-notes span { display: block; margin-bottom: 12px; font-size: 11px; text-transform: uppercase; }
.question-notes p { margin: 6px 0; }

.match-game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  gap: 10px;
}

.match-column {
  display: grid;
  align-content: start;
  gap: 8px;
}

.match-chip {
  min-height: 56px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  text-align: left;
  line-height: 1.25;
  cursor: pointer;
}

.match-chip i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 1.5px solid #aaa;
  border-radius: 50%;
}

.match-chip.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(61, 59, 255, 0.12);
}

.match-chip.selected i,
.match-chip.paired i {
  border-color: var(--blue);
  background: var(--blue);
}

.match-chip.paired {
  background: var(--blue-soft);
  border-color: #c9c7ff;
}

.match-lines {
  padding-top: 25px;
  display: grid;
  grid-template-rows: repeat(4, 56px);
  gap: 8px;
  place-items: center;
  color: #c4c4bf;
}

.match-lines span.active {
  color: var(--blue);
  font-weight: 600;
}

.microcopy {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  text-align: center;
}

.success-strip {
  min-height: 76px;
  margin-bottom: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #bddfcf;
  border-radius: 6px;
  background: var(--mint);
}

.success-strip b { font-size: 18px; }
.success-strip span { color: #35634c; font-size: 13px; text-align: right; }

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

.visual-card {
  min-width: 0;
  padding: 0 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.visual-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.visual-card b,
.visual-card i {
  display: block;
  margin: 10px 11px 0;
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
}

.visual-card i {
  margin-top: 5px;
  color: var(--blue);
  font-size: 10px;
  text-transform: uppercase;
}

.visual-crop {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ecece7;
}

.visual-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metrics-report-screen {
  background: var(--paper);
  padding-top: 48px;
  padding-bottom: 72px;
}

.metrics-report-screen .metrics-report {
  width: min(var(--content), 100%);
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.metrics-report .outcome-heading {
  max-width: 800px;
  margin-bottom: 40px;
}

.metrics-report .outcome-heading h2 {
  margin-bottom: 16px;
  font-size: 50px;
}

.metrics-report .outcome-heading > p {
  max-width: 720px;
  font-size: 18px;
}

.metrics-report .metric-actions {
  margin-top: 28px;
  padding: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border: 1px solid rgba(61, 59, 255, 0.13);
  border-radius: var(--radius-md);
  background: var(--blue-soft);
}

.metrics-report .metric-actions .panel-label {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}

.metrics-report-screen .metrics-grid--signals {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.metrics-report-screen .metrics-grid--signals > article {
  min-width: 0;
  min-height: 430px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.metrics-report-screen .metric-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.metrics-report-screen .metric-card__top small {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.metrics-report-screen .metric-symbol {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--lime);
  font-size: 17px;
}

.metrics-report-screen .metric-comparison {
  margin: 28px 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.metrics-report-screen .metric-comparison > div {
  min-height: 92px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border-radius: 0;
  background: transparent;
}

.metrics-report-screen .metric-comparison > div:last-child {
  background: transparent;
}

.metrics-report-screen .metric-comparison b {
  font-size: 48px;
  line-height: 1;
}

.metrics-report-screen .metric-comparison > div:last-child b {
  color: var(--blue);
}

.metrics-report-screen .metric-comparison span {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.35;
}

.metrics-report-screen .metric-comparison > i {
  color: var(--blue);
  font-size: 24px;
  font-style: normal;
  text-align: center;
}

.metrics-report-screen .metric-rate {
  min-height: 88px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(61, 59, 255, 0.13);
  border-radius: var(--radius-sm);
  background: var(--blue-soft);
}

.metrics-report-screen .metric-rate b {
  color: var(--blue);
  font-size: 44px;
  line-height: 1;
}

.metrics-report-screen .metric-rate span {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.35;
}

.metrics-report-screen .comment-sample {
  min-height: 88px;
  padding: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
}

.metrics-report-screen .comment-sample span {
  padding: 9px 12px;
  border: 1px solid rgba(36, 115, 78, 0.14);
  border-radius: 16px 16px 16px 4px;
  background: var(--mint);
  color: #35634c;
  font-size: 12px;
}

.metrics-report-screen .metric-card > p {
  min-height: 104px;
  margin: 18px 0 0;
  padding: 18px 20px;
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm);
  background: var(--sky);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

.metrics-report-screen .metric-card > p strong {
  display: block;
  margin-bottom: 7px;
  color: var(--blue);
  font-size: 11px;
  text-transform: uppercase;
}

.metrics-report .metric-actions .choice-row {
  min-height: 104px;
  padding: 20px;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 16px;
  align-items: center;
  border-color: rgba(17, 17, 17, 0.14);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 16px;
  font-weight: 600;
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}

.metrics-report .metric-actions .choice-row:hover,
.metrics-report .metric-actions .choice-row.selected {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 8px 20px rgba(61, 59, 255, 0.1);
  transform: translateY(-2px);
}

.metrics-report .metric-actions .choice-row b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}

.metrics-report-screen {
  --metrics-coral: #e15d4f;
  --metrics-coral-soft: #fff2ef;
  --metrics-lavender-soft: #f5f4ff;
  padding: 48px 24px 64px;
}

.metrics-report-screen .metrics-report {
  width: min(var(--content), 100%);
  padding: 28px;
  border: 1px solid #ecece8;
  background: var(--white);
  box-shadow: 0 18px 42px rgba(17, 17, 17, 0.09);
}

.metrics-report-screen .outcome-heading {
  max-width: 780px;
  margin-bottom: 28px;
}

.metrics-report-screen .outcome-heading .eyebrow {
  display: none;
}

.metrics-report-screen .outcome-heading h2 {
  margin-bottom: 16px;
  font-size: 52px;
  line-height: 1;
}

.metrics-report-screen .outcome-heading > p {
  max-width: none;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.35;
}

.metrics-report-screen .metrics-grid--signals {
  gap: 20px;
}

.metrics-report-screen .metrics-grid--signals > article {
  min-height: 506px;
  padding: 24px;
  border: 1px solid #e8e8e4;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.06);
}

.metrics-report-screen .metric-card__top {
  position: relative;
  min-height: 44px;
}

.metrics-report-screen .metric-card__top small {
  position: absolute;
  top: 2px;
  left: 50%;
  min-width: 210px;
  padding: 10px 18px 9px;
  border-radius: 10px;
  color: var(--white);
  font-size: 14px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 3px 8px rgba(17, 17, 17, 0.08);
}

.metrics-report-screen .metric-card--reads .metric-card__top small {
  background: var(--blue);
}

.metrics-report-screen .metric-card--comments .metric-card__top small {
  background: var(--metrics-coral);
}

.metrics-report-screen .metric-symbol {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  font-size: 16px;
}

.metrics-report-screen .metric-card--reads .metric-symbol {
  border: 1px solid #dcdafe;
  background: var(--blue-soft);
  color: var(--blue);
}

.metrics-report-screen .metric-card--reads .metric-symbol svg {
  width: 25px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metrics-report-screen .metric-card--comments .metric-symbol {
  background: var(--metrics-coral-soft);
  color: var(--metrics-coral);
  letter-spacing: 2px;
}

.metrics-report-screen .metric-comparison {
  margin: 28px 0 36px;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 12px;
}

.metrics-report-screen .metric-comparison > div {
  min-height: 84px;
  gap: 9px;
}

.metrics-report-screen .metric-comparison b {
  font-size: 48px;
}

.metrics-report-screen .metric-comparison span {
  font-size: 13px;
}

.metrics-report-screen .metric-comparison > i {
  font-size: 24px;
}

.metrics-report-screen .metric-card--comments .metric-comparison > div:last-child b,
.metrics-report-screen .metric-card--comments .metric-comparison > i {
  color: var(--metrics-coral);
}

.metrics-report-screen .metric-card--reads .metric-comparison {
  position: relative;
}

.metrics-report-screen .metric-card--reads .metric-comparison::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -17px;
  left: 0;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) 0 20%, #d8d8d5 20% 100%);
}

.metrics-report-screen .metric-card--reads .metric-comparison::after {
  content: none;
}

.metrics-report-screen .metric-rate {
  min-height: 96px;
  padding: 18px 22px;
  gap: 20px;
  border-color: #e7e5ff;
  border-radius: 18px;
  background: var(--metrics-lavender-soft);
}

.metrics-report-screen .metric-rate b {
  font-size: 48px;
}

.metrics-report-screen .metric-rate span {
  max-width: 210px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.metrics-report-screen .metric-card--comments .comment-sample {
  min-height: 96px;
  padding: 3px 0 19px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  border: 0;
  background: transparent;
}

.metrics-report-screen .metric-card--comments .comment-sample span {
  position: relative;
  min-width: 0;
  min-height: 60px;
  padding: 12px 12px 12px 48px;
  display: flex;
  align-items: center;
  border: 1px solid #e4e4e0;
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 5px 14px rgba(17, 17, 17, 0.07);
}

.metrics-report-screen .metric-card--comments .comment-sample span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 17px;
  width: 19px;
  height: 15px;
  border: 2px solid var(--ink-soft);
  border-radius: 50%;
  transform: translateY(-50%);
}

.metrics-report-screen .metric-card--comments .comment-sample span::after {
  content: "";
  position: absolute;
  top: calc(50% + 4px);
  left: 20px;
  width: 7px;
  height: 7px;
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(-38deg);
}

.metrics-report-screen .comment-sample b {
  display: block;
}

.metrics-report-screen .comment-sample b {
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
}

.metrics-report-screen .metric-card > p {
  position: relative;
  min-height: 150px;
  margin: 18px 0 0;
  padding: 74px 20px 18px 112px;
  border-left-width: 5px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.metrics-report-screen .metric-card > p strong {
  position: absolute;
  top: 18px;
  left: 24px;
  min-width: 124px;
  margin: 0;
  padding: 7px 12px 6px 40px;
  border-radius: 9px;
  color: var(--white);
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
}

.metrics-report-screen .metric-card > p strong::before {
  content: "!";
  position: absolute;
  top: 5px;
  left: 11px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  font-weight: 700;
}

.metrics-report-screen .metric-card > p > i {
  position: absolute;
  top: 68px;
  left: 24px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 5px 14px rgba(17, 17, 17, 0.06);
  font-size: 34px;
  font-style: normal;
  font-weight: 600;
}

.metrics-report-screen .metric-card > p > span {
  display: block;
}

.metrics-report-screen .metric-card--reads > p {
  border-left-color: var(--blue);
  background: var(--metrics-lavender-soft);
}

.metrics-report-screen .metric-card--reads > p strong {
  background: var(--blue);
}

.metrics-report-screen .metric-card--reads > p strong::before,
.metrics-report-screen .metric-card--reads > p > i {
  color: var(--blue);
}

.metrics-report-screen .metric-card--reads > p > i {
  font-size: 0;
}

.metrics-report-screen .metric-card--reads > p > i::before {
  content: "";
  width: 27px;
  height: 42px;
  background: var(--blue);
  clip-path: polygon(54% 0, 14% 52%, 45% 52%, 34% 100%, 86% 39%, 54% 39%);
}

.metrics-report-screen .metric-card--comments > p {
  border-left-color: var(--metrics-coral);
  background: var(--metrics-coral-soft);
}

.metrics-report-screen .metric-card--comments > p strong {
  background: var(--metrics-coral);
}

.metrics-report-screen .metric-card--comments > p strong::before,
.metrics-report-screen .metric-card--comments > p > i {
  color: var(--metrics-coral);
}

.metrics-report .metric-actions {
  margin-top: 20px;
  padding: 22px;
  gap: 12px;
  border-color: var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(17, 17, 17, 0.04);
}

.metrics-report .metric-actions .panel-label {
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 600;
}

.metrics-report .metric-actions .choice-row {
  min-height: 88px;
  padding: 18px;
  border-color: #e1e1dd;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.04);
  font-size: 16px;
}

.metrics-report .metric-actions .choice-row > span {
  max-width: 220px;
}

.metrics-report .metric-actions .choice-row b {
  font-size: 22px;
  background: transparent;
}

.metrics-report .metric-actions .choice-row:hover,
.metrics-report .metric-actions .choice-row.selected {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.heart-cloud,
.reaction-row {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.heart-cloud i { color: #db6658; font-size: 18px; font-style: normal; }
.heart-cloud i:nth-child(2) { font-size: 27px; }
.heart-cloud i:nth-child(3) { font-size: 14px; }
.heart-cloud i:nth-child(4) { font-size: 22px; }
.heart-cloud i:nth-child(5) { font-size: 12px; }

.mini-bars {
  height: 68px;
  display: flex;
  align-items: end;
  gap: 5px;
}

.mini-bars i { width: 100%; min-height: 6px; border-radius: 2px 2px 0 0; background: var(--blue); }

.reaction-row i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue);
  font-size: 13px;
  font-style: normal;
}

.report-question {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-left: 4px solid var(--blue);
  background: var(--blue-soft);
}

.report-question span { color: var(--blue); font-size: 10px; text-transform: uppercase; }
.report-question p { margin: 6px 0 0; font-size: 12px; line-height: 1.4; }

.report-question--strong {
  padding: 18px 20px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: var(--white);
}

.report-question--strong span {
  color: var(--lime);
  font-size: 11px;
  font-weight: 600;
}

.report-question--strong p {
  max-width: 650px;
  margin-top: 8px;
  font-size: 15px;
}

.report-before-after {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  gap: 12px;
}

.report-visual,
.report-actions {
  min-height: 320px;
  padding: 26px;
  border-radius: var(--radius);
}

.report-visual { display: flex; flex-direction: column; background: var(--blue); color: var(--white); }
.report-visual > span,
.report-actions > span { font-size: 10px; text-transform: uppercase; }
.report-visual > span { color: #d8d7ff; }
.report-visual > b { margin-top: auto; font-size: 26px; }
.report-visual > small { margin-top: 7px; color: #d8d7ff; font-size: 11px; }

.report-chart {
  height: 140px;
  margin-top: 24px;
  display: flex;
  align-items: end;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.35);
}

.report-chart i { width: 100%; min-height: 10px; background: var(--lime); }

.report-actions { background: var(--white); border: 1px solid var(--line); }
.report-actions > span { display: block; margin-bottom: 20px; color: var(--blue); }
.report-actions article { min-height: 105px; padding: 16px 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; border-top: 1px solid var(--line); }
.report-actions article > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); font-size: 10px; font-style: normal; font-weight: 600; }
.report-actions article b { font-size: 15px; }
.report-actions article p { margin: 6px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.metrics-result .mini-case-result { margin-bottom: 14px; }
.metrics-result .career-pulse { margin-bottom: 24px; }

.gate-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: 70px;
  align-items: center;
  background: var(--ink);
  color: var(--white);
}

.gate-copy > p {
  max-width: 680px;
  color: #c8c8c3;
  font-size: 18px;
  line-height: 1.5;
}

.gate-copy .eyebrow { color: var(--lime); }

.gate-value {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #41413d;
  border-radius: var(--radius);
  overflow: hidden;
}

.gate-value div {
  min-height: 130px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #41413d;
  border-bottom: 1px solid #41413d;
}

.gate-value div:nth-child(2n) { border-right: 0; }
.gate-value div:nth-last-child(-n + 2) { border-bottom: 0; }
.gate-value b { margin-bottom: auto; color: var(--lime); }
.gate-value span { margin-bottom: 5px; color: #9c9c97; font-size: 11px; }
.gate-value strong { font-size: 16px; }
.gate-value small { margin-top: 8px; color: #8b8b86; font-size: 9px; line-height: 1.35; }

.lead-form {
  padding: 34px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}

.lead-form h3 {
  margin-bottom: 24px;
}

.lead-form label {
  margin-bottom: 14px;
  display: grid;
  gap: 7px;
}

.lead-form label span {
  color: var(--ink-soft);
  font-size: 11px;
}

.lead-form input {
  width: 100%;
  min-height: 51px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fafaf7;
}

.lead-form input:focus {
  border-color: var(--blue);
}

.lead-form .button {
  margin-top: 8px;
}

.lead-form small {
  display: block;
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 10px;
  text-align: center;
}

.analysis-screen {
  display: grid;
  place-items: center;
  background: var(--sky);
}

.analysis-console {
  width: min(880px, 100%);
  padding: 44px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 10px 10px 0 rgba(61, 59, 255, 0.18);
}

.analysis-heading h2 {
  max-width: 720px;
  margin-bottom: 14px;
  font-size: 48px;
}

.analysis-heading p {
  max-width: 650px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}

.analysis-list {
  margin: 32px 0 20px;
  border-top: 1px solid var(--line);
}

.analysis-list > div {
  min-height: 72px;
  padding: 12px 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  animation: analysisRow 0.38s ease both;
  animation-delay: var(--delay);
}

.analysis-list i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  font-style: normal;
  font-weight: 600;
}

.analysis-list span,
.analysis-list b,
.analysis-list small { display: block; }
.analysis-list b { margin-bottom: 4px; font-size: 14px; }
.analysis-list small { color: var(--ink-soft); font-size: 11px; }
.analysis-list em { color: #24734e; font-size: 10px; font-style: normal; text-transform: uppercase; }

.analysis-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #e8e8e3;
}

.analysis-progress span {
  height: 100%;
  display: block;
  background: var(--blue);
  animation: analysisProgress 1.1s ease both;
}

.analysis-ready {
  margin: 18px 0 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.analysis-ready span {
  min-height: 72px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
}

.analysis-ready span:nth-child(1) {
  background: var(--blue);
  color: var(--white);
}

.analysis-ready span:nth-child(2) {
  background: #ff9a8d;
  color: var(--ink);
}

.analysis-ready span:nth-child(3) {
  background: var(--lime);
  color: var(--ink);
}

@keyframes analysisRow {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes analysisProgress {
  from { width: 0; }
  to { width: 100%; }
}

.gate-screen {
  display: block;
  background: var(--sky);
  color: var(--ink);
}

.gate-heading {
  width: min(var(--content), 100%);
  margin: 0 auto 36px;
}

.gate-heading h2 {
  max-width: 900px;
  margin: 0;
  font-size: 64px;
}

.gate-layout {
  width: min(var(--content), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.72fr);
  align-items: start;
  gap: 56px;
}

.locked-report {
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: 9px 9px 0 rgba(17, 17, 17, 0.18);
}

.locked-report__bar {
  min-height: 42px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(90deg, #79b8eb, #d263a0);
  color: var(--white);
  font-size: 11px;
}

.locked-report__bar span {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 3px;
  text-transform: uppercase;
}

.locked-report__body {
  padding: 28px;
}

.locked-report__body > span {
  color: var(--ink-soft);
  font-size: 10px;
  text-transform: uppercase;
}

.locked-report__body h3 {
  margin: 10px 0 24px;
  font-size: 33px;
  filter: blur(7px);
  user-select: none;
}

.locked-report__body h3 i { color: var(--blue); font-style: normal; }

.locked-feedback {
  padding: 20px 0 26px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.locked-feedback p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
  filter: blur(4px);
  user-select: none;
}

.locked-feedback b {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
}

.report-inside {
  padding-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.report-inside > b {
  grid-column: 1 / -1;
  font-size: 13px;
  text-transform: uppercase;
}

.report-inside div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.report-inside div span {
  color: var(--blue);
}

.gate-offer {
  padding-top: 8px;
}

.gate-offer h3 {
  margin-bottom: 22px;
  font-size: 31px;
}

.gate-offer ul {
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 13px;
  list-style: none;
}

.gate-offer li {
  position: relative;
  padding-left: 26px;
  line-height: 1.35;
}

.gate-offer li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--blue);
}

.phone-gate-form {
  padding: 24px;
  border-radius: var(--radius);
  background: #d2649f;
  color: var(--white);
}

.phone-gate-form > label:first-child {
  display: grid;
  gap: 7px;
}

.phone-gate-form label > span { font-size: 11px; }

.phone-gate-form input[type="tel"] {
  width: 100%;
  min-height: 54px;
  padding: 13px 14px;
  border: 0;
  border-radius: 5px;
  background: var(--white);
  color: var(--ink);
}

.phone-gate-form .button { margin: 14px 0 4px; }

.consent-row {
  margin-top: 14px;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 9px !important;
  cursor: pointer;
}

.consent-row input {
  width: 20px !important;
  height: 20px;
  min-height: 0 !important;
  margin: 0;
  accent-color: var(--blue);
}

.consent-row span {
  font-size: 10px !important;
  line-height: 1.35;
}

.consent-row--optional { color: #fff3fa; }

.result-screen {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 360px);
  align-items: start;
  gap: 24px;
  background: var(--paper);
}

.result-main {
  min-width: 0;
}

.result-sticky-form {
  margin: 24px 24px 24px 0;
  padding: 22px;
  position: sticky;
  top: 88px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.result-sticky-form h3 {
  margin: 8px 0 8px;
  font-size: 25px;
}

.result-sticky-form > p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.45;
}

.result-sticky-form form {
  display: grid;
  gap: 11px;
}

.result-sticky-form form > label:not(.consent-row) {
  display: grid;
  gap: 5px;
}

.result-sticky-form form > label > span {
  color: var(--ink-soft);
  font-size: 9px;
}

.result-sticky-form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 43px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fafaf7;
}

.result-sticky-form > small {
  margin-top: 10px;
  display: block;
  color: var(--ink-soft);
  font-size: 9px;
  text-align: center;
}

.result-intro,
.band-inner,
.consultation {
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
}

.result-intro {
  padding: 76px 0 88px;
}

.result-intro > h2 {
  max-width: min(880px, 100%);
  margin-bottom: 20px;
  font-size: clamp(var(--text-h1), 4.3vw, var(--text-display));
  overflow-wrap: break-word;
  text-wrap: balance;
}

.result-intro > p {
  max-width: 760px;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1.5;
}

.map-value-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.map-value-grid > div {
  min-height: 155px;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: var(--white);
}

.map-value-grid > div:last-child { border-right: 0; }
.map-value-grid b { display: block; margin-bottom: 24px; color: var(--blue); font-size: 11px; }
.map-value-grid span { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.map-value-grid p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }

.profile-pair {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-card {
  min-height: 300px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.profile-card--main {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.profile-card > span {
  display: block;
  margin-bottom: 34px;
  color: var(--ink-soft);
  font-size: 11px;
  text-transform: uppercase;
}

.profile-card--main > span { color: #d3d2ff; }
.profile-card img { width: 54px; height: 54px; margin-bottom: 28px; }
.profile-card h3 { margin-bottom: 12px; font-size: 32px; }
.profile-card p { margin-bottom: 0; color: var(--ink-soft); line-height: 1.5; }
.profile-card--main p { color: #e1e0ff; }

.profile-proof {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.profile-card--main .profile-proof { border-color: rgba(255,255,255,0.28); }
.profile-proof b,
.profile-proof small { display: block; }
.profile-proof b { margin-bottom: 7px; color: var(--blue); font-size: 10px; text-transform: uppercase; }
.profile-proof small { color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.profile-card--main .profile-proof b { color: var(--lime); }
.profile-card--main .profile-proof small { color: #e1e0ff; }

.result-band {
  padding: 82px 0;
  background: var(--white);
  border-top: 1px solid var(--line);
}

.result-band--light { background: var(--sky); }
.result-band--soft { background: var(--mint); }

.section-heading {
  max-width: 720px;
  margin-bottom: 42px;
}

.section-heading h2 {
  margin-bottom: 15px;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.5;
}

.profession-cycle {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid #cddce6;
  border-radius: var(--radius);
  overflow: hidden;
}

.profession-cycle div {
  min-height: 160px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #cddce6;
  background: rgba(255, 255, 255, 0.45);
}

.profession-cycle div:last-child { border-right: 0; }
.profession-cycle b { color: var(--blue); }
.profession-cycle span { font-size: 14px; line-height: 1.3; }

.route-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.65fr) minmax(0, 1.25fr);
  gap: 70px;
}

.route-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.route-steps div {
  min-height: 190px;
  padding: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.route-steps b { display: block; margin-bottom: 35px; color: var(--blue); }
.route-steps span { display: block; margin-bottom: 8px; font-size: 17px; font-weight: 600; }
.route-steps p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }

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

.growth-layout > div:first-child {
  padding-right: 70px;
  border-right: 1px solid #bad9cb;
}

.growth-layout .eyebrow { color: #266c4b; }
.growth-layout h3 { margin-bottom: 0; font-size: 28px; line-height: 1.25; }

.consultation {
  min-height: 640px;
  margin-top: 80px;
  margin-bottom: 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.65fr);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
}

.consultation-copy {
  padding: 62px;
}

.consultation-copy .eyebrow { color: var(--lime); }
.consultation-copy h2 { max-width: 650px; margin-bottom: 20px; font-size: 54px; }
.consultation-copy > p { max-width: 680px; color: #c8c8c3; font-size: 18px; line-height: 1.5; }
.consultation-copy ul { margin: 28px 0 36px; padding: 0; display: grid; gap: 12px; list-style: none; }
.consultation-copy li { position: relative; padding-left: 25px; color: #e1e1dd; }
.consultation-copy li::before { content: "✓"; position: absolute; left: 0; color: var(--lime); }
.consultation-copy > small { color: #9e9e99; }

.consultation-side {
  padding: 50px 38px;
  display: flex;
  flex-direction: column;
  background: var(--lime);
  color: var(--ink);
}

.consultation-side > span { font-size: 12px; text-transform: uppercase; }
.consultation-side > strong { margin-top: 30px; font-size: 160px; line-height: 0.8; }
.consultation-side > b { margin-top: 18px; font-size: 24px; line-height: 1.15; }
.consultation-side > div { margin-top: auto; }

.score-bars {
  display: grid;
  gap: 12px;
}

.score-bars > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.score-bars i {
  height: 7px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(17, 17, 17, 0.15);
}

.score-bars i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--blue);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100;
  max-width: calc(100vw - 32px);
  padding: 13px 18px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  box-shadow: var(--shadow);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.tech-menu {
  position: fixed;
  z-index: 240;
  right: 18px;
  top: 82px;
  display: grid;
  justify-items: end;
  gap: 10px;
  font-family: "Graphik", Arial, sans-serif;
}

.tech-menu__handle,
.tech-menu button {
  font: inherit;
}

.tech-menu__handle {
  min-height: 42px;
  padding: 8px 10px 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.18);
  cursor: pointer;
}

.tech-menu__handle span {
  font-size: 12px;
  font-weight: 600;
}

.tech-menu__handle b {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: 11px;
}

.tech-menu__panel {
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 116px);
  display: none;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 70px rgba(17, 17, 17, 0.2);
  backdrop-filter: blur(18px);
}

.tech-menu.is-open .tech-menu__panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.tech-menu__head {
  padding: 14px 14px 12px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.tech-menu__head div {
  display: grid;
  gap: 3px;
}

.tech-menu__head span {
  color: var(--blue);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.tech-menu__head b {
  font-size: 18px;
  line-height: 1.15;
}

.tech-menu__head button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.tech-menu__modes {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border-bottom: 1px solid var(--line);
}

.tech-menu__modes button,
.tech-menu__list button,
.tech-preview-card__top button {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
  line-height: 1.25;
}

.tech-menu__modes button {
  min-height: 38px;
  padding: 8px;
  font-size: 12px;
}

.tech-menu__modes button.active,
.tech-menu__list button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

.tech-menu__list {
  overflow-y: auto;
  padding: 6px 10px 12px;
}

.tech-menu__list details {
  border-bottom: 1px solid #ecece7;
}

.tech-menu__list details:last-child {
  border-bottom: 0;
}

.tech-menu__list summary {
  padding: 11px 2px 8px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.tech-menu__list button {
  width: 100%;
  min-height: 36px;
  margin-bottom: 6px;
  padding: 8px 10px;
  display: block;
  color: var(--ink);
  font-size: 12px;
  text-align: left;
}

.tech-menu__list button:hover,
.tech-preview-card__top button:hover {
  border-color: var(--blue);
}

.tech-all-screen {
  min-height: calc(100vh - 64px);
  padding: 46px max(20px, calc((100vw - 1440px) / 2)) 72px;
  background: #eeeeea;
}

.tech-all-screen__heading {
  max-width: 780px;
  margin-bottom: 28px;
}

.tech-all-screen__heading h1 {
  margin-bottom: 14px;
  font-size: 52px;
}

.tech-all-screen__heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}

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

.tech-preview-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 14px 42px rgba(17, 17, 17, 0.08);
}

.tech-preview-card__top {
  min-height: 58px;
  padding: 10px 12px 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.tech-preview-card__top div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.tech-preview-card__top span {
  color: var(--blue);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.tech-preview-card__top b {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tech-preview-card__top button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 7px 10px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
}

.tech-preview-frame {
  height: 430px;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.tech-preview-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -60px 55px rgba(255, 255, 255, 0.56);
}

.tech-preview-frame > .screen {
  width: 1180px;
  min-height: 820px;
  padding: 46px;
  pointer-events: none;
  transform: scale(0.52);
  transform-origin: top left;
  animation: none;
}

.tech-preview-frame .messenger-screen {
  padding: 44px;
}

.tech-preview-frame .result-screen {
  width: 1180px;
  padding: 0;
}

.tech-preview-frame .result-intro,
.tech-preview-frame .band-inner,
.tech-preview-frame .consultation {
  width: min(var(--content), calc(100% - 48px));
}

/* Stage 1: global design-system refinements */
.hero-screen,
.onboarding-screen,
.access-screen,
.quiz-screen,
.answer-analysis-screen,
.messenger-screen,
.post-generation-screen,
.analysis-screen,
.course-choice-screen,
.route-picker-screen {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 42%),
    var(--sky);
}

.post-builder-screen,
.post-visual-screen,
.post-result-screen,
.audience-scene-screen,
.motive-game-screen,
.tone-mixer-screen,
.course-screen,
.result-screen {
  background: var(--paper);
}

.scene-window,
.access-device,
.messenger,
.answer-analysis-card,
.analysis-console,
.locked-report,
.lead-form,
.result-sticky-form,
.map-value-grid,
.profile-card,
.course-numbers,
.course-benefit-grid article,
.student-story-grid article,
.priority-card,
.diploma-toggle,
.track-detail,
.telegram-window,
.telegram-post-preview,
.post-result-publication,
.post-generation,
.post-choice-card,
.metrics-report,
.metric-card,
.manager-confirmation,
.finish-card,
.brief-outcome,
.audience-result,
.publication-result,
.metrics-result,
.brief-role-summary,
.brief-next-task,
.motive-workbench,
.brand-tone-console,
.audience-neighborhood,
.clear-brief-hero,
.clear-launch-task,
.clear-brief-facts,
.clear-brand-poster,
.practice-bridge {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.scene-window,
.access-device,
.messenger,
.answer-analysis-card,
.analysis-console,
.locked-report,
.lead-form,
.result-sticky-form,
.map-value-grid,
.profile-card,
.course-numbers,
.course-benefit-grid article,
.student-story-grid article,
.priority-card,
.diploma-toggle,
.track-detail,
.telegram-post-preview,
.post-result-publication,
.post-generation,
.post-choice-card,
.metrics-report,
.metric-card,
.manager-confirmation,
.finish-card,
.brief-outcome,
.audience-result,
.publication-result,
.metrics-result,
.brief-role-summary,
.brief-next-task,
.practice-bridge {
  background: var(--white);
}

.window-bar,
.access-bar,
.messenger-bar,
.action-panel,
.access-form,
.lead-form input,
.result-sticky-form input:not([type="checkbox"]) {
  background: var(--color-surface-soft);
}

.hero-time,
.generation-statuses i,
.analysis-list i,
.confirmation-mark,
.student-story-grid i {
  background: var(--lime);
  color: var(--ink);
}

.hero-time {
  border: var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  box-shadow: none;
}

.hero-lead,
.onboarding-card > p,
.quiz-heading p,
.answer-analysis-card > p,
.workday-heading > p,
.post-builder-heading > p,
.choice-heading p,
.route-picker-heading p,
.course-intro p,
.section-heading p,
.result-intro > p {
  color: var(--ink-soft);
  font-size: var(--text-body-lg);
  line-height: 1.5;
}

.value-list {
  gap: var(--space-3);
}

.value-list span {
  min-height: 60px;
  border: var(--border);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-soft);
}

.hero-scene::before {
  opacity: 1;
}

.scene-brief,
.generation-selections span,
.analysis-ready span,
.priority-card.selected,
.quiz-option.selected,
.choice-row.selected,
.post-choice-card.selected {
  background: var(--blue-soft);
}

.panel-label,
.form-kicker {
  color: var(--blue);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.scene-brief {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: var(--radius-md);
}

.scene-brief b,
.track-tabs button,
.choice-row,
.quiz-option,
.map-motive-point,
.motive-post-slot > div,
.generation-statuses > div,
.course-support span,
.report-actions,
.phone-gate-form input[type="tel"],
.onboarding-form input,
.access-field input,
.lead-form input,
.result-sticky-form input:not([type="checkbox"]) {
  border-color: var(--line);
  border-radius: var(--radius-md);
}

.onboarding-form input,
.access-field input,
.lead-form input,
.phone-gate-form input[type="tel"],
.result-sticky-form input:not([type="checkbox"]) {
  min-height: 54px;
  padding: 13px 16px;
  border: var(--border);
  color: var(--ink);
  font-size: var(--text-body);
  outline: 0;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}

.onboarding-form input::placeholder,
.access-field input::placeholder,
.lead-form input::placeholder,
.phone-gate-form input[type="tel"]::placeholder,
.result-sticky-form input:not([type="checkbox"])::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 60%, var(--white));
}

.onboarding-form input:focus,
.access-field input:focus,
.lead-form input:focus,
.phone-gate-form input[type="tel"]:focus,
.result-sticky-form input:not([type="checkbox"]):focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 4px var(--color-selected-ring);
}

.access-field,
.lead-form label span,
.result-sticky-form form > label > span,
.phone-gate-form label > span {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.consent-option,
.consent-row {
  color: var(--ink-soft);
}

.consent-option input,
.consent-row input {
  accent-color: var(--blue);
}

.quiz-option,
.choice-row,
.priority-card,
.post-choice-card,
.map-motive-point,
.track-tabs button,
.post-visual-grid button {
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast);
}

.quiz-option:hover,
.choice-row:hover,
.priority-card:hover,
.post-choice-card:hover,
.map-motive-point:hover,
.track-tabs button:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--color-selected-ring), var(--shadow-soft);
}

.quiz-option.selected,
.choice-row.selected,
.priority-card.selected,
.post-choice-card.selected,
.track-tabs button.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue);
}

.quiz-option:hover .radio-dot,
.quiz-option.selected .radio-dot {
  border-color: var(--blue);
  background: radial-gradient(circle, var(--blue) 0 42%, transparent 46%);
}

.radio-dot {
  border-color: color-mix(in srgb, var(--ink-soft) 58%, var(--line));
}

.quiz-feedback-popup {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
}

.feedback-mark {
  background: var(--blue);
}

.access-avatar,
.mentor-avatar,
.avatar,
.typing-avatar {
  background: #ffffff url("designe/anya-avatar.jpg") center 38% / cover no-repeat;
  background-image: image-set(url("designe/anya-avatar.webp") type("image/webp"), url("designe/anya-avatar.jpg") type("image/jpeg"));
}

.mentor--client .mentor-avatar,
.avatar--client,
.messenger-typing--client .typing-avatar {
  background: #ffffff url("designe/oleg-avatar.jpg") center 42% / cover no-repeat;
  background-image: image-set(url("designe/oleg-avatar.webp") type("image/webp"), url("designe/oleg-avatar.jpg") type("image/jpeg"));
  color: transparent;
  font-size: 0;
}

.hero-message-avatar {
  background-image: image-set(url("designe/anya-avatar.webp") type("image/webp"), url("designe/anya-avatar.jpg") type("image/jpeg"));
}

.messenger,
.access-device {
  border: var(--border);
}

.message-feed {
  background:
    linear-gradient(180deg, rgba(247, 247, 245, 0.8), rgba(255, 255, 255, 0) 28%),
    var(--white);
}

.bubble {
  border-radius: var(--radius-md);
}

.bubble.them,
.access-message p {
  border-color: #d6e8ff;
  background: #eaf3ff;
  color: var(--ink);
}

.client-bubble {
  border-color: color-mix(in srgb, var(--mint) 72%, var(--line));
  background: var(--mint) !important;
}

.bubble.me {
  background: var(--blue);
}

.ai-avatar,
.messenger-typing--ai .typing-avatar {
  background: var(--mint);
  color: var(--ink);
}

.bubble.ai {
  border-color: color-mix(in srgb, var(--mint) 70%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--mint) 58%, var(--white));
}

.bubble.ai small {
  color: var(--color-success);
}

.bubble.ai.ai-note {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
  background: var(--blue-soft);
}

.action-panel {
  border-top: var(--border);
}

.brief-dialog-prompt,
.transition-screen,
.motive-token-tray,
.tone-control-panel,
.post-visual-choice,
.consultation,
.finish-screen {
  background: var(--color-workspace);
  color: var(--white);
}

.transition-screen.workday-screen {
  background: #f4f8ff;
  color: var(--ink);
}

.motive-workbench,
.brand-tone-console {
  overflow: hidden;
}

.motive-token--program .motive-token__art,
.post-choice-card:nth-child(2) > i {
  background: var(--coral);
  color: var(--ink);
}

.motive-token--rhythm .motive-token__art,
.post-choice-card:nth-child(3) > i {
  background: var(--mint);
  color: var(--ink);
}

.post-choice-card:nth-child(2) {
  border-top-color: var(--coral);
}

.post-choice-card:nth-child(3) {
  border-top-color: var(--mint);
}

.tone-readout {
  border-color: color-mix(in srgb, var(--white) 14%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-workspace-soft);
}

.tone-preview-panel,
.telegram-window,
.telegram-window__chat {
  background: var(--sky);
}

.tone-preview-bar,
.telegram-window__bar {
  background: var(--blue);
}

.telegram-message,
.tone-preview-message {
  border-radius: var(--radius-md);
}

.post-result-checks span,
.success-strip {
  border-color: color-mix(in srgb, var(--mint) 72%, var(--line));
  background: var(--mint);
}

.post-result-checks i {
  background: var(--color-success);
}

.locked-report {
  border-width: 1px;
}

.locked-report__bar {
  background: linear-gradient(90deg, var(--blue), var(--coral));
}

.phone-gate-form {
  border-radius: var(--radius-lg);
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}

.phone-gate-form .button--primary {
  background: var(--lime);
  color: var(--ink);
  box-shadow: none;
}

.phone-gate-form .button--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lime) 82%, var(--white));
  box-shadow: none;
}

.consent-row--optional {
  color: color-mix(in srgb, var(--white) 82%, var(--blue-soft));
}

.profile-card--main {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 18px 42px rgba(61, 59, 255, 0.18);
}

.result-band,
.student-stories {
  border-radius: 0;
  box-shadow: none;
}

.course-final-cta {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.finish-card {
  background: transparent;
  color: var(--white);
  box-shadow: none;
}

.finish-summary {
  border-color: color-mix(in srgb, var(--white) 18%, transparent);
  border-radius: var(--radius-lg);
}

.finish-summary div {
  border-color: color-mix(in srgb, var(--white) 18%, transparent);
}

.track-tabs {
  border-radius: var(--radius-md);
}

.track-tabs button.active {
  background: var(--blue);
  color: var(--white);
}

.diploma-toggle i {
  background: color-mix(in srgb, var(--ink-soft) 28%, var(--line));
}

.diploma-toggle input:checked ~ i {
  background: var(--blue);
}

.analysis-console {
  box-shadow: 10px 10px 0 var(--blue-soft), var(--shadow-soft);
}

.analysis-progress,
.generation-line,
.score-bars i {
  background: color-mix(in srgb, var(--line) 82%, var(--white));
}

.analysis-progress span,
.generation-line span,
.score-bars i b {
  background: linear-gradient(90deg, var(--blue), var(--lime));
}

.tech-all-screen {
  background: var(--paper);
}

@media (max-width: 980px) {
  h1 { font-size: 54px; }
  h2 { font-size: 40px; }

  .hero-screen {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 52px;
  }

  .hero-scene { min-height: 460px; }
  .hero-scene::before { width: min(720px, calc(100% + 96px)); height: 104%; left: 50%; transform: translate(-50%, -50%); }
  .hero-social-post { width: min(390px, 74%); }
  .hero-message { left: calc(50% - 258px); }
  .hero-reaction { right: calc(50% - 262px); }
  .hero-metric { right: calc(50% - 270px); }
  .scene-window { width: min(560px, 92%); }
  .value-list { grid-template-columns: 1fr; }
  .quiz-wrap {
    width: min(720px, 100%);
    display: block;
  }
  .quiz-heading {
    margin-bottom: 28px;
    padding-top: 0;
  }
  .audience-scene-workspace,
  .tone-mixer-workspace {
    width: min(1080px, 100%);
    display: block;
  }
  .audience-scene-heading,
  .tone-mixer-heading {
    margin-bottom: 24px;
    padding-top: 0;
  }
  .tone-mixer-workspace .brand-tone-console {
    grid-row: auto;
    grid-column: auto;
  }
  .workday-task-grid { grid-template-columns: 1fr; }
  .workday-task-grid article { min-height: 148px; }

  .gate-screen {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .gate-layout { grid-template-columns: 1fr; gap: 34px; }
  .result-screen { grid-template-columns: 1fr; }
  .result-sticky-form {
    width: calc(100% - 48px);
    margin: 24px auto 0;
    position: static;
    grid-row: 1;
  }
  .result-main { grid-row: 2; }
  .course-hero { grid-template-columns: 1fr; }
  .course-hero__visual { min-height: 420px; margin: 0 18px 18px; }
  .course-profession { grid-template-columns: 1fr; }
  .course-profession__visual { height: auto; aspect-ratio: 668 / 376; }
  .course-growth__layout { grid-template-columns: 1fr; }
  .course-growth__visual { min-height: 0; aspect-ratio: 668 / 376; }
  .course-salary-card { padding: 26px; }
  .course-salary-card--entry { min-height: 156px; }
  .course-salary-card--middle { min-height: 216px; }
  .course-salary-card--senior { min-height: 280px; }
  .course-salary-card__amount { font-size: 32px; }
  .course-salary-card__period { font-size: 13px; }
  .course-outcomes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-career__grid { gap: 24px; }
  .course-practice__grid { grid-template-columns: 1fr; }
  .course-ai { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
  .course-ai__visual { width: 280px; height: 280px; }
  .course-portfolio__grid { grid-template-columns: 1fr; }
  .course-portfolio-card { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr); }
  .course-portfolio-card figure { height: 100%; min-height: 260px; aspect-ratio: auto; }
  .course-portfolio-card__content { min-height: 260px; }
  .course-teachers__track { grid-auto-columns: calc((100% - 8px) / 2); }
  .course-support-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course-graduates__track { grid-auto-columns: 100%; }
  .course-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .route-layout { grid-template-columns: 1fr; gap: 20px; }

  .consultation { grid-template-columns: 1fr; }
  .consultation-side { min-height: 360px; }
  .consultation-side > strong { font-size: 110px; }

  .brand-hero-grid { grid-template-columns: minmax(0, 1fr) 180px; }
  .brand-summary { grid-column: 1 / -1; min-height: 340px; }
  .brief-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opening-feature__copy h2 { font-size: 40px; }
  .course-priority-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-numbers div:nth-child(2) { border-right: 0; }
  .course-numbers div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .course-support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .published-post { grid-template-columns: minmax(0, 0.85fr) minmax(380px, 1.15fr); }
  .published-visual { min-height: 600px; }
  .post-result-layout { grid-template-columns: 1fr; }
  .post-result-summary {
    position: static;
  }
  .post-result-publication { grid-template-columns: 1fr; }
  .post-result-visual { min-height: 420px; max-height: 560px; }
  .audience-map-board { grid-template-columns: minmax(230px, 1fr) 110px minmax(230px, 1fr); padding-right: 20px; padding-left: 20px; }
  .neighborhood-result-map { gap: 100px 150px; }
  .tech-preview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar {
    height: 56px;
    padding: 0 16px;
  }

  .brand img { width: 84px; }
  .topbar__actions { gap: 16px; }
  .topbar__action { font-size: 12px; }
  .progress { top: 55px; }
  .stage { min-height: calc(100vh - 56px); }

  .screen {
    min-height: calc(100vh - 56px);
    padding: 32px 16px;
  }

  h1 { font-size: 42px; line-height: 1.02; }
  h2 { font-size: 34px; line-height: 1.06; }
  h3 { font-size: 22px; }
  .eyebrow { margin-bottom: 13px; }

  .button {
    width: 100%;
    min-height: 54px;
    padding: 13px 16px;
    gap: 12px;
  }

  .hero-screen {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 34px;
    overflow: hidden;
  }

  .hero-copy { width: 100%; max-width: none; }
  .hero-copy h1 {
    max-width: 330px;
    font-size: clamp(29px, 8vw, 34px);
  }
  .hero-lead {
    max-width: 330px;
    font-size: 17px;
  }
  .hero-pills { margin-bottom: 16px; }
  .hero-pill { min-height: 32px; padding: 7px 10px; }
  .value-list { margin-bottom: 24px; }
  .hero-screen .value-list { gap: 8px; }
  .hero-screen .value-list span {
    min-height: 56px;
    padding: 11px 12px;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    font-size: 14px;
  }
  .hero-screen .value-list img {
    width: 28px;
    height: 28px;
    padding: 6px;
  }
  .hero-copy > small { text-align: center; }
  .hero-scene {
    width: 100%;
    min-height: 550px;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 4px;
  }
  .hero-scene::before {
    width: calc(100% + 130px);
    height: 106%;
    left: 50%;
    border-radius: 0;
    background:
      radial-gradient(ellipse at 18% 74%, rgba(216, 255, 84, 0.28), rgba(216, 255, 84, 0) 36%),
      radial-gradient(ellipse at 84% 32%, rgba(89, 76, 255, 0.26), rgba(89, 76, 255, 0) 43%),
      radial-gradient(ellipse at 52% 18%, rgba(255, 122, 210, 0.13), rgba(255, 122, 210, 0) 36%),
      radial-gradient(ellipse at 62% 78%, rgba(157, 188, 255, 0.18), rgba(157, 188, 255, 0) 44%);
  }
  .hero-scene::after {
    display: block;
    left: -28px;
    bottom: 32px;
    width: 146px;
    height: 146px;
    opacity: 0.72;
  }
  .hero-social-post {
    width: min(282px, 78vw);
    margin: 88px 0 0 clamp(58px, 18vw, 78px);
    padding: 11px;
    transform: rotate(2.5deg);
  }
  .hero-post-header {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    font-size: 13px;
  }
  .hero-post-avatar {
    width: 30px;
    height: 30px;
    font-size: 0;
  }
  .hero-post-image { margin-top: 10px; border-radius: 12px; aspect-ratio: 1 / 1.08; }
  .hero-post-actions { gap: 12px; font-size: 18px; }
  .hero-post-actions span { width: 20px; height: 20px; }
  .hero-post-actions svg { width: 18px; height: 18px; }
  .hero-social-post p { font-size: 12px; }
  .hero-message {
    top: 4px;
    left: 0;
    width: 176px;
    padding: 10px 11px 10px 10px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
    border-radius: 17px;
    transform: rotate(-4deg);
  }
  .hero-message-avatar {
    width: 30px;
    height: 30px;
    font-size: 0;
  }
  .hero-message-avatar::before {
    width: 17px;
    height: 14px;
    left: 6px;
    bottom: -4px;
  }
  .hero-message-avatar::after {
    width: 3px;
    height: 3px;
    top: 11px;
    left: 10px;
    box-shadow: 6px 0 0 #171817;
  }
  .hero-message p { font-size: 11px; line-height: 1.3; }
  .hero-reaction {
    top: 148px;
    right: -12px;
    left: auto;
    min-width: 78px;
    padding: 9px 13px 10px 12px;
    display: inline-block;
    isolation: isolate;
    font-size: 19px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    word-spacing: 4px;
  }
  .hero-reaction::after {
    left: 14px;
    bottom: -6px;
    width: 14px;
    height: 14px;
    z-index: -1;
  }
  .hero-reaction-strip {
    left: clamp(112px, 34vw, 144px);
    bottom: 0;
    width: 150px;
    height: 50px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    transform: rotate(9deg) translateY(4px);
  }
  .hero-reaction-strip span {
    display: none;
  }
  .hero-metric {
    display: none;
  }
  .hero-spiral,
  .hero-trajectory,
  .hero-dots,
  .hero-spark {
    display: block;
  }
  .hero-scene-accent--plane {
    top: 58px;
    right: -72px;
    width: 248px;
    height: 248px;
    opacity: 0.84;
    border-radius: 0;
  }
  .hero-scene-accent--lime-blob {
    right: -78px;
    bottom: 88px;
    width: 218px;
    height: 218px;
    opacity: 0.92;
  }
  .hero-trajectory {
    top: 56px;
    left: 14px;
    width: 78px;
    height: 74px;
    background: none;
    opacity: 0.95;
    transform: rotate(-2deg);
  }
  .hero-trajectory * {
    display: block;
  }
  .hero-trajectory__line,
  .hero-trajectory__arrow {
    stroke-width: 5;
  }
  .hero-spiral {
    left: -44px;
    bottom: 128px;
    width: 156px;
    height: 98px;
    transform: rotate(-9deg);
  }
  .hero-dots {
    left: 18px;
    bottom: 188px;
    width: 86px;
    height: 82px;
    opacity: 0.54;
  }
  .hero-spark {
    top: 34px;
    right: -4px;
    width: 70px;
    height: 70px;
    opacity: 0.9;
  }
  .scene-window { width: 94%; }
  .scene-chat { padding: 22px 16px 12px; }
  .scene-chat .bubble { font-size: 12px; }
  .scene-brief { margin: 10px 16px 18px; padding: 18px; }
  .scene-brief > strong { font-size: 21px; }
  .scene-brief > div { margin-top: 17px; }

  .onboarding-screen { justify-content: flex-start; }
  .onboarding-card { min-height: 0; padding: 20px 0; }
  .onboarding-card h2 { font-size: 40px; }
  .onboarding-card > p { font-size: 16px; }
  .onboarding-form { margin-top: 34px; }
  .access-screen { padding: 0; }
  .access-device { min-height: calc(100vh - 56px); border: 0; border-radius: 0; box-shadow: none; }
  .access-bar { min-height: 58px; padding: 8px 14px; grid-template-columns: 1fr; }
  .access-bar .window-lights { display: none; }
  .access-bar > div:last-child { justify-self: start; }
  .access-chat { min-height: 220px; padding: 24px 14px; }
  .access-message p { max-width: 84%; font-size: 14px; }
  .access-form { padding: 20px 14px max(24px, env(safe-area-inset-bottom)); }
  .consent-option { font-size: 12px; }

  .quiz-screen { padding-top: 28px; }
  .quiz-wrap {
    width: 100%;
    min-width: 0;
    display: block;
  }
  .quiz-heading { margin-bottom: 20px; }
  .quiz-heading h2 {
    font-size: clamp(26px, 8vw, 32px);
    overflow-wrap: anywhere;
  }
  .quiz-heading p { font-size: 14px; }
  .quiz-options { gap: 8px; }
  .quiz-option { min-width: 0; min-height: 56px; padding: 12px 13px; grid-template-columns: 20px minmax(0, 1fr) 18px; gap: 10px; font-size: 14px; }
  .quiz-feedback-overlay { padding: 14px; align-items: center; }
  .quiz-feedback-popup { width: 100%; max-height: calc(100vh - 28px); padding: 26px 20px max(22px, env(safe-area-inset-bottom)); }
  .feedback-mark { width: 46px; height: 46px; margin-bottom: 20px; }
  .feedback-mark img { width: 27px; height: 27px; }
  .quiz-feedback-popup h2 {
    font-size: clamp(25px, 7.4vw, 29px);
    overflow-wrap: anywhere;
  }
  .quiz-feedback-popup > p { margin-bottom: 22px; font-size: 16px; }

  .insight-card { padding: 32px 24px; }
  .insight-icon { width: 50px; height: 50px; margin-bottom: 28px; }
  .insight-card p { font-size: 17px; }

  .transition-copy h2 { font-size: 40px; }
  .transition-copy > p { font-size: 16px; }
  .task-track { grid-template-columns: 1fr; }
  .task-track span { min-height: 54px; padding: 10px 16px; flex-direction: row; justify-content: flex-start; border-right: 0; border-bottom: 1px solid #393936; }
  .task-track span:last-child { border-bottom: 0; }
  .workday-screen { align-items: flex-start; }
  .workday-heading { margin-bottom: 24px; }
  .workday-heading h2 { font-size: 40px; }
  .workday-heading > p { font-size: 16px; }
  .workday-project { padding: 20px; }
  .workday-project h3 { font-size: 25px; }
  .workday-process { grid-template-columns: 1fr; }
  .workday-process span { min-height: 52px; border-right: 0; border-bottom: 1px solid #cbdbe6; }
  .workday-process span:last-child { border-bottom: 0; }
  .workday-task-grid { grid-template-columns: 1fr; }
  .workday-task-grid article { min-height: 132px; }
  .workday-footer { align-items: flex-start; flex-direction: column; }

  .messenger-screen { padding: 16px 16px 24px; }
  .messenger {
    width: 100%;
    min-height: calc(100vh - 96px);
    border: var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
  }
  .messenger-screen--with-task .messenger { min-height: calc(100vh - 202px); }
  .messenger-task-card {
    width: 100%;
    min-height: 0;
    margin-bottom: 12px;
    padding: 14px;
    grid-template-columns: 1fr;
    gap: 7px;
    border-radius: var(--radius-md);
  }
  .messenger-task-card strong { font-size: 18px; }
  .messenger-bar { position: static; min-height: 58px; padding: 8px 12px; grid-template-columns: minmax(0, 1fr) auto; }
  .window-lights { display: none; }
  .mentor { justify-self: start; }
  .task-kicker { max-width: 105px; text-align: right; line-height: 1.2; }
  .message-feed { min-height: 260px; max-height: none; padding: 22px 14px 14px; }
  .bubble { max-width: 86%; font-size: 14px; }
  .message-row--ai { padding-left: 0; }
  .action-panel { padding: 16px 14px max(22px, env(safe-area-inset-bottom)); }
  .choice-row { font-size: 14px; }

  .match-game { grid-template-columns: 1fr; gap: 14px; }
  .match-lines { display: none; }
  .match-column:first-child::after { content: "↓ выбери подходящий посыл"; display: block; padding: 3px 0; color: var(--blue); font-size: 11px; text-align: center; }
  .match-chip { min-height: 50px; font-size: 13px; }
  .game-guide { align-items: flex-start; flex-wrap: wrap; }
  .game-guide b { width: 100%; margin: 0 0 3px; }
  .persona-card,
  .motive-card { min-height: 66px; }
  .match-result-list div { grid-template-columns: 1fr 20px 1.2fr; }
  .success-strip { align-items: flex-start; flex-direction: column; gap: 6px; }
  .success-strip span { text-align: left; }

  .visual-grid { grid-template-columns: 1fr; }
  .visual-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: 1fr 1fr; padding: 0; }
  .visual-crop { grid-row: 1 / 3; aspect-ratio: 1; }
  .visual-card b { align-self: end; margin: 10px 12px 2px; }
  .visual-card i { align-self: start; margin: 2px 12px 10px; }

  .metrics-grid,
  .metrics-grid--signals { grid-template-columns: 1fr; }
  .metric-card { min-height: 220px; }
  .metrics-grid--signals .metric-card { min-height: 300px; padding: 16px; }
  .metric-comparison { margin-top: 16px; }
  .metric-comparison b { font-size: 27px; }
  .metrics-report .metric-actions { grid-template-columns: 1fr; }

  .metrics-report-screen {
    padding: 28px 16px 44px;
  }
  .metrics-report-screen .metrics-report {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .metrics-report .outcome-heading {
    margin-bottom: 26px;
  }
  .metrics-report .outcome-heading h2 {
    margin-bottom: 14px;
    font-size: 34px;
  }
  .metrics-report .outcome-heading > p {
    font-size: 16px;
  }
  .metrics-report-screen .metrics-grid--signals {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .metrics-report-screen .metrics-grid--signals > article {
    min-height: 0;
    padding: 20px;
  }
  .metrics-report-screen .metric-card__top small {
    position: static;
    min-width: 0;
    padding: 9px 12px 8px;
    font-size: 11px;
    transform: none;
  }
  .metrics-report-screen .metric-symbol {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 15px;
  }
  .metrics-report-screen .metric-comparison {
    margin: 22px 0 34px;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 8px;
  }
  .metrics-report-screen .metric-comparison > div {
    min-height: 82px;
    gap: 8px;
  }
  .metrics-report-screen .metric-comparison b {
    font-size: 36px;
  }
  .metrics-report-screen .metric-comparison span {
    font-size: 12px;
  }
  .metrics-report-screen .metric-comparison > i {
    font-size: 20px;
  }
  .metrics-report-screen .metric-rate {
    min-height: 78px;
    padding: 14px;
    gap: 12px;
  }
  .metrics-report-screen .metric-rate b {
    font-size: 38px;
  }
  .metrics-report-screen .metric-rate span {
    font-size: 12px;
  }
  .metrics-report-screen .metric-card--comments .comment-sample {
    min-height: 126px;
    padding: 0;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .metrics-report-screen .comment-sample span {
    min-height: 56px;
    padding: 12px 12px 10px 54px;
    font-size: 11px;
  }
  .metrics-report-screen .metric-card--comments .comment-sample span::before {
    top: 50%;
    left: 18px;
  }
  .metrics-report-screen .metric-card--comments .comment-sample span::after {
    top: calc(50% + 2px);
    left: 20px;
  }
  .metrics-report-screen .comment-sample b {
    font-size: 14px;
  }
  .metrics-report-screen .metric-card > p {
    min-height: 150px;
    margin-top: 14px;
    padding: 76px 14px 16px 82px;
    font-size: 14px;
  }
  .metrics-report-screen .metric-card > p strong {
    top: 14px;
    left: 14px;
    min-width: 120px;
    padding: 7px 10px 6px 38px;
    font-size: 12px;
  }
  .metrics-report-screen .metric-card > p strong::before {
    top: 5px;
    left: 10px;
    width: 20px;
    height: 20px;
  }
  .metrics-report-screen .metric-card > p > i {
    top: 68px;
    left: 14px;
    width: 54px;
    height: 54px;
    font-size: 30px;
  }
  .metrics-report-screen .metric-card--reads > p > i::before {
    width: 24px;
    height: 36px;
  }
  .metrics-report-screen .metric-card--reads > p > i {
    font-size: 0;
  }
  .metrics-report .metric-actions {
    margin-top: 18px;
    padding: 20px;
    gap: 10px;
  }
  .metrics-report .metric-actions .panel-label {
    margin-bottom: 6px;
    font-size: 18px;
  }
  .metrics-report .metric-actions .choice-row {
    min-height: 78px;
    padding: 16px;
    font-size: 15px;
  }
  .metrics-report .metric-actions .choice-row > span {
    max-width: none;
  }

  .analysis-screen { padding: 24px 16px; }
  .analysis-console { padding: 26px 20px; }
  .analysis-heading h2 { font-size: 36px; }
  .analysis-list > div { grid-template-columns: 32px minmax(0, 1fr); }
  .analysis-list em { display: none; }
  .analysis-ready { display: grid; grid-template-columns: 1fr; }

  .gate-screen { padding-top: 36px; padding-bottom: 44px; }
  .gate-heading,
  .gate-layout,
  .locked-report,
  .gate-offer,
  .phone-gate-form {
    width: 100%;
  }
  .gate-heading { margin-bottom: 24px; }
  .gate-heading h2 { font-size: 42px; }
  .gate-layout { gap: 28px; }
  .locked-report__body { padding: 20px; }
  .locked-report__body h3 { font-size: 25px; }
  .report-inside { grid-template-columns: 1fr; }
  .gate-offer h3 { font-size: 27px; }
  .phone-gate-form { padding: 20px; }
  .gate-copy > p { font-size: 16px; }
  .gate-value { grid-template-columns: 1fr; }
  .gate-value div { min-height: 100px; border-right: 0; border-bottom: 1px solid #41413d !important; }
  .gate-value div:last-child { border-bottom: 0 !important; }
  .lead-form { padding: 26px 20px; }

  .result-intro,
  .band-inner,
  .consultation { width: calc(100% - 32px); }
  .result-sticky-form { width: calc(100% - 32px); margin-top: 16px; }
  .result-intro { padding: 52px 0 60px; }
  .result-intro > h2 { font-size: 40px; }
  .result-intro > p { font-size: 17px; }
  .profile-pair { grid-template-columns: 1fr; margin-top: 30px; }
  .profile-card { min-height: 250px; padding: 24px; }
  .profile-card h3 { font-size: 28px; }
  .result-band { padding: 56px 0; }
  .section-heading { margin-bottom: 28px; }
  .profession-cycle { grid-template-columns: 1fr; }
  .profession-cycle div { min-height: 74px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid #cddce6; }
  .profession-cycle div:last-child { border-bottom: 0; }
  .profession-cycle b { margin-right: 20px; }
  .profession-cycle span { flex: 1; }
  .route-steps { grid-template-columns: 1fr; }
  .route-steps div { min-height: 160px; }
  .growth-layout { grid-template-columns: 1fr; gap: 34px; }
  .growth-layout > div:first-child { padding-right: 0; padding-bottom: 34px; border-right: 0; border-bottom: 1px solid #bad9cb; }
  .growth-layout h3 { font-size: 23px; }
  .consultation { margin-top: 44px; margin-bottom: 44px; }
  .consultation-copy { padding: 34px 22px; }
  .consultation-copy h2 { font-size: 38px; }
  .consultation-copy > p { font-size: 16px; }
  .consultation-side { min-height: 330px; padding: 34px 24px; }

  .brand-brief-screen { padding-top: 28px; }
  .brief-topline { align-items: flex-start; flex-direction: column; gap: 10px; }
  .fictional-brand span { font-size: 36px; }
  .brand-hero-grid { grid-template-columns: 1fr; }
  .brand-main-photo { min-height: 360px; }
  .brand-side-photos { min-height: 170px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; }
  .brand-summary { grid-column: auto; min-height: 0; padding: 26px 22px; }
  .brand-summary h2 { font-size: 30px; }
  .brand-facts { margin-top: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-social-fact { grid-column: 1 / -1; margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.18); }
  .brief-details { grid-template-columns: 1fr; }
  .brief-details article { min-height: 0; }
  .brief-details img { margin-bottom: 18px; }
  .mentor-handoff { grid-template-columns: 38px minmax(0, 1fr); }
  .mentor-handoff .button { grid-column: 1 / -1; }

  .opening-feature { grid-template-columns: 1fr; }
  .opening-feature__image { min-height: 330px; }
  .opening-feature__copy { padding: 28px 22px; }
  .opening-feature__copy h2 { font-size: 36px; }
  .opening-feature__copy > p { margin-bottom: 26px; font-size: 14px; }
  .opening-program { grid-template-columns: 1fr; }
  .opening-program span { min-height: 86px; padding: 15px; border-right: 0; border-bottom: 1px solid #41413d !important; font-size: 15px; }
  .opening-program span:last-child { border-bottom: 0 !important; }
  .brief-start-button { margin-top: 18px; }

  .brief-inputs { grid-template-columns: 1fr; }
  .brief-inputs div { min-height: 125px; }
  .working-statement { padding: 26px 22px; }
  .working-statement strong { font-size: 29px; }
  .brief-validation { grid-template-columns: 1fr; }
  .brief-validation i { min-height: 58px; }
  .brief-role-summary { padding: 24px 20px; }
  .brief-role-summary h3 { font-size: 26px; }
  .brief-role-summary p { font-size: 15px; }
  .brief-role-chain { grid-template-columns: 1fr; }
  .brief-role-chain span { min-height: 58px; }
  .brief-role-chain i { padding: 4px; transform: rotate(90deg); }
  .brief-outcome-heading h2 { font-size: 36px; }
  .brief-outcome-heading p { font-size: 16px; }
  .brief-role-summary--standalone .brief-role-chain { grid-template-columns: 1fr; }
  .brief-next-task { padding: 22px 20px; grid-template-columns: 1fr; align-items: stretch; }
  .brief-next-task h3 { font-size: 22px; }
  .brief-next-task .button { width: 100%; }

  .audience-scene-workspace,
  .audience-map-sequence,
  .audience-neighborhood {
    width: 100%;
  }
  .audience-scene-heading h2 { font-size: 36px; }
  .audience-scene-heading > p { font-size: 15px; }
  .audience-neighborhood { min-height: 590px; }
  .audience-map-caption { display: none; }
  .audience-scene-routes { opacity: 0.7; }
  .audience-scene-cafe { width: 174px; min-height: 154px; top: 50%; }
  .scene-cafe-building { width: 166px; height: 130px; }
  .scene-cafe-building::before { right: 18px; bottom: 11px; left: 18px; height: 84px; }
  .scene-cafe-building::after { top: 18px; right: 29px; left: 29px; height: 31px; }
  .scene-cafe-sign { width: 138px; min-width: 0; min-height: 32px; padding: 0 8px; font-size: 10px; }
  .scene-cafe-awning { height: 24px; top: 36px; right: 13px; left: 13px; border-radius: 0 0 13px 13px; }
  .scene-cafe-front { right: 23px; bottom: 13px; left: 23px; height: 69px; }
  .scene-cafe-window { width: 47px; height: 36px; left: 7px; bottom: 6px; }
  .scene-cafe-window::before { width: 31px; height: 4px; top: auto; bottom: 6px; left: 7px; }
  .scene-cafe-window::after {
    width: 7px;
    height: 12px;
    top: auto;
    bottom: 10px;
    left: 13px;
    box-shadow: 17px 0 0 -2px #8fa08f, 17px 0 0 0 var(--cafe-graphite);
  }
  .scene-cafe-door { width: 33px; height: 53px; right: 8px; }
  .scene-cafe-door::before { width: 13px; height: 10px; top: 16px; left: 8px; }
  .scene-cafe-door::after { top: 31px; left: 5px; }
  .scene-cafe-map { width: 29px; height: 29px; top: 61px; }
  .scene-cafe-map::before { width: 19px; height: 11px; }
  .scene-cafe-plant { width: 16px; height: 24px; bottom: 7px; }
  .scene-cafe-plant::before,
  .scene-cafe-plant::after { width: 14px; height: 22px; bottom: 7px; }
  .audience-scene-cafe small { font-size: 8px; }
  .audience-scene-person {
    width: min(178px, 45%);
    min-height: 154px;
    padding: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    justify-items: center;
    gap: 6px;
    text-align: center;
  }
  .audience-scene-person--office { left: 3%; top: 6%; }
  .audience-scene-person--home { right: 3%; top: 6%; }
  .audience-scene-person--student { left: 3%; bottom: 6%; }
  .audience-scene-person--weekend { right: 3%; bottom: 6%; }
  .scene-person-figure { width: 84px; height: 82px; grid-row: auto; }
  .scene-context { height: 34px; top: 6px; right: 6px; left: 6px; }
  .scene-avatar { bottom: 6px; left: 21px; }
  .scene-avatar--office { left: 37px; bottom: 6px; }
  .scene-avatar--home { left: 12px; bottom: 6px; }
  .scene-avatar--student { left: 30px; bottom: 6px; }
  .scene-avatar--weekend { left: 37px; bottom: 27px; }
  .scene-context--home i:nth-child(1) { width: 31px; left: 5px; }
  .scene-context--home i:nth-child(2) { width: 26px; right: 3px; }
  .scene-context--home i:nth-child(3) { right: 29px; }
  .scene-context--student i:nth-child(1) { width: 48px; left: 6px; }
  .scene-context--student i:nth-child(2) { right: 7px; }
  .scene-context--student i:nth-child(3) { width: 40px; left: 10px; }
  .scene-context--weekend i:nth-child(1) { width: 28px; left: 5px; }
  .scene-context--weekend i:nth-child(2) { width: 28px; right: 5px; }
  .scene-context--weekend i:nth-child(3) { right: 33px; }
  .audience-scene-person > strong { align-self: auto; font-size: 12px; }
  .audience-scene-person > em { font-size: 9px; }
  .audience-map-sequence.is-motive-step .audience-neighborhood { min-height: 590px; }
  .audience-neighborhood.is-motive-step .audience-scene-person.selected {
    width: min(285px, 88%);
    min-height: 122px;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    justify-items: start;
    text-align: left;
    left: 50%;
    top: 3%;
    transform: translateX(-50%);
  }
  .audience-neighborhood.is-motive-step .audience-scene-person.selected .scene-person-figure { grid-row: 1 / span 2; }
  .audience-neighborhood.is-motive-step .audience-scene-person.selected > em { display: block; }
  .audience-neighborhood.is-motive-step .audience-scene-cafe {
    right: auto;
    bottom: 5%;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
  }
  .map-motive-axis {
    width: 0;
    height: auto;
    top: 19%;
    right: auto;
    bottom: 18%;
    left: 50%;
    border-top: 0;
    border-left: 3px dashed rgba(189, 116, 69, 0.58);
  }
  .map-motive-axis::before,
  .map-motive-axis::after { left: -7px; }
  .map-motive-axis::before { top: 0; }
  .map-motive-axis::after { top: auto; right: auto; bottom: 0; }
  .map-motive-point {
    width: 150px;
    min-height: 92px;
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .map-motive-point::after { display: none; }
  .map-motive-point--near { left: 3%; top: 28%; }
  .map-motive-point--program {
    right: 3%;
    bottom: auto;
    left: auto;
    top: 45%;
    transform: none;
  }
  .map-motive-point--rhythm { right: auto; left: 3%; top: 50%; }
  .map-motive-point--program:hover,
  .map-motive-point--program:focus-visible { transform: translateY(-3px); }
  .map-motive-point b { font-size: 12px; }
  .map-motive-point small { font-size: 8px; }

  .motive-game-heading h2,
  .tone-mixer-heading h2 { font-size: 36px; }
  .motive-game-heading > p,
  .tone-mixer-heading > p { font-size: 15px; }
  .motive-workbench { grid-template-columns: 1fr; }
  .motive-token-tray { min-height: 0; padding: 20px 14px; }
  .motive-token-tray > span,
  .motive-post-slot > span,
  .tone-control-panel > span { margin-bottom: 16px; }
  .motive-token-tray > div { min-height: 230px; gap: 4px; }
  .motive-token { min-height: 210px; padding: 8px 3px; }
  .motive-token__art { width: 72px; height: 72px; margin-bottom: 16px; box-shadow: 4px 4px 0 rgba(255,255,255,0.16); }
  .motive-token--program .motive-token__art { width: 86px; height: 58px; }
  .motive-token__art b { font-size: 14px; }
  .motive-token--program .motive-token__art b { font-size: 9px; }
  .motive-token--rhythm .motive-token__art b { font-size: 13px; }
  .motive-token__art em { width: 24px; height: 3px; right: 7px; bottom: 8px; }
  .motive-token strong { margin-bottom: 5px; font-size: 12px; }
  .motive-token small { font-size: 9px; line-height: 1.3; }
  .motive-post-slot { min-height: 220px; padding: 18px 14px; }
  .motive-post-slot > div { min-height: 150px; padding: 18px; }
  .motive-post-slot b { font-size: 19px; }
  .motive-token.selected { transform: scale(0.9); }

  .brand-tone-console { grid-template-columns: 1fr; }
  .tone-control-panel { min-height: 0; padding: 22px 14px; }
  .tone-track { min-height: 176px; gap: 2px; }
  .tone-track::before { top: 27px; }
  .tone-dial > i { width: 56px; height: 56px; margin-bottom: 13px; }
  .tone-dial strong { margin-bottom: 5px; font-size: 12px; }
  .tone-dial small { font-size: 9px; }
  .tone-readout { min-height: 66px; padding: 13px; }
  .tone-preview-panel { min-height: 0; padding: 16px 10px; }
  .tone-preview-message { min-height: 210px; padding: 18px 16px; font-size: 13px; }
  .tone-build-button { width: 100%; }

  .post-builder-heading { margin-bottom: 22px; }
  .post-builder-heading h2 { font-size: 36px; }
  .post-builder-heading > p { font-size: 16px; }
  .post-choice-grid { grid-template-columns: 1fr; gap: 9px; }
  .post-choice-card {
    min-height: 126px;
    padding: 16px;
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 12px;
    border-top-width: 1px;
    border-left: 4px solid var(--blue);
  }
  .post-choice-card:nth-child(2) { border-left-color: #e06d5f; }
  .post-choice-card:nth-child(3) { border-left-color: #2f7d58; }
  .post-choice-card > i { width: 44px; height: 44px; }
  .post-choice-card > span { align-self: center; }
  .post-choice-card b { margin-bottom: 6px; font-size: 19px; }
  .post-choice-card small { font-size: 13px; }
  .post-choice-card > em { position: static; }
  .post-choice-next { width: 100%; }
  .post-generation { padding: 30px 20px; }
  .post-generation h2 { font-size: 36px; }
  .ai-generation-mark { width: 54px; height: 54px; margin-bottom: 22px; }
  .generation-selections { gap: 6px; }
  .generation-selections span { padding: 7px 9px; font-size: 10px; }
  .telegram-window { margin-bottom: 18px; }
  .telegram-window__bar { min-height: 54px; padding: 8px 12px; grid-template-columns: 18px 32px minmax(0, 1fr) 24px; gap: 8px; }
  .telegram-window__back { font-size: 24px; }
  .telegram-window__logo { width: 30px; height: 30px; font-size: 13px; }
  .telegram-window__chat { min-height: 0; padding: 12px 8px; }
  .telegram-message { width: 100%; }
  .telegram-message .telegram-channel { padding: 13px 14px 9px; }
  .telegram-message__visual { max-height: 360px; }
  .telegram-message__copy { padding: 14px 14px 8px; font-size: 13px; }
  .telegram-message__meta { padding: 0 14px 10px; }
  .telegram-post-preview__copy { padding: 18px; font-size: 13px; }
  .post-visual-choice { padding: 14px; }
  .post-visual-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .post-visual-grid::-webkit-scrollbar { display: none; }
  .post-visual-grid button { width: 100%; flex: none; aspect-ratio: 3 / 4; scroll-snap-align: none; }
  .post-visual-grid i { width: 22px; height: 22px; top: 7px; right: 7px; }
  .post-result,
  .post-result .post-builder-heading,
  .post-result-layout,
  .post-result-preview,
  .post-result-summary,
  .post-result-preview .telegram-window {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .post-result .post-builder-heading h2,
  .post-result .post-builder-heading > p,
  .post-result-summary h3,
  .post-result-summary .post-result-checks span,
  .post-result-preview .telegram-message__copy {
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
  }
  .post-result-layout { gap: 16px; }
  .post-result-summary { padding: 18px; }
  .post-result-summary h3 { font-size: 22px; }
  .post-result-summary .post-result-checks span { font-size: 13px; }
  .post-result-visual { min-height: 280px; max-height: 360px; }
  .post-result-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-result-checks span { min-height: 70px; font-size: 11px; }

  .audience-map-screen { padding-top: 28px; }
  .audience-map-workspace,
  .audience-map-board {
    width: 100%;
  }
  .map-heading { grid-template-columns: 1fr; gap: 12px; }
  .map-heading h2 { font-size: 36px; }
  .audience-map-board { min-height: 0; padding: 28px 12px 18px; grid-template-columns: 1fr; gap: 16px; }
  .audience-map-board::before,
  .audience-map-board::after,
  .map-landmark,
  .connection-map { display: none; }
  .audience-map-board .persona-column::after { content: "↓ теперь выбери причину прийти"; padding: 5px 0; color: var(--blue); font-size: 10px; text-align: center; }
  .audience-map-board .persona-card,
  .audience-map-board .motive-card { min-height: 72px; }
  .neighborhood-result-map { min-height: 0; padding: 20px; grid-template-columns: 1fr; gap: 10px; }
  .neighborhood-result-map::before,
  .neighborhood-result-map::after { display: none; }
  .map-cafe { width: 110px; height: 110px; position: static; grid-row: 1; transform: none; margin: 0 auto 10px; }
  .route-card { min-height: 120px; }
  .route-card::after { display: none; }

  .published-post { grid-template-columns: 1fr; }
  .published-visual { min-height: 390px; }
  .published-post--picking { grid-template-columns: 1fr; }
  .visual-picker-panel { min-height: 0; padding: 14px; }
  .visual-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
  .published-visual b { font-size: 34px; }
  .published-copy .telegram-copy { padding: 20px; font-size: 13px; }
  .publication-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .report-before-after { grid-template-columns: 1fr; }
  .report-visual,
  .report-actions { min-height: 290px; padding: 22px; }
  .report-chart { height: 120px; }

  .map-value-grid { grid-template-columns: 1fr; }
  .map-value-grid > div { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--line); }
  .map-value-grid > div:last-child { border-bottom: 0; }

  .telegram-cover { height: 190px; }
  .telegram-stats { flex-wrap: wrap; }
  .campaign-routes { grid-template-columns: 1fr; }
  .mini-case-result { grid-template-columns: 1fr; }
  .case-visual { min-height: 260px; }

  .manager-confirmation { padding: 36px 20px; }
  .manager-confirmation > p { font-size: 16px; }
  .call-agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .call-agenda span:nth-child(2) { border-right: 0; }
  .call-agenda span:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }

  .course-intro h2 { font-size: 38px; }
  .course-intro p { font-size: 16px; }
  body[data-screen="course"] .course-one-page { padding: 4px 4px 92px; }
  .course-page-header {
    height: 78px;
    padding: 0 16px;
  }
  .course-page-header__logo { width: 84px; }
  .course-thankyou-banner {
    margin: 0 0 8px;
    padding: 24px 18px;
    border-radius: 20px;
  }
  .course-thankyou-banner h2 { font-size: 27px; line-height: 1.04; }
  .course-thankyou-banner .course-thankyou-banner__lead { margin-top: 12px; font-size: 18px; }
  .course-thankyou-banner p { margin-top: 14px; font-size: 14px; }
  .course-hero {
    min-height: 480px;
    margin: 0;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 24px;
    background: #a5d9d1;
  }
  .course-hero__content {
    min-height: 480px;
    padding: 24px 20px;
    position: relative;
    z-index: 2;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }
  .course-hero__benefits {
    width: 100%;
    margin: 0 0 20px;
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .course-hero__benefits li { padding: 7px 9px; font-size: 10px; white-space: nowrap; }
  .course-hero h1 { max-width: 330px; margin-bottom: 14px; font-size: 32px; line-height: 34px; }
  .course-hero__lead { max-width: 342px; font-size: 14px; line-height: 1.28; }
  .course-hero__footer { margin-top: 0; }
  .course-hero__rating { min-width: 0; position: absolute; z-index: 4; right: 22px; bottom: 44px; gap: 8px; }
  .course-hero__rating > strong { font-size: 40px; }
  .course-hero__rating b { font-size: 15px; }
  .course-hero__rating small { font-size: 11px; }
  .course-hero__visual {
    width: 176px;
    height: 190px;
    min-height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 3;
    left: 12px;
    bottom: 10px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }
  .course-hero__visual img { object-fit: contain; }
  .course-advantages { margin: 8px 0 0; grid-template-columns: 1fr; gap: 6px; }
  .course-advantages article { min-height: 0; padding: 18px 20px 20px; border-radius: 22px; }
  .course-advantages strong { font-size: 20px; }
  .course-advantages p { margin-top: 8px; font-size: 14px; }
  .course-profession {
    margin: 32px 0 0;
    padding: 12px 16px 32px;
    gap: 24px;
  }
  .course-profession h2,
  .course-salary h2 { font-size: 36px; line-height: 1.04; }
  .course-profession__copy p { margin-top: 22px; font-size: 18px; line-height: 1.28; }
  .course-profession__visual { border-radius: 20px; }
  .course-growth {
    margin: 0;
    padding: 32px 16px;
  }
  .course-growth h2 { font-size: 36px; line-height: 1.04; }
  .course-growth__layout { margin-top: 28px; gap: 24px; }
  .course-growth__visual { border-radius: 20px; }
  .course-growth__item { padding: 18px 0; }
  .course-growth__item h3 { font-size: 20px; }
  .course-growth__item p { font-size: 16px; line-height: 1.35; }
  .course-salary {
    margin: 0;
    padding: 32px 16px;
  }
  .course-salary__intro {
    margin-top: 24px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
  .course-salary__intro p { font-size: 18px; line-height: 1.25; }
  .course-salary__cards {
    margin-top: 24px;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .course-salary-card {
    min-height: 0;
    padding: 20px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 0;
    border-radius: 22px;
  }
  .course-salary-card--entry,
  .course-salary-card--middle { min-height: 126px; }
  .course-salary-card--senior { min-height: 240px; }
  .course-salary-card__projects {
    grid-column: 1;
    grid-row: 1;
  }
  .course-salary-card__amount {
    margin-top: 14px;
    grid-column: 1;
    grid-row: 2;
    font-size: 30px;
  }
  .course-salary-card__period {
    margin-top: 6px;
    grid-column: 1;
    grid-row: 3;
    font-size: 14px;
  }
  .course-salary-card__infinity {
    margin-top: 14px;
    grid-column: 1;
    grid-row: 4;
    align-self: end;
  }
  .course-outcomes {
    margin: 0;
    padding: 32px 16px;
  }
  .course-outcomes h2 { font-size: 36px; line-height: 1.04; }
  .course-outcomes__grid { margin-top: 28px; grid-template-columns: 1fr; gap: 8px; }
  .course-outcome-card { min-height: 0; padding: 24px; border-radius: 22px; }
  .course-outcome-card__check { margin-bottom: 22px; }
  .course-outcome-card h3 { font-size: 22px; }
  .course-outcome-card p,
  .course-outcome-card strong { font-size: 15px; }
  .course-outcome-card strong { margin-top: 24px; padding-top: 0; }
  .course-career {
    margin: 0;
    padding: 32px 16px;
  }
  .course-career h2 { font-size: 36px; line-height: 1.04; }
  .course-career__grid {
    margin-top: 28px;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid #383838;
  }
  .course-career-card {
    padding: 20px 0;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    border-bottom: 1px solid #383838;
  }
  .course-career-card__visual {
    width: 112px;
    height: 112px;
    margin: 0;
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .course-career-card h3 { grid-column: 2; grid-row: 1; font-size: 20px; }
  .course-career-card p { grid-column: 2; grid-row: 2; margin-top: 8px; font-size: 14px; line-height: 1.35; }
  .course-practice {
    margin: 0;
    padding: 32px 16px;
  }
  .course-practice__eyebrow { font-size: 12px; }
  .course-practice h2 { margin-top: 10px; font-size: 36px; line-height: 1.04; }
  .course-practice__grid { margin-top: 28px; gap: 8px; }
  .course-practice-card { padding: 14px 14px 22px; border-radius: 22px; }
  .course-practice-visual { height: 148px; margin-bottom: 20px; padding: 16px; }
  .course-practice-card h3 { font-size: 22px; }
  .course-practice-card p { font-size: 15px; }
  .course-ai {
    margin: 0;
    padding: 24px 16px 32px;
    display: block;
    border-radius: 0;
  }
  .course-ai__visual { width: 220px; height: 220px; margin: 0 auto 24px; }
  .course-ai h2 { font-size: 36px; line-height: 1.04; }
  .course-ai__lead { margin-top: 18px; font-size: 18px; }
  .course-ai ul { margin-top: 22px; gap: 12px; }
  .course-ai li { padding-left: 22px; font-size: 16px; }
  .course-ai__result { margin-top: 22px; font-size: 16px; }
  .course-portfolio {
    margin: 0;
    padding: 32px 16px;
  }
  .course-portfolio h2 { font-size: 36px; line-height: 1.04; }
  .course-portfolio__grid { margin-top: 28px; gap: 8px; }
  .course-portfolio-card { display: flex; }
  .course-portfolio-card figure { height: auto; min-height: 0; aspect-ratio: 768 / 436; }
  .course-portfolio-card__content { min-height: 0; padding: 22px; }
  .course-portfolio-card h3 { font-size: 22px; }
  .course-portfolio-card p,
  .course-portfolio-card strong { font-size: 15px; }
  .course-portfolio-card strong { margin-top: 24px; padding-top: 0; }
  .course-teachers {
    margin: 0;
    padding: 32px 16px 100px;
  }
  .course-teachers__header { align-items: flex-start; }
  .course-teachers h2 { font-size: 36px; line-height: 1.04; }
  .course-teachers__controls { padding-top: 4px; }
  .course-teachers__controls > span { display: none; }
  .course-teachers__controls button { width: 42px; height: 42px; }
  .course-teachers__viewport { margin-top: 28px; }
  .course-teachers__track { grid-auto-columns: 100%; }
  .course-teacher-card figure { height: 380px; }
  .course-teacher-card__content { min-height: 150px; }
  .course-support-team {
    margin: 0;
    padding: 32px 16px;
  }
  .course-support-team h2 { font-size: 36px; line-height: 1.04; }
  .course-support-team__grid { margin-top: 28px; grid-template-columns: 1fr; gap: 8px; }
  .course-support-card__content { right: 20px; bottom: 22px; left: 20px; }
  .course-support-card h3 { font-size: 25px; }
  .course-support-card p { margin-top: 10px; font-size: 16px; }
  .course-graduates {
    margin: 0;
    padding: 32px 16px;
  }
  .course-graduates__header { display: block; }
  .course-graduates h2 { font-size: 36px; line-height: 1.04; }
  .course-graduates__controls { margin-top: 16px; justify-content: flex-end; }
  .course-graduates__controls button { width: 42px; height: 42px; }
  .course-graduates__viewport { margin-top: 28px; }
  .course-graduate-card { height: auto; display: flex; flex-direction: column; }
  .course-graduate-card figure { height: 300px; flex: 0 0 300px; }
  .course-graduate-card__content { min-height: 330px; padding: 22px; }
  .course-graduate-card__content > p { font-size: 15px; }
  .course-graduate-card__career { padding-top: 24px; }
  .course-program {
    margin: 0;
    padding: 32px 16px;
    border-radius: 0;
  }
  .course-program h2 { font-size: 36px; line-height: 1.04; }
  .course-program__facts { margin-top: 24px; display: grid; gap: 12px; }
  .course-program__groups { margin-top: 34px; gap: 26px; }
  .course-program-group h3 { margin-bottom: 10px; font-size: 13px; line-height: 1.15; }
  .course-program-group__modules { border-radius: 20px; }
  .course-program-module summary { padding: 20px; gap: 14px; }
  .course-program-module strong { font-size: 20px; }
  .course-program-module small { font-size: 14px; }
  .course-program-module summary i { width: 40px; height: 40px; flex-basis: 40px; }
  .course-program-module > ul { padding: 0 28px 22px 38px; font-size: 15px; }
  .course-certificate {
    height: auto;
    min-height: 0;
    margin: 0;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    border-radius: 0;
  }
  .course-certificate__content { order: -1; padding: 32px 20px 28px; }
  .course-certificate h2 { font-size: 36px; line-height: 1.04; }
  .course-certificate p { margin-top: 20px; font-size: 17px; }
  .course-certificate__visual { aspect-ratio: 1; }
  .course-numbers { grid-template-columns: 1fr; }
  .course-numbers div { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--line); }
  .course-numbers div:last-child { border-bottom: 0; }
  .course-numbers strong { font-size: 42px; }
  .bridge-head { display: none; }
  .practice-bridge > div:not(.bridge-head) { min-height: 116px; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .practice-bridge > div:not(.bridge-head) i { display: none; }
  .practice-bridge > div:not(.bridge-head) strong { grid-column: 2; color: var(--blue); }
  .course-support { grid-template-columns: 1fr; }

  .course-priority-grid { grid-template-columns: 1fr; }
  .priority-card { min-height: 210px; }
  .priority-card > b { margin-bottom: 24px; }
  .diploma-toggle { grid-template-columns: 0 minmax(0, 1fr) 44px; }

  .track-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track-tabs button:nth-child(2) { border-right: 0; }
  .track-tabs button:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .track-detail { min-height: 0; padding: 26px 20px; grid-template-columns: 1fr; gap: 22px; }
  .track-detail h3 { margin-top: 20px; font-size: 34px; }

  .finish-summary { grid-template-columns: 1fr; }
  .finish-summary div { min-height: 100px; border-right: 0; border-bottom: 1px solid #41413d; }
  .finish-summary div:last-child { border-bottom: 0; }

  .tech-menu {
    right: 10px;
    top: auto;
    bottom: 12px;
  }

  .tech-menu__panel {
    max-height: min(620px, calc(100vh - 88px));
  }

  .tech-all-screen {
    min-height: calc(100vh - 56px);
    padding: 32px 12px 92px;
  }

  .tech-all-screen__heading h1 {
    font-size: 38px;
  }

  .tech-preview-frame {
    height: 320px;
  }

  .tech-preview-frame > .screen {
    width: 1180px;
    min-height: 820px;
    padding: 46px;
    transform: scale(0.34);
  }
}

@media (max-width: 980px) {
  .brand-card-brief-screen {
    padding: 24px 16px 48px;
  }

  .brand-card-brief {
    width: 100%;
  }

  .brand-card-task {
    min-height: 0;
    padding: 26px 24px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .brand-card-task strong {
    font-size: 30px;
  }

  .brand-card-shell {
    padding: 18px;
  }

  .brand-info-card,
  .brand-info-card--photo {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .brand-card-side figure,
  .brand-audience-stack,
  .brand-identity-board,
  .brand-photo-board {
    min-height: 0;
  }

  .brand-card-side figure {
    min-height: 340px;
  }

  .brand-info-copy {
    padding: 34px 30px;
  }

  .brand-info-copy h2 {
    font-size: 40px;
  }

  .brand-audience-stack {
    padding: 26px;
  }

  .brand-identity-board {
    height: auto;
    min-height: 500px;
  }

  .brand-photo-board {
    min-height: 460px;
  }

  .brand-card-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .brand-card-controls .button--primary {
    grid-column: auto;
  }

  .brand-title-grid,
  .opening-thesis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .neighborhood-brand-hero {
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  }

  .brand-wordmark {
    font-size: 58px;
  }

  .neighborhood-brief-copy h2 {
    font-size: 43px;
  }

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

  .brand-photo-pair {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
  }

  .brand-photo-pair figure {
    min-height: 210px;
  }

  .clear-brief-hero {
    grid-template-columns: minmax(420px, 2fr) minmax(210px, 1fr);
  }

  .clear-main-heading h2 {
    font-size: 43px;
  }

  .clear-brand-description {
    padding: 24px 26px;
  }

  .clear-brand-description strong {
    font-size: 25px;
  }

  .clear-brand-media {
    min-height: 220px;
  }

  .clear-hero-photo {
    min-height: 220px;
    grid-column: auto;
  }

  .clear-facts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .brand-card-brief-screen {
    padding: 16px 16px 40px;
  }

  .brand-card-task {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .brand-card-task span {
    font-size: 11px;
  }

  .brand-card-task strong {
    font-size: 24px;
    line-height: 1.1;
  }

  .brand-card-shell {
    padding: 14px;
    border-radius: 22px;
  }

  .brand-card-progress {
    margin-bottom: 14px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .brand-card-progress span {
    font-size: 15px;
  }

  .brand-info-card,
  .brand-info-card--photo {
    gap: 14px;
  }

  .brand-info-copy {
    padding: 28px 18px;
    border-radius: 20px;
  }

  .brand-card-kicker {
    margin-bottom: 22px;
    font-size: 12px;
    letter-spacing: 0.09em;
  }

  .brand-info-copy h2 {
    margin-bottom: 18px;
    font-size: 34px;
    line-height: 1.07;
  }

  .brand-info-copy p {
    font-size: 17px;
    line-height: 1.42;
  }

  .brand-audience-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .brand-audience-list span {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 15px;
  }

  .brand-card-note {
    margin-top: 24px;
    padding: 16px 18px;
    border-left-width: 6px;
    border-radius: 14px;
    font-size: 17px;
  }

  .brand-card-highlights {
    margin-top: 24px;
    gap: 10px;
  }

  .brand-card-note--fact {
    min-height: 0;
  }

  .brand-card-note--fact b {
    font-size: 17px;
  }

  .brand-card-note--fact span {
    font-size: 16px;
  }

  .brand-card-side,
  .brand-card-side figure,
  .brand-audience-stack,
  .brand-identity-board,
  .brand-photo-board {
    border-radius: 20px;
  }

  .brand-card-side figure {
    min-height: 280px;
  }

  .brand-audience-stack {
    padding: 16px;
    gap: 12px;
  }

  .brand-audience-stack.brand-voice-card {
    padding: 26px 20px;
  }

  .brand-voice-card > h3 {
    font-size: 24px;
  }

  .brand-voice-card > strong {
    font-size: 18px;
  }

  .brand-voice-card > p {
    font-size: 16px;
  }

  .brand-audience-stack div {
    min-height: 0;
    padding: 18px;
    border-radius: 16px;
  }

  .brand-audience-stack b {
    font-size: 21px;
  }

  .brand-audience-stack span {
    font-size: 17px;
  }

  .brand-color-strip {
    margin-top: 24px;
    padding: 18px;
    min-height: 0;
    gap: 14px;
  }

  .brand-color-strip span {
    font-size: 17px;
  }

  .brand-color-strip div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(6px, 2.5vw, 12px);
    justify-items: center;
  }

  .brand-color-strip i {
    width: 100%;
    max-width: 52px;
    height: auto;
  }

  .brand-identity-board {
    height: auto;
    min-height: 430px;
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 176px minmax(0, 1fr);
    gap: 10px;
  }

  .brand-identity-tile {
    border-radius: 18px;
  }

  .brand-identity-tile span {
    min-height: 28px;
    padding: 7px 12px;
    left: 14px;
    bottom: 12px;
    font-size: 12px;
  }

  .brand-identity-tile--logo {
    max-width: none;
  }

  .brand-identity-tile--logo,
  .brand-identity-tile--type {
    padding: 4px 0 34px;
    grid-template-rows: minmax(0, 1fr);
  }

  .brand-identity-tile--logo span,
  .brand-identity-tile--type span {
    margin: 0;
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
  }

  .brand-identity-tile--type img {
    transform: translateY(-10px);
  }

  .brand-identity-tile--people {
    min-height: 220px;
    padding: 34px 18px 14px;
    gap: 8px;
  }

  .brand-identity-people-main {
    max-width: 142px;
    max-height: 160px;
  }

  .brand-identity-people-extra {
    max-width: 104px;
    max-height: 142px;
  }

  .brand-identity-tile--people span {
    top: 12px;
    bottom: auto;
  }

  .brand-photo-board {
    padding: 12px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }

  .brand-photo-board figure,
  .brand-photo-board__wide {
    min-height: 185px;
    grid-column: auto;
    grid-row: auto;
  }

  .brand-photo-board__wide {
    min-height: 250px;
  }

  .brand-card-controls {
    margin-top: 14px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .brand-card-controls .button {
    width: 100%;
  }

  .answer-analysis-screen {
    align-items: center;
  }

  .answer-analysis-card {
    padding: 32px 22px;
    border-radius: 6px;
  }

  .answer-analysis-card h2 {
    font-size: 36px;
  }

  .answer-analysis-card > p {
    font-size: 15px;
  }

  .answer-analysis-loader {
    margin: 30px 0 22px;
  }

  .answer-analysis-status {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .answer-analysis-status span {
    min-height: 48px;
    padding: 10px 12px;
  }

  .workday-welcome {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .workday-heading h2 {
    font-size: 38px;
  }

  .workday-task-grid article {
    min-height: 122px;
    padding: 16px 18px;
  }

  .workday-task-grid h3 {
    font-size: 21px;
  }

  .workday-task-grid img {
    width: 34px;
    height: 34px;
  }

  .workday-footer {
    margin-top: 14px;
  }

  .neighborhood-brand-screen {
    padding-top: 20px;
    background-size: 32px 32px;
  }

  .neighborhood-brand-hero {
    grid-template-columns: 1fr;
    box-shadow: 7px 7px 0 rgba(17, 17, 17, 0.12);
  }

  .neighborhood-wordmark {
    min-height: 245px;
    padding: 22px;
  }

  .neighborhood-wordmark::before {
    width: 132px;
    height: 132px;
    border-width: 30px;
  }

  .neighborhood-wordmark::after {
    width: 92px;
    height: 17px;
    right: 20px;
    bottom: 24px;
  }

  .brand-wordmark {
    font-size: 53px;
  }

  .brand-location {
    grid-template-columns: 10px auto 1fr;
  }

  .neighborhood-brief-copy {
    min-height: 0;
    padding: 24px 20px;
  }

  .neighborhood-brief-copy h2 {
    font-size: 34px;
  }

  .neighborhood-brief-copy > p {
    margin-bottom: 22px;
    font-size: 14px;
  }

  .brand-core-idea {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .brand-core-idea strong {
    font-size: 15px;
  }

  .district-route {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .district-route b {
    display: none;
  }

  .brand-world-section,
  .brand-opening-section {
    padding: 14px;
  }

  .brand-section-heading {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
  }

  .brand-section-heading > span {
    width: 32px;
    height: 32px;
  }

  .brand-section-heading h3 {
    font-size: 22px;
  }

  .brand-channels {
    grid-column: 1 / -1;
    margin-top: 5px;
  }

  .brand-story-layout {
    grid-template-columns: 1fr;
  }

  .brand-life-scene {
    min-height: 250px;
  }

  .brand-life-scene figcaption {
    padding: 16px;
  }

  .brand-life-scene figcaption b {
    font-size: 21px;
  }

  .brand-traits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .brand-traits-grid article {
    min-height: 150px;
    padding: 13px;
  }

  .brand-traits-grid b {
    font-size: 14px;
  }

  .brand-photo-pair {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: 6px;
  }

  .brand-photo-pair figure {
    min-height: 138px;
  }

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

  .brand-formula span {
    min-height: 42px;
    padding: 8px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #454540;
  }

  .brand-formula i {
    display: none;
  }

  .opening-poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .opening-poster-grid article {
    min-height: 112px;
    padding: 13px;
  }

  .opening-poster-grid b {
    font-size: 14px;
  }

  .brand-smm-note {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .brand-brief-next {
    margin-top: 14px;
  }

  .clear-brief-hero {
    grid-template-columns: 1fr;
    box-shadow: 6px 6px 0 rgba(36, 75, 59, 0.12);
  }

  .clear-main-heading {
    margin-bottom: 14px;
  }

  .clear-main-heading h2 {
    font-size: 35px;
  }

  .clear-brand-mark {
    width: 72px;
    height: 72px;
    min-height: 0;
    left: 12px;
    bottom: 12px;
  }

  .clear-brand-symbol {
    width: 52px;
    height: 52px;
  }

  .clear-brand-symbol b {
    font-size: 17px;
  }

  .clear-brand-description {
    min-height: 0;
    padding: 18px;
  }

  .clear-brand-description strong {
    margin-bottom: 10px;
    font-size: 23px;
  }

  .clear-brand-description p {
    font-size: 14px;
  }

  .clear-hero-photo {
    min-height: 110px;
    grid-column: auto;
  }

  .clear-brand-media {
    min-height: 110px;
  }

  .clear-launch-task {
    padding: 18px;
  }

  .clear-launch-task strong {
    font-size: 25px;
  }

  .clear-launch-task p {
    margin-top: 12px;
    font-size: 14px;
  }

  .clear-brief-facts,
  .clear-brand-visuals,
  .clear-opening-section {
    margin-top: 20px;
  }

  .clear-brief-facts {
    padding: 16px;
  }

  .clear-section-heading h3 {
    font-size: 21px;
  }

  .clear-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .clear-facts-grid article {
    min-height: 158px;
    padding: 12px;
  }

  .clear-facts-grid article:last-child {
    grid-column: 1 / -1;
    min-height: 128px;
  }

  .clear-facts-grid small {
    margin-bottom: 14px;
  }

  .clear-facts-grid b {
    font-size: 14px;
  }

  .clear-facts-grid p {
    font-size: 10px;
  }

  .clear-visual-grid {
    height: 260px;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .clear-visual-grid figure:first-child {
    grid-row: 1 / -1;
  }

  .clear-brand-poster {
    padding: 12px;
  }

  .clear-brand-poster span {
    font-size: 32px;
  }

  .clear-brand-poster i:nth-of-type(1) {
    width: 86px;
    height: 86px;
    border-width: 19px;
  }

  .clear-brand-poster i:nth-of-type(2) {
    width: 48px;
    height: 48px;
    left: 14px;
    bottom: 20px;
  }

  .clear-brand-poster i:nth-of-type(3) {
    width: 58px;
    height: 12px;
    bottom: 20px;
  }

  .clear-opening-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .clear-opening-grid article {
    min-height: 106px;
    padding: 12px;
  }

  .clear-opening-grid b {
    font-size: 13px;
  }

  .clear-brief-handoff {
    padding: 16px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .clear-handoff-copy {
    font-size: 19px;
    line-height: 1.32;
  }

  .clear-handoff-status {
    grid-column: auto;
  }

  .clear-handoff-message {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }

  .clear-handoff-avatar {
    width: 36px;
    height: 36px;
  }

  .clear-handoff-message p {
    font-size: 13px;
  }

  .clear-brief-next {
    margin-top: 0;
    white-space: normal;
  }

  .compact-brief-heading {
    margin-bottom: 22px;
  }

  .compact-brief-heading h2 {
    font-size: 32px;
    line-height: 1.07;
  }

  .brand-essentials,
  .compact-opening {
    margin-top: 18px;
  }

  .compact-section-title {
    margin-bottom: 10px;
  }

  .compact-section-title h3 {
    font-size: 20px;
  }

  .brand-title-grid {
    gap: 6px;
  }

  .brand-title-grid article {
    min-height: 100px;
    padding: 12px;
  }

  .brand-title-grid b {
    font-size: 13px;
  }

  .brand-photo-strip {
    height: 118px;
    gap: 5px;
  }

  .opening-thesis-grid {
    gap: 6px;
  }

  .opening-thesis-grid span {
    min-height: 70px;
    padding: 11px;
    font-size: 12px;
  }

  .compact-brief-button {
    margin-top: 18px;
  }
}

@media (max-width: 980px) {
  :root {
    --text-display: 54px;
    --text-h1: 40px;
    --text-h2: 34px;
  }

  .screen {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .result-sticky-form,
  .gate-layout,
  .course-hero,
  .course-benefit-grid article,
  .student-story-grid article {
    box-shadow: var(--shadow-soft);
  }
}

@media (max-width: 720px) {
  :root {
    --text-display: 42px;
    --text-h1: 34px;
    --text-h2: 30px;
    --text-h3: 23px;
    --radius-md: 12px;
    --radius-lg: 16px;
  }

  .screen {
    padding: 32px 16px;
  }

  .messenger-screen {
    padding: 16px 16px 24px;
  }

  .topbar {
    background: rgba(247, 247, 245, 0.96);
  }

  .hero-time,
  .value-list span,
  .quiz-option,
  .choice-row,
  .post-choice-card,
  .priority-card,
  .diploma-toggle,
  .generation-statuses > div,
  .course-benefit-grid article,
  .student-story-grid article,
  .profile-card,
  .map-value-grid,
  .locked-report,
  .lead-form,
  .result-sticky-form,
  .analysis-console,
  .post-generation,
  .metrics-report,
  .metric-card {
    box-shadow: none;
  }

  .post-choice-card:nth-child(2) {
    border-left-color: var(--coral);
  }

  .post-choice-card:nth-child(3) {
    border-left-color: var(--mint);
  }

  .quiz-option:hover,
  .choice-row:hover,
  .priority-card:hover,
  .post-choice-card:hover,
  .map-motive-point:hover,
  .track-tabs button:hover {
    box-shadow: none;
  }

  .quiz-option.selected,
  .choice-row.selected,
  .priority-card.selected,
  .post-choice-card.selected,
  .track-tabs button.active {
    box-shadow: 0 0 0 2px var(--blue);
  }

  .messenger {
    border-radius: var(--radius-md);
  }

  .access-device {
    border-radius: 0;
  }

  .bubble,
  .access-message p {
    border-radius: 14px;
  }

  .post-visual-grid button {
    border-radius: var(--radius-md);
  }

  .phone-gate-form {
    box-shadow: none;
  }

  .course-final-cta .button {
    white-space: normal;
  }
}

.audience-neighborhood {
  min-height: auto;
  aspect-ratio: 1672 / 941;
  border-color: rgba(204, 179, 150, 0.42);
  background: #fbf1e6;
  box-shadow: 0 18px 46px rgba(58, 48, 39, 0.13);
}

.audience-neighborhood::before,
.audience-neighborhood::after {
  display: none;
}

.audience-map-layer {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.audience-map-layer--background {
  z-index: 0;
}

.audience-scene-routes {
  z-index: 4;
  opacity: 1;
  overflow: visible;
}

.audience-scene-routes--mobile {
  display: none;
}

.audience-route {
  --route-color: var(--cafe-blue-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.route--office {
  --route-color: #5f7f92;
}

.route--home {
  --route-color: #e7bd61;
}

.route--student {
  --route-color: #c77549;
}

.route--weekend {
  --route-color: #2e2a31;
}

.audience-neighborhood .audience-route .route-line {
  stroke: var(--route-color);
  stroke-width: 4.1;
  stroke-dasharray: 10 10;
  filter: drop-shadow(0 1px 0 rgba(255, 250, 242, 0.84));
}

.audience-neighborhood .audience-route circle {
  fill: var(--route-color);
  stroke: #fbf1e6;
  stroke-width: 0.75;
}

.audience-neighborhood.is-office .route--office .route-line,
.audience-neighborhood.is-home .route--home .route-line,
.audience-neighborhood.is-student .route--student .route-line,
.audience-neighborhood.is-weekend .route--weekend .route-line {
  stroke: var(--route-color);
  stroke-width: 4.7;
}

.audience-neighborhood.is-office .route--office,
.audience-neighborhood.is-home .route--home,
.audience-neighborhood.is-student .route--student,
.audience-neighborhood.is-weekend .route--weekend {
  opacity: 1;
  visibility: visible;
  animation: audience-route-in 0.52s ease both;
}

.audience-neighborhood.is-office .route--office circle,
.audience-neighborhood.is-home .route--home circle,
.audience-neighborhood.is-student .route--student circle,
.audience-neighborhood.is-weekend .route--weekend circle {
  fill: var(--route-color);
}

.audience-scene-cafe {
  width: 30.5%;
  min-height: 0;
  top: 52%;
  left: 50%;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.audience-cafe-image {
  width: 100%;
  display: block;
  filter: drop-shadow(0 16px 18px rgba(58, 48, 39, 0.16));
  pointer-events: none;
  user-select: none;
}

.audience-scene-cafe small {
  margin-top: -8px;
}

.audience-neighborhood .audience-scene-person,
.audience-neighborhood .audience-scene-person:hover,
.audience-neighborhood .audience-scene-person.selected {
  min-height: 0;
  padding: 0;
  display: block;
  position: absolute;
  z-index: 6;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cafe-graphite);
  overflow: visible;
  appearance: none;
  text-align: left;
  transform: none;
}

.audience-neighborhood .audience-scene-person--office {
  width: 28%;
  height: 38%;
  left: 5%;
  top: 4%;
}

.audience-neighborhood .audience-scene-person--home {
  width: 31%;
  height: 38%;
  right: 0;
  top: 3%;
}

.audience-neighborhood .audience-scene-person--student {
  width: 32%;
  height: 39%;
  left: 2%;
  bottom: 2%;
}

.audience-neighborhood .audience-scene-person--weekend {
  width: 34%;
  height: 39%;
  right: 0;
  bottom: 2%;
}

.audience-art,
.audience-map-image {
  display: block;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.audience-art {
  inset: 0;
}

.audience-map-image {
  object-fit: contain;
}

.audience-map-image--office-person {
  width: 54%;
  height: 92%;
  left: 35%;
  top: 3%;
}

.audience-map-image--home-person {
  width: 39%;
  height: 90%;
  left: 4%;
  top: 3%;
}

.audience-map-image--home-building {
  width: 60%;
  height: 88%;
  right: -4%;
  top: 0;
}

.audience-map-image--student-person {
  width: 86%;
  height: 94%;
  left: -2%;
  bottom: 0;
}

.audience-map-image--weekend-person {
  width: 33%;
  height: 86%;
  left: 7%;
  top: 6%;
}

.audience-map-image--market {
  width: 61%;
  height: 84%;
  right: -2%;
  bottom: 0;
}

.audience-label {
  max-width: 190px;
  padding: 8px 11px;
  display: block;
  position: absolute;
  z-index: 7;
  border: 1px solid rgba(46, 42, 49, 0.12);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.92);
  color: var(--cafe-graphite);
  box-shadow: 0 10px 22px rgba(58, 48, 39, 0.1);
  pointer-events: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.audience-label--office {
  left: 1%;
  bottom: 6%;
}

.audience-label--home {
  right: 7%;
  bottom: 5%;
  left: auto;
}

.audience-label--student {
  right: 18%;
  top: 14%;
  left: auto;
}

.audience-label--weekend {
  right: 3%;
  top: -3%;
  left: auto;
}

.audience-label strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.12;
}

.audience-neighborhood .audience-scene-person:hover .audience-label,
.audience-neighborhood .audience-scene-person.selected .audience-label {
  border-color: rgba(189, 116, 69, 0.72);
  box-shadow: 0 0 0 4px rgba(189, 116, 69, 0.14), 0 13px 25px rgba(58, 48, 39, 0.12);
  transform: translateY(-2px);
}

.audience-neighborhood .audience-scene-person:focus-visible {
  outline: none;
}

.audience-neighborhood .audience-scene-person:focus-visible .audience-label {
  box-shadow: 0 0 0 4px rgba(131, 167, 182, 0.38), 0 13px 25px rgba(58, 48, 39, 0.12);
}

.audience-neighborhood.is-motive-step {
  min-height: 430px;
  aspect-ratio: auto;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(240, 206, 119, 0.2), transparent 31%),
    radial-gradient(circle at 18% 14%, rgba(131, 167, 182, 0.12), transparent 22%),
    radial-gradient(circle at 82% 84%, rgba(189, 116, 69, 0.11), transparent 24%),
    var(--cafe-paper);
}

.audience-neighborhood.is-motive-step .audience-map-layer--background {
  opacity: 1;
  filter: none;
}

.audience-neighborhood.is-motive-step .audience-scene-routes {
  display: none;
}

.audience-neighborhood.is-motive-step .audience-scene-person.selected {
  width: 30%;
  height: 72%;
  right: auto;
  bottom: auto;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
}

.audience-neighborhood.is-motive-step .audience-scene-person.selected .audience-label {
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
}

.audience-neighborhood.is-motive-step .audience-scene-person.selected .audience-art {
  inset: 18% 0 0;
}

.audience-neighborhood.is-motive-step .audience-scene-person.selected .audience-map-image--office-person,
.audience-neighborhood.is-motive-step .audience-scene-person.selected .audience-map-image--home-person,
.audience-neighborhood.is-motive-step .audience-scene-person.selected .audience-map-image--student-person,
.audience-neighborhood.is-motive-step .audience-scene-person.selected .audience-map-image--weekend-person {
  width: 82%;
  height: 92%;
  left: 2%;
  top: auto;
  right: auto;
  bottom: 0;
}

.audience-neighborhood.is-motive-step .audience-scene-person.selected .audience-map-image--home-building,
.audience-neighborhood.is-motive-step .audience-scene-person.selected .audience-map-image--market {
  display: none;
}

.audience-neighborhood.is-motive-step .audience-scene-cafe {
  width: 28%;
  right: 4%;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
}

.audience-neighborhood.is-motive-step .map-motive-axis {
  display: block;
  border-color: rgba(100, 134, 151, 0.55);
}

.audience-neighborhood.is-motive-step .map-motive-axis::before,
.audience-neighborhood.is-motive-step .map-motive-axis::after {
  border-color: rgba(100, 134, 151, 0.72);
  background: #fff;
}

.audience-neighborhood.is-motive-step .map-motive-point {
  width: 208px;
  min-height: 0;
  padding: 13px 15px;
  display: block;
  border: 2px solid rgba(100, 134, 151, 0.66);
  border-radius: 8px;
  background: #fff;
  color: var(--cafe-graphite);
  box-shadow: 0 12px 26px rgba(58, 48, 39, 0.13);
}

.audience-neighborhood.is-motive-step .map-motive-point--near {
  left: 27%;
  top: 10%;
}

.audience-neighborhood.is-motive-step .map-motive-point--program {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 7%;
  transform: translateX(-50%);
}

.audience-neighborhood.is-motive-step .map-motive-point--rhythm {
  right: auto;
  left: 47%;
  top: 10%;
}

.audience-neighborhood.is-motive-step .map-motive-point:hover,
.audience-neighborhood.is-motive-step .map-motive-point:focus-visible {
  border-color: var(--cafe-blue-deep);
  box-shadow: 0 0 0 4px rgba(100, 134, 151, 0.16), 0 14px 28px rgba(58, 48, 39, 0.15);
}

.audience-neighborhood.is-motive-step .map-motive-point--program:hover,
.audience-neighborhood.is-motive-step .map-motive-point--program:focus-visible {
  transform: translate(-50%, -3px);
}

.audience-neighborhood.is-motive-step .map-motive-point.selected {
  border-color: var(--cafe-blue-deep);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(100, 134, 151, 0.18), 0 14px 28px rgba(58, 48, 39, 0.15);
}

@media (max-width: 720px) {
  .audience-neighborhood {
    min-height: 650px;
    aspect-ratio: auto;
  }

  .audience-map-layer--background {
    width: 185%;
    left: -42%;
    object-fit: cover;
  }

  .audience-scene-routes:not(.audience-scene-routes--mobile) {
    display: none;
  }

  .audience-scene-routes--mobile {
    width: 100%;
    left: 0;
    display: block;
    opacity: 0.96;
  }

  .audience-neighborhood.is-motive-step .audience-scene-routes:not(.audience-scene-routes--mobile) {
    display: none;
  }

  .audience-neighborhood.is-motive-step .audience-scene-routes--mobile {
    display: none;
  }

  .audience-scene-cafe {
    width: 50%;
    top: 51%;
  }

  .audience-neighborhood .audience-scene-person--office,
  .audience-neighborhood .audience-scene-person--home,
  .audience-neighborhood .audience-scene-person--student,
  .audience-neighborhood .audience-scene-person--weekend {
    width: 48%;
    height: 30%;
  }

  .audience-neighborhood .audience-scene-person--office {
    left: 0;
    top: 4%;
  }

  .audience-neighborhood .audience-scene-person--home {
    right: 0;
    top: 4%;
  }

  .audience-neighborhood .audience-scene-person--student {
    left: 0;
    bottom: 4%;
  }

  .audience-neighborhood .audience-scene-person--weekend {
    right: 0;
    bottom: 4%;
  }

  .audience-label {
    max-width: 126px;
    padding: 7px 9px;
  }

  .audience-label strong {
    font-size: 13px;
  }

  .audience-label--office {
    left: 2%;
    bottom: 3%;
  }

  .audience-label--home {
    right: 3%;
    bottom: 5%;
  }

  .audience-label--student {
    top: 0;
    right: 3%;
    left: auto;
  }

  .audience-label--weekend {
    top: 0;
    right: 3%;
    left: auto;
  }

  .audience-neighborhood .audience-map-image--office-person,
  .audience-neighborhood .audience-map-image--home-person,
  .audience-neighborhood .audience-map-image--student-person,
  .audience-neighborhood .audience-map-image--weekend-person {
    width: auto;
    height: 72%;
    max-width: none;
  }

  .audience-map-image--office-person {
    left: 25%;
    top: 8%;
  }

  .audience-map-image--home-person {
    left: 4%;
    top: 9%;
  }

  .audience-map-image--home-building {
    width: 63%;
    height: 74%;
    right: -12%;
    top: 7%;
  }

  .audience-map-image--student-person {
    left: -4%;
    bottom: 0;
  }

  .audience-map-image--weekend-person {
    left: 4%;
    top: 20%;
  }

  .audience-map-image--market {
    width: 70%;
    height: 70%;
    right: -23%;
    bottom: 0;
  }

  .audience-neighborhood.is-motive-step {
    min-height: 590px;
  }

  .audience-neighborhood.is-motive-step .audience-scene-person.selected {
    width: min(300px, 88%);
    height: 210px;
    left: 50%;
    top: 3%;
    transform: translateX(-50%);
  }

  .audience-neighborhood.is-motive-step .audience-scene-person.selected .audience-art {
    inset: 20% 0 0;
  }

  .audience-neighborhood.is-motive-step .audience-scene-cafe {
    width: 52%;
    right: auto;
    bottom: 5%;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
  }

  .audience-neighborhood.is-motive-step .map-motive-axis {
    display: block;
    width: 0;
    height: auto;
    top: 28%;
    right: auto;
    bottom: 25%;
    left: 50%;
    border-top: 0;
    border-left: 3px dashed rgba(100, 134, 151, 0.55);
  }

  .audience-neighborhood.is-motive-step .map-motive-axis::before,
  .audience-neighborhood.is-motive-step .map-motive-axis::after {
    left: -7px;
  }

  .audience-neighborhood.is-motive-step .map-motive-axis::before {
    top: 0;
  }

  .audience-neighborhood.is-motive-step .map-motive-axis::after {
    top: auto;
    right: auto;
    bottom: 0;
  }

  .audience-neighborhood.is-motive-step .motive-card-links--desktop {
    display: none;
  }

  .audience-neighborhood.is-motive-step .motive-card-links--mobile {
    display: block;
  }

  .audience-neighborhood.is-motive-step .map-motive-point {
    width: min(176px, 45%);
    min-height: 0;
    padding: 10px 11px;
  }

  .audience-neighborhood.is-motive-step .map-motive-point--near {
    left: 3%;
    top: 31%;
  }

  .audience-neighborhood.is-motive-step .map-motive-point--rhythm {
    left: 3%;
    right: auto;
    top: 49%;
  }

  .audience-neighborhood.is-motive-step .map-motive-point--program {
    left: auto;
    right: 3%;
    top: 43%;
    bottom: auto;
    transform: none;
  }

  .audience-neighborhood.is-motive-step .map-motive-point--program:hover,
  .audience-neighborhood.is-motive-step .map-motive-point--program:focus-visible {
    transform: translateY(-3px);
  }
}

.opening-success-screen {
  display: grid;
  gap: 34px;
  background:
    linear-gradient(135deg, rgba(61, 59, 255, 0.1), rgba(216, 255, 84, 0.18) 48%, rgba(255, 196, 189, 0.18)),
    var(--paper);
}

.opening-success-hero,
.opening-thanks,
.opening-next {
  width: min(var(--content), 100%);
  margin: 0 auto;
}

.opening-success-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr);
  gap: 42px;
  align-items: center;
}

.opening-success-copy h2 {
  max-width: 620px;
  margin: 10px 0 20px;
  font-size: 64px;
}

.opening-success-copy,
.opening-photo-wall {
  min-width: 0;
  width: 100%;
}

.opening-success-copy p {
  max-width: 590px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
}

.opening-photo-wall {
  min-height: 540px;
  position: relative;
}

.opening-photo {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 10px 10px 0 rgba(17, 17, 17, 0.14);
}

.opening-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.opening-photo--terrace img {
  object-position: center center;
}

.opening-photo figcaption {
  display: none;
}

.opening-photo--event {
  width: 64%;
  height: 64%;
  top: 0;
  right: 0;
}

.opening-photo--terrace {
  width: 46%;
  height: 44%;
  left: 0;
  bottom: 0;
}

.opening-photo--place {
  width: 36%;
  height: 34%;
  right: 7%;
  bottom: 5%;
}

.opening-thanks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.opening-thanks article {
  min-height: 0;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.opening-thanks .mentor-avatar {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

.opening-thanks b,
.opening-thanks p {
  display: block;
}

.opening-thanks b {
  margin-bottom: 8px;
  font-size: 16px;
}

.opening-thanks p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.opening-next {
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  box-shadow: 10px 10px 0 rgba(17, 17, 17, 0.14);
}

.opening-next .eyebrow {
  color: var(--lime);
}

.opening-next h3 {
  margin-bottom: 10px;
  font-size: 34px;
}

.opening-next p {
  max-width: 720px;
  margin: 0;
  color: #e0dfff;
  line-height: 1.5;
}

.opening-next .button {
  border: 2px solid var(--ink);
  background: var(--lime);
  color: var(--ink);
  box-shadow: 6px 6px 0 rgba(17, 17, 17, 0.18);
}

@media (max-width: 980px) {
  .opening-success-hero,
  .opening-thanks,
  .opening-next {
    width: min(100%, calc(100vw - 32px));
  }

  .opening-success-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .opening-success-copy h2 {
    font-size: clamp(38px, 12vw, 58px);
  }

  .opening-photo-wall {
    min-height: 430px;
  }

  .opening-thanks,
  .opening-next {
    grid-template-columns: 1fr;
  }

  .opening-next {
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Gate screen */
body[data-screen="gate"] .topbar,
body[data-screen="gate"] .progress {
  display: none;
}

body[data-screen="gate"] .stage {
  min-height: 100vh;
}

.gate-screen {
  min-height: 100vh;
  padding: 32px max(24px, calc((100vw - var(--content)) / 2)) 52px;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 42% 12%, rgba(255, 255, 255, 0.98) 0, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 18% 68%, rgba(212, 229, 255, 0.74) 0, rgba(212, 229, 255, 0) 32%),
    radial-gradient(circle at 82% 44%, rgba(236, 240, 255, 0.9) 0, rgba(236, 240, 255, 0) 38%),
    #edf5ff;
  color: var(--ink);
}

.gate-heading {
  width: 100%;
  margin: 0 0 30px;
}

.gate-heading .eyebrow {
  min-height: 40px;
  margin: 0;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: rgba(217, 224, 255, 0.92);
  color: #5264ee;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
}

.gate-heading .eyebrow i {
  font-size: 1.15em;
  font-style: normal;
}

.gate-heading h2 {
  max-width: 900px;
  margin: 26px 0 0;
  font-size: 64px;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.gate-layout {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
}

.locked-report {
  min-height: 760px;
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 24px 70px rgba(73, 91, 134, 0.09);
}

.locked-report__body {
  height: 100%;
  padding: 60px 36px 46px;
  position: relative;
}

.locked-report__visual {
  width: 205px;
  height: auto;
  position: absolute;
  z-index: 2;
  top: -45px;
  right: -55px;
  display: block;
  pointer-events: none;
}

.locked-report__body h3 {
  max-width: calc(100% - 70px);
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: 34px;
  letter-spacing: -0.035em;
  line-height: 1.12;
  filter: none;
  user-select: auto;
}

.locked-report__profile-line,
.locked-report__strength-line {
  display: block;
}

.locked-report__body h3 .locked-report__blurred {
  padding: 0;
  display: inline-block;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  filter: blur(5px);
  user-select: none;
  cursor: pointer;
}

.locked-feedback {
  min-height: 0;
  margin-top: 42px;
  padding: 24px 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  border-top: 1px solid #dfe3e8;
  border-bottom: 0;
}

.locked-feedback .mentor-avatar {
  width: 68px;
  height: 68px;
  flex-basis: auto;
  border: 0;
}

.locked-feedback p {
  max-width: 95%;
  margin: 0;
  color: #393b42;
  font-size: 16px;
  line-height: 1.45;
  filter: none;
  user-select: auto;
}

.locked-feedback b {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 18px;
}

.locked-feedback p span {
  display: inline;
  filter: blur(4px);
  user-select: none;
}

.report-inside {
  margin-top: 36px;
  padding: 28px 24px 26px;
  display: block;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(247, 248, 255, 0.98), rgba(239, 241, 255, 0.78));
}

.report-inside > b {
  display: block;
  margin-bottom: 22px;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}

.report-inside .report-inside__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 20px;
}

.report-inside .report-item {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  font-size: 17px;
  line-height: 1.35;
}

.report-item__icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(55, 70, 130, 0.1);
}

.report-item__icon svg {
  width: 64%;
  height: 64%;
  fill: none;
  stroke: #3d43f3;
  stroke-width: 3.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-item__icon svg path:first-child {
  fill: rgba(61, 67, 243, 0.12);
}

.report-item strong {
  font-weight: 600;
}

.report-item--locked {
  min-height: 68px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 24px rgba(55, 70, 130, 0.08);
}

.report-item--locked .report-item__icon {
  width: 52px;
  height: 52px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.report-item--locked small {
  color: #4a4d56;
  font-size: 13px;
  line-height: 1.35;
}

.gate-offer {
  padding-top: 14px;
}

.gate-offer h3 {
  max-width: 100%;
  margin: 0 0 24px;
  font-size: 39px;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.gate-offer > p {
  margin: 0;
  color: #4f525a;
  font-size: 18px;
  line-height: 1.45;
}

.gate-offer .gate-benefits {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  list-style: none;
}

.gate-benefits li {
  min-height: 52px;
  padding: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  color: #363941;
  font-size: 17px;
  line-height: 1.35;
}

.gate-benefits li::before {
  content: none;
}

.gate-benefits li > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(65, 77, 126, 0.09);
}

.gate-benefits svg {
  width: 64%;
  height: 64%;
  fill: none;
  stroke: #4354f5;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phone-gate-form {
  margin-top: 42px;
  padding: 28px 28px 30px;
  border-radius: 24px;
  background: linear-gradient(145deg, #3544f3 0%, #3539ef 52%, #2f4bf5 100%);
  color: var(--white);
  box-shadow: none;
}

.phone-gate-form__title {
  display: block;
  color: #d9ddff;
  font-size: 18px;
  line-height: 1.3;
}

.phone-gate-form .phone-gate-form__phone {
  margin-top: 20px;
  display: block;
}

.phone-gate-form__phone > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.phone-gate-form input[type="tel"] {
  width: 100%;
  min-height: 62px;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
}

.phone-gate-form input[type="tel"]::placeholder {
  color: #b6b8bd;
  opacity: 1;
}

.phone-gate-form .consent-row {
  margin-top: 19px;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 11px !important;
}

.phone-gate-form .consent-row input {
  width: 24px !important;
  height: 24px;
  position: relative;
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.74);
  border-radius: 5px;
  background: transparent;
}

.phone-gate-form .consent-row input:checked {
  border-color: #fff;
  background: #fff;
}

.phone-gate-form .consent-row input:checked::after {
  content: "";
  width: 42%;
  height: 24%;
  position: absolute;
  left: 27%;
  top: 26%;
  border-left: 3px solid #4254f5;
  border-bottom: 3px solid #4254f5;
  transform: rotate(-45deg);
}

.phone-gate-form .consent-row span {
  padding-top: 0.1em;
  color: #d9ddff;
  font-size: 15px !important;
  line-height: 1.42;
}

.phone-gate-form .consent-row u {
  text-underline-offset: 0.16em;
}

.phone-gate-form .button {
  min-height: 70px;
  margin: 24px 0 0;
  border-radius: 15px;
  background: linear-gradient(100deg, #e7ff52 0%, #d8ff54 46%, #d9ff68 100%);
  color: #111;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(188, 230, 44, 0.16);
}

.phone-gate-form .button > span {
  margin-left: 18px;
  font-size: 1.35em;
}

.phone-gate-form .consent-row--optional {
  margin-top: 20px;
  color: #d9ddff;
}

.gate-floating-cta {
  display: none;
}

@media (max-width: 1180px) {
  .gate-screen {
    overflow: visible;
  }

  .gate-heading h2 {
    max-width: 940px;
  }

  .gate-layout {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .locked-report {
    min-height: 0;
  }

  .locked-report__visual {
    width: 190px;
    top: -38px;
    right: -20px;
  }

  .gate-offer {
    max-width: 760px;
  }
}

@media (max-width: 720px) {
  .gate-floating-cta {
    width: min(300px, calc(100% - 32px));
    min-height: 54px;
    padding: 12px 22px;
    position: fixed;
    left: 50%;
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px));
    z-index: 230;
    display: block;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #174dff 0%, #0738f4 100%);
    color: #fff;
    font: 600 14px/1.1 "Graphik", Arial, sans-serif;
    box-shadow: 0 14px 34px rgba(7, 56, 244, 0.34);
    transform: translateX(-50%);
    visibility: visible;
    cursor: pointer;
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0s;
  }

  .gate-floating-cta.is-hidden {
    opacity: 0;
    transform: translate(-50%, calc(100% + 48px));
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
  }

  .gate-screen {
    padding: 24px 16px 40px;
  }

  .gate-heading {
    margin-bottom: 24px;
  }

  .gate-heading .eyebrow {
    min-height: 36px;
    padding: 9px 14px;
    font-size: 14px;
  }

  .gate-heading h2 {
    max-width: 100%;
    margin-top: 22px;
    font-size: clamp(42px, 13.3vw, 60px);
  }

  .gate-layout {
    gap: 36px;
  }

  .locked-report {
    border-radius: 20px;
  }

  .locked-report__body {
    padding: 34px 20px 24px;
  }

  .locked-report__visual {
    width: 130px;
    top: -20px;
    right: -16px;
    opacity: 0.9;
  }

  .locked-report__body h3 {
    max-width: 68%;
    font-size: 30px;
  }

  .locked-feedback {
    margin-top: 42px;
    padding: 28px 0;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
  }

  .locked-feedback .mentor-avatar {
    width: 58px;
    height: 58px;
  }

  .locked-feedback p {
    max-width: 100%;
    font-size: 14px;
  }

  .locked-feedback b {
    font-size: 15px;
  }

  .report-inside {
    margin-top: 16px;
    padding: 22px 16px;
  }

  .report-inside > b {
    margin-bottom: 18px;
  }

  .report-inside .report-inside__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .report-inside .report-item {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 14px;
    font-size: 16px;
  }

  .report-item__icon {
    width: 60px;
    height: 60px;
  }

  .report-item--locked {
    padding: 8px 10px;
  }

  .gate-offer h3 {
    font-size: 38px;
  }

  .gate-offer > p br {
    display: none;
  }

  .gate-offer .gate-benefits {
    margin-top: 28px;
  }

  .gate-benefits li {
    grid-template-columns: 52px minmax(0, 1fr);
    font-size: 16px;
  }

  .phone-gate-form {
    margin-top: 34px;
    padding: 24px 20px;
    border-radius: 22px;
  }

  .phone-gate-form input[type="tel"] {
    min-height: 58px;
  }

  .phone-gate-form .button {
    min-height: 64px;
  }
}

/* Personal map */
body[data-screen="result"] .topbar,
body[data-screen="result"] .progress {
  display: none;
}

body[data-screen="result"] .stage {
  min-height: 100vh;
  background: #fff;
}

html:has(body[data-screen="result"]),
body[data-screen="result"] {
  min-width: 0;
  overflow-x: hidden;
}

.personal-map-screen.result-screen {
  min-height: 100vh;
  padding: 0;
  display: block;
  overflow: hidden;
  background: #fff;
}

.personal-floating-cta {
  min-width: 280px;
  min-height: 58px;
  padding: 14px 34px;
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 230;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #174dff 0%, #0738f4 100%);
  color: #fff;
  font: 600 16px/1.1 "Graphik", Arial, sans-serif;
  box-shadow: 0 14px 34px rgba(7, 56, 244, 0.34);
  transform: translateX(-50%);
  visibility: visible;
  cursor: pointer;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0s;
}

@media (hover: hover) {
  .personal-floating-cta:hover {
    transform: translate(-50%, -3px);
  }
}

.personal-floating-cta:active {
  transform: translate(-50%, -1px);
}

.personal-floating-cta:focus-visible {
  outline: 3px solid #bfff35;
  outline-offset: 4px;
}

.personal-floating-cta.is-hidden {
  opacity: 0;
  transform: translate(-50%, calc(100% + 48px));
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
}

.personal-map-shell {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 42px 0 30px;
}

.personal-map-hero {
  margin: 0 14px 30px;
}

.personal-map-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(42px, 4.6vw, 64px);
  letter-spacing: -0.052em;
  line-height: 0.98;
}

.personal-map-hero p {
  margin: 22px 0 0;
  color: #292929;
  font-size: 16px;
  line-height: 1.5;
}

.personal-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(310px, 1fr);
  gap: 24px;
}

.personal-profile {
  min-height: 310px;
  padding: 30px;
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid #e0e1e5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(19, 28, 56, 0.08);
}

.personal-profile h2 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.personal-profile p {
  margin: 20px 0 0;
  color: #33343b;
  font-size: 15px;
  line-height: 1.5;
}

.personal-profile--primary {
  border-color: #1338fb;
  background:
    radial-gradient(circle at 78% 24%, rgba(67, 92, 255, 0.84), rgba(67, 92, 255, 0) 34%),
    linear-gradient(135deg, #0737f8 0%, #0c28e9 100%);
  color: #fff;
  box-shadow: 0 16px 38px rgba(7, 55, 248, 0.22);
}

.personal-profile--primary .personal-profile__copy {
  width: 58%;
  min-width: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.personal-profile--primary p {
  color: rgba(255, 255, 255, 0.9);
}

.personal-profile--primary button {
  color: #fff;
}

.personal-profile__label {
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.personal-profile__label i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: linear-gradient(145deg, #4768ff, #0823bd);
  color: #fff;
  font-size: 22px;
  font-style: normal;
  box-shadow: 0 8px 20px rgba(0, 0, 76, 0.35);
}

.personal-profile__art {
  width: 48%;
  max-width: 330px;
  position: absolute;
  right: -12px;
  bottom: -34px;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 18px 28px rgba(2, 8, 94, 0.34));
  pointer-events: none;
}

.personal-profile--secondary {
  flex-direction: column;
}

.personal-profile__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef0ff;
}

.personal-profile__icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #2546f5;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.personal-profile__eyebrow {
  margin-bottom: 24px;
  color: #595b63;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.personal-profile--secondary p {
  margin-top: 18px;
  font-size: 14px;
}

.personal-map-card {
  margin-top: 36px;
  padding: 26px 34px 22px;
  border: 1px solid #cad4ff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 6%, rgba(226, 230, 255, 0.84), rgba(226, 230, 255, 0) 28%),
    linear-gradient(135deg, #fbfcff 0%, #f1f4ff 100%);
}

.personal-map-card__heading {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 26px;
}

.personal-map-card__heading > strong {
  color: #0738f4;
  font-size: 68px;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.personal-map-card__heading div {
  padding-top: 4px;
}

.personal-map-card__heading span {
  display: block;
  margin-bottom: 8px;
  color: #0738f4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.personal-map-card__heading h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.personal-map-accordion {
  display: grid;
  gap: 8px;
}

.personal-map-accordion__item {
  overflow: hidden;
  border: 1px solid #e0e3ef;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(31, 45, 100, 0.045);
}

.personal-map-accordion__item > button {
  width: 100%;
  min-height: 64px;
  padding: 11px 22px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.personal-map-accordion__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 700;
}

.personal-map-accordion__icon--blue {
  background: #0d39f7;
  color: #fff;
}

.personal-map-accordion__icon--green {
  background: #e3f8d7;
  color: #5fa849;
}

.personal-map-accordion__icon--violet {
  background: #efe4ff;
  color: #8046f2;
}

.personal-map-accordion__title {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.personal-map-accordion__title b {
  font-size: 18px;
  line-height: 1.1;
}

.personal-map-accordion__title small {
  color: #777982;
  font-size: 12px;
  line-height: 1;
  transform: translateY(-1px);
}

.personal-map-accordion__toggle {
  color: #111;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.personal-map-accordion__item.is-open .personal-map-accordion__toggle {
  color: #0738f4;
}

.personal-map-accordion__content {
  padding: 0 26px 22px 80px;
  color: #24262c;
  font-size: 14px;
  line-height: 1.45;
}

.personal-map-accordion__content[hidden] {
  display: none;
}

.personal-map-accordion__content ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.personal-map-accordion__content li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.personal-map-accordion__content li > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d8ff54;
  color: #1736a5;
  font-size: 12px;
  font-weight: 700;
}

.personal-map-accordion__content li p,
.personal-map-accordion__content > p {
  margin: 0;
}

.personal-map-accordion__content > p + p {
  margin-top: 10px;
}

.personal-consultation {
  min-height: 370px;
  margin-top: 24px;
  padding: 24px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
  gap: 30px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 52% 78%, rgba(33, 70, 176, 0.48), rgba(33, 70, 176, 0) 30%),
    linear-gradient(125deg, #071934 0%, #071124 60%, #0a1c39 100%);
  color: #fff;
  box-shadow: 0 14px 32px rgba(4, 14, 36, 0.18);
}

.personal-consultation__copy {
  min-width: 0;
  padding: 5px 0 4px 8px;
  position: relative;
  z-index: 1;
}

.personal-consultation__copy h2 {
  max-width: 540px;
  margin: 0;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.personal-consultation__duration {
  width: fit-content;
  min-height: 36px;
  margin-top: 18px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  border: 2px solid #526eff;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.personal-consultation__copy ul {
  max-width: 430px;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  color: #f2f5fb;
  font-size: 17px;
  line-height: 1.4;
  list-style: none;
}

.personal-consultation__copy li {
  position: relative;
  padding-left: 32px;
}

.personal-consultation__copy li::before {
  content: "✓";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #d9f34a;
  color: #071124;
  font-size: 12px;
  font-weight: 700;
}

.personal-consultation__discount {
  display: inline-block;
  margin: 1px 2px;
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: #d9f34a;
  color: #071124;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.personal-consultation__art {
  width: 190px;
  height: auto;
  position: absolute;
  right: -18px;
  bottom: -28px;
  display: block;
  transform: rotate(-8deg);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.personal-consultation__form {
  min-width: 0;
  padding: 24px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 13px;
  background: #fff;
  color: #111;
}

.personal-consultation__form > label:not(.skb-consent) {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.personal-consultation__form > label:not(.skb-consent) > span {
  font-size: 14px;
  font-weight: 600;
}

.personal-consultation__form input:not([type="checkbox"]) {
  width: 100%;
  min-height: 51px;
  padding: 10px 14px;
  border: 1px solid #e1e3e8;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font-size: 14px;
  outline: 0;
}

.personal-consultation__form input:not([type="checkbox"]):focus {
  border-color: #0738f4;
  box-shadow: 0 0 0 3px rgba(7, 56, 244, 0.12);
}

.personal-consultation__form input::placeholder {
  color: #a4a6ad;
}

.phone-input-shell {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: stretch;
  border-radius: 8px;
}

.phone-input-shell.is-invalid {
  box-shadow: 0 0 0 2px #d93025;
}

.phone-input-shell.is-invalid > input[type="tel"]:focus {
  border-color: #d93025;
  box-shadow: none;
}

.phone-input-prefix {
  min-width: 52px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e3e8;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #f4f5f7;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.phone-input-shell > input[type="tel"] {
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 0 8px 8px 0;
}

.phone-gate-form .phone-input-prefix {
  min-width: 60px;
  border: 0;
  border-right: 1px solid #e1e3e8;
  border-radius: 12px 0 0 12px;
  background: #f4f5f7;
  font-size: 18px;
}

.phone-gate-form .phone-input-shell {
  border-radius: 12px;
}

.phone-gate-form .phone-input-shell > input[type="tel"] {
  border-radius: 0 12px 12px 0;
}

.personal-consultation__form .skb-consent__item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #303238;
  font-size: 12px;
  line-height: 1.35;
}

.personal-consultation__form .skb-consent__box {
  width: 18px;
  height: 18px;
  accent-color: #0738f4;
}

.personal-consultation__form .skb-consent__label {
  padding-top: 2px;
}

.personal-consultation__form .skb-consent__label a {
  color: #111;
}

.personal-consultation__form > button {
  width: 100%;
  min-height: 56px;
  margin-top: auto;
  border: 0;
  border-radius: 8px;
  background: #0738f4;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast);
}

.personal-consultation__form > button:hover {
  background: #002dd2;
  transform: translateY(-1px);
}

.personal-consultation__form > button span {
  margin-left: 12px;
}

@media (max-width: 980px) {
  .personal-map-shell {
    width: min(920px, calc(100% - 32px));
    padding-top: 34px;
  }

  .personal-profile-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 16px;
  }

  .personal-profile {
    min-height: 330px;
    padding: 24px;
  }

  .personal-profile--primary .personal-profile__copy {
    width: 62%;
  }

  .personal-profile__art {
    width: 50%;
    right: -10px;
    bottom: -18px;
  }

  .personal-consultation {
    grid-template-columns: 1fr;
  }

  .personal-consultation__copy {
    min-height: 285px;
    padding-right: 210px;
  }

  .personal-consultation__art {
    width: 190px;
    right: 10px;
    bottom: -10px;
  }
}

@media (max-width: 700px) {
  .personal-floating-cta {
    width: min(300px, calc(100% - 32px));
    min-width: 0;
    min-height: 54px;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 60px));
    padding: 12px 22px;
    font-size: 14px;
  }

  .personal-map-shell {
    width: calc(100% - 28px);
    padding: 28px 0 20px;
  }

  .personal-map-hero {
    margin: 0 4px 24px;
  }

  .personal-map-hero h1 {
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1.02;
  }

  .personal-map-hero p {
    margin-top: 18px;
    font-size: 14px;
  }

  .personal-map-hero p br {
    display: none;
  }

  .personal-profile-grid {
    grid-template-columns: 1fr;
  }

  .personal-profile {
    min-height: 300px;
  }

  .personal-profile--primary .personal-profile__copy {
    width: 62%;
  }

  .personal-profile__art {
    width: 54%;
    right: -14px;
    bottom: -12px;
  }

  .personal-map-card {
    margin-top: 18px;
    padding: 22px 12px 14px;
  }

  .personal-map-card__heading {
    padding: 0 8px;
    gap: 17px;
  }

  .personal-map-card__heading > strong {
    font-size: 56px;
  }

  .personal-map-card__heading h2 {
    font-size: 25px;
  }

  .personal-map-accordion__item > button {
    min-height: 62px;
    padding: 10px 13px;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    gap: 10px;
  }

  .personal-map-accordion__title b {
    font-size: 16px;
  }

  .personal-map-accordion__title small {
    font-size: 11px;
  }

  .personal-map-accordion__content {
    padding: 0 15px 18px 61px;
    font-size: 13px;
  }

  .personal-consultation {
    margin-top: 16px;
    padding: 20px 14px 14px;
    gap: 14px;
  }

  .personal-consultation__copy {
    min-height: 0;
    padding: 4px;
  }

  .personal-consultation__copy h2 {
    font-size: 36px;
  }

  .personal-consultation__duration {
    margin-top: 15px;
    font-size: 11px;
  }

  .personal-consultation__copy ul {
    max-width: none;
    margin-top: 20px;
    padding-right: 0;
    gap: 12px;
    font-size: 14px;
  }

  .personal-consultation__art {
    display: none;
  }

  .personal-consultation__form {
    padding: 20px 16px;
    gap: 14px;
  }

  .personal-consultation__form > label:not(.skb-consent) {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .personal-consultation__form > label:not(.skb-consent) > span {
    font-size: 14px;
  }

  .personal-consultation__form input:not([type="checkbox"]) {
    min-height: 54px;
    font-size: 15px;
  }

  .personal-consultation__form .skb-consent__item {
    margin-block: 0;
    font-size: 13px;
  }

  .personal-consultation__form .skb-consent__box {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 430px) {
  .personal-map-card {
    padding-right: 4px;
    padding-left: 4px;
  }

  .personal-map-accordion__item > button {
    padding: 10px 32px 10px 8px;
    position: relative;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
  }

  .personal-map-accordion__icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .personal-map-accordion__title {
    display: grid;
    align-content: center;
    gap: 2px;
    white-space: normal;
  }

  .personal-map-accordion__title b {
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
  }

  .personal-map-accordion__title small {
    font-size: 9px;
    line-height: 1.15;
    transform: none;
  }

  .personal-map-accordion__toggle {
    position: absolute;
    right: 9px;
  }

  .personal-map-accordion__content {
    padding-left: 48px;
  }

  .personal-profile--primary .personal-profile__copy {
    width: 100%;
  }

  .personal-profile h2 {
    font-size: 29px;
  }

  .personal-profile p {
    font-size: 13px;
  }

  .personal-profile__art {
    width: 56%;
    right: -18px;
  }

  .personal-profile--primary {
    flex-direction: column;
  }

  .personal-profile--primary > .raster-picture {
    width: min(52%, 160px);
    margin: 12px -18px -24px auto;
    display: block;
    line-height: 0;
  }

  .personal-profile--primary > .raster-picture .personal-profile__art {
    width: 100%;
    max-width: none;
    position: static;
    display: block;
  }
}

.personal-income {
  margin-top: 24px;
  padding: 30px 32px 20px;
  border: 1px solid #d8dfff;
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 12%, rgba(226, 231, 255, 0.8), rgba(226, 231, 255, 0) 35%),
    linear-gradient(135deg, #fbfcff 0%, #f1f4ff 100%);
}

.personal-income > p {
  margin: 0;
  color: #202127;
  font-size: 18px;
  line-height: 1.35;
}

.personal-income > strong {
  margin-top: 4px;
  display: block;
  color: #0738f4;
  font-size: clamp(48px, 5.8vw, 72px);
  letter-spacing: -0.055em;
  line-height: 1;
}

.personal-income > strong small {
  font-size: 0.58em;
}

.personal-income > a {
  margin-top: 8px;
  display: inline-block;
  color: #666a74;
  font-size: 14px;
  text-decoration: none;
}

.personal-income > a:hover {
  color: #0738f4;
}

.personal-income__roles {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.personal-income__roles article {
  min-height: 170px;
  padding: 24px 26px 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid #becaff;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.personal-income__roles h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.personal-income__roles p {
  margin: 12px 0 0;
  color: #565a64;
  font-size: 15px;
  line-height: 1.4;
}

.personal-income__roles b {
  margin-top: auto;
  padding-top: 18px;
  font-size: 18px;
}

@media (max-width: 760px) {
  .personal-income {
    margin-top: 16px;
    padding: 24px 18px 18px;
  }

  .personal-income > p {
    font-size: 15px;
  }

  .personal-income > p br {
    display: none;
  }

  .personal-income > strong {
    margin-top: 10px;
    font-size: clamp(42px, 14vw, 58px);
  }

  .personal-income__roles {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .personal-income__roles article {
    min-height: 150px;
    padding: 20px;
  }
}

.personal-path {
  margin-top: 92px;
}

.personal-path > h2 {
  max-width: 940px;
  margin: 0 auto 70px;
  text-align: center;
  font-size: clamp(42px, 4.8vw, 60px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

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

.personal-path__card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #f4f4f4;
}

.personal-path__card img {
  max-width: none;
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
  user-select: none;
}

.personal-path__copy {
  position: relative;
  z-index: 2;
}

.personal-path__copy h3 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.personal-path__copy p {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.4;
}

.personal-path__card--practice,
.personal-path__card--updates {
  min-height: 365px;
  grid-column: span 3;
}

.personal-path__card--practice {
  padding: 42px;
  background: #beb1aa;
  color: #fff;
}

.personal-path__card--practice .personal-path__copy {
  max-width: 52%;
}

.personal-path__card--practice img {
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
}

.personal-path__card--updates {
  padding: 42px;
  background: linear-gradient(135deg, #222427 0%, #313336 100%);
  color: #fff;
}

.personal-path__card--updates .personal-path__copy {
  max-width: 94%;
}

.personal-path__card--updates .personal-path__copy p {
  max-width: 86%;
}

.personal-path__card--updates img {
  width: 48%;
  right: -3%;
  bottom: -13%;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.22));
}

.personal-path__card--career,
.personal-path__card--community,
.personal-path__card--support {
  min-height: 530px;
  grid-column: span 2;
  padding: 38px 34px;
}

.personal-path__card--career,
.personal-path__card--support {
  background: #f4f4f4;
  color: #090909;
}

.personal-path__card--career img {
  width: 102%;
  left: -1%;
  bottom: 0;
}

.personal-path__card--community {
  background: #3186dd;
  color: #fff;
}

.personal-path__card--community::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 55%;
  background: linear-gradient(#368de4 0%, rgba(54, 141, 228, 0.96) 44%, rgba(54, 141, 228, 0) 100%);
  pointer-events: none;
}

.personal-path__card--community img {
  width: 100%;
  height: 78%;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  object-position: center top;
}

.personal-path__card--support img {
  width: 106%;
  left: 2%;
  bottom: -18%;
}

.personal-final-cta {
  min-height: 400px;
  margin: 64px 0 32px;
  padding: 44px 50px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  align-items: center;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 82% 48%, rgba(51, 97, 255, 0.42), rgba(51, 97, 255, 0) 28%),
    linear-gradient(135deg, #111b36 0%, #07132c 58%, #0c1733 100%);
  color: #fff;
  box-shadow: 0 22px 52px rgba(5, 16, 44, 0.2);
}

.personal-final-cta::before,
.personal-final-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.personal-final-cta::before {
  width: 230px;
  height: 230px;
  right: -76px;
  top: -96px;
  border: 42px solid rgba(191, 255, 53, 0.88);
}

.personal-final-cta::after {
  width: 160px;
  height: 160px;
  right: 38%;
  bottom: -116px;
  background: #174dff;
  filter: blur(4px);
}

.personal-final-cta__copy {
  max-width: 610px;
  position: relative;
  z-index: 2;
}

.personal-final-cta__copy > span {
  display: block;
  margin-bottom: 18px;
  color: #bfff35;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.personal-final-cta__copy h2 {
  margin: 0;
  font-size: clamp(42px, 4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.052em;
  line-height: 0.98;
}

.personal-final-cta__copy p {
  max-width: 570px;
  margin: 20px 0 0;
  color: #cdd5e8;
  font-size: 17px;
  line-height: 1.46;
}

.personal-final-cta__copy button {
  min-width: 330px;
  min-height: 60px;
  margin-top: 24px;
  padding: 15px 26px;
  border: 0;
  border-radius: 14px;
  background: #bfff35;
  color: #09132d;
  font: 600 17px/1.1 "Graphik", Arial, sans-serif;
  box-shadow: 0 14px 30px rgba(191, 255, 53, 0.18);
  cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}

.personal-final-cta__copy button:hover {
  background: #d0ff6b;
  box-shadow: 0 18px 34px rgba(191, 255, 53, 0.24);
  transform: translateY(-2px);
}

.personal-final-cta__copy button:active {
  transform: translateY(0);
}

.personal-final-cta__copy button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.personal-final-cta__visual {
  min-height: 300px;
  position: relative;
  z-index: 1;
}

.personal-final-cta__visual i {
  width: 270px;
  height: 270px;
  position: absolute;
  right: 8px;
  bottom: 10px;
  border-radius: 44% 56% 62% 38% / 45% 40% 60% 55%;
  background: #174dff;
  transform: rotate(-10deg);
  box-shadow: 0 0 90px rgba(71, 106, 255, 0.48);
}

.personal-final-cta__visual img {
  width: 350px;
  max-width: none;
  position: absolute;
  right: -44px;
  bottom: -26px;
  display: block;
  transform: rotate(-4deg);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

@media (max-width: 960px) {
  .personal-path > h2 {
    margin-bottom: 52px;
  }

  .personal-path__copy h3 {
    font-size: 26px;
  }

  .personal-path__copy p {
    font-size: 15px;
  }

  .personal-path__card--practice,
  .personal-path__card--updates {
    min-height: 350px;
    padding: 34px;
  }

  .personal-path__card--career,
  .personal-path__card--community,
  .personal-path__card--support {
    min-height: 500px;
    padding: 32px 28px;
  }

  .personal-final-cta {
    padding: 42px 38px;
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .personal-final-cta__copy p {
    font-size: 18px;
  }

  .personal-final-cta__visual img {
    width: 320px;
    right: -56px;
  }
}

@media (max-width: 760px) {
  .personal-path {
    margin-top: 64px;
  }

  .personal-path > h2 {
    margin-bottom: 38px;
    font-size: clamp(34px, 10vw, 46px);
  }

  .personal-path > h2 br {
    display: none;
  }

  .personal-path__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .personal-path__card--practice,
  .personal-path__card--updates,
  .personal-path__card--career,
  .personal-path__card--community,
  .personal-path__card--support {
    min-height: 460px;
    grid-column: auto;
    padding: 30px 26px;
  }

  .personal-path__copy h3 {
    font-size: 30px;
  }

  .personal-path__copy p {
    font-size: 16px;
  }

  .personal-path__card--practice .personal-path__copy {
    max-width: 100%;
  }

  .personal-path__card--practice img {
    width: min(138%, 560px);
    max-width: none;
    height: auto;
    inset: auto 0 0 auto;
    right: 0;
    object-fit: contain;
    object-position: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  }

  .personal-path__card--practice {
    min-height: 500px;
  }

  .personal-path__card--updates img {
    width: 57%;
  }

  .personal-path__card--career img {
    width: 98%;
    left: 1%;
  }

  .personal-path__card--community {
    min-height: 540px;
  }

  .personal-path__card--support img {
    width: 104%;
    left: 5%;
    bottom: -14%;
  }

  .personal-final-cta {
    min-height: 0;
    margin-top: 64px;
    padding: 34px 28px 260px;
    display: block;
    border-radius: 26px;
  }

  .personal-final-cta::before {
    display: none;
  }

  .personal-final-cta::after {
    right: auto;
    left: -70px;
    bottom: 80px;
  }

  .personal-final-cta__copy h2 {
    font-size: clamp(40px, 12.5vw, 54px);
  }

  .personal-final-cta__copy p {
    margin-top: 22px;
    font-size: 16px;
  }

  .personal-final-cta__copy button {
    width: 100%;
    min-width: 0;
    min-height: 60px;
    margin-top: 28px;
    font-size: 16px;
  }

  .personal-final-cta__visual {
    min-height: 0;
  }

  .personal-final-cta__visual i {
    width: 220px;
    height: 220px;
    right: 7%;
    bottom: -235px;
  }

  .personal-final-cta__visual img {
    width: min(280px, 86vw);
    right: -28px;
    bottom: -270px;
  }
}

@media (max-width: 430px) {
  .personal-path__card--practice,
  .personal-path__card--updates,
  .personal-path__card--career,
  .personal-path__card--community,
  .personal-path__card--support {
    min-height: 430px;
    padding: 26px 22px;
    border-radius: 22px;
  }

  .personal-path__copy h3 {
    font-size: 27px;
  }

  .personal-path__copy p {
    margin-top: 16px;
    font-size: 15px;
  }

  .personal-path__card--practice .personal-path__copy {
    max-width: 100%;
  }

  .personal-path__card--practice img {
    width: 138%;
    right: 0;
  }

  .personal-path__card--practice {
    min-height: 430px;
  }

  .personal-path__card--updates img {
    width: 66%;
    bottom: -8%;
  }

  .personal-path__card--career img {
    width: 103%;
    left: -2%;
    bottom: 0;
  }

  .personal-path__card--career {
    min-height: 500px;
  }

  .personal-path__card--community {
    min-height: 500px;
  }

  .personal-path__card--support img {
    width: 112%;
    left: 2%;
    bottom: -10%;
  }

  .personal-path__card--support {
    min-height: 520px;
  }

  .personal-final-cta {
    min-height: 0;
    padding: 30px 22px 230px;
    border-radius: 22px;
  }

  .personal-final-cta__copy > span {
    margin-bottom: 16px;
    font-size: 10px;
  }

  .personal-final-cta__copy h2 {
    font-size: clamp(36px, 11.8vw, 48px);
  }

  .personal-final-cta__copy p {
    font-size: 15px;
  }

  .personal-final-cta__visual img {
    width: min(250px, 80vw);
    right: -24px;
    bottom: -242px;
  }
}

/* Focused result unlock: form first on mobile. */
.analysis-auto-note {
  margin: 0;
  color: var(--ink-soft);
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}

.gate-screen.gate-screen--focused {
  min-height: 100svh;
  padding: 32px 24px 48px;
}

.gate-focused-shell { width: min(100%, 480px); margin: 0 auto; }
.gate-screen--card .gate-focused-shell { width: min(100%, 1020px); }
.gate-focused-brand { display: block; width: 104px; height: auto; margin-bottom: 36px; }
.gate-focused-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.gate-screen--card .gate-focused-layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: center; }
.gate-screen--focused .gate-heading { margin: 0 0 24px; }
.gate-screen--focused .gate-heading .eyebrow { min-height: 30px; padding: 7px 12px; font-size: 13px; }
.gate-screen--focused .gate-heading h2 { margin: 0 0 20px; font-size: 42px; line-height: 1.02; letter-spacing: -0.045em; }
.gate-focused-description { max-width: 380px; margin: 0; color: #515765; font-size: 17px; line-height: 1.4; }
.gate-screen--focused .phone-gate-form { margin: 0; padding: 24px; border-radius: 22px; }
.gate-screen--focused .phone-gate-form__title { color: #fff; font-size: 20px; font-weight: 600; line-height: 1.3; }
.gate-screen--focused .phone-gate-form .phone-gate-form__phone { margin-top: 18px; }
.gate-screen--focused .phone-gate-form input[type="tel"] { min-height: 56px; }
.gate-screen--focused .phone-gate-form .button { min-height: 56px; margin: 18px 0 0; padding: 14px 18px; font-size: 17px; }
.gate-screen--focused .phone-gate-form [data-skb-consent="pd"] { margin: 14px 0 0; }
.gate-screen--focused .phone-gate-form [data-skb-consent="ads"] { margin: 14px 0 0; color: #d9ddff; }
.gate-screen--focused .phone-gate-form .skb-consent__label { font-size: 12px; line-height: 1.4; }

.gate-profile-teaser { margin: 0 0 16px; font-size: 24px; line-height: 1.2; letter-spacing: -.035em; }
.gate-profile-teaser__second { display: block; margin-top: 4px; }
.gate-profile-blur { display: inline-block; max-width: 100%; color: #3c4257; filter: blur(8px); user-select: none; pointer-events: none; }
.gate-profile-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.gate-sealed-card { padding: 24px; border: 1px solid #fff; border-radius: 28px; background: #fff; box-shadow: 0 20px 60px #7181b51a; }
.gate-sealed-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #626779; font-size: 10px; letter-spacing: .08em; }
.gate-sealed-card__top i { color: #453cff; font-size: 32px; font-style: normal; }
.gate-sealed-card__preview { position: relative; margin-top: 20px; overflow: hidden; border: 1px solid #e2e5f2; border-radius: 20px; background: #f7f8ff; }
.gate-sealed-card__content { height: 420px; padding: 24px; overflow: hidden; filter: blur(7px); user-select: none; pointer-events: none; }
.gate-sealed-card__tag { color: #453cff; font-size: 10px; font-weight: 600; }
.gate-sealed-card__content h3 { margin: 12px 0; font-size: 28px; line-height: 1.1; }
.gate-sealed-card__content p { margin: 0; font-size: 15px; line-height: 1.5; }
.gate-sealed-card__content h4 { margin: 24px 0 12px; font-size: 20px; }
.gate-sealed-card__skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.gate-sealed-card__skills span { padding: 8px 12px; background: #dcdeff; border-radius: 12px; font-size: 12px; }
.gate-sealed-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(180deg, #f2f4ff75, #f2f4ffd9 45%, #f2f4ffa6); text-align: center; }
.gate-sealed-card__lock { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 22px; border-radius: 22px; background: #dfff5c; box-shadow: 0 10px 25px #77814b20; transform: rotate(-6deg); }
.gate-sealed-card__lock svg { width: 42px; fill: none; stroke: #222; stroke-width: 2.5; stroke-linecap: round; }
.gate-sealed-card__overlay h3 { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -.035em; }
.gate-sealed-card__overlay p { margin: 14px 0 24px; color: #515765; font-size: 14px; line-height: 1.4; }
.gate-sealed-card__hint { padding: 10px 14px; border-radius: 12px; background: #fff; color: #453cff; font-size: 12px; font-weight: 600; }

@media (max-width: 700px) {
  .gate-screen.gate-screen--focused { padding: 20px 16px 28px; }
  .gate-focused-brand { width: 92px; margin-bottom: 20px; }
  .gate-screen--card .gate-focused-shell { max-width: 480px; }
  .gate-screen--card .gate-focused-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gate-screen--focused .gate-heading { margin-bottom: 20px; }
  .gate-screen--focused .gate-heading h2 { margin: 0 0 14px; font-size: 30px; }
  .gate-profile-teaser { margin-bottom: 12px; font-size: 20px; }
  .gate-profile-teaser__second { font-size: 18px; }
  .gate-focused-description { font-size: 15px; }
  .gate-screen--focused .phone-gate-form { padding: 20px; border-radius: 20px; }
  .gate-screen--focused .phone-gate-form__title { font-size: 18px; }
  .gate-screen--focused .phone-gate-form .phone-gate-form__phone { margin-top: 16px; }
  .gate-screen--focused .phone-gate-form .skb-consent__box { width: 20px; height: 20px; }
  .gate-sealed-card { padding: 24px; }
}

@media (max-width: 360px) {
  .gate-screen.gate-screen--focused { padding: 16px 12px 24px; }
  .gate-focused-brand { margin-bottom: 18px; }
  .gate-screen--focused .gate-heading h2 { font-size: 28px; }
  .gate-screen--focused .gate-heading { margin-bottom: 16px; }
  .gate-focused-description { font-size: 14px; }
  .gate-screen--focused .phone-gate-form { padding: 16px; }
}