:root {
  --black: #18181b;
  --blue: #3a3feb;
  --brand-purple: #4a1cfd;
  --blue-soft: #989bf5;
  --section-heading-size: clamp(44px, 3.15vw, 60px);
  --section-heading-gradient: linear-gradient(100deg, #9b7cff 0%, #4a1cfd 92%);
  --lavender: #f1f0fd;
  --pale: #f8f7fc;
  --gray: #b0b0b0;
  --line: #dedee7;
  --red: #ef4a45;
  --shadow: 0 12px 26px rgba(24, 24, 27, 0.1);
  --header: 82px;
  --content: 1340px;
  --stats-content: 1210px;
}

.marketing-support-cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 96px 28px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: #18181b;
}

.marketing-support-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/marketing-support-cta.jpg");
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
}

.marketing-support-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.marketing-support-cta__content {
  position: relative;
  z-index: 1;
  width: min(100%, 1040px);
}

.marketing-support-cta__content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

.marketing-support-cta__content p:first-child {
  margin-bottom: 24px;
  color: #fff;
  font-weight: 600;
}

.marketing-support-cta__content h2 {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.28;
  font-weight: 650;
}

.marketing-support-cta__content h2 span {
  display: block;
}

.marketing-support-cta__content a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 42px;
  margin-top: 52px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  box-shadow: 0 16px 34px rgba(58, 63, 235, 0.36);
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.marketing-support-cta__content a:hover {
  background: #2930e8;
  transform: translateY(-2px);
}

@media (max-width: 700px) {
  .marketing-support-cta {
    min-height: 360px;
    padding: 72px 22px;
  }

  .marketing-support-cta__content p {
    font-size: 15px;
  }

  .marketing-support-cta__content p:first-child {
    margin-bottom: 18px;
  }

  .marketing-support-cta__content h2 {
    margin-bottom: 18px;
    font-size: 26px;
  }

  .marketing-support-cta__content a {
    min-width: 140px;
    height: 42px;
    margin-top: 36px;
    font-size: 14px;
  }
}

@font-face {
  font-family: "Pretendard";
  font-weight: 100 800;
  font-display: swap;
  src:
    url("assets/fonts/PretendardVariable.ttf") format("truetype-variations"),
    url("assets/fonts/PretendardVariable.ttf") format("truetype"),
    local("Pretendard Variable"),
    local("Pretendard");
}

@font-face {
  font-family: "tapsight Source Han Sans CN";
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/SourceHanSansCN-Light%231.otf") format("opentype");
}

@font-face {
  font-family: "tapsight Source Han Sans CN";
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/SourceHanSansCN-Regular%231.otf") format("opentype");
}

@font-face {
  font-family: "tapsight Source Han Sans CN";
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/SourceHanSansCN-Medium%231.otf") format("opentype");
}

@font-face {
  font-family: "tapsight Source Han Sans CN";
  font-weight: 600 800;
  font-display: swap;
  src: url("assets/fonts/SourceHanSansCN-Bold%231.otf") format("opentype");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header);
}

body {
  margin: 0;
  color: var(--black);
  font-family: "Pretendard", Inter, "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #fff;
  letter-spacing: 0;
  word-break: keep-all;
}

body.is-zh,
body.is-en {
  overflow-wrap: anywhere;
}

.mobile-break {
  display: none;
}

@media (max-width: 760px) {
  .mobile-break {
    display: inline;
  }
}

body.is-zh {
  font-family: "tapsight Source Han Sans CN", "Noto Sans SC", "Microsoft YaHei", "Pretendard", Inter, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
}

body.is-zh .language-selector,
body.is-zh .language-toggle,
body.is-zh .language-option,
body.is-zh #platform .plan-card,
body.is-zh #platform .addon-card {
  font-family: "tapsight Source Han Sans CN", "Noto Sans SC", "Microsoft YaHei", "Pretendard", sans-serif;
}

body.is-zh .hero-copy h1,
body.is-en .hero-copy h1,
body.is-zh .reason-section-head h2,
body.is-en .reason-section-head h2,
body.is-zh .pricing-heading h2,
body.is-en .pricing-heading h2,
body.is-zh .faq-accordion-head h2,
body.is-en .faq-accordion-head h2,
body.is-zh .free-diagnosis-heading h2,
body.is-en .free-diagnosis-heading h2 {
  line-height: 1.12;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(222, 222, 231, 0.48);
  backdrop-filter: blur(16px);
}

.nav-wrap {
  display: flex;
  align-items: center;
  height: var(--header);
  width: min(var(--content), calc(100% - 56px));
  margin: 0 auto;
  gap: clamp(34px, 4.2vw, 72px);
}

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

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(34px, 4.8vw, 84px);
  height: 100%;
  font-size: 15px;
  font-weight: 500;
}

.main-nav > a {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  transition:
    color 180ms ease,
    font-weight 180ms ease;
}

.main-nav > a:hover,
.main-nav > a.is-active {
  color: var(--brand-purple);
  font-weight: 700;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  height: 42px;
  padding: 0 28px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #6a35ff 0%, #8b72f6 100%);
  box-shadow: 0 8px 18px rgba(74, 28, 253, 0.24);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(74, 28, 253, 0.3);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}

.language-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.language-selector,
.language-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #17171f;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease;
}

.language-icon,
.language-selector img,
.language-toggle img {
  display: block;
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain;
  opacity: 0.72;
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}

.language-arrow {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  position: relative;
}

.language-arrow::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.language-selector:hover {
  color: #5b4bff;
}

.language-selector:hover .language-icon {
  opacity: 1;
  filter: invert(33%) sepia(88%) saturate(2827%) hue-rotate(233deg) brightness(101%) contrast(102%);
}

.language-selector.is-open .language-arrow::before {
  transform: rotate(225deg);
}

.language-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 1000;
  display: grid;
  min-width: 140px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(120, 120, 160, 0.14);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(35, 25, 90, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

.language-menu-wrap.is-open .language-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.language-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #22222a;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease;
}

.language-option:hover,
.language-option.active {
  background: rgba(100, 80, 255, 0.08);
  color: #5b4bff;
}

.mobile-menu {
  display: none;
}

.section {
  min-height: auto;
  padding: calc(var(--header) + 30px) 0 36px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.container {
  width: min(var(--content), calc(100% - 56px));
  margin: 0 auto;
}

.hero {
  display: block;
  padding-top: var(--header);
  padding-bottom: 0;
  min-height: auto;
  background: linear-gradient(180deg, #fff 0 50%, #fbfaff 72%, #f3f1ff 88%, #edebff 100%);
}

.hero-grid {
  min-height: clamp(860px, calc(100vh - var(--header)), 1040px);
  padding: clamp(104px, 7.4vh, 126px) 0 clamp(82px, 8.5vh, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
}

.hero-copy {
  width: 100%;
  max-width: 1040px;
  text-align: center;
}

.hero h1 {
  margin: 0;
  max-width: none;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0;
}

.section h2 {
  margin: 0;
  font-size: clamp(44px, 3.15vw, 60px);
  line-height: 1.22;
  font-weight: 800;
}

.hero-title-line {
  display: block;
}

.hero-title-main {
  font-size: clamp(72px, 5.15vw, 88px);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hero-title-sub {
  font-size: clamp(64px, 4.65vw, 78px);
  letter-spacing: -0.038em;
  white-space: nowrap;
}

.hero-word-strong {
  font-weight: 800;
  letter-spacing: -0.038em;
}

.hero-word-light {
  font-weight: 700;
  letter-spacing: -0.034em;
}

.hero-subtitle {
  margin: 30px 0 0;
  color: var(--brand-purple);
  font-size: clamp(23px, 1.78vw, 30px);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.hero-subtitle span {
  font-weight: 650;
}

.hero-subtitle strong {
  font-weight: 740;
  letter-spacing: -0.028em;
}

.hero-device {
  width: min(840px, 73.5vw);
  margin: 34px auto 0;
}

.hero-device img,
.hero-device video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero-description {
  margin: 18px auto 0;
  color: var(--black);
  font-size: clamp(21px, 1.9vw, 23.5px);
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hero-description strong {
  font-weight: 600;
}

.section-head p {
  margin: 21px 0 0;
  font-size: 16px;
  line-height: 1.52;
  font-weight: 400;
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 42px;
  margin-top: 21px;
  padding: 0 24px;
  color: #fff;
  background: var(--blue);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 720;
}

.hero-primary {
  min-width: 318px;
  height: 66px;
  margin: 30px auto 0;
  padding: 0 30px;
  gap: 15px;
  border-radius: 18px;
  background: linear-gradient(135deg, #4a1cfd 0%, #9c74ff 100%);
  box-shadow: 0 12px 22px rgba(74, 28, 253, 0.24);
  font-size: 23px;
  font-weight: 700;
}

.btn-check {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

.btn-arrow {
  margin-left: 4px;
  font-size: 38px;
  line-height: 1;
  font-weight: 300;
}

.hero-secondary-link {
  display: block;
  width: max-content;
  margin: 14px auto 0;
  color: #8b72f6;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.fixed-action-stack {
  position: fixed;
  right: 42px;
  bottom: 36px;
  z-index: 28;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.fixed-action-btn,
.scroll-top-btn {
  position: relative;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.fixed-action-btn {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.94);
  transition:
    opacity 360ms ease,
    visibility 0s linear 360ms,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fixed-action-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.fixed-action-btn::before,
.scroll-top-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fixed-action-image) center / contain no-repeat;
  transition: transform 0.2s ease;
  transform-origin: center;
}

.fixed-action-chat {
  --fixed-action-image: url("assets/fixed-chat-icon.png");
}

.fixed-action-instagram {
  --fixed-action-image: url("assets/fixed-instagram-icon.png");
}

.fixed-action-consult {
  --fixed-action-image: url("assets/fixed-consult-icon.png");
}

.scroll-top-btn {
  margin-top: 6px;
  --fixed-action-image: url("assets/scroll-top-icon-complete.png");
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.94);
  transition:
    opacity 360ms ease,
    visibility 0s linear 360ms,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.fixed-action-btn:hover,
.scroll-top-btn:hover {
  box-shadow: none;
}

.fixed-action-btn:hover::before,
.scroll-top-btn:hover::before {
  transform: scale(1.08);
}

.soft-gradient {
  background: linear-gradient(180deg, rgba(152, 155, 245, 0.28) 0%, rgba(241, 240, 253, 0.74) 28%, rgba(248, 247, 252, 0.54) 58%, #fff 100%);
}

#main-insight {
  min-height: auto;
  padding: calc(var(--header) + 36px) 0 46px;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(152, 155, 245, 0.28) 0%, rgba(241, 240, 253, 0.74) 28%, rgba(248, 247, 252, 0.54) 58%, #fff 100%);
}

#main-insight .container {
  width: min(var(--content), calc(100% - 56px));
}

.section-head {
  margin-bottom: 46px;
}

.section-head.wide {
  margin-bottom: 110px;
}

.section-head h2 span,
.section-head .eyebrow,
.form-title h2 {
  color: var(--blue);
}

.section-head h2 {
  font-size: clamp(42px, 2.95vw, 57px);
  line-height: 1.22;
  font-weight: 510;
}

.section-head h2 b {
  font-weight: 510;
}

.section-head h2 span {
  font-weight: 700;
}

#main-insight .section-head.wide {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 156px;
}

#main-insight .section-head h2 {
  font-size: clamp(42px, 2.95vw, 57px);
  line-height: 1.22;
  font-weight: 510;
  letter-spacing: 0;
}

#main-insight .section-head h2 span {
  color: var(--blue);
  font-weight: 700;
}

#main-insight .section-head p {
  margin-top: 28px;
  color: #38383f;
  font-size: 16px;
  line-height: 1.52;
  font-weight: 450;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
}

.eyebrow a {
  color: #7378ea;
}

.eyebrow span {
  color: #5f5f64;
}

.metric-row,
.small-card-row,
.barrier-grid,
.feature-strip,
.dashboard-grid,
.process-grid,
.compare-grid,
.case-row,
.platform-grid,
.marketing-grid,
.faq-grid {
  display: grid;
  gap: 28px;
}

.metric-row {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 68px;
}

#main-insight .metric-row {
  width: 100%;
  margin: 0 0 76px;
  gap: 60px;
}

#main-insight .metric-row article {
  min-width: 0;
}

.metric-row strong {
  color: var(--blue);
  font-size: 56px;
  line-height: 1;
  font-weight: 780;
}

#main-insight .metric-row strong {
  display: block;
  width: max-content;
  max-width: 100%;
  color: transparent;
  background: linear-gradient(180deg, #4032f4 0%, #6b65f8 55%, #9897fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(48px, 3.5vw, 66px);
  line-height: 0.98;
  font-weight: 700;
}

.metric-row small {
  color: var(--blue-soft);
  font-size: 26px;
}

#main-insight .metric-row small {
  color: transparent;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 24px;
  font-weight: 700;
}

.metric-row b,
.metric-row span {
  display: block;
  margin-top: 20px;
  font-size: 16px;
}

#main-insight .metric-row b {
  margin-top: 24px;
  color: var(--black);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 650;
}

.metric-row span {
  color: #666;
  margin-top: 10px;
}

#main-insight .metric-row span {
  margin-top: 8px;
  color: #6f6f76;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 390;
}

.small-card-row {
  grid-template-columns: repeat(3, 1fr);
}

#main-insight .small-card-row {
  width: 100%;
  margin: 0;
  gap: 60px;
}

.small-card-row article,
.barrier-grid article,
.feature-strip article,
.dashboard-grid article,
.process-grid article,
.compare-grid article,
.case-row article,
.platform-grid article,
.marketing-grid article,
.faq-grid article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.small-card-row article {
  padding: 32px;
}

#main-insight .small-card-row article {
  min-height: 150px;
  padding: 34px 34px 30px;
  border-radius: 20px;
  border-color: rgba(222, 222, 231, 0.9);
  box-shadow: 0 12px 28px rgba(24, 24, 27, 0.12);
}

.small-card-row b {
  font-size: 20px;
}

#main-insight .small-card-row b {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 720;
}

.small-card-row b::before {
  content: "▸";
  color: var(--blue);
  margin-right: 8px;
}

#main-insight .small-card-row b::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: url("assets/arrow-marker.png") center / contain no-repeat;
}

.small-card-row p,
.barrier-grid b,
.dashboard-grid p,
.process-grid p,
.compare-grid p,
.case-row p,
.platform-grid p,
.marketing-grid p,
.faq-grid p {
  font-size: 18px;
  line-height: 1.55;
}

#onboarding .process-grid p,
#comparison .compare-grid p,
#comparison .case-row p,
#platform .platform-grid p,
#viral .marketing-grid p,
#music-viral .marketing-grid p,
#brand-seeding .marketing-grid p,
#faq .faq-grid p,
#viral .notice.align-left,
#music-viral .notice.align-left,
#brand-seeding .notice.align-left {
  font-size: 15px;
  line-height: 1.48;
  font-weight: 400;
}

#main-insight .small-card-row p {
  margin: 16px 0 0;
  color: #25252b;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

#main-insight {
  padding: calc(var(--header) + clamp(82px, 8vw, 126px)) 0 clamp(110px, 10vw, 170px);
  background: linear-gradient(180deg, #eeeaff 0%, #f7f5ff 28%, #ffffff 100%);
  overflow: hidden;
}

#main-insight .problem-dialogue-container {
  width: min(1060px, calc(100% - 56px));
}

.reason-section-head {
  margin: 0 auto clamp(72px, 7vw, 112px);
  text-align: center;
}

.reason-section-head h2 {
  margin: 0;
  color: var(--black);
  font-size: clamp(44px, 4.2vw, 68px);
  line-height: 1.15;
  letter-spacing: -0.04em;
  font-weight: 900;
}

.reason-section-head h2 span {
  background: linear-gradient(100deg, #8b6cff 0%, #4a1cfd 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.reason-section-head p {
  margin: 18px 0 0;
  color: #2f2f36;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.reason-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(92px, 8vw, 124px);
  max-width: 980px;
  margin: 0 auto;
}

.reason-row {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(420px, 1fr);
  align-items: start;
  column-gap: clamp(54px, 7vw, 96px);
  row-gap: 28px;
}

.reason-row.reverse {
  grid-template-columns: minmax(280px, 390px) minmax(420px, 1fr);
}

.reason-character,
.reason-icon {
  margin: 0;
}

.problem-question {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding-top: 4px;
}

.reason-character {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  justify-self: end;
  border-radius: 50%;
  background: #d9d7f0;
  overflow: hidden;
  box-shadow: 0 16px 28px rgba(54, 48, 115, 0.12);
}

.reason-character img,
.reason-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reason-bubble {
  position: relative;
  z-index: 1;
  width: fit-content;
  min-height: 58px;
  padding: 16px 30px 17px;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #6b5cff 0%, #9b8cff 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 13px 25px rgba(82, 63, 214, 0.24);
}

.reason-bubble::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 30px;
  bottom: -14px;
  width: 34px;
  height: 24px;
  background: linear-gradient(135deg, #6b5cff 0%, #8374ff 100%);
  clip-path: polygon(0 0, 100% 0, 12% 100%);
}

.reason-bubble h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(42, 24, 145, 0.18);
}

.reason-bubble p {
  display: none;
}

.reason-info {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  width: min(100%, 530px);
  min-height: 104px;
  margin-top: 76px;
  padding: 24px 34px 25px 26px;
  background: #fff;
  border: 1px solid rgba(88, 80, 132, 0.1);
  border-radius: 20px;
  box-shadow: 0 18px 34px rgba(44, 43, 78, 0.12);
}

.reason-info::after {
  content: "";
  position: absolute;
  right: 32px;
  bottom: -20px;
  width: 42px;
  height: 28px;
  background: #fff;
  border-right: 1px solid rgba(88, 80, 132, 0.1);
  border-bottom: 1px solid rgba(88, 80, 132, 0.1);
  clip-path: polygon(0 0, 100% 0, 68% 100%);
}

.problem-send-icon {
  position: absolute;
  right: -34px;
  bottom: -58px;
  width: 54px;
  height: 54px;
  padding: 12px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 22px rgba(41, 39, 70, 0.14);
  z-index: 2;
}

.reason-icon {
  width: 62px;
  height: 62px;
  justify-self: center;
}

.problem-card-copy strong {
  display: block;
  margin: 0 0 7px;
  color: #15151c;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 800;
}

.reason-info p {
  margin: 0;
  color: #25252d;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.015em;
  font-weight: 550;
}

.problem-closing {
  margin: clamp(110px, 11vw, 160px) auto 0;
  text-align: center;
}

.problem-closing img {
  display: block;
  width: clamp(315px, 33vw, 480px);
  height: auto;
  margin: 0 auto 39px;
}

.problem-closing p {
  margin: 0;
  color: #15151c;
  font-size: clamp(42px, 4.5vw, 63px);
  line-height: 1.15;
  letter-spacing: -0.045em;
  font-weight: 900;
}

.problem-closing p span {
  background: linear-gradient(100deg, #8d6cff 0%, #3f32ff 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bottom-closing-section {
  min-height: auto;
  padding: clamp(260px, 18vw, 340px) 0;
  margin-bottom: clamp(120px, 9vw, 170px);
  background: linear-gradient(180deg, #f7f6ff 0%, #f7f6ff 40%, #ffffff 100%);
}

.bottom-closing-section .container {
  width: min(var(--content), calc(100% - 56px));
}

.bottom-closing-section .problem-closing {
  margin: 0 auto;
}

.barrier-grid {
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  margin-top: 74px;
  gap: 42px;
}

.barrier-grid article {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 68px auto;
  align-items: start;
  place-items: center;
  padding: 0;
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.barrier-grid em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 162px;
  height: 44px;
  gap: 12px;
  padding: 0 21px;
  color: var(--red);
  background: #fff4f7;
  border-radius: 9px;
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
}

.barrier-grid em img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.barrier-grid i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 60px;
  margin: 17px 0 16px;
  font-style: normal;
}

.barrier-grid i img {
  width: 45px;
  height: 43px;
  object-fit: contain;
}

.solution-card {
  width: 100%;
  height: 190px;
  min-height: 190px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 28px 20px;
  background: #fff;
  border: 1px solid rgba(222, 222, 231, 0.72);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(24, 24, 27, 0.075);
}

.solution-card img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.barrier-grid b {
  color: var(--black);
  font-size: 16px;
  line-height: 1.42;
  font-weight: 680;
  text-align: center;
  white-space: nowrap;
}

.barrier-grid article:nth-child(4) b {
  white-space: normal;
  font-size: 15px;
  line-height: 1.34;
}

#service-difference {
  position: relative;
  overflow: hidden;
  min-height: auto;
  padding: calc(var(--header) + clamp(126px, 9.4vw, 176px)) 0 clamp(122px, 9.6vw, 172px);
  background: linear-gradient(180deg, #fbfaff 0%, #fff 30%, #fff 58%, #fbfaff 78%, #f5f2ff 100%);
}

#service-difference::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 80%;
  width: min(1480px, 97vw);
  height: min(760px, 58vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(120, 90, 255, 0.15) 0%, rgba(170, 150, 255, 0.12) 46%, rgba(255, 255, 255, 0) 86%);
  filter: blur(26px);
  pointer-events: none;
}

#service-difference .container {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 56px));
}

.service-message {
  display: grid;
  place-items: center;
  text-align: center;
}

.service-message-copy {
  width: min(100%, 1100px);
  margin: 0 auto;
}

.service-message-title {
  display: grid;
  gap: clamp(12px, 1.15vw, 18px);
  justify-items: center;
  margin: 0;
  color: var(--black);
  font-size: clamp(56px, 4.65vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.service-message-title span {
  display: block;
}

.service-message-logo {
  width: clamp(300px, 25vw, 430px);
}

.service-message-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.service-message-copyline {
  white-space: nowrap;
  font-size: clamp(54px, 4.55vw, 76px);
  letter-spacing: -0.018em;
  font-weight: 800;
}

.service-message-copyline em {
  color: transparent;
  background: linear-gradient(100deg, #8b6cff 0%, #4a1cfd 88%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
  font-weight: 800;
}

.service-pill-wrap {
  display: grid;
  justify-items: center;
  gap: 24px;
  width: min(1120px, 100%);
  margin: clamp(150px, 11.8vw, 206px) auto 0;
}

.service-pill-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 38px;
  width: 100%;
}

.service-pill-row:last-child {
  gap: 26px;
}

.service-pill-row.reveal-item {
  opacity: 1;
  transform: none;
  transition: none;
}

.service-pill-item {
  --service-spread-x: 0px;
  --service-spread-y: 0px;
  --service-float-delay: 0ms;
  --service-float-duration: 3s;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  opacity: 0;
  transform: translate3d(var(--service-spread-x), var(--service-spread-y), 0) scale(0.96);
  will-change: transform, opacity;
}

.service-pill-item b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 228px;
  min-height: 58px;
  padding: 0 22px;
  border-radius: 999px;
  color: #4a1cfd;
  background: #fff;
  box-shadow: 0 12px 28px rgba(74, 28, 253, 0.15);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-weight: 800;
  white-space: nowrap;
}

.service-pill-icon {
  display: block;
  width: clamp(50px, 4vw, 66px);
  height: auto;
  object-fit: contain;
}

.service-pill-row:first-child .service-pill-item:first-child {
  --service-spread-x: 180px;
  --service-spread-y: 92px;
  --service-float-duration: 2.7s;
}

.service-pill-row:first-child .service-pill-item:nth-child(2) {
  --service-spread-x: -180px;
  --service-spread-y: 92px;
  --service-float-delay: 0.42s;
  --service-float-duration: 3.25s;
}

.service-pill-row:last-child .service-pill-item:first-child {
  --service-spread-x: 300px;
  --service-spread-y: -82px;
  --service-float-delay: 0.18s;
  --service-float-duration: 2.95s;
}

.service-pill-row:last-child .service-pill-item:nth-child(2) {
  --service-spread-x: 0px;
  --service-spread-y: -92px;
  --service-float-delay: 0.72s;
  --service-float-duration: 3.55s;
}

.service-pill-row:last-child .service-pill-item:nth-child(3) {
  --service-spread-x: -300px;
  --service-spread-y: -82px;
  --service-float-delay: 0.84s;
  --service-float-duration: 3.1s;
}

.service-pill-row.is-visible .service-pill-item {
  animation:
    servicePillSpread 760ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--service-reveal-step, 0) * 110ms) forwards,
    servicePillFloat var(--service-float-duration) ease-in-out calc(900ms + var(--service-float-delay)) infinite alternate;
}

.service-pill-row:first-child .service-pill-item:first-child {
  --service-reveal-step: 0;
}

.service-pill-row:first-child .service-pill-item:nth-child(2) {
  --service-reveal-step: 1;
}

.service-pill-row:last-child .service-pill-item:first-child {
  --service-reveal-step: 2;
}

.service-pill-row:last-child .service-pill-item:nth-child(2) {
  --service-reveal-step: 3;
}

.service-pill-row:last-child .service-pill-item:nth-child(3) {
  --service-reveal-step: 4;
}

@keyframes servicePillSpread {
  from {
    opacity: 0;
    transform: translate3d(var(--service-spread-x), var(--service-spread-y), 0) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes servicePillFloat {
  from {
    transform: translate3d(-2px, -6px, 0) rotate(-2deg);
  }

  to {
    transform: translate3d(2px, 6px, 0) rotate(2deg);
  }
}

.feature-strip {
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 50px;
  margin-bottom: 0;
  padding-top: 38px;
  padding-bottom: 54px;
  padding-left: 0;
  padding-right: 0;
  gap: 42px;
  background: transparent;
}

.feature-strip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--lavender);
  z-index: -1;
}

.feature-strip article {
  display: flex;
  align-items: center;
  min-height: 102px;
  gap: 22px;
  padding: 20px 30px;
  text-align: left;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(24, 24, 27, 0.09);
}

.feature-strip span,
.dashboard-grid span,
.marketing-grid span,
.faq-grid span {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-soft));
  font-size: 34px;
  font-weight: 800;
}

.feature-strip span img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.feature-copy {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.feature-strip b {
  display: block;
  font-size: 16px;
  line-height: 1.28;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-grid b {
  font-size: 21px;
  font-weight: 800;
}

.feature-strip p {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.36;
  text-align: left;
  font-weight: 400;
}

.lavender {
  background: var(--lavender);
}

#dashboard.dashboard-process-section {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  padding: calc(var(--header) + clamp(58px, 5.4vw, 92px)) 0 clamp(58px, 5vw, 86px);
  background:
    radial-gradient(ellipse at 50% 51%, rgba(118, 82, 255, 0.16) 0%, rgba(196, 184, 255, 0.19) 34%, rgba(245, 241, 255, 0.52) 56%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(ellipse at 50% 88%, rgba(126, 93, 255, 0.12) 0%, rgba(231, 225, 255, 0.35) 48%, rgba(240, 235, 255, 0.9) 76%, rgba(239, 235, 255, 0.98) 100%),
    linear-gradient(180deg, #fff 0%, #fff 36%, #fbfaff 66%, #f2eeff 86%, #efebff 100%);
  scroll-margin-top: var(--header);
}

#dashboard.dashboard-process-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  z-index: 0;
  height: 88%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(112, 84, 255, 0.09) 0%, rgba(224, 218, 255, 0.2) 44%, rgba(255, 255, 255, 0) 78%);
  filter: blur(8px);
  pointer-events: none;
}

#dashboard.dashboard-process-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 4.8vw, 78px);
  z-index: 0;
  width: min(82vw, 1280px);
  aspect-ratio: 9636 / 905;
  background: url("assets/process-shadow.png") center / contain no-repeat;
  opacity: 0.38;
  transform: translateX(-50%);
  pointer-events: none;
}

.dashboard-process-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: calc(100svh - var(--header) - clamp(116px, 10vw, 178px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.dashboard-process-title {
  margin: 0 auto;
  color: var(--black);
  font-size: clamp(48px, 5.05vw, 76px);
  line-height: 1.09;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.dashboard-process-title span {
  display: block;
}

.dashboard-process-title em {
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(100deg, #9b7cff 0%, #4a1cfd 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dashboard-process-title b {
  color: var(--black);
  font-weight: 800;
}

.dashboard-process-stage {
  position: relative;
  width: min(1320px, calc(100% - 48px));
  margin: clamp(40px, 4.2vw, 74px) auto 0;
  padding: 0 0 clamp(56px, 5.4vw, 92px);
  overflow-x: visible;
  overflow-y: visible;
  cursor: default;
}

.dashboard-process-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1240px;
  min-height: clamp(282px, 23.5vw, 374px);
  margin: 0 auto;
  padding: 0 clamp(8px, 0.8vw, 14px);
  filter: drop-shadow(0 25px 30px rgba(74, 55, 180, 0.12));
}

.dashboard-process-card {
  --process-card-rotate: 0deg;
  --process-card-y: 0px;
  --process-reveal-delay: 0ms;
  --process-float-delay: 0ms;
  position: relative;
  flex: 0 1 clamp(150px, 11.2vw, 190px);
  width: clamp(150px, 11.2vw, 190px);
  height: clamp(236px, 17.4vw, 304px);
  margin-left: clamp(-10px, -0.65vw, -4px);
  padding: clamp(20px, 1.65vw, 28px) clamp(17px, 1.35vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(202, 195, 255, 0.78) 0%, rgba(237, 233, 255, 0.68) 100%);
  box-shadow:
    0 18px 34px rgba(76, 58, 190, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  text-align: left;
  transform: translate3d(0, calc(var(--process-card-y) + 34px), 0) rotate(var(--process-card-rotate));
  scale: 1;
  flex-shrink: 0;
  z-index: 1;
  will-change: transform, opacity;
  transition:
    scale 260ms ease,
    box-shadow 260ms ease,
    filter 260ms ease;
}

.dashboard-process-card:first-child {
  margin-left: 0;
}

.dashboard-process-section.is-process-visible .dashboard-process-card {
  animation:
    dashboardProcessCardReveal 740ms cubic-bezier(0.22, 1, 0.36, 1) var(--process-reveal-delay) forwards,
    dashboardProcessCardFloat var(--process-float-duration, 4.2s) ease-in-out calc(var(--process-reveal-delay) + 880ms + var(--process-float-delay)) infinite alternate;
}

.dashboard-process-card:nth-child(1) {
  --process-card-rotate: -6deg;
  --process-card-y: 18px;
  --process-reveal-delay: 0ms;
  --process-float-delay: 0ms;
  z-index: 1;
}

.dashboard-process-card:nth-child(2) {
  --process-card-rotate: 7deg;
  --process-card-y: 8px;
  --process-reveal-delay: 95ms;
  --process-float-delay: 260ms;
  --process-float-duration: 4.2s;
  z-index: 2;
}

.dashboard-process-card:nth-child(3) {
  --process-card-rotate: -4deg;
  --process-card-y: 15px;
  --process-reveal-delay: 190ms;
  --process-float-delay: 520ms;
  --process-float-duration: 3.8s;
  z-index: 3;
}

.dashboard-process-card:nth-child(4) {
  --process-card-rotate: 5deg;
  --process-card-y: 22px;
  --process-reveal-delay: 285ms;
  --process-float-delay: 160ms;
  --process-float-duration: 4.4s;
  z-index: 4;
}

.dashboard-process-card:nth-child(5) {
  --process-card-rotate: -5deg;
  --process-card-y: -12px;
  --process-reveal-delay: 380ms;
  --process-float-delay: 430ms;
  --process-float-duration: 3.7s;
  z-index: 5;
}

.dashboard-process-card:nth-child(6) {
  --process-card-rotate: 0deg;
  --process-card-y: 28px;
  --process-reveal-delay: 475ms;
  --process-float-delay: 620ms;
  --process-float-duration: 4.5s;
  z-index: 4;
}

.dashboard-process-card:nth-child(7) {
  --process-card-rotate: 7deg;
  --process-card-y: 10px;
  --process-reveal-delay: 570ms;
  --process-float-delay: 300ms;
  --process-float-duration: 4s;
  z-index: 3;
}

.dashboard-process-card img {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 1.25vw, 20px);
  width: clamp(98px, 7.4vw, 142px);
  height: clamp(98px, 7.4vw, 142px);
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.dashboard-process-card span {
  position: relative;
  z-index: 2;
  display: block;
  color: #402bff;
  font-size: clamp(38px, 3.65vw, 60px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-weight: 760;
}

@media (hover: hover) and (pointer: fine) {
  .dashboard-process-section.is-process-visible .dashboard-process-card:hover {
    z-index: 4;
    scale: 1.045;
    box-shadow:
      0 28px 46px rgba(76, 58, 190, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
}

.dashboard-process-card strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: clamp(12px, 1.1vw, 18px);
  color: #111116;
  font-size: clamp(17px, 1.3vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-weight: 700;
}

@keyframes dashboardProcessCardReveal {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--process-card-y) + 34px), 0) rotate(var(--process-card-rotate));
  }

  to {
    opacity: 1;
    transform: translate3d(0, var(--process-card-y), 0) rotate(var(--process-card-rotate));
  }
}

@keyframes dashboardProcessCardFloat {
  from {
    opacity: 1;
    transform: translate3d(0, var(--process-card-y), 0) rotate(var(--process-card-rotate));
  }

  to {
    opacity: 1;
    transform: translate3d(0, calc(var(--process-card-y) - 6px), 0) rotate(var(--process-card-rotate));
  }
}

#onboarding {
  position: relative;
  align-items: flex-start;
  min-height: auto;
  padding: calc(var(--header) + clamp(80px, 7vw, 118px)) 0 clamp(76px, 6.5vw, 112px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(126, 93, 255, 0.16) 0%, rgba(222, 216, 255, 0.22) 30%, rgba(246, 243, 255, 0.32) 48%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #efebff 0%, #f5f2ff 18%, #fff 62%, #fff 100%);
}

#onboarding::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -160px;
  z-index: 0;
  width: min(1180px, 94vw);
  height: 360px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(126, 93, 255, 0.13) 0%, rgba(224, 218, 255, 0.2) 44%, rgba(255, 255, 255, 0) 78%);
  filter: blur(36px);
  transform: translateX(-50%);
  pointer-events: none;
}

#onboarding::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(82vw, 980px);
  height: 260px;
  border-radius: 50%;
  background: rgba(126, 105, 255, 0.08);
  filter: blur(52px);
  transform: translateX(-50%);
  pointer-events: none;
}

.insight-report-container {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  text-align: center;
}

.insight-report-head h2 {
  margin: 0;
  color: var(--black);
  font-size: clamp(42px, 4vw, 66px);
  line-height: 1.14;
  letter-spacing: -0.042em;
  font-weight: 800;
}

.insight-report-head h2 span {
  display: block;
}

.insight-report-head h2 em {
  color: #4a1cfd;
  font-style: normal;
  font-weight: 800;
}

.insight-report-head p {
  margin: clamp(28px, 3vw, 42px) auto 0;
  color: #25242b;
  font-size: clamp(18px, 1.55vw, 25px);
  line-height: 1.62;
  letter-spacing: -0.024em;
  font-weight: 500;
}

.insight-report-head p span {
  display: block;
}

.insight-report-head p em {
  color: #4a1cfd;
  font-style: normal;
  font-weight: 700;
}

.insight-report-visual {
  position: relative;
  width: min(860px, 86vw);
  height: clamp(430px, 36vw, 560px);
  margin: clamp(70px, 6vw, 96px) auto 0;
}

.report-card-stack {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  height: clamp(330px, 29vw, 450px);
}

.report-card {
  position: absolute;
  top: clamp(40px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: clamp(238px, 22vw, 330px);
  height: clamp(290px, 28vw, 430px);
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  overflow: visible;
  transition:
    filter 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.report-card-media {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(100% - clamp(70px, 6vw, 92px));
  width: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 20, 28, 0.08);
  background: #f6f6fb;
  box-shadow: 0 10px 22px rgba(33, 32, 46, 0.14);
}

.report-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(20, 18, 34, 0.2);
  opacity: 1;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.report-card.is-active .report-card-media::after {
  opacity: 0;
}

.report-card-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top center;
  transition: filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.report-card:not(.is-active) .report-card-media img {
  filter: brightness(0.82) saturate(0.88);
}

.report-card-left {
  left: 8%;
  z-index: 1;
  transform: translateY(38px);
}

.report-card-center {
  left: 50%;
  z-index: 3;
  width: clamp(260px, 24vw, 360px);
  height: clamp(340px, 32vw, 500px);
  transform: translateX(-50%);
}

.report-card-right {
  right: 8%;
  z-index: 1;
  transform: translateY(38px);
}

.report-card-copy {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin: clamp(14px, 1.45vw, 20px) 0 0;
  padding: 0 14px;
  background: transparent;
  color: #6e6df2;
  letter-spacing: -0.02em;
}

.report-card-copy strong {
  display: block;
  color: #3b22f2;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.22;
  font-weight: 800;
}

.report-card-copy span {
  display: block;
  margin-top: 4px;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.2;
  font-weight: 500;
}

@media (min-width: 921px) {
  .report-card {
    width: 35%;
  }

  .report-card-left {
    left: 3%;
  }

  .report-card-center {
    width: 39%;
  }

  .report-card-right {
    right: 3%;
  }
}

.insight-pill {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 18px;
  border: 1px solid rgba(38, 38, 50, 0.08);
  border-radius: 999px;
  background: rgba(242, 242, 242, 0.92);
  box-shadow: 0 8px 16px rgba(20, 20, 30, 0.16);
  color: #17171d;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: -0.02em;
  font-weight: 600;
  animation: insightFloat 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.pill-ai {
  top: 6px;
  left: 13%;
  animation-delay: -0.4s;
}

.pill-comment {
  top: 0;
  right: 12%;
  animation-delay: -1.2s;
}

.pill-platform {
  top: 58px;
  left: 4%;
  animation-delay: -2s;
}

.pill-content {
  top: 72px;
  right: 4%;
  animation-delay: -2.7s;
}

.pill-competitor {
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: -3.4s;
}

@keyframes insightFloat {
  from {
    translate: -2px -6px;
    rotate: -0.8deg;
  }

  to {
    translate: 3px 8px;
    rotate: 0.9deg;
  }
}

.insight-report-visual.report-reveal-ready .report-card {
  opacity: 0;
  translate: var(--report-enter-x, 0) 14px;
  scale: 0.96;
  transition:
    opacity 1450ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 1450ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 1450ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--report-enter-delay, 0ms);
  will-change: opacity, translate, scale;
}

.insight-report-visual.report-reveal-ready .report-card-left {
  --report-enter-x: 78px;
  --report-enter-delay: 260ms;
}

.insight-report-visual.report-reveal-ready .report-card-center {
  --report-enter-delay: 0ms;
}

.insight-report-visual.report-reveal-ready .report-card-right {
  --report-enter-x: -78px;
  --report-enter-delay: 360ms;
}

.insight-report-visual.report-reveal-ready .insight-pill {
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1) 520ms;
}

.insight-report-visual.report-reveal-ready.is-report-visible .report-card {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.insight-report-visual.report-reveal-ready.is-report-visible .insight-pill {
  opacity: 1;
}

.insight-report-quote {
  position: relative;
  width: min(720px, 86vw);
  margin: clamp(118px, 9vw, 154px) auto 0;
  padding: 42px 88px 34px;
  color: var(--black);
  text-align: center;
}

.insight-report-quote p {
  margin: 0;
  font-size: clamp(20px, 1.58vw, 26px);
  line-height: 1.62;
  letter-spacing: -0.024em;
  font-weight: 600;
}

.quote-emphasis {
  font-weight: 700;
}

.quote-mark {
  position: absolute;
  color: #4a1cfd;
  font-size: clamp(92px, 8vw, 138px);
  line-height: 0.72;
  font-weight: 800;
  letter-spacing: -0.08em;
  font-family: Georgia, "Times New Roman", serif;
}

.quote-open {
  left: 4px;
  top: 2px;
}

.quote-close {
  right: 10px;
  bottom: -8px;
}

.notice {
  padding: 15px 28px;
  text-align: center;
  background: #e8e7fa;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 760;
}

.align-left {
  margin-top: 28px;
  text-align: left;
  line-height: 1.7;
  color: #222;
}

.align-left b {
  color: var(--blue);
}

#comparison {
  position: relative;
  min-height: auto;
  padding: calc(var(--header) + clamp(70px, 6vw, 96px)) 0 clamp(84px, 7vw, 112px);
  background: #fff;
}

.comparison-showcase {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: min(1080px, calc(100% - 56px));
  min-height: 0;
  text-align: center;
}

.comparison-copy {
  position: relative;
  z-index: 2;
}

.comparison-copy h2 {
  margin: 0;
  color: var(--black);
  font-size: clamp(42px, 3.2vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  font-weight: 800;
  word-break: keep-all;
}

.comparison-copy h2 span {
  display: block;
  white-space: nowrap;
}

.comparison-copy h2 em {
  color: #3328ff;
  font-style: normal;
  font-weight: 800;
}

.comparison-device {
  position: static;
  display: block;
  width: min(560px, 50vw);
  max-width: 100%;
  height: auto;
  margin: clamp(30px, 2.7vw, 40px) auto 12px;
  pointer-events: none;
  user-select: none;
}

.onboarding-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  container-type: inline-size;
  width: 100%;
  margin-top: 10px;
}

.onboarding-timeline::before {
  position: absolute;
  top: 76px;
  right: calc(100% / 6);
  left: calc(100% / 6);
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #3825ed, #7667f4);
  border-radius: 999px;
}

.onboarding-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

.onboarding-step__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(100deg, #4225ef, #7568f4);
  border-radius: 999px;
  box-shadow: 0 7px 14px rgba(64, 42, 224, 0.16);
  font-size: 16px;
  line-height: 1;
  font-weight: 750;
}

.onboarding-step i {
  position: relative;
  z-index: 2;
  display: block;
  width: 11px;
  height: 11px;
  margin: 12px auto 20px;
  background: #3221e9;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

@media (min-width: 561px) {
  .onboarding-timeline::before {
    display: none;
  }

  .onboarding-step:first-child i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: calc(200cqw / 3);
    height: 3px;
    content: "";
    background: linear-gradient(90deg, #3825ed, #7667f4);
    border-radius: 999px;
    transform: translateY(-50%);
    transform-origin: left center;
  }
}

.onboarding-step h3 {
  margin: 0;
  color: #18181d;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.onboarding-step p {
  margin: 9px 0 0;
  color: #565660;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 450;
}

.onboarding-timeline.timeline-reveal-ready::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1280ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
  will-change: transform;
}

.onboarding-timeline.timeline-reveal-ready .onboarding-step {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--timeline-step-delay, 0ms);
  will-change: opacity, transform;
}

.onboarding-timeline.timeline-reveal-ready .onboarding-step:nth-child(1) {
  --timeline-step-delay: 120ms;
}

.onboarding-timeline.timeline-reveal-ready .onboarding-step:nth-child(2) {
  --timeline-step-delay: 920ms;
}

.onboarding-timeline.timeline-reveal-ready .onboarding-step:nth-child(3) {
  --timeline-step-delay: 1580ms;
}

.onboarding-timeline.timeline-reveal-ready.is-timeline-visible::before {
  transform: scaleX(1);
}

@media (min-width: 561px) {
  .onboarding-timeline.timeline-reveal-ready .onboarding-step:first-child i::before {
    transform: translateY(-50%) scaleX(0);
    transition: transform 1280ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
    will-change: transform;
  }

  .onboarding-timeline.timeline-reveal-ready.is-timeline-visible .onboarding-step:first-child i::before {
    transform: translateY(-50%) scaleX(1);
  }
}

.onboarding-timeline.timeline-reveal-ready.is-timeline-visible .onboarding-step {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.compare-grid {
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin: 0 0 46px;
  gap: 28px;
}

.compare-grid article {
  min-height: 252px;
  display: grid;
  place-items: center;
  padding: 26px;
  text-align: center;
}

.compare-grid .active {
  background: var(--lavender);
  border-color: var(--blue-soft);
}

.compare-grid span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  font-size: 0;
}

.compare-grid .active span,
.compare-grid .active b {
  color: var(--blue);
}

.compare-grid span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#comparison .compare-grid article:nth-child(3) span img {
  width: 86%;
  height: 86%;
}

.compare-grid b {
  font-size: 24px;
}

.case-row {
  grid-template-columns: repeat(2, 1fr);
}

.case-row article {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  min-height: 124px;
  padding: 22px 28px;
  color: #fff;
  background: linear-gradient(100deg, var(--blue), var(--blue-soft));
}

.case-row article:nth-child(2) {
  background: linear-gradient(100deg, #cf92c0, var(--blue-soft));
}

.case-row span {
  width: 70px;
  height: 70px;
  grid-row: 1 / span 2;
  align-self: center;
  transform: translateY(5px);
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #fff;
  border-radius: 999px;
  font-size: 34px;
  font-weight: 800;
}

.case-row span img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.case-row article:nth-child(2) span img {
  width: 58px;
  height: 58px;
}

.case-row b {
  font-size: 27px;
}

.case-row p {
  grid-column: 2;
  margin: 0;
}

#comparison .case-row article:nth-child(2) p {
  white-space: nowrap;
  font-size: 15px;
}

.with-visual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.floating-visual,
.growth-visual,
.faq-visual {
  flex: 0 0 260px;
  height: 170px;
  display: grid;
  place-items: center;
  color: var(--blue-soft);
  background: radial-gradient(circle at center, #fff 0, #ebe9ff 62%, transparent 63%);
  font-size: 86px;
  font-weight: 800;
  text-shadow: 0 18px 24px rgba(58, 63, 235, 0.24);
}

.floating-visual span {
  margin-left: -24px;
  color: var(--blue);
  font-size: 58px;
}

.platform-section .floating-visual {
  background: none;
  text-shadow: none;
}

.platform-section .floating-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.32);
}

.platform-grid {
  grid-template-columns: repeat(3, 1fr);
}

#platform {
  padding-top: calc(var(--header) + 24px);
}

.platform-grid article {
  min-height: 252px;
  padding: 28px 32px;
  box-shadow: var(--shadow);
}

.platform-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.platform-title i {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 8px;
  color: #fff;
  overflow: hidden;
  font-style: normal;
  font-size: 0;
  font-weight: 800;
}

.platform-title i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.platform-title .douyin { background: #030303; }
.platform-title .red { background: #ef424b; }
.platform-title .weibo { background: #f9d86d; color: #b2151b; }
.platform-title .bili { background: #67b7e6; }
.platform-title .kuai { background: #e75b2d; }
.platform-title .wechat { background: transparent; }

.platform-title b {
  font-size: 30px;
}

.platform-title b span {
  font-size: 22px;
  font-weight: 650;
}

.platform-title span,
.platform-grid h3 {
  color: var(--blue-soft);
}

.platform-grid em {
  display: inline-block;
  margin: 18px 14px 0 0;
  padding: 8px 16px;
  color: var(--blue-soft);
  background: var(--pale);
  border-radius: 8px;
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
}

.platform-grid strong {
  font-size: 15px;
  font-weight: 650;
}

.platform-grid hr,
.marketing-grid hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 26px 0;
}

.platform-grid h3 {
  margin: 20px 0 10px;
  font-size: 19px;
}

.platform-grid p {
  margin: 0;
  color: #565656;
}

.platform-grid p small {
  font-size: 0.92em;
}

.marketing-grid {
  grid-template-columns: repeat(4, 1fr);
}

.marketing-grid.dense {
  grid-template-columns: repeat(4, 1fr);
}

.marketing-grid article {
  min-height: 228px;
  padding: 24px 30px;
  box-shadow: none;
}

.marketing-grid.dense article:nth-child(-n + 3) {
  grid-column: span 1;
}

.marketing-grid span {
  color: var(--blue);
  background: var(--lavender);
}

.marketing-grid h3 {
  margin: 12px 0 4px;
  font-size: 21px;
}

.marketing-grid b {
  display: block;
  color: var(--blue-soft);
  font-size: 18px;
}

.marketing-grid p {
  border-top: 1px solid var(--line);
  margin: 18px 0 0;
  padding-top: 18px;
}

#brand-seeding {
  overflow: hidden;
  padding: 108px 0 118px;
  background:
    linear-gradient(
      180deg,
      #d7d3ff 0%,
      #e4e1ff 24%,
      #f0efff 52%,
      #f9f8ff 78%,
      #fff 100%
    );
}

#brand-seeding .campaign-container {
  max-width: 1320px;
}

#brand-seeding .campaign-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
  min-height: 0;
  margin: 0 auto 68px;
  text-align: center;
}

#brand-seeding .campaign-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0 0 22px;
  padding: 9px 24px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #4630ff 0%, #8779ff 100%);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 720;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 24px rgba(82, 61, 255, 0.2);
}

#brand-seeding .campaign-head h2 {
  margin: 0;
  color: #17171b;
  font-size: clamp(34px, 2.7vw, 48px);
  line-height: 1.42;
  font-weight: 720;
  letter-spacing: -0.045em;
}

#brand-seeding .campaign-head h2 span {
  color: #3e34ff;
}

#brand-seeding .campaign-flow {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 46px 44px;
  max-width: 1240px;
  margin: 0 auto;
}

#brand-seeding .campaign-flow article {
  position: relative;
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 300px;
  padding: 30px 22px 26px;
  border: 1px solid rgba(105, 94, 170, 0.16);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
  box-shadow:
    0 16px 34px rgba(65, 57, 125, 0.1),
    0 3px 9px rgba(38, 32, 91, 0.07);
}

#brand-seeding .campaign-flow article:nth-child(5) {
  grid-column: 2 / span 3;
}

#brand-seeding .campaign-flow article:nth-child(6) {
  grid-column: 5 / span 3;
}

#brand-seeding .campaign-flow article:nth-child(7) {
  grid-column: 8 / span 3;
}

#brand-seeding .campaign-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 10px 22px rgba(70, 48, 255, 0.08),
    inset 0 0 0 1px rgba(92, 78, 214, 0.04);
}

#brand-seeding .campaign-icon {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

#brand-seeding .campaign-flow h3 {
  margin: 0 0 12px;
  color: #151519;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 720;
  letter-spacing: -0.03em;
}

#brand-seeding .campaign-flow b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0;
  padding: 6px 15px;
  border-radius: 999px;
  color: #6357e9;
  background: #eceaff;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 680;
}

#brand-seeding .campaign-flow p {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  color: #55545d;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

#brand-seeding .campaign-flow article::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 15px solid #5d4fff;
  transform: translate(50%, -50%);
  filter: drop-shadow(0 4px 4px rgba(83, 66, 255, 0.18));
  pointer-events: none;
}

#brand-seeding .campaign-flow article:nth-child(4)::after {
  content: none;
}

#brand-seeding .campaign-flow article:nth-child(5)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -18px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid #5d4fff;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 3px rgba(83, 66, 255, 0.14));
  pointer-events: none;
}

#brand-seeding .campaign-flow article:nth-child(7)::after {
  content: none;
}

#brand-seeding .campaign-advantages {
  max-width: 1180px;
  margin: 104px auto 0;
  text-align: center;
}

#brand-seeding .campaign-advantages h3 {
  margin: 0 0 46px;
  color: #3e34ff;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 760;
  letter-spacing: -0.035em;
}

#brand-seeding .campaign-advantages-copy {
  margin: 0 auto;
  padding: 0;
  color: #232229;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 560;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

@media (max-width: 1180px) {
  #brand-seeding {
    padding: 96px 0 106px;
  }

  #brand-seeding .campaign-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 30px;
    max-width: 760px;
  }

  #brand-seeding .campaign-flow article,
  #brand-seeding .campaign-flow article:nth-child(5),
  #brand-seeding .campaign-flow article:nth-child(6),
  #brand-seeding .campaign-flow article:nth-child(7) {
    grid-column: auto;
  }

  #brand-seeding .campaign-flow article::after,
  #brand-seeding .campaign-flow article:nth-child(4)::after {
    content: "";
    top: calc(100% + 21px);
    right: 50%;
    transform: translate(50%, -50%) rotate(90deg);
  }

  #brand-seeding .campaign-flow article:nth-child(7)::after {
    content: none;
  }

  #brand-seeding .campaign-flow article:nth-child(5)::before {
    content: none;
  }
}

@media (max-width: 700px) {
  #brand-seeding {
    padding: 78px 0 86px;
  }

  #brand-seeding .campaign-head {
    margin-bottom: 50px;
  }

  #brand-seeding .campaign-pill {
    min-height: 38px;
    margin-bottom: 18px;
    padding: 8px 19px;
    font-size: 15px;
  }

  #brand-seeding .campaign-head h2 {
    font-size: 29px;
    line-height: 1.46;
  }

  #brand-seeding .campaign-head h2 br {
    display: none;
  }

  #brand-seeding .campaign-flow {
    grid-template-columns: 1fr;
    gap: 42px;
    max-width: 360px;
  }

  #brand-seeding .campaign-flow article {
    min-height: 278px;
    padding: 27px 22px 24px;
  }

  #brand-seeding .campaign-advantages {
    margin-top: 80px;
  }

  #brand-seeding .campaign-advantages h3 {
    margin-bottom: 30px;
    font-size: 24px;
  }

  #brand-seeding .campaign-advantages-copy {
    padding: 0 8px;
    font-size: 16px;
  }
}

#music-viral {
  overflow: hidden;
  padding: 108px 0 118px;
  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fff 23%,
      #faf9ff 44%,
      #f0efff 74%,
      #dedbff 100%
    );
}

#music-viral .music-viral-container {
  max-width: 1320px;
}

#music-viral .music-viral-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
  min-height: 0;
  margin: 0 auto 68px;
  text-align: center;
}

#music-viral .music-viral-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0 0 22px;
  padding: 9px 24px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #4630ff 0%, #8779ff 100%);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 720;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 24px rgba(82, 61, 255, 0.2);
}

#music-viral .music-viral-head h2 {
  margin: 0;
  color: #17171b;
  font-size: clamp(34px, 2.7vw, 48px);
  line-height: 1.42;
  font-weight: 720;
  letter-spacing: -0.045em;
}

#music-viral .music-viral-head h2 span {
  color: #3e34ff;
}

#music-viral .music-viral-flow {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 46px 44px;
  max-width: 1240px;
  margin: 0 auto;
}

#music-viral .music-viral-flow article {
  position: relative;
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 300px;
  padding: 30px 22px 26px;
  border: 1px solid rgba(105, 94, 170, 0.16);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  text-align: center;
  box-shadow:
    0 16px 34px rgba(65, 57, 125, 0.1),
    0 3px 9px rgba(38, 32, 91, 0.07);
}

#music-viral .music-viral-flow article:nth-child(5) {
  grid-column: 2 / span 3;
}

#music-viral .music-viral-flow article:nth-child(6) {
  grid-column: 5 / span 3;
}

#music-viral .music-viral-flow article:nth-child(7) {
  grid-column: 8 / span 3;
}

#music-viral .music-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 10px 22px rgba(70, 48, 255, 0.08),
    inset 0 0 0 1px rgba(92, 78, 214, 0.04);
}

#music-viral .music-card-icon {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

#music-viral .music-viral-flow h3 {
  margin: 0 0 12px;
  color: #151519;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 720;
  letter-spacing: -0.03em;
}

#music-viral .music-viral-flow b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0;
  padding: 6px 15px;
  border-radius: 999px;
  color: #6357e9;
  background: #eceaff;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 680;
}

#music-viral .music-viral-flow p {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  color: #55545d;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

#music-viral .music-viral-flow article::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 15px solid #5d4fff;
  transform: translate(50%, -50%);
  filter: drop-shadow(0 4px 4px rgba(83, 66, 255, 0.18));
  pointer-events: none;
}

#music-viral .music-viral-flow article:nth-child(4)::after {
  content: none;
}

#music-viral .music-viral-flow article:nth-child(5)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -18px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid #5d4fff;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 3px rgba(83, 66, 255, 0.14));
  pointer-events: none;
}

#music-viral .music-viral-flow article:nth-child(7)::after {
  content: none;
}

#music-viral .music-advantages {
  max-width: 1180px;
  margin: 104px auto 0;
  text-align: center;
}

#music-viral .music-advantages h3 {
  margin: 0 0 46px;
  color: #3e34ff;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 760;
  letter-spacing: -0.035em;
}

#music-viral .music-advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#music-viral .music-advantages-grid p {
  position: relative;
  margin: 0;
  padding: 0 34px;
  color: #232229;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 560;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

#music-viral .music-advantages-grid p + p::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 1px;
  background: rgba(47, 42, 78, 0.35);
}

@media (min-width: 1181px) {
  #brand-seeding .campaign-flow article:nth-child(n + 5),
  #music-viral .music-viral-flow article:nth-child(n + 5) {
    transform: translateX(calc((100% + 44px) / 6));
  }
}

@media (max-width: 1180px) {
  #music-viral {
    padding: 96px 0 106px;
  }

  #music-viral .music-viral-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 30px;
    max-width: 760px;
  }

  #music-viral .music-viral-flow article,
  #music-viral .music-viral-flow article:nth-child(5),
  #music-viral .music-viral-flow article:nth-child(6),
  #music-viral .music-viral-flow article:nth-child(7) {
    grid-column: auto;
  }

  #music-viral .music-viral-flow article::after,
  #music-viral .music-viral-flow article:nth-child(4)::after {
    content: "";
    top: calc(100% + 21px);
    right: 50%;
    transform: translate(50%, -50%) rotate(90deg);
  }

  #music-viral .music-viral-flow article:nth-child(7)::after {
    content: none;
  }

  #music-viral .music-viral-flow article:nth-child(5)::before {
    content: none;
  }
}

@media (max-width: 700px) {
  #music-viral {
    padding: 78px 0 86px;
  }

  #music-viral .music-viral-head {
    margin-bottom: 50px;
  }

  #music-viral .music-viral-pill {
    min-height: 38px;
    margin-bottom: 18px;
    padding: 8px 19px;
    font-size: 15px;
  }

  #music-viral .music-viral-head h2 {
    font-size: 29px;
    line-height: 1.46;
  }

  #music-viral .music-viral-head h2 br {
    display: none;
  }

  #music-viral .music-viral-flow {
    grid-template-columns: 1fr;
    gap: 42px;
    max-width: 360px;
  }

  #music-viral .music-viral-flow article {
    min-height: 278px;
    padding: 27px 22px 24px;
  }

  #music-viral .music-advantages {
    margin-top: 80px;
  }

  #music-viral .music-advantages h3 {
    margin-bottom: 30px;
    font-size: 24px;
  }

  #music-viral .music-advantages-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #music-viral .music-advantages-grid p {
    padding: 24px 8px;
    font-size: 16px;
  }

  #music-viral .music-advantages-grid p + p::before {
    top: 0;
    right: 24%;
    bottom: auto;
    left: 24%;
    width: auto;
    height: 1px;
  }
}

.form-title {
  align-items: flex-start;
  min-height: auto;
  padding-top: calc(var(--header) + 88px);
  background: linear-gradient(var(--lavender) 0 230px, #fff 230px);
}

.form-title h2 {
  margin: 0;
  font-size: clamp(44px, 3.15vw, 60px);
  line-height: 1.22;
  font-weight: 720;
}

#marketing-contact,
#free-consult {
  min-height: auto;
  padding-top: calc(var(--header) + 88px);
  padding-bottom: 54px;
  background: linear-gradient(var(--lavender) 0 300px, #fff 300px);
}

#marketing-contact .container,
#free-consult .container {
  position: relative;
}

#marketing-contact .eyebrow,
#free-consult .eyebrow {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 500;
}

#marketing-contact h2,
#free-consult h2 {
  color: var(--blue);
}

.marketing-contact-form {
  margin-top: 96px;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 76px;
}

.contact-form-column {
  display: grid;
  align-content: start;
  gap: 86px;
}

.contact-manager-column {
  padding-left: 76px;
  border-left: 1px solid rgba(24, 24, 27, 0.55);
}

.contact-manager-column fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-manager-column legend,
.contact-field > span,
.privacy-consent-title {
  display: block;
  color: var(--black);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
}

.contact-manager-column legend {
  margin-bottom: 26px;
}

.contact-field > span {
  margin-bottom: 10px;
}

.contact-field i,
.privacy-consent-title i,
.contact-manager-column legend i {
  margin-left: 3px;
  color: var(--red);
  font-style: normal;
}

.contact-field input,
.contact-field select {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--black);
  font: inherit;
  font-size: 13px;
  outline: 0;
}

.contact-field input:focus,
.contact-field select:focus {
  border-color: var(--blue-soft);
  box-shadow: 0 0 0 3px rgba(152, 155, 245, 0.16);
}

.contact-field-company {
  width: 168px;
}

.contact-type-row {
  display: grid;
  grid-template-columns: 168px 200px 200px;
  align-items: end;
  gap: 24px;
  min-height: 68px;
}

.contact-conditional-field[hidden] {
  display: none;
}

.manager-field-row {
  display: grid;
  grid-template-columns: 128px 150px 214px;
  align-items: end;
  gap: 28px;
}

.manager-field-row-secondary {
  grid-template-columns: 168px 214px;
  margin-top: 46px;
}

.privacy-consent-list {
  display: grid;
  grid-template-columns: 250px minmax(0, 290px) 112px;
  align-items: center;
  gap: 12px 16px;
  margin-top: 86px;
}

.privacy-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--black);
  font-size: 13px;
  line-height: 1.35;
}

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

.privacy-consent-list button,
.privacy-modal-confirm,
.marketing-submit-btn {
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}

.privacy-consent-list button {
  min-width: 116px;
  height: 28px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.marketing-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 42px;
  margin: 54px 0 0 auto;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 720;
}

.privacy-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(24, 24, 27, 0.62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.privacy-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.privacy-modal {
  position: relative;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 56px));
  padding: 34px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(24, 24, 27, 0.22);
}

.privacy-modal h3 {
  margin: 0 42px 18px 0;
  color: var(--black);
  font-size: 24px;
  line-height: 1.35;
}

.privacy-modal-body {
  max-height: min(520px, calc(100vh - 220px));
  overflow-y: auto;
  margin: 0;
  padding-right: 12px;
  color: #56565d;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.privacy-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.privacy-modal-close::before,
.privacy-modal-close::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 6px;
  width: 20px;
  height: 2px;
  background: var(--black);
}

.privacy-modal-close::before {
  transform: rotate(45deg);
}

.privacy-modal-close::after {
  transform: rotate(-45deg);
}

.privacy-modal-confirm {
  height: 36px;
  margin-top: 26px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 650;
}

body.is-modal-open {
  overflow: hidden;
}

.service-deck-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.service-deck-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.service-deck-modal {
  position: relative;
  width: min(800px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 56px 64px 48px;
  border-radius: 40px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.service-deck-modal-close {
  position: absolute;
  top: 32px;
  right: 36px;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.service-deck-modal-close::before,
.service-deck-modal-close::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 6px;
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: #8a8a90;
  transition: background 180ms ease;
}

.service-deck-modal-close::before {
  transform: rotate(45deg);
}

.service-deck-modal-close::after {
  transform: rotate(-45deg);
}

.service-deck-modal-close:hover::before,
.service-deck-modal-close:hover::after {
  background: #4e4e56;
}

.service-deck-modal-head {
  padding: 132px 42px 0;
  text-align: center;
}

.service-deck-title-wrap {
  position: relative;
  display: inline-block;
}

.service-deck-modal-head h3 {
  margin: 0;
  color: var(--black);
  font-size: clamp(34px, 3vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.045em;
  font-weight: 900;
}

.service-deck-head-icon {
  position: absolute;
  right: -66px;
  top: -48px;
  width: 68px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(56, 45, 180, 0.24));
  transform: rotate(-10deg);
}

.service-deck-modal-head p {
  margin: 22px 0 0;
  color: #111116;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.service-deck-form {
  margin: 0;
}

.service-deck-divider {
  height: 1px;
  margin: 56px 0 44px;
  background: rgba(0, 0, 0, 0.18);
}

.service-deck-field {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.service-deck-field:first-of-type {
  margin-top: 0;
}

.service-deck-field > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111116;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 800;
}

.service-deck-field i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff224d;
}

.service-deck-field input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(110, 90, 255, 0.55);
  border-radius: 11px;
  background: #fff;
  color: #17171d;
  font-family: inherit;
  font-size: 16px;
  outline: 0;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.service-deck-field input::placeholder {
  color: #9a9aa3;
}

.service-deck-field input:focus {
  border-color: #6b4cff;
  box-shadow: 0 0 0 4px rgba(107, 76, 255, 0.11);
}

.service-deck-source {
  margin: 34px 0 0;
  padding: 0;
  border: 0;
}

.service-deck-source legend {
  margin: 0 0 18px;
  color: #111116;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 800;
}

.service-deck-source legend small {
  margin-left: 6px;
  color: #777780;
  font-size: 16px;
  font-weight: 500;
}

.service-deck-source-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
}

.service-deck-source-options label,
.service-deck-consent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111116;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 500;
}

.service-deck-source-options input,
.service-deck-consent input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #5b39ff;
}

.service-deck-divider-consent {
  margin: 48px 0 30px;
}

.service-deck-consent {
  font-size: 20px;
  font-weight: 800;
}

.service-deck-consent input {
  width: 22px;
  height: 22px;
}

.service-deck-consent-copy {
  margin: 22px 0 0;
  color: #19191f;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: -0.018em;
  font-weight: 450;
}

.service-deck-form-message {
  min-height: 24px;
  margin: 30px 0 0;
  color: #4b22ff;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  font-weight: 700;
}

.service-deck-form-message.is-error {
  color: #e81d4f;
}

.service-deck-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  min-width: 230px;
  height: 56px;
  margin: 18px auto 0;
  padding: 0 36px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #8d6bff, #4b22ff);
  box-shadow: 0 10px 22px rgba(75, 34, 255, 0.28);
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
}

.service-deck-download-icon {
  display: block;
  width: 24px;
  height: auto;
  object-fit: contain;
}

.service-deck-submit:hover {
  box-shadow: 0 13px 28px rgba(75, 34, 255, 0.34);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .service-deck-modal-overlay {
    padding: 16px;
  }

  .service-deck-modal {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 40px);
    padding: 48px 24px 32px;
    border-radius: 30px;
  }

  .service-deck-modal-close {
    top: 20px;
    right: 22px;
  }

  .service-deck-modal-head {
    padding: 72px 10px 0;
  }

  .service-deck-head-icon {
    right: -42px;
    top: -34px;
    width: 50px;
    height: auto;
  }

  .service-deck-divider {
    margin: 38px 0 30px;
  }

  .service-deck-field {
    margin-top: 24px;
  }

  .service-deck-source-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }

  .service-deck-consent-copy {
    font-size: 14px;
  }

  .service-deck-submit {
    width: 100%;
  }
}

@media (max-width: 1180px) {
  #marketing-contact,
  #free-consult {
    min-height: auto;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .contact-manager-column {
    padding-left: 0;
    border-left: 0;
  }

  .contact-type-row,
  .manager-field-row,
  .manager-field-row-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privacy-consent-list {
    grid-template-columns: 250px minmax(0, 1fr) 112px;
  }
}

@media (max-width: 760px) {
  .marketing-contact-form {
    margin-top: 64px;
  }

  .contact-form-column {
    gap: 42px;
  }

  .contact-field-company,
  .contact-type-row,
  .manager-field-row,
  .manager-field-row-secondary,
  .privacy-consent-list {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .privacy-consent-list {
    gap: 10px;
    margin-top: 54px;
  }

  .marketing-submit-btn {
    margin-left: 0;
  }
}

#free-consult.free-diagnosis-section {
  display: block;
  min-height: auto;
  padding: 0;
  background: #fff;
}

#free-consult .free-diagnosis-heading {
  padding: calc(var(--header) + clamp(28px, 3.8vw, 54px)) 0 clamp(34px, 3vw, 48px);
  background: #fff;
  text-align: center;
}

#free-consult .free-diagnosis-heading h2 {
  margin: 0;
  color: var(--black);
  font-size: clamp(42px, 3.4vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.035em;
  font-weight: 800;
}

#free-consult .free-diagnosis-heading p {
  margin: 18px 0 0;
  color: #18181b;
  font-size: clamp(18px, 1.45vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  font-weight: 500;
}

#free-consult .free-diagnosis-body {
  background: #f8f7ff;
  padding: clamp(42px, 3.6vw, 58px) 0 clamp(76px, 7vw, 116px);
}

#free-consult .free-diagnosis-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 64px;
  width: min(100%, 1180px);
  margin: 0 auto;
}

#free-consult .free-diagnosis-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 68px;
}

#free-consult .free-diagnosis-field {
  display: grid;
  gap: 11px;
  color: var(--black);
}

#free-consult .free-diagnosis-field-full {
  grid-column: 1 / -1;
}

#free-consult .free-diagnosis-field > span:first-child {
  display: block;
  font-size: clamp(17px, 1.18vw, 21px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 700;
}

#free-consult .free-diagnosis-field i {
  margin-left: 4px;
  color: var(--red);
  font-style: normal;
}

#free-consult .free-diagnosis-field em {
  margin-left: 6px;
  color: #777780;
  font-size: 0.72em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

#free-consult .free-diagnosis-field input,
#free-consult .free-diagnosis-field select {
  width: 100%;
  height: 70px;
  border: 1px solid rgba(105, 82, 235, 0.48);
  border-radius: 10px;
  background: #efedff;
  color: var(--black);
  font-family: inherit;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
  outline: 0;
}

#free-consult .free-diagnosis-field input {
  padding: 0 22px;
}

#free-consult .free-diagnosis-field select {
  appearance: none;
  padding: 0 58px 0 22px;
  cursor: pointer;
}

#free-consult .free-diagnosis-field input::placeholder {
  color: #8d8d95;
}

#free-consult .free-diagnosis-field input:focus,
#free-consult .free-diagnosis-field select:focus {
  border-color: rgba(74, 28, 253, 0.7);
  box-shadow: 0 0 0 4px rgba(74, 28, 253, 0.08);
}

#free-consult .free-diagnosis-select {
  position: relative;
  display: block;
}

#free-consult .free-diagnosis-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 13px solid #7b5cf7;
  transform: translateY(-38%);
  pointer-events: none;
}

#free-consult .free-diagnosis-consent {
  display: grid;
  justify-items: start;
  align-self: end;
  margin-top: 76px;
}

#free-consult .free-diagnosis-consent-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--black);
  font-family: inherit;
  font-size: clamp(17px, 1.15vw, 21px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 700;
  cursor: default;
}

#free-consult .free-diagnosis-consent-title span {
  width: 16px;
  height: 16px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
}

#free-consult .free-diagnosis-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0 34px;
  color: var(--black);
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 500;
}

#free-consult .free-diagnosis-check input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--blue);
}

#free-consult .free-diagnosis-submit-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: 76px;
}

#free-consult .free-diagnosis-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 236px;
  height: 72px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4a1cfd 0%, #9a6cff 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(74, 28, 253, 0.2);
  font-family: inherit;
  font-size: clamp(20px, 1.45vw, 27px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 760px) {
  #free-consult .free-diagnosis-form {
    display: block;
  }

  #free-consult .free-diagnosis-heading {
    padding: calc(var(--header) + 28px) 0 34px;
  }

  #free-consult .free-diagnosis-body {
    padding: 32px 0 68px;
  }

  #free-consult .free-diagnosis-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  #free-consult .free-diagnosis-field input,
  #free-consult .free-diagnosis-field select {
    height: 58px;
  }

  #free-consult .free-diagnosis-consent {
    margin-top: 40px;
  }

  #free-consult .free-diagnosis-consent-title {
    align-items: flex-start;
    text-align: left;
  }

  #free-consult .free-diagnosis-check {
    align-items: flex-start;
    margin-left: 0;
  }

  #free-consult .free-diagnosis-submit-wrap {
    justify-content: center;
    margin-top: 42px;
  }

  #free-consult .free-diagnosis-submit {
    min-width: 190px;
    height: 58px;
  }
}

#faq {
  align-items: flex-start;
  min-height: calc(100vh - var(--header));
  padding: calc(var(--header) + clamp(100px, 8vw, 142px)) 0 clamp(116px, 10vw, 176px);
  background:
    linear-gradient(180deg, #fff 0%, #fff 32%, #faf9ff 52%, #f1efff 76%, #dcd6ff 100%);
}

@media (min-width: 1440px) and (min-height: 900px) {
  .section,
  .hero,
  #main-insight,
  #marketing-contact,
  #free-consult,
  #faq {
    min-height: auto;
  }

  .section {
    padding-top: min(calc(var(--header) + 30px), 112px);
    padding-bottom: 36px;
  }

  #main-insight {
    padding-top: calc(var(--header) + clamp(70px, 7vw, 110px));
    padding-bottom: clamp(82px, 7vw, 112px);
  }

  #dashboard.dashboard-process-section {
    padding-top: calc(var(--header) + clamp(58px, 5.4vw, 92px));
    padding-bottom: clamp(58px, 5vw, 86px);
  }

  #onboarding {
    padding-top: calc(var(--header) + clamp(80px, 7vw, 118px));
    padding-bottom: clamp(76px, 6.5vw, 112px);
  }

  #comparison {
    padding-top: calc(var(--header) + 48px);
    padding-bottom: 64px;
  }

  #platform {
    padding-top: min(calc(var(--header) + 24px), 106px);
  }

  #marketing-contact,
  #free-consult {
    padding-top: min(calc(var(--header) + 88px), 170px);
    padding-bottom: 54px;
  }

  #faq {
    padding-top: min(calc(var(--header) + 92px), 170px);
    padding-bottom: 104px;
  }
}

#free-consult.free-diagnosis-section {
  padding: 0;
  background: #fff;
}

#free-consult.free-diagnosis-section .free-diagnosis-heading {
  padding: calc(var(--header) + clamp(28px, 3.8vw, 54px)) 0 clamp(34px, 3vw, 48px);
}

#free-consult.free-diagnosis-section .free-diagnosis-body {
  padding: clamp(42px, 3.6vw, 58px) 0 clamp(76px, 7vw, 116px);
  background: #f8f7ff;
}

#free-consult.free-diagnosis-section .free-diagnosis-form {
  display: block;
  width: min(100%, 1000px);
  margin: 0 auto;
}

#free-consult.free-diagnosis-section .free-diagnosis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

#free-consult.free-diagnosis-section .free-diagnosis-field,
#free-consult.free-diagnosis-section .free-diagnosis-field-textarea {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

#free-consult.free-diagnosis-section .free-diagnosis-field-textarea {
  align-items: start;
  grid-column: auto;
}

#free-consult.free-diagnosis-section .free-diagnosis-field-textarea > span:first-child {
  padding-top: 18px;
}

#free-consult.free-diagnosis-section .free-diagnosis-field input,
#free-consult.free-diagnosis-section .free-diagnosis-field textarea {
  width: 100%;
  border: 1px solid rgba(105, 82, 235, 0.48);
  border-radius: 10px;
  background: #efedff;
  color: var(--black);
  font-family: inherit;
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 500;
  outline: 0;
}

#free-consult.free-diagnosis-section .free-diagnosis-field input {
  height: 64px;
  padding: 0 20px;
}

#free-consult.free-diagnosis-section .free-diagnosis-field textarea {
  min-height: 112px;
  padding: 20px;
  line-height: 1.55;
  resize: vertical;
}

#free-consult.free-diagnosis-section .free-diagnosis-field input::placeholder,
#free-consult.free-diagnosis-section .free-diagnosis-field textarea::placeholder {
  color: #85858e;
}

#free-consult.free-diagnosis-section .free-diagnosis-field input:focus,
#free-consult.free-diagnosis-section .free-diagnosis-field textarea:focus {
  border-color: rgba(74, 28, 253, 0.7);
  box-shadow: 0 0 0 4px rgba(74, 28, 253, 0.08);
}

#free-consult.free-diagnosis-section .free-diagnosis-consent {
  margin-top: 72px;
}

#free-consult.free-diagnosis-section .free-diagnosis-consent-title {
  padding: 0;
  cursor: pointer;
}

#free-consult.free-diagnosis-section .free-diagnosis-submit-wrap {
  margin-top: 0;
}

#free-consult.free-diagnosis-section .free-diagnosis-submit {
  min-width: 220px;
  height: 68px;
  font-size: clamp(20px, 1.35vw, 25px);
}

#free-consult.free-diagnosis-section .free-diagnosis-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 48px;
}

#free-consult.free-diagnosis-section .free-diagnosis-grid {
  grid-column: 1 / -1;
}

#free-consult.free-diagnosis-section .free-diagnosis-consent {
  grid-column: 1;
}

#free-consult.free-diagnosis-section .free-diagnosis-submit-wrap {
  grid-column: 2;
}

@media (max-width: 760px) {
  #free-consult.free-diagnosis-section .free-diagnosis-form {
    display: block;
  }

  #free-consult.free-diagnosis-section .free-diagnosis-field,
  #free-consult.free-diagnosis-section .free-diagnosis-field-textarea {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #free-consult.free-diagnosis-section .free-diagnosis-field input {
    height: 58px;
  }

  #free-consult.free-diagnosis-section .free-diagnosis-field textarea {
    min-height: 132px;
  }

  #free-consult.free-diagnosis-section .free-diagnosis-consent {
    margin-top: 42px;
  }

  #free-consult.free-diagnosis-section .free-diagnosis-submit-wrap {
    justify-content: center;
    margin-top: 42px;
  }

  #free-consult.free-diagnosis-section .free-diagnosis-submit {
    min-width: 190px;
    height: 58px;
  }
}

.faq-accordion-container {
  width: min(100% - 72px, 960px);
}

.faq-accordion-head {
  margin: 0 auto clamp(46px, 4.8vw, 68px);
  text-align: center;
}

.faq-accordion-head h2 {
  margin: 0;
  color: transparent;
  background: linear-gradient(180deg, #8f5cff 0%, #6238ff 45%, #2500ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(82px, 8vw, 132px);
  line-height: 0.95;
  letter-spacing: 0;
  font-weight: 800;
}

.faq-accordion-head p {
  margin: 28px 0 0;
  color: var(--black);
  font-size: clamp(20px, 1.55vw, 27px);
  line-height: 1.35;
  font-weight: 700;
}

.faq-accordion-list {
  display: grid;
  gap: 20px;
  width: min(100%, 900px);
  margin: 0 auto;
}

.faq-accordion-item {
  overflow: hidden;
  border: 1px solid rgba(154, 154, 168, 0.44);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(24, 24, 27, 0.14);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.faq-accordion-item.is-open {
  border-color: rgba(112, 92, 241, 0.42);
  box-shadow: 0 10px 22px rgba(24, 24, 27, 0.15);
}

.faq-accordion-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  min-height: 62px;
  padding: 0 28px 0 24px;
  border: 0;
  background: transparent;
  color: var(--black);
  font-family: inherit;
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: 1.35;
  font-weight: 720;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.faq-accordion-question span {
  min-width: 0;
}

.faq-accordion-question i {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  border-right: 2px solid #4a1cfd;
  border-bottom: 2px solid #4a1cfd;
  transition: transform 260ms ease;
}

.faq-accordion-item.is-open .faq-accordion-question i {
  transform: translateY(5px) rotate(225deg);
}

.faq-accordion-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 280ms ease,
    opacity 220ms ease;
}

.faq-accordion-answer > div {
  overflow: hidden;
  margin: 0 24px;
  border-top: 1px solid rgba(165, 165, 178, 0.62);
}

.faq-accordion-answer p {
  margin: 0;
  padding: 20px 10px 24px;
  color: #3f3f46;
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.68;
  font-weight: 430;
  letter-spacing: 0;
}

.faq-accordion-item.is-open .faq-accordion-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.small-card-row article,
.solution-card,
.feature-strip article,
.dashboard-grid article,
.process-grid article,
.compare-grid article,
.case-row article,
.platform-grid article,
.marketing-grid article,
.faq-grid article {
  border-radius: 30px;
}

.site-footer {
  padding: 76px 0 72px;
  background: #b6b5f2;
  color: var(--black);
  font-size: 14px;
  line-height: 1.6;
}

.site-footer .container {
  width: min(1240px, calc(100% - 72px));
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 28px;
}

.footer-logo {
  display: block;
  width: clamp(220px, 17vw, 290px);
  height: auto;
}

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

.footer-report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  min-height: 42px;
  padding: 0 20px;
  color: #fff;
  background: linear-gradient(90deg, #4b20f3 0%, #8c5ff6 100%);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(65, 38, 210, 0.2);
  font-size: 15px;
  font-weight: 700;
}

.footer-company-info {
  display: grid;
  gap: 5px;
  margin-top: 28px;
}

.footer-company-info p {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 0;
}

.footer-company-info strong {
  font-weight: 680;
}

.footer-company-info a,
.footer-legal a {
  color: inherit;
  text-decoration: none;
}

.footer-company-info a:hover,
.footer-legal a:hover {
  text-decoration: underline;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin-top: 12px;
  font-size: 14px;
}

.footer-legal strong,
.footer-legal a {
  font-weight: 680;
}

@media (max-width: 760px) {
  .site-footer {
    padding: 52px 0 48px;
  }

  .site-footer .container {
    width: min(100% - 40px, 560px);
  }

  .footer-brand-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .footer-logo {
    width: min(240px, 70vw);
  }

  .footer-company-info {
    gap: 10px;
    margin-top: 26px;
  }

  .footer-company-info p,
  .footer-legal {
    display: block;
  }

  .footer-company-info span,
  .footer-legal span {
    display: none;
  }

  .footer-company-info strong {
    display: inline;
  }

  .footer-legal {
    margin-top: 20px;
  }

  .footer-legal a {
    display: block;
    margin-top: 6px;
  }
}

.reveal-item {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance, 42px), 0);
  transition:
    opacity 860ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 860ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.timeline.reveal-item {
  transform: translate3d(0, 38px, 0);
}

.timeline.reveal-item.is-visible {
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .insight-report-visual.report-reveal-ready .report-card,
  .insight-report-visual.report-reveal-ready .insight-pill {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
  }

  .insight-report-visual.report-reveal-ready .insight-pill {
    animation: none;
  }

  .onboarding-timeline.timeline-reveal-ready::before {
    transform: none;
    transition: none;
  }

  .onboarding-timeline.timeline-reveal-ready .onboarding-step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1180px) {
  :root {
    --header: 72px;
  }

  .main-nav {
    gap: 16px;
    font-size: 14px;
  }

  .header-cta {
    min-width: 104px;
    height: 40px;
    padding: 0 22px;
    font-size: 14px;
  }

  .language-selector {
    font-size: 14px;
  }

  .section {
    min-height: auto;
    padding: calc(var(--header) + 30px) 0 42px;
  }

  .hero-grid,
  .metric-row,
  .small-card-row,
  .dashboard-grid,
  .platform-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .hero-title-main {
    font-size: clamp(54px, 7.4vw, 72px);
  }

  .hero-title-sub {
    font-size: clamp(48px, 6.6vw, 64px);
  }

  .hero-device {
    width: min(810px, 96vw);
  }

  .barrier-grid,
  .compare-grid,
  .marketing-grid,
  .marketing-grid.dense {
    grid-template-columns: repeat(2, 1fr);
  }

  #faq {
    padding: calc(var(--header) + 84px) 0 96px;
  }

  .faq-accordion-container {
    width: min(100% - 56px, 880px);
  }

  .faq-accordion-list {
    width: min(100%, 820px);
  }

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

  #main-insight .container {
    width: min(100% - 56px, 960px);
  }

  #main-insight .section-head.wide {
    margin-bottom: 96px;
  }

  #main-insight .metric-row,
  #main-insight .small-card-row {
    gap: 28px;
  }

  #main-insight .container {
    width: min(100% - 56px, 980px);
  }

  .reason-row {
    grid-template-columns: 130px minmax(320px, 1fr) 280px;
    gap: 28px;
  }

  .reason-row.reverse {
    grid-template-columns: 280px minmax(320px, 1fr) 130px;
  }

  .reason-bubble {
    padding: 23px 28px;
  }

  .reason-info {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
  }

  .reason-icon {
    width: 62px;
  }

  .reason-info p {
    font-size: 15.5px;
  }
}

@media (max-width: 760px) {
  .nav-wrap {
    width: min(100% - 28px, 680px);
  }

  .brand img {
    width: 116px;
  }

  .mobile-menu {
    display: block;
    margin-left: 14px;
    border: 0;
    background: transparent;
    font-size: 28px;
  }

  .header-actions {
    margin-left: auto;
    gap: 0;
  }

  .main-nav {
    position: fixed;
    top: var(--header);
    left: 0;
    right: 0;
    display: none;
    height: auto;
    padding: 18px 24px 26px;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--line);
  }

  .main-nav.open {
    display: grid;
  }

  .main-nav > a {
    height: auto;
    padding: 10px 0;
  }

  .container {
    width: min(100% - 28px, 680px);
  }

  #main-insight {
    padding: calc(var(--header) + 30px) 0 42px;
  }

  #main-insight .container {
    width: min(100% - 28px, 680px);
  }

  #main-insight .section-head.wide {
    margin-bottom: 58px;
  }

  #main-insight .section-head h2 {
    font-size: clamp(30px, 9vw, 39px);
  }

  #main-insight .metric-row {
    margin-bottom: 42px;
  }

  #main-insight .small-card-row article {
    min-height: auto;
  }

  .reason-section-head {
    margin-bottom: 42px;
  }

  .reason-section-head h2 {
    font-size: clamp(34px, 10vw, 43px);
  }

  .reason-section-head p {
    margin-top: 14px;
    font-size: 15px;
  }

  .reason-flow {
    gap: 42px;
  }

  .reason-row,
  .reason-row.reverse {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .reason-character {
    order: 1;
    width: 112px;
  }

  .reason-bubble {
    order: 2;
    min-height: auto;
    padding: 22px 22px 24px;
    border-radius: 20px;
  }

  .reason-bubble::after {
    content: none;
  }

  .reason-bubble.tail-left::after,
  .reason-bubble.tail-right::after {
    content: none;
  }

  .reason-bubble h3 {
    font-size: 19px;
  }

  .reason-bubble p {
    font-size: 14px;
  }

  .reason-info {
    order: 3;
    width: fit-content;
    max-width: min(100%, 360px);
    margin: 0 auto;
    grid-template-columns: 54px auto;
    justify-content: center;
    gap: 14px;
  }

  .reason-icon {
    width: 52px;
  }

  .reason-info p {
    font-size: 14.5px;
  }

  .hero-grid,
  .metric-row,
  .small-card-row,
  .barrier-grid,
  .feature-strip,
  .dashboard-grid,
  .process-grid,
  .compare-grid,
  .case-row,
  .platform-grid,
  .marketing-grid,
  .marketing-grid.dense,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    min-height: auto;
    padding: 62px 0 92px;
  }

  .hero-title-main {
    font-size: clamp(36px, 11vw, 50px);
  }

  .hero-title-sub {
    font-size: clamp(30px, 9.6vw, 43px);
  }

  .hero-title-sub {
    white-space: normal;
  }

  .hero-subtitle {
    margin-top: 24px;
    font-size: clamp(22px, 6vw, 30px);
  }

  .hero-device {
    width: min(88vw, 460px);
    margin-top: 26px;
  }

  .hero-description {
    font-size: 15px;
  }

  .hero-primary {
    min-width: 250px;
    height: 58px;
    margin-top: 38px;
    border-radius: 16px;
    font-size: 20px;
  }

  .btn-check {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }

  .btn-arrow {
    font-size: 34px;
  }

  .hero-secondary-link {
    font-size: 17px;
  }

  .header-cta {
    display: none;
  }

  .language-menu-wrap {
    display: inline-flex;
  }

  .fixed-action-stack {
    right: 20px;
    bottom: 20px;
    gap: 2px;
  }

  .scroll-top-btn {
    margin-top: 6px;
  }

  .fixed-action-btn,
  .scroll-top-btn {
    width: 54px;
    height: 54px;
  }

  .section-head.wide {
    margin-bottom: 64px;
  }

  .with-visual {
    display: block;
  }

  .floating-visual,
  .growth-visual {
    height: 130px;
    margin-top: 24px;
    font-size: 56px;
  }

  #faq {
    padding: calc(var(--header) + 64px) 0 86px;
  }

  .faq-accordion-container {
    width: min(100% - 32px, 620px);
  }

  .faq-accordion-head {
    margin-bottom: 36px;
  }

  .faq-accordion-head h2 {
    font-size: clamp(64px, 18vw, 92px);
  }

  .faq-accordion-head p {
    margin-top: 18px;
    font-size: clamp(17px, 4.6vw, 21px);
  }

  .faq-accordion-list {
    gap: 14px;
  }

  .faq-accordion-item {
    border-radius: 15px;
  }

  .faq-accordion-question {
    min-height: 58px;
    padding: 0 20px;
    gap: 16px;
    font-size: 16px;
  }

  .faq-accordion-question i {
    width: 14px;
    height: 14px;
  }

  .faq-accordion-answer > div {
    margin: 0 20px;
  }

  .faq-accordion-answer p {
    padding: 16px 0 20px;
    font-size: 14.5px;
    line-height: 1.62;
  }

  .timeline {
    display: none;
  }

  .feature-strip {
    padding: 28px 0 44px;
  }

  .form-title {
    min-height: auto;
  }
}

@media (max-width: 1180px) {
  .service-message-title {
    gap: 14px;
  }

  .service-message-logo {
    width: clamp(248px, 33vw, 360px);
  }

  .service-message-copyline {
    font-size: clamp(42px, 6.4vw, 62px);
  }

  .service-pill-wrap {
    width: min(980px, 100%);
    gap: 20px;
    margin-top: 104px;
  }

  .service-pill-row,
  .service-pill-row:last-child {
    flex-wrap: wrap;
    gap: 18px 20px;
  }

  .service-pill-item {
    gap: 10px;
  }

  .service-pill-item b {
    min-width: 204px;
    min-height: 50px;
    padding: 0 18px;
    font-size: 19px;
  }

  .service-pill-icon {
    width: 50px;
  }
}

@media (max-width: 760px) {
  #service-difference {
    padding: calc(var(--header) + 74px) 0 82px;
  }

  #service-difference .container {
    width: min(calc(100% - 28px), 680px);
  }

  .service-message-title {
    gap: 12px;
    font-size: clamp(29px, 8.3vw, 38px);
    line-height: 1.12;
  }

  .service-message-logo {
    width: min(236px, 64vw);
  }

  .service-message-copyline {
    font-size: clamp(27px, 7.6vw, 35px);
    letter-spacing: -0.04em;
  }

  .service-pill-wrap {
    gap: 16px;
    margin-top: 68px;
  }

  .service-pill-row,
  .service-pill-row:last-child {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: center;
  }

  .service-pill-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    --service-spread-x: 0px;
    --service-spread-y: 28px;
  }

  .service-pill-item b {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0 18px;
    font-size: 16px;
  }

  .service-pill-icon {
    width: 48px;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  #dashboard.dashboard-process-section {
    padding-top: calc(var(--header) + 68px);
    padding-bottom: 76px;
  }

  .dashboard-process-inner {
    min-height: auto;
  }

  .dashboard-process-title {
    font-size: clamp(38px, 10vw, 54px);
    line-height: 1.12;
  }

  .dashboard-process-stage {
    width: min(100% - 28px, 520px);
    margin-top: 46px;
    padding-bottom: 64px;
  }

  .dashboard-process-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    min-height: 0;
    padding: 0;
    filter: drop-shadow(0 18px 24px rgba(74, 55, 180, 0.12));
  }

  .dashboard-process-card {
    width: 100%;
    height: 218px;
    margin-left: 0;
    padding: 20px 18px;
    border-radius: 16px;
  }

  .dashboard-process-card:nth-child(n) {
    --process-card-rotate: 0deg;
    --process-card-y: 0px;
  }

  .dashboard-process-card:nth-child(7) {
    grid-column: 1 / -1;
    width: min(100%, 245px);
    justify-self: center;
  }

  .dashboard-process-card img {
    left: 50%;
    right: auto;
    bottom: 14px;
    width: 104px;
    height: 104px;
    transform: translateX(-50%);
  }

  .dashboard-process-card strong {
    position: static;
    right: auto;
    margin-top: 12px;
    font-size: 18px;
  }
}

@media (max-width: 920px) {
  #onboarding {
    padding-top: calc(var(--header) + 72px);
    padding-bottom: 72px;
  }

  #onboarding::before {
    top: -120px;
    height: 260px;
  }

  .insight-report-container {
    width: min(calc(100% - 32px), 760px);
  }

  .insight-report-head h2 {
    font-size: clamp(34px, 8.3vw, 50px);
    line-height: 1.16;
  }

  .insight-report-head p {
    margin-top: 24px;
    font-size: clamp(15px, 3.9vw, 19px);
    line-height: 1.58;
  }

  .insight-report-visual {
    width: min(100%, 620px);
    height: 520px;
    margin-top: 50px;
  }

  .report-card-stack {
    top: 54px;
    height: 330px;
  }

  .report-card {
    width: 220px;
    height: 300px;
  }

  .report-card-center {
    width: 238px;
    height: 340px;
  }

  .report-card-left {
    left: 2%;
  }

  .report-card-right {
    right: 2%;
  }

  .insight-pill {
    min-height: 32px;
    padding: 0 14px;
    font-size: 13px;
  }

  .pill-ai {
    top: 8px;
    left: 8%;
  }

  .pill-comment {
    top: 8px;
    right: 7%;
  }

  .pill-platform {
    top: 50px;
    left: 3%;
  }

  .pill-content {
    top: 58px;
    right: 3%;
  }

  .pill-competitor {
    top: 88px;
    left: 50%;
  }

  .insight-report-quote {
    margin-top: 34px;
    padding: 36px 54px 28px;
  }
}

@media (max-width: 920px) {
  #comparison {
    min-height: auto;
    padding-top: calc(var(--header) + 58px);
    padding-bottom: 72px;
  }

  .comparison-showcase {
    width: min(100% - 36px, 760px);
    min-height: 0;
  }

  .comparison-copy h2 {
    font-size: clamp(32px, 6.5vw, 46px);
    line-height: 1.16;
  }

  .comparison-device {
    width: min(520px, 72vw);
    margin-top: 42px;
  }

  .onboarding-step h3 {
    font-size: 18px;
  }

  .onboarding-step p {
    font-size: 12.5px;
  }
}

@media (max-width: 560px) {
  #comparison {
    padding-top: calc(var(--header) + 48px);
    padding-bottom: 64px;
  }

  .comparison-showcase {
    width: min(100% - 32px, 460px);
  }

  .comparison-copy h2 {
    font-size: clamp(27px, 8vw, 36px);
  }

  .comparison-device {
    width: min(380px, 86vw);
    margin: 34px auto 30px;
  }

  .onboarding-timeline {
    grid-template-columns: 1fr;
    gap: 34px;
    width: min(100%, 360px);
  }

  .onboarding-timeline::before {
    top: 20px;
    bottom: 20px;
    right: auto;
    left: 50%;
    width: 3px;
    height: auto;
    transform: translateX(-50%);
  }

  .onboarding-timeline.timeline-reveal-ready::before {
    transform: translateX(-50%) scaleY(0);
    transform-origin: center top;
  }

  .onboarding-timeline.timeline-reveal-ready.is-timeline-visible::before {
    transform: translateX(-50%) scaleY(1);
  }

  .onboarding-step {
    padding: 0 18px 18px;
    background: #fff;
  }

  .onboarding-step__label {
    min-height: 36px;
    padding: 0 16px;
    font-size: 14px;
  }

  .onboarding-step i {
    margin-top: 10px;
    margin-bottom: 16px;
  }

  .onboarding-step h3 {
    font-size: 19px;
  }

  .onboarding-step p {
    font-size: 13px;
  }

  #onboarding {
    padding-top: calc(var(--header) + 56px);
  }

  .insight-report-head h2 {
    font-size: clamp(30px, 8.8vw, 40px);
  }

  .insight-report-head p span {
    display: inline;
  }

  .insight-report-visual {
    height: auto;
    margin-top: 42px;
    padding-top: 0;
  }

  .report-card-stack {
    position: relative;
    top: auto;
    height: 360px;
  }

  .report-card {
    width: 178px;
    height: 248px;
  }

  .report-card-left {
    left: 0;
    top: 58px;
  }

  .report-card-center {
    top: 18px;
    width: 198px;
    height: 304px;
  }

  .report-card-right {
    right: 0;
    top: 58px;
  }

  .report-card-copy strong {
    font-size: 15px;
  }

  .report-card-copy span {
    font-size: 12px;
  }

  .insight-pill {
    position: static;
    margin: 7px 4px 0;
    animation-duration: 5s;
  }

  .pill-competitor {
    transform: none;
  }

  .insight-report-visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }

  .report-card-stack {
    order: -1;
    flex: 0 0 100%;
  }

  .insight-report-quote {
    width: min(100%, 420px);
    margin-top: 42px;
    padding: 34px 32px 26px;
  }

  .insight-report-quote p {
    font-size: 17px;
  }

  .quote-mark {
    font-size: 64px;
  }
}

/* Product plans: scoped to page 7 (#platform) */
#platform.pricing-section {
  min-height: auto;
  padding: calc(var(--header) + 86px) 0 104px;
  background: #fff;
}

#platform .pricing-container {
  width: min(1240px, calc(100% - 96px));
}

#platform .pricing-heading {
  margin: 0 0 58px;
  text-align: center;
}

#platform .pricing-heading__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-bottom: 24px;
  padding: 0 26px;
  color: #fff;
  background: linear-gradient(100deg, #421af2 0%, #8275f5 100%);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(75, 48, 226, 0.2);
  font-size: 18px;
  line-height: 1;
  font-weight: 750;
}

#platform .pricing-heading h2 {
  margin: 0;
  color: #17171c;
  font-size: clamp(34px, 2.7vw, 50px);
  line-height: 1.2;
  font-weight: 760;
  letter-spacing: -0.035em;
}

#platform .pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(360px, 1fr);
  align-items: stretch;
  gap: 28px;
}

#platform .plan-card,
#platform .addon-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(117, 124, 168, 0.22);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(38, 42, 83, 0.14);
}

#platform .plan-card {
  display: flex;
  flex-direction: column;
}

#platform .plan-card__header {
  min-height: 112px;
  padding: 25px 26px 22px;
  color: #fff;
  background: linear-gradient(115deg, #6766f7 0%, #4e82f6 56%, #49b4f1 100%);
}

#platform .plan-card--standard .plan-card__header {
  background: linear-gradient(115deg, #3c16eb 0%, #565af5 52%, #45aff2 100%);
}

#platform .plan-card__header h3,
#platform .addon-card__header h3 {
  margin: 0;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 780;
  letter-spacing: -0.025em;
}

#platform .plan-card__header p,
#platform .addon-card__header p {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}

#platform .plan-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 25px 26px 22px;
}

#platform .plan-price {
  display: flex;
  align-items: baseline;
  min-height: 74px;
  padding-bottom: 13px;
  border-bottom: 1px solid #b8b8c2;
  color: #62626c;
}

#platform .plan-price span {
  margin-right: 10px;
  font-size: 15px;
  font-weight: 600;
}

#platform .plan-price strong {
  color: #4d52ee;
  font-size: clamp(54px, 4vw, 68px);
  line-height: 0.9;
  font-weight: 780;
  letter-spacing: -0.045em;
}

#platform .plan-price b {
  margin-left: 9px;
  color: #4d52ee;
  font-size: 20px;
  font-weight: 760;
}

#platform .plan-standard {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 10px;
  padding: 15px 0 19px;
}

#platform .plan-standard span {
  padding: 6px 12px;
  color: #fff;
  background: linear-gradient(90deg, #4a25ee, #5a7bf4);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 750;
}

#platform .plan-standard b {
  color: #202027;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

#platform .plan-features {
  display: grid;
  gap: 24px;
}

#platform .plan-card--lite .plan-features {
  padding-bottom: 24px;
}

#platform .plan-features section {
  margin: 0;
}

#platform .plan-features h4 {
  position: relative;
  margin: 0 0 7px;
  padding-left: 21px;
  color: #292932;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 760;
}

#platform .plan-features h4::before {
  position: absolute;
  top: -1px;
  left: 0;
  content: "✓";
  color: #7a69f3;
  font-size: 18px;
  font-weight: 850;
}

#platform .plan-features ul {
  margin: 0;
  padding: 0 0 0 21px;
  list-style: none;
}

#platform .plan-features li {
  position: relative;
  margin-top: 5px;
  padding-left: 10px;
  color: #555560;
  font-size: 12.5px;
  line-height: 1.55;
  word-break: keep-all;
}

#platform .plan-features li::before {
  position: absolute;
  left: 0;
  content: "·";
}

#platform .plan-note {
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding-top: 21px;
  border-top: 1px solid #b8b8c2;
}

#platform .plan-note strong {
  color: #303038;
  font-size: 13px;
  line-height: 1.35;
}

#platform .plan-note span {
  color: #666670;
  font-size: 11.5px;
  line-height: 1.45;
}

#platform .addon-card {
  background: #f2f4fb;
}

#platform .addon-card__header {
  min-height: 112px;
  padding: 25px 26px 20px;
  background: #fff;
}

#platform .addon-card__header h3 {
  color: #18181d;
}

#platform .addon-card__header h3 small {
  color: #777783;
  font-size: 13px;
  font-weight: 550;
}

#platform .addon-card__header p {
  color: #44444c;
}

#platform .addon-card__body {
  display: grid;
  gap: 14px;
  padding: 22px 20px 18px;
}

#platform .addon-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 13px;
  min-height: 90px;
  padding: 16px 15px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 15px rgba(39, 45, 79, 0.14);
}

#platform .addon-item > * + * {
  border-left: 1px solid #c8c9d0;
  padding-left: 13px;
}

#platform .addon-item h4 {
  margin: 0;
  color: #292930;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 780;
  text-align: center;
}

#platform .addon-item b {
  display: block;
  color: #303038;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 740;
}

#platform .addon-item p {
  margin: 4px 0 0;
  color: #71717b;
  font-size: 10px;
  line-height: 1.4;
  word-break: keep-all;
}

#platform .addon-item > strong {
  display: flex;
  align-self: stretch;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #3f3f48;
  font-size: 10px;
  line-height: 1.55;
  font-weight: 700;
  text-align: center;
}

#platform .addon-item > strong em {
  color: #397fea;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

#platform .addon-item > strong span {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin: 0;
}

#platform .addon-item--stacked > strong {
  gap: 18px;
}

#platform .addon-item--stacked small {
  display: inline-block;
  white-space: nowrap;
}

#platform .addon-item hr {
  margin: 10px 0;
  border: 0;
  border-top: 1px dashed #c4c5cd;
}

#platform .addon-item small {
  font-size: 9px;
  font-weight: 500;
}

#platform .addon-note {
  margin: 3px 2px 0;
  color: #555560;
  font-size: 11px;
  line-height: 1.4;
}

#platform .plan-comparison {
  margin-top: 138px;
  padding-top: 92px;
}

#platform .plan-comparison > h3 {
  margin: 0 0 52px;
  color: #17171c;
  font-size: clamp(28px, 2.2vw, 38px);
  line-height: 1.25;
  font-weight: 760;
  letter-spacing: -0.035em;
  text-align: center;
}

#platform .plan-comparison__scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e4ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(38, 42, 83, 0.08);
  -webkit-overflow-scrolling: touch;
}

#platform .plan-comparison__table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #303039;
  font-size: 13px;
}

#platform .plan-comparison__table th,
#platform .plan-comparison__table td {
  height: 54px;
  padding: 12px 14px;
  border-bottom: 1px solid #eceef3;
  text-align: center;
}

#platform .plan-comparison__table thead th {
  background: #f7f8fb;
  color: #4a4b55;
  font-size: 13px;
  font-weight: 750;
}

#platform .plan-comparison__table th:first-child {
  width: 22%;
  text-align: left;
}

#platform .plan-comparison__table tbody th[scope="row"] {
  color: #4f5059;
  font-weight: 600;
}

#platform .plan-comparison__table .is-standard {
  background: #eef4ff;
  color: #3e60dc;
  font-weight: 760;
}

#platform .plan-comparison__table .comparison-category th {
  height: 42px;
  padding: 10px 14px;
  background: #f2f4f9;
  color: #536cda;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.02em;
}

#platform .plan-comparison__table tbody tr:last-child th,
#platform .plan-comparison__table tbody tr:last-child td {
  border-bottom: 0;
}

#platform .pricing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-top: 64px;
  padding: 34px 52px;
  color: #fff;
  background: linear-gradient(105deg, #2612ed 0%, #7034f1 48%, #a760ec 100%);
  border-radius: 28px;
}

#platform .pricing-cta h3 {
  margin: 0;
  font-size: clamp(27px, 2.15vw, 38px);
  line-height: 1.25;
  font-weight: 760;
  letter-spacing: -0.035em;
}

#platform .pricing-cta p {
  margin: 13px 0 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 480;
}

#platform .pricing-cta a {
  display: grid;
  flex: 0 0 190px;
  min-height: 76px;
  place-items: center;
  color: #17171c;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 18px rgba(27, 12, 96, 0.2);
  font-size: 24px;
  font-weight: 760;
}

@media (max-width: 1180px) {
  #platform .pricing-container {
    width: min(960px, calc(100% - 48px));
  }

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

  #platform .addon-card {
    grid-column: 1 / -1;
  }

  #platform .addon-card__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #platform .addon-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #platform.pricing-section {
    padding: calc(var(--header) + 52px) 0 72px;
  }

  #platform .pricing-container {
    width: min(100% - 32px, 560px);
  }

  #platform .pricing-heading {
    margin-bottom: 38px;
  }

  #platform .pricing-heading__label {
    min-height: 38px;
    margin-bottom: 18px;
    padding: 0 21px;
    font-size: 15px;
  }

  #platform .pricing-heading h2 {
    font-size: clamp(26px, 7.2vw, 34px);
  }

  #platform .pricing-grid,
  #platform .addon-card__body {
    grid-template-columns: 1fr;
  }

  #platform .addon-card {
    grid-column: auto;
  }

  #platform .addon-note {
    grid-column: auto;
  }

  #platform .plan-comparison {
    margin-top: 88px;
    padding-top: 56px;
  }

  #platform .plan-comparison > h3 {
    margin-bottom: 32px;
    font-size: 24px;
  }

  #platform .plan-comparison__scroll {
    border-radius: 16px;
  }

  #platform .pricing-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 26px;
    margin-top: 42px;
    padding: 30px 26px;
  }

  #platform .pricing-cta a {
    flex: none;
    width: 100%;
    min-height: 62px;
    font-size: 20px;
  }
}

@media (max-width: 430px) {
  #platform .plan-card__header,
  #platform .addon-card__header {
    padding-right: 20px;
    padding-left: 20px;
  }

  #platform .plan-card__body {
    padding-right: 20px;
    padding-left: 20px;
  }

  #platform .plan-standard {
    grid-template-columns: 1fr;
  }

  #platform .plan-standard span {
    width: max-content;
  }

  #platform .addon-item {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  #platform .addon-item > strong {
    grid-column: 2;
    border-left: 1px solid #c8c9d0;
    padding-left: 13px;
    text-align: center;
  }

  #platform .addon-item > strong span {
    margin: 0;
  }
}

/* 2-page problem dialogue redesign */
#main-insight .problem-dialogue-container {
  width: min(1120px, calc(100% - 56px));
  max-width: 1120px;
}

#main-insight .problem-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(128px, 10vw, 162px);
  width: 100%;
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
}

#main-insight .problem-row,
#main-insight .problem-row.reverse {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(560px, 1fr);
  align-items: start;
  gap: 24px clamp(8px, 1.4vw, 22px);
}

#main-insight .problem-question {
  display: grid;
  grid-template-columns: 92px minmax(280px, 1fr);
  align-items: center;
  gap: 26px;
  min-width: 0;
  padding-top: 4px;
}

#main-insight .problem-character {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #d9d7f0;
  overflow: hidden;
}

#main-insight .problem-character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#main-insight .problem-bubble {
  width: fit-content;
  min-width: 250px;
  max-width: 430px;
  min-height: 58px;
  padding: 16px 30px 17px;
  border-radius: 999px;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: nowrap;
}

#main-insight .problem-bubble h3 {
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: nowrap;
}

#main-insight .problem-card {
  width: min(100%, 640px);
  min-height: 104px;
  margin-top: 64px;
  margin-left: -24px;
  word-break: keep-all;
  overflow-wrap: normal;
}

#main-insight .problem-card-icon {
  width: 62px;
  height: 62px;
}

#main-insight .problem-card-icon img,
#main-insight .problem-send-icon {
  object-fit: contain;
}

#main-insight .problem-card-copy {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: normal;
}

#main-insight .problem-card-copy strong {
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: normal;
}

#main-insight .problem-card-copy p {
  font-size: 14.5px;
  line-height: 1.58;
  word-break: keep-all;
  overflow-wrap: normal;
}

#main-insight .problem-closing {
  margin: clamp(230px, 20vw, 300px) auto clamp(150px, 13vw, 210px);
  text-align: center;
}

#main-insight .reveal-item {
  --reveal-distance: 24px;
  transform: translate3d(0, var(--reveal-distance), 0) scale(0.96);
  transition-duration: 820ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

#main-insight .reveal-item.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 980px) {
  #main-insight .problem-dialogue-container {
    width: min(100% - 36px, 760px);
  }

  #main-insight .problem-flow {
    gap: 118px;
  }

  #main-insight .problem-row,
  #main-insight .problem-row.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #main-insight .problem-question {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 22px;
    width: 100%;
  }

  #main-insight .problem-character {
    width: 82px;
    height: 82px;
    justify-self: end;
  }

  #main-insight .problem-bubble {
    min-height: 54px;
    width: fit-content;
    min-width: 240px;
    max-width: 100%;
    padding: 15px 24px;
    white-space: normal;
  }

  #main-insight .problem-card {
    width: min(100%, 640px);
    margin: 0 0 0 auto;
  }
}

@media (max-width: 560px) {
  #main-insight {
    padding-top: calc(var(--header) + 64px);
  }

  #main-insight .problem-dialogue-container {
    width: min(680px, calc(100% - 28px));
  }

  #main-insight .reason-section-head {
    margin-bottom: 56px;
  }

  #main-insight .reason-section-head h2 {
    font-size: clamp(34px, 11vw, 46px);
  }

  #main-insight .problem-flow {
    gap: 96px;
  }

  #main-insight .problem-question {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
  }

  #main-insight .problem-character {
    width: 70px;
    height: 70px;
  }

  #main-insight .problem-bubble {
    min-height: 50px;
    width: 100%;
    min-width: 0;
    padding: 13px 18px 14px;
    border-radius: 24px;
    white-space: normal;
  }

  #main-insight .problem-bubble h3 {
    font-size: 17px;
    line-height: 1.42;
  }

  #main-insight .problem-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 15px;
    width: 100%;
    margin-left: 0;
    padding: 20px 20px 22px;
    border-radius: 18px;
  }

  #main-insight .problem-card-icon {
    width: 52px;
    height: 52px;
  }

  #main-insight .problem-card-copy strong {
    font-size: 17px;
  }

  #main-insight .problem-card-copy p {
    font-size: 14px;
    line-height: 1.6;
  }

  #main-insight .problem-send-icon {
    right: 12px;
    bottom: -50px;
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  #main-insight .problem-closing {
    margin-top: 150px;
    margin-bottom: 120px;
  }
}

#main-insight .problem-bubble h3,
#main-insight .problem-card-copy strong,
#main-insight .problem-card-copy p {
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

#main-insight .problem-bubble h3 {
  color: #fff;
  font-weight: 800;
  line-height: 1.35;
}

#main-insight .problem-card {
  border-radius: 30px;
  box-shadow: 0 16px 30px rgba(44, 43, 78, 0.1);
}

html[lang="en"] #main-insight .problem-dialogue-container,
body.is-en #main-insight .problem-dialogue-container,
html[lang="en"] #main-insight .problem-flow,
body.is-en #main-insight .problem-flow {
  width: min(1120px, calc(100% - 56px));
  max-width: 1120px;
}

html[lang="en"] #main-insight .problem-flow,
body.is-en #main-insight .problem-flow {
  transform: translateX(-22px);
}

html[lang="en"] #main-insight .problem-row,
html[lang="en"] #main-insight .problem-row.reverse,
body.is-en #main-insight .problem-row,
body.is-en #main-insight .problem-row.reverse {
  grid-template-columns: minmax(360px, 440px) minmax(560px, 1fr);
}

html[lang="en"] #main-insight .problem-bubble,
body.is-en #main-insight .problem-bubble {
  width: fit-content;
  min-width: 0;
  max-width: none;
  padding-right: 52px;
  padding-left: 52px;
  white-space: nowrap;
}

html[lang="en"] #main-insight .problem-bubble h3,
body.is-en #main-insight .problem-bubble h3 {
  font-size: clamp(18px, 1.28vw, 21px);
  white-space: nowrap;
  overflow-wrap: normal;
}

html[lang="en"] #main-insight .problem-card,
body.is-en #main-insight .problem-card {
  width: 880px;
  max-width: 880px;
  margin-left: -264px;
}

html[lang="en"] #main-insight .problem-card-copy strong,
html[lang="en"] #main-insight .problem-card-copy p,
body.is-en #main-insight .problem-card-copy strong,
body.is-en #main-insight .problem-card-copy p {
  white-space: nowrap;
  overflow-wrap: normal;
}

@media (max-width: 980px) {
  html[lang="en"] #main-insight .problem-dialogue-container,
  body.is-en #main-insight .problem-dialogue-container,
  html[lang="en"] #main-insight .problem-flow,
  body.is-en #main-insight .problem-flow {
    width: min(100% - 36px, 760px);
    max-width: 760px;
  }

  html[lang="en"] #main-insight .problem-row,
  html[lang="en"] #main-insight .problem-row.reverse,
  body.is-en #main-insight .problem-row,
  body.is-en #main-insight .problem-row.reverse {
    grid-template-columns: 1fr;
  }

  html[lang="en"] #main-insight .problem-flow,
  body.is-en #main-insight .problem-flow {
    transform: none;
  }

  html[lang="en"] #main-insight .problem-bubble,
  body.is-en #main-insight .problem-bubble {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  html[lang="en"] #main-insight .problem-bubble h3,
  body.is-en #main-insight .problem-bubble h3 {
    white-space: normal;
  }

  html[lang="en"] #main-insight .problem-card,
  body.is-en #main-insight .problem-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  html[lang="en"] #main-insight .problem-card-copy strong,
  html[lang="en"] #main-insight .problem-card-copy p,
  body.is-en #main-insight .problem-card-copy strong,
  body.is-en #main-insight .problem-card-copy p {
    white-space: normal;
  }
}

@media (min-width: 981px) {
  #main-insight .problem-row {
    min-height: 176px;
  }

  #main-insight .problem-card {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 22px;
    padding-right: 42px;
    padding-left: 28px;
  }

  #main-insight .problem-card-copy p {
    white-space: nowrap;
  }
}

@media (max-width: 980px) {
  #main-insight .problem-card-copy p {
    white-space: normal;
  }
}

/* 2-page section height and spacing stabilization */
#main-insight {
  height: auto;
  min-height: auto;
  padding-top: calc(var(--header) + clamp(112px, 9vw, 150px));
  padding-bottom: clamp(96px, 8vw, 130px);
  overflow: visible;
  background:
    linear-gradient(180deg, #eeeaff 0%, #f7f5ff 26%, #ffffff 100%);
}

#main-insight .reason-section-head {
  margin-bottom: clamp(110px, 9vw, 150px);
}

#main-insight .problem-flow {
  gap: clamp(52px, 4vw, 64px);
}

#main-insight .problem-row,
#main-insight .problem-row.reverse {
  position: relative;
  min-height: 268px;
  align-items: start;
}

#main-insight .problem-card {
  margin-top: 118px;
}

/* 흰 카드를 말풍선보다 앞에 배치 → 말풍선 꼬리가 카드 글씨를 덮지 않고 카드 뒤로 들어감 */
#main-insight .problem-card {
  position: relative;
  z-index: 3;
}

#main-insight .problem-closing {
  margin-top: clamp(260px, 22vw, 330px);
  margin-bottom: clamp(170px, 14vw, 230px);
}

@media (min-width: 981px) {
  #main-insight .problem-row,
  #main-insight .problem-row.reverse {
    min-height: 320px;
  }
}

@media (max-width: 980px) {
  #main-insight {
    min-height: 0;
    padding-top: calc(var(--header) + 92px);
    padding-bottom: 96px;
  }

  #main-insight .reason-section-head {
    margin-bottom: 82px;
  }

  #main-insight .problem-flow {
    gap: 40px;
  }

  #main-insight .problem-row,
  #main-insight .problem-row.reverse {
    min-height: 0;
  }

  #main-insight .problem-card {
    margin-top: 22px;
  }
}

@media (max-width: 560px) {
  #main-insight {
    padding-top: calc(var(--header) + 68px);
    padding-bottom: 82px;
  }

  #main-insight .problem-flow {
    gap: 36px;
  }

  .bottom-closing-section {
    padding: 168px 0;
    margin-bottom: 96px;
  }
}

/* 3-page report card rolling interaction */
#onboarding .insight-report-visual {
  height: clamp(720px, 60vw, 860px);
}

#onboarding .report-card-stack {
  height: clamp(390px, 34vw, 520px);
}

#onboarding .report-card {
  left: 50%;
  right: auto;
  width: clamp(260px, 24vw, 360px);
  height: clamp(340px, 32vw, 500px);
  cursor: pointer;
  outline: 0;
  transition:
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease,
    box-shadow 300ms ease;
  will-change: transform, opacity;
}

#onboarding .report-card:focus-visible {
  box-shadow: none;
}

#onboarding .report-card:focus-visible .report-card-media {
  box-shadow:
    0 0 0 4px rgba(91, 75, 255, 0.18),
    0 18px 32px rgba(35, 30, 80, 0.18);
}

#onboarding .report-card.is-active {
  z-index: 4;
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  box-shadow: none;
}

#onboarding .report-card.is-active .report-card-media {
  box-shadow: 0 22px 42px rgba(35, 30, 80, 0.2);
}

#onboarding .report-card.is-left {
  z-index: 2;
  opacity: 0.92;
  transform: translateX(calc(-50% - clamp(188px, 21vw, 260px))) translateY(42px) scale(0.93);
}

#onboarding .report-card.is-right {
  z-index: 2;
  opacity: 0.92;
  transform: translateX(calc(-50% + clamp(188px, 21vw, 260px))) translateY(42px) scale(0.93);
}

/* 호버 효과는 마우스가 있는 기기(데스크탑)에서만 — 모바일 터치 시 카드가 튀는 문제 방지 */
@media (hover: hover) and (pointer: fine) {
  #onboarding .report-card.is-active:hover {
    transform: translateX(-50%) translateY(0) scale(1.01);
  }

  #onboarding .report-card.is-active:hover .report-card-media {
    box-shadow: 0 24px 46px rgba(35, 30, 80, 0.22);
  }

  #onboarding .report-card.is-left:hover {
    transform: translateX(calc(-50% - clamp(188px, 21vw, 260px))) translateY(42px) scale(0.94);
  }

  #onboarding .report-card.is-left:hover .report-card-media {
    box-shadow: 0 15px 28px rgba(33, 32, 46, 0.15);
  }

  #onboarding .report-card.is-right:hover {
    transform: translateX(calc(-50% + clamp(188px, 21vw, 260px))) translateY(42px) scale(0.94);
  }

  #onboarding .report-card.is-right:hover .report-card-media {
    box-shadow: 0 15px 28px rgba(33, 32, 46, 0.15);
  }
}

#onboarding .report-detail-card {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2vw, 28px);
  z-index: 6;
  width: min(760px, calc(100% - 48px));
  padding: 30px 34px 28px;
  border: 1px solid rgba(120, 110, 180, 0.12);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(30, 25, 80, 0.12);
  color: #15151d;
  text-align: center;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 300ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

#onboarding .report-detail-card::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 28px;
  height: 28px;
  border-top: 1px solid rgba(120, 110, 180, 0.12);
  border-left: 1px solid rgba(120, 110, 180, 0.12);
  border-radius: 6px 0 0;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

#onboarding .report-detail-card.is-changing {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

#onboarding .report-detail-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-bottom: 12px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2830ff, #7a3cff);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
}

#onboarding .report-detail-card[data-active-report="lite"] .report-detail-pill {
  background: linear-gradient(90deg, #8177ff, #b6a9ff);
  color: #fff;
}

#onboarding .report-detail-card[data-active-report="standard"] .report-detail-pill {
  background: linear-gradient(90deg, #2830ff, #7a3cff);
  color: #fff;
}

#onboarding .report-detail-card[data-active-report="addon"] .report-detail-pill {
  background: rgba(125, 105, 255, 0.12);
  color: #7b68ff;
}

#onboarding .report-detail-card strong,
#onboarding .report-detail-card p {
  position: relative;
  z-index: 1;
  display: block;
  word-break: keep-all;
  overflow-wrap: normal;
}

#onboarding .report-detail-card strong {
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.35;
  font-weight: 800;
}

#onboarding .report-detail-card p {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  font-weight: 500;
}

@media (min-width: 921px) {
  #onboarding .report-detail-card[data-active-report="addon"] p {
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  #onboarding .insight-report-visual {
    width: min(430px, calc(100% - 28px));
    height: auto;
    margin-top: 58px;
  }

  #onboarding .report-card-stack {
    position: relative;
    top: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: auto;
  }

  #onboarding .report-card,
  #onboarding .report-card.is-active,
  #onboarding .report-card.is-left,
  #onboarding .report-card.is-right {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 230px;
    opacity: 1;
    transform: none;
    translate: 0 0;
  }

  #onboarding .report-card.is-active {
    box-shadow: none;
  }

  #onboarding .report-card-copy {
    margin-top: 14px;
  }

  #onboarding .report-detail-card {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin: 28px auto 0;
    padding: 26px 22px 24px;
    transform: none;
  }

  #onboarding .report-detail-card.is-changing {
    transform: translateY(8px);
  }

  #onboarding .report-detail-card::before {
    top: -14px;
  }
}

/* Standalone contact page */
.contact-main {
  padding-top: var(--header);
  background: #fff;
}

.contact-hero {
  padding: clamp(92px, 8vw, 132px) 0 clamp(66px, 6vw, 94px);
  text-align: center;
}

.contact-hero h1 {
  margin: 0;
  color: var(--black);
  font-size: clamp(42px, 3.4vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.contact-hero p {
  margin: 22px 0 0;
  color: #24242a;
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.contact-form-section {
  padding: clamp(64px, 6vw, 94px) 0 clamp(92px, 8vw, 132px);
  background: #f8f7ff;
}

.contact-inquiry-form {
  width: min(100%, 1000px);
  margin: 0 auto;
}

.contact-inquiry-fields {
  display: grid;
  gap: 30px;
}

.contact-inquiry-field {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  color: var(--black);
}

.contact-inquiry-field > span:first-child {
  font-size: clamp(17px, 1.15vw, 21px);
  line-height: 1.35;
  font-weight: 700;
}

.contact-inquiry-field i {
  margin-left: 4px;
  color: var(--red);
  font-style: normal;
}

.contact-inquiry-field input,
.contact-inquiry-field select,
.contact-inquiry-field textarea {
  width: 100%;
  border: 1px solid rgba(105, 82, 235, 0.48);
  border-radius: 10px;
  background: #efedff;
  color: var(--black);
  font-family: inherit;
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 500;
  outline: 0;
}

.contact-inquiry-field input,
.contact-inquiry-field select {
  height: 64px;
}

.contact-inquiry-field input {
  padding: 0 20px;
}

.contact-inquiry-field select {
  appearance: none;
  padding: 0 58px 0 20px;
  cursor: pointer;
}

.contact-inquiry-field textarea {
  min-height: 250px;
  padding: 20px;
  line-height: 1.55;
  resize: vertical;
}

.contact-inquiry-field input::placeholder,
.contact-inquiry-field textarea::placeholder {
  color: #85858e;
}

.contact-inquiry-field input:focus,
.contact-inquiry-field select:focus,
.contact-inquiry-field textarea:focus {
  border-color: rgba(74, 28, 253, 0.7);
  box-shadow: 0 0 0 4px rgba(74, 28, 253, 0.08);
}

.contact-inquiry-field--textarea {
  align-items: start;
}

.contact-inquiry-field--textarea > span:first-child {
  padding-top: 18px;
}

.contact-inquiry-select {
  position: relative;
  display: block;
}

.contact-inquiry-select::after {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 0;
  height: 0;
  content: "";
  border-top: 12px solid #7b5cf7;
  border-right: 11px solid transparent;
  border-left: 11px solid transparent;
  transform: translateY(-35%);
  pointer-events: none;
}

.contact-inquiry-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-top: 72px;
}

.contact-inquiry-consent {
  display: grid;
  justify-items: start;
}

.contact-inquiry-consent-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--black);
  font-family: inherit;
  font-size: clamp(17px, 1.12vw, 20px);
  line-height: 1.35;
  font-weight: 700;
  cursor: pointer;
}

.contact-inquiry-consent-title span[aria-hidden="true"] {
  width: 15px;
  height: 15px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  flex: 0 0 auto;
}

.contact-inquiry-consent-title span[data-contact-i18n],
.contact-inquiry-check span[data-contact-i18n] {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: normal;
}

.contact-inquiry-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0 32px;
  color: var(--black);
  font-size: clamp(14px, 0.92vw, 16px);
  line-height: 1.4;
  font-weight: 500;
}

.contact-inquiry-check input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--blue);
}

.contact-inquiry-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 68px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4a1cfd 0%, #9a6cff 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(74, 28, 253, 0.2);
  font-family: inherit;
  font-size: clamp(20px, 1.35vw, 25px);
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 760px) {
  .contact-hero {
    padding: 72px 0 54px;
  }

  .contact-hero h1 {
    font-size: clamp(30px, 9vw, 39px);
  }

  .contact-hero p {
    font-size: 16px;
  }

  .contact-form-section {
    padding: 48px 0 72px;
  }

  .contact-inquiry-field {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .contact-inquiry-field input,
  .contact-inquiry-field select {
    height: 58px;
  }

  .contact-inquiry-field textarea {
    min-height: 210px;
  }

  .contact-inquiry-field--textarea > span:first-child {
    padding-top: 0;
  }

  .contact-inquiry-bottom {
    align-items: stretch;
    flex-direction: column;
    gap: 38px;
    margin-top: 52px;
  }

  .contact-inquiry-check {
    align-items: flex-start;
    margin-left: 0;
  }

  .contact-inquiry-submit {
    align-self: center;
    min-width: 190px;
    height: 58px;
  }
}

/* Page 2 onward: heading, emphasis, and outer-gutter consistency */
.reason-section-head h2,
.service-message-copyline,
.dashboard-process-title,
.insight-report-head h2,
.comparison-copy h2,
#platform .pricing-heading h2,
#brand-seeding .campaign-head h2,
#music-viral .music-viral-head h2,
.faq-accordion-head h2,
#free-consult .free-diagnosis-heading h2,
.contact-hero h1 {
  font-size: var(--section-heading-size);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.reason-section-head h2 span,
.service-message-copyline em,
.dashboard-process-title em,
.insight-report-head h2 em,
.comparison-copy h2 em,
#brand-seeding .campaign-head h2 span,
#music-viral .music-viral-head h2 span {
  color: transparent;
  background: var(--section-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

#platform .pricing-container,
#brand-seeding .campaign-container,
#music-viral .music-viral-container,
#free-consult .free-diagnosis-heading .container,
#free-consult .free-diagnosis-body .container {
  width: min(1120px, calc(100% - 56px));
}

@media (max-width: 760px) {
  .reason-section-head h2,
  .service-message-copyline,
  .dashboard-process-title,
  .insight-report-head h2,
  .comparison-copy h2,
  #platform .pricing-heading h2,
  #brand-seeding .campaign-head h2,
  #music-viral .music-viral-head h2,
  .faq-accordion-head h2,
  #free-consult .free-diagnosis-heading h2,
  .contact-hero h1 {
    font-size: 44px;
  }

  .comparison-copy h2 span {
    white-space: normal;
  }

  #platform .pricing-container,
  #brand-seeding .campaign-container,
  #music-viral .music-viral-container,
  #free-consult .free-diagnosis-heading .container,
  #free-consult .free-diagnosis-body .container {
    width: min(680px, calc(100% - 28px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-process-card,
  .dashboard-process-section.is-process-visible .dashboard-process-card {
    opacity: 1;
    animation: none;
    transform: translate3d(0, var(--process-card-y), 0) rotate(var(--process-card-rotate));
  }

  .onboarding-timeline.timeline-reveal-ready::before,
  .onboarding-timeline.timeline-reveal-ready.is-timeline-visible::before {
    transform: none;
    transition: none;
  }

  .onboarding-timeline.timeline-reveal-ready .onboarding-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .onboarding-timeline.timeline-reveal-ready::before,
  .onboarding-timeline.timeline-reveal-ready.is-timeline-visible::before {
    transform: translateX(-50%);
  }
}

/* Product plans: reference-aligned two-section layout */
#platform.pricing-section {
  display: block;
  padding: 0;
  background:
    radial-gradient(circle at 50% 4%, rgba(118, 94, 255, 0.19), transparent 28%),
    linear-gradient(180deg, #f7f5ff 0%, #fff 34%, #fff 100%);
}

#platform .pricing-container {
  width: min(1120px, calc(100% - 56px));
}

#platform .pricing-overview-section {
  min-height: calc(100vh - var(--header));
  padding: calc(var(--header) + 54px) 0 118px;
}

#platform .pricing-heading {
  margin-bottom: 62px;
}

#platform .pricing-heading__label {
  min-height: 46px;
  margin-bottom: 26px;
  padding: 0 27px;
  background: linear-gradient(100deg, #3f18f2 0%, #826bf5 100%);
}

#platform .pricing-heading h2 {
  font-size: clamp(42px, 3.15vw, 60px);
  font-weight: 800;
}

#platform .pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

#platform .plan-card,
#platform .addon-card {
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(38, 42, 83, 0.12);
  transition:
    transform 300ms ease,
    box-shadow 300ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #platform .plan-card:hover,
  #platform .addon-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 22px 44px rgba(38, 42, 83, 0.18);
  }
}

#platform .plan-card__header {
  min-height: 112px;
  background: linear-gradient(115deg, #6168f7 0%, #4e7ff5 56%, #43b2ef 100%);
}

#platform .plan-card--standard .plan-card__header {
  background: linear-gradient(115deg, #3b11ee 0%, #5557f5 52%, #42acf1 100%);
}

#platform .plan-features h4::before {
  color: #7165f4;
}

#platform .addon-card {
  background: #f0f2fb;
}

#platform .addon-card__body {
  gap: 14px;
  padding: 22px 20px 20px;
}

#platform .addon-item {
  grid-template-columns: 60px minmax(0, 1fr) 66px;
  gap: 12px;
  padding: 16px 14px;
}

#platform .addon-item > * + * {
  padding-left: 12px;
}

#platform .addon-item--stacked small {
  white-space: nowrap;
}

#platform .addon-item > strong {
  align-items: center;
  justify-content: center;
  padding-left: 10px;
}

#platform .pricing-comparison-section {
  min-height: calc(100vh - var(--header));
  margin-top: 0;
  padding: calc(var(--header) + 72px) 0 116px;
}

#platform .plan-comparison > h3 {
  margin-bottom: 52px;
  font-size: clamp(34px, 2.6vw, 46px);
  font-weight: 800;
}

#platform .plan-comparison__scroll {
  border-color: #daddE8;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(38, 42, 83, 0.1);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#platform .plan-comparison__table {
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 14px;
}

#platform .plan-comparison__table th,
#platform .plan-comparison__table td {
  height: 62px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid #edf0f6;
}

#platform .plan-comparison__table thead th {
  height: 72px;
  border-bottom-color: #e6e8f2;
  font-size: 15px;
}

#platform .plan-comparison__table th:first-child {
  border-right: 1px solid #e3e5f0;
}

#platform .plan-comparison__table thead th:nth-child(3),
#platform .plan-comparison__table tbody td:nth-last-child(2) {
  border-left: 1px solid #e3e5f0;
}

#platform .plan-comparison__table thead th:nth-child(4),
#platform .plan-comparison__table tbody td:last-child {
  border-left: 1px solid #e3e5f0;
}

#platform .plan-comparison__table tbody tr:has(> th) > * {
  border-top: 1px solid #e6e8f2;
}

#platform .plan-comparison__table tbody tr:first-child:has(> th) > * {
  border-top: 0;
}

#platform .plan-comparison__table tbody tr:last-child > * {
  border-bottom: 0;
}

#platform .plan-comparison__table thead th small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 650;
}

#platform .plan-comparison__table th:first-child {
  color: #6a62ed;
  text-align: center;
  font-size: 16px;
  font-weight: 780;
}

#platform .comparison-col-category {
  width: 20%;
}

#platform .comparison-col-detail {
  width: 56%;
}

#platform .comparison-col-lite,
#platform .comparison-col-standard {
  width: 12%;
}

#platform .plan-comparison__table thead th:nth-child(2) {
  text-align: left;
}

#platform .plan-comparison__table tbody td:first-of-type {
  color: #292932;
  text-align: left;
  font-weight: 520;
}

#platform .plan-comparison__table tbody td:nth-last-child(2) {
  background: #f6f6ff;
}

#platform .plan-comparison__table .is-lite {
  color: #625ff0;
  background: #f1f2ff;
}

#platform .plan-comparison__table .is-standard {
  color: #264de8;
  background: #e9efff;
}

#platform .plan-comparison__table tbody td.is-standard {
  border-bottom-color: rgba(80, 70, 255, 0.17);
}

#platform .plan-comparison__table tbody tr.comparison-highlight > th,
#platform .plan-comparison__table tbody tr.comparison-highlight > td {
  background: rgba(91, 88, 255, 0.045);
}

#platform .plan-comparison__table tbody tr.comparison-highlight > td:nth-last-child(2) {
  background: rgba(91, 88, 255, 0.085);
}

#platform .plan-comparison__table tbody tr.comparison-highlight > td.is-standard {
  background: rgba(70, 115, 255, 0.16);
}

#platform .plan-comparison__table tbody tr.comparison-highlight > th {
  background: #fff;
}

#platform .plan-comparison__table tbody tr.comparison-highlight > td:nth-last-child(2) {
  border-top-color: rgba(95, 110, 180, 0.16);
  border-bottom-color: rgba(95, 110, 180, 0.16);
}

#platform .plan-comparison__table tbody th[scope="row"] {
  color: #6a62ed;
  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  font-weight: 780;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  #platform .plan-comparison__table tbody tr {
    position: relative;
    z-index: 0;
  }

  #platform .plan-comparison__table tbody tr > td {
    transform: scale(1);
    transform-origin: center;
    transition:
      transform 0.25s ease,
      filter 0.25s ease,
      box-shadow 0.25s ease;
  }

  #platform .plan-comparison__table tbody tr:hover {
    z-index: 2;
  }

  #platform .plan-comparison__table tbody tr:hover > td {
    transform: scale(1.018);
    filter: brightness(1.015);
    box-shadow: 0 8px 24px rgba(68, 55, 244, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #platform .plan-comparison__table tbody tr > td {
    transition: none;
  }
}

#platform .comparison-check {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #716af3, #3154ec);
  color: #fff;
  box-shadow: 0 4px 10px rgba(55, 68, 225, 0.22);
  font-size: 17px;
  font-weight: 800;
}

#platform .comparison-x {
  color: #999aa3;
  font-size: 34px;
  line-height: 1;
  font-weight: 300;
}

#platform .plan-comparison-scroll-hint {
  display: none;
}

@media (max-width: 760px) {
  #platform .plan-comparison-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #625ff0;
    font-size: 13px;
    font-weight: 700;
    animation: comparisonScrollHintPulse 1.6s ease-in-out infinite;
  }

  #platform .plan-comparison-scroll-hint-arrow {
    display: inline-block;
  }

  #platform .plan-comparison-scroll-hint-arrow:first-child {
    animation: comparisonScrollHintArrowLeft 1.6s ease-in-out infinite;
  }

  #platform .plan-comparison-scroll-hint-arrow:last-child {
    animation: comparisonScrollHintArrowRight 1.6s ease-in-out infinite;
  }

  #platform .plan-comparison__scroll {
    position: relative;
  }

  #platform .plan-comparison__scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #platform .plan-comparison-scroll-hint,
  #platform .plan-comparison-scroll-hint-arrow:first-child,
  #platform .plan-comparison-scroll-hint-arrow:last-child {
    animation: none;
  }
}

@keyframes comparisonScrollHintPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes comparisonScrollHintArrowLeft {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

@keyframes comparisonScrollHintArrowRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}


#platform .pricing-cta {
  margin-top: 64px;
  margin-bottom: 100px;
  padding: 36px 52px;
  background: linear-gradient(105deg, #2d12f3 0%, #7035f4 50%, #a257e8 100%);
  border-radius: 28px;
  box-shadow: 0 18px 38px rgba(82, 49, 222, 0.18);
}

@media (max-width: 1180px) {
  #platform .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #platform .addon-card {
    grid-column: 1 / -1;
  }

  #platform .addon-card__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #platform .pricing-container {
    width: min(680px, calc(100% - 28px));
  }

  #platform .pricing-overview-section {
    min-height: 0;
    padding: calc(var(--header) + 46px) 0 76px;
  }

  #platform .pricing-heading {
    margin-bottom: 38px;
  }

  #platform .pricing-heading h2 {
    font-size: 34px;
  }

  #platform .pricing-grid,
  #platform .addon-card__body {
    grid-template-columns: 1fr;
  }

  #platform .addon-card {
    grid-column: auto;
  }

  #platform .pricing-comparison-section {
    min-height: 0;
    padding: calc(var(--header) + 38px) 0 78px;
  }

  #platform .plan-comparison > h3 {
    margin-bottom: 34px;
    font-size: 29px;
  }

  #platform .plan-comparison__scroll {
    border-radius: 17px;
  }

  #platform .pricing-cta {
    padding: 30px 26px;
  }
}

@media (max-width: 430px) {
  #platform .addon-item {
    grid-template-columns: 56px minmax(0, 1fr) 62px;
    padding-right: 10px;
    padding-left: 10px;
  }

  #platform .addon-item > * + * {
    padding-left: 9px;
  }
}

/* Product plan card internals: reference rebuild */
#platform .pricing-grid {
  gap: 26px;
}

#platform .plan-card,
#platform .addon-card {
  position: relative;
  overflow: visible;
  border: 1px solid rgba(93, 94, 120, 0.24);
  border-radius: 23px;
  box-shadow: 0 5px 15px rgba(31, 35, 65, 0.16);
  font-family: "Pretendard", sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#platform .plan-card {
  padding: 20px;
}

#platform .plan-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 10px 15px;
  border-radius: 17px;
  box-shadow: 0 7px 12px rgba(52, 45, 180, 0.22);
}

#platform .plan-card--lite .plan-card__header {
  background: linear-gradient(105deg, #6875f5 0%, #8897f8 54%, #c5a7ff 100%);
}

#platform .plan-card--standard .plan-card__header {
  background: linear-gradient(105deg, #1e18f4 0%, #5146f8 55%, #974dff 100%);
}

#platform .plan-card__header img {
  width: 55px;
  height: 55px;
  flex: 0 0 55px;
  object-fit: contain;
}

#platform .plan-card__header h3 {
  font-size: 25px;
  line-height: 1.08;
  font-weight: 800;
}

#platform .plan-card__header p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}

#platform .plan-card__body {
  padding: 17px 0 0;
}

#platform .plan-price {
  min-height: 68px;
  padding: 0 4px 10px;
  border-bottom-color: #b9bac3;
}

#platform .plan-price span {
  margin-right: 8px;
  color: #92929a;
  font-size: 14px;
  font-weight: 600;
}

#platform .plan-price strong {
  color: #4f43ff;
  background: linear-gradient(105deg, #8f7bff 0%, #2f35ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 66px;
  line-height: 0.9;
  font-weight: 800;
  -webkit-text-fill-color: transparent;
}

#platform .plan-card--standard .plan-price strong {
  color: #3b36ff;
  background-image: linear-gradient(105deg, #8f7bff 0%, #2f35ff 100%);
}

#platform .plan-price b {
  margin-left: 7px;
  color: #5d4ff4;
  font-size: 18px;
  font-weight: 700;
}

#platform .plan-standard {
  gap: 9px;
  padding: 12px 0;
}

#platform .plan-standard span {
  padding: 6px 12px;
  background: linear-gradient(90deg, #6f72f5, #a77ef9);
  font-size: 12px;
  font-weight: 700;
}

#platform .plan-card--standard .plan-standard span {
  background: linear-gradient(90deg, #3225f3, #7657f7);
}

#platform .plan-standard b {
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

#platform .plan-includes {
  margin: -1px 0 16px;
  padding: 7px 10px;
  color: #292930;
  background: #eeebff;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
}

#platform .plan-includes strong,
#platform .plan-includes em {
  color: #6f6bf7;
  font-style: normal;
  font-weight: 800;
}

#platform .plan-includes em {
  color: #3459ee;
}

#platform .plan-features {
  gap: 22px;
}

#platform .plan-card--lite .plan-features {
  padding-bottom: 0;
}

#platform .plan-features h4 {
  margin-bottom: 6px;
  padding-left: 20px;
  color: #292930;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}

#platform .plan-features h4::before {
  top: -1px;
  color: #716cf7;
  font-size: 18px;
}

#platform .plan-features ul {
  padding-left: 20px;
}

#platform .plan-features li {
  margin-top: 3px;
  padding-left: 9px;
  color: #686872;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 450;
}

body.is-ja #platform .plan-card {
  overflow: hidden;
}

body.is-ja #platform .plan-card__header p,
body.is-ja #platform .plan-standard b,
body.is-ja #platform .plan-includes,
body.is-ja #platform .plan-features h4,
body.is-ja #platform .plan-features li {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

#platform .addon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: 18px;
  border-color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(180deg, #aaa8fa 0%, #f7f4ff 100%);
  box-shadow:
    0 6px 18px rgba(31, 35, 65, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

#platform .addon-card__header {
  min-height: 78px;
  padding: 12px 17px;
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 6px 13px rgba(41, 42, 78, 0.16);
}

#platform .addon-card__header h3 {
  font-size: 25px;
  font-weight: 800;
}

#platform .addon-card__header h3 small {
  font-size: 11px;
  font-weight: 500;
}

#platform .addon-card__header p {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 650;
}

#platform .addon-card__body {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 13px;
  padding: 17px 0 0;
}

#platform .addon-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(245, 243, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 3px 9px rgba(49, 48, 91, 0.05);
}

html[lang="en"] #platform .addon-item,
body.is-en #platform .addon-item {
  grid-template-columns: 78px minmax(0, 1fr);
}

#platform .addon-item > * + * {
  padding-left: 10px;
  border-left: 1px solid #d7d7e6;
}

#platform .addon-item h4 {
  font-size: 12.5px;
  line-height: 1.18;
  font-weight: 750;
}

html[lang="en"] #platform .addon-item h4,
body.is-en #platform .addon-item h4 {
  font-size: 11.5px;
  line-height: 1.15;
}

#platform .addon-item__details {
  display: grid;
  align-self: stretch;
}

#platform .addon-item__details > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 28px;
  padding-right: 14px;
}

#platform .addon-item__details > div + div {
  border-top: 1px dashed #d7d7e6;
}

#platform .addon-item b {
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 650;
  white-space: nowrap;
}

#platform .addon-item small {
  color: #696975;
  font-size: 8.5px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

#platform .addon-item--content .addon-item__details > div {
  justify-content: flex-start;
  gap: 4px;
}

#platform .addon-item--report .addon-item__details {
  align-items: center;
}

#platform .addon-item--report .addon-item__details > div {
  min-height: 100%;
}

#platform .plan-badge {
  display: inline-grid;
  min-width: 45px;
  min-height: 14px;
  padding: 0 6px;
  place-items: center;
  color: #fff;
  background: linear-gradient(100deg, #a58aff 0%, #6559f7 100%);
  border-radius: 999px;
  font-size: 7.5px;
  line-height: 1;
  font-weight: 650;
}

#platform .plan-badge--standard {
  background: linear-gradient(100deg, #704df6 0%, #3138f4 100%);
}

#platform .addon-app-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

html[lang="en"] #platform .addon-app-label,
body.is-en #platform .addon-app-label {
  max-width: 180px;
  white-space: normal;
  line-height: 1.15;
}

html[lang="en"] #platform .addon-app-text,
body.is-en #platform .addon-app-text {
  display: inline-block;
  white-space: nowrap;
}

#platform .addon-app-icons {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
}

#platform .addon-app-icons img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

#platform .addon-item > strong {
  display: grid;
  align-self: stretch;
  padding-left: 8px;
  place-items: center;
  color: #4e4e59;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
}

#platform .addon-item > strong span {
  height: 100%;
}

#platform .addon-item--double > strong span + span {
  border-top: 1px dashed #d7d7e6;
}

#platform .addon-item > strong em {
  color: #3569ec;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  #platform .plan-card:hover,
  #platform .addon-card:hover {
    transform: scale(1.018);
    box-shadow: 0 17px 31px rgba(38, 42, 83, 0.2);
  }
}

@media (max-width: 760px) {
  #platform .plan-card,
  #platform .addon-card {
    padding: 16px;
  }

  #platform .addon-card__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  #platform .plan-card__header {
    padding-right: 12px;
    padding-left: 12px;
  }

  #platform .plan-card__header img {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  #platform .plan-card__header h3,
  #platform .addon-card__header h3 {
    font-size: 22px;
  }

  #platform .addon-item {
    grid-template-columns: 48px minmax(0, 1fr);
    padding-right: 8px;
    padding-left: 8px;
  }

  html[lang="en"] #platform .addon-item,
  body.is-en #platform .addon-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  #platform .addon-app-icons {
    gap: 1px;
  }

  #platform .addon-app-icons img {
    width: 10px;
    height: 10px;
  }
}




#onboarding .insight-report-container {
  max-width: 1180px;
}

#onboarding .report-tier-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  text-align: left;
}

#onboarding .report-tier-row + .report-tier-row {
  margin-top: clamp(64px, 6vw, 96px);
}

#onboarding .insight-report-head + .report-tier-row {
  margin-top: clamp(70px, 6vw, 96px);
}

#onboarding .report-tier-row--reverse {
  grid-template-columns: 1fr 1.1fr;
}

#onboarding .report-tier-row--reverse .report-tier-content {
  order: -1;
}

#onboarding .report-tier-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#onboarding .report-tier-eyebrow {
  font-size: 15px;
  font-weight: 700;
  color: #6b6f85;
  letter-spacing: -0.01em;
}

#onboarding .report-tier-eyebrow em {
  font-style: normal;
  font-weight: 800;
  margin-left: 6px;
  color: transparent;
  background: var(--section-heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

#onboarding .report-tier-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  color: #fff;
}

#onboarding .report-tier-badge--lite {
  background: linear-gradient(100deg, #a58aff 0%, #6559f7 100%);
}

#onboarding .report-tier-badge--standard {
  background: linear-gradient(100deg, #421af2 0%, #8275f5 100%);
}

#onboarding .report-tier-badge--addon {
  background: linear-gradient(105deg, #7035f4 0%, #a760ec 100%);
}

#onboarding .report-tier-content h3 {
  margin: 0;
  color: var(--black);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.03em;
  font-weight: 800;
}

#onboarding .report-tier-content p {
  margin: 0;
  color: #55565f;
  font-size: 15.5px;
  line-height: 1.65;
  font-weight: 450;
  word-break: keep-all;
}

/* ── 디바이스(브라우저 창) 목업 ── */
#onboarding .device-mockup {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

#onboarding .device-mockup__bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: linear-gradient(115deg, var(--brand-purple) 0%, var(--blue-soft) 100%);
}

#onboarding .device-mockup__bar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

#onboarding .dot--red { background: #ff5f57; }
#onboarding .dot--yellow { background: #febc2e; }
#onboarding .dot--green { background: #28c840; }

#onboarding .device-mockup__body {
  padding: 22px 24px 26px;
  font-size: 12px;
}

#onboarding .mockup-brand {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand-purple);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

#onboarding .mockup-meta {
  font-size: 10.5px;
  color: #9195a8;
  margin: 3px 0 10px;
}

#onboarding .mockup-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

#onboarding .mockup-title-row strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--black);
}

#onboarding .mockup-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--brand-purple);
  background: var(--lavender);
  padding: 3px 9px;
  border-radius: 10px;
}

#onboarding .mockup-platform-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 10.5px;
  color: #62667a;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}

#onboarding .mockup-pills-note {
  margin-left: auto;
  color: #9195a8;
}

#onboarding .mockup-subhead {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 10px;
}

#onboarding .mockup-two-col,
#onboarding .mockup-summary-two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}

#onboarding .mockup-observations {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#onboarding .obs-card {
  background: var(--pale);
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 3px solid #ccc;
}

#onboarding .obs-card b {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 3px;
}

#onboarding .obs-card p {
  font-size: 10.5px;
  line-height: 1.5;
  color: #75798c;
}

#onboarding .obs-card--pink { border-color: #ec4899; }
#onboarding .obs-card--amber { border-color: #f5a524; }
#onboarding .obs-card--purple { border-color: var(--blue-soft); }

#onboarding .mockup-action-box {
  background: var(--lavender);
  border-radius: 12px;
  padding: 14px 16px;
}

#onboarding .mockup-action-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#onboarding .mockup-action-box li {
  font-size: 10.5px;
  line-height: 1.5;
  color: #45415f;
  padding-left: 18px;
  position: relative;
}

#onboarding .mockup-action-box li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand-purple);
  font-weight: 800;
}

#onboarding .mockup-ai-box {
  background: linear-gradient(135deg, var(--brand-purple), var(--blue-soft));
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
}

#onboarding .mockup-ai-box b {
  display: block;
  font-size: 11.5px;
  margin-bottom: 5px;
}

#onboarding .mockup-ai-box p {
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

#onboarding .mockup-stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

#onboarding .stat-card {
  background: var(--pale);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}

#onboarding .stat-card b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-purple);
}

#onboarding .stat-card b em {
  font-style: normal;
  font-size: 10px;
  margin-left: 1px;
}

#onboarding .stat-card span {
  font-size: 9px;
  color: #9195a8;
}

#onboarding .mockup-scope-table {
  background: var(--pale);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

#onboarding .mockup-scope-table > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--line);
}

#onboarding .mockup-scope-table > div:first-of-type { border-top: none; }
#onboarding .mockup-scope-table b { color: var(--black); white-space: nowrap; }
#onboarding .mockup-scope-table span { color: #9195a8; text-align: right; }

#onboarding .mockup-rank-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

#onboarding .mockup-rank-note { font-size: 9.5px; color: #9195a8; }

#onboarding .mockup-rank-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

#onboarding .rank-card {
  background: var(--pale);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}

#onboarding .rank-card b {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #62667a;
  margin-bottom: 4px;
}

#onboarding .rank-card strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
}

#onboarding .rank-card span {
  display: block;
  font-size: 8px;
  color: #9195a8;
  margin-top: 2px;
}

#onboarding .rank-card--active {
  background: linear-gradient(135deg, var(--brand-purple), var(--blue-soft));
}

#onboarding .rank-card--active b,
#onboarding .rank-card--active strong,
#onboarding .rank-card--active span {
  color: #fff;
}

#onboarding .rank-card--active b em {
  font-style: normal;
  color: #baffd6;
}

/* ── 반응형 ── */
@media (max-width: 920px) {
  #onboarding .report-tier-row,
  #onboarding .report-tier-row--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  #onboarding .report-tier-row--reverse .report-tier-content {
    order: 0;
  }

  #onboarding .mockup-two-col,
  #onboarding .mockup-summary-two-col {
    grid-template-columns: 1fr;
  }

  #onboarding .mockup-stat-row {
    grid-template-columns: repeat(3, 1fr);
  }

  #onboarding .mockup-rank-row {
    grid-template-columns: repeat(2, 1fr);
  }

  #onboarding .report-tier-row + .report-tier-row {
    margin-top: 52px;
  }
}


#onboarding .insight-report-head {
  text-align: center;
}