/* Tailwind preflight 를 걷어내면서 사라진 이미지 리셋. 없으면 마크업의 height 속성이
   그대로 적용돼 원본 비율이 깨진다. 아래의 개별 규칙이 필요하면 다시 덮어쓴다. */
img,
video {
  height: auto;
}

:root {
  --blue: #3185ff;
  --blue-deep: #1769d8;
  --cyan: #00afd8;
  --cyan-soft: #e5f8fc;
  --ink: #111827;
  --muted: #667085;
  --soft: #f6f9ff;
  --cool: #edf4ff;
  --line: #dce7f7;
  --white: #ffffff;
  --kakao-yellow: #fee500;
  --kakao-ink: #191919;
  --error: #ff334d;
  --editor-surface: #f7f8fa;
  --editor-border: #ebedf1;
  --editor-secondary: #686d73;
  --editor-green: #00d28c;
  --editor-yellow: #f5b800;
  --editor-orange: #ff731c;
  --max: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--white);
  color-scheme: light;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 1000;
  transform: translateY(-150%);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  min-height: 100vh;
  background: var(--white);
}

.floating-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 50%;
  width: min(calc(100% - 48px), var(--max));
  min-height: 66px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 10px 16px 10px 24px;
  border: 1px solid rgba(220, 231, 247, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 50px rgba(31, 89, 165, 0.12);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  letter-spacing: -0.04em;
}

.brand .brand-logo {
  width: 112px;
  height: auto;
  object-fit: contain;
}

.brand strong {
  font-size: 20px;
  font-weight: 800;
}

.floating-header nav {
  display: flex;
  justify-content: center;
  gap: clamp(15px, 2vw, 28px);
}

.floating-header nav a,
.login-link {
  position: relative;
  color: #354052;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.floating-header nav a::after,
.login-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 2px;
  background: var(--blue);
  transition: right 180ms ease;
}

.floating-header nav a:hover::after,
.floating-header nav a:focus-visible::after,
.login-link:hover::after,
.login-link:focus-visible::after {
  right: 0;
}

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

.mobile-login-link,
.nav-login-link {
  display: none;
}

.start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 46px;
  border: 0;
  padding: 0 19px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(49, 133, 255, 0.25);
  transition: transform 180ms ease, background-color 180ms ease;
}

.start-button span:last-child {
  transition: transform 180ms ease;
}

.start-button:hover,
.start-button:focus-visible {
  transform: translateY(-2px);
  background: var(--blue-deep);
}

.start-button:hover span:last-child,
.start-button:focus-visible span:last-child {
  transform: translate(2px, -2px);
}

.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
}

.mobile-start-bar {
  display: none;
}

.start-modal-backdrop {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 16, 30, 0.72);
  backdrop-filter: blur(14px);
  animation: modal-fade-in 180ms ease-out;
}

.start-modal {
  position: relative;
  width: min(100%, 620px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 38px 42px 42px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--white);
  box-shadow: 0 38px 100px rgba(7, 28, 61, 0.32);
  animation: modal-rise-in 220ms ease-out;
}

.start-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.start-modal-close:hover,
.start-modal-close:focus-visible {
  color: var(--ink);
  background: var(--cool);
  transform: rotate(5deg);
}

.start-modal-header {
  margin-bottom: 34px;
  padding: 0 48px 22px;
  border-bottom: 1px solid var(--line);
}

.start-modal-branding {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.start-modal-logo {
  width: 96px;
  height: auto;
}

.start-modal-heading {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
}

.start-modal-copy {
  margin-bottom: 30px;
  text-align: center;
}

.start-modal-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.05em;
  word-break: keep-all;
}

.start-modal-copy p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.start-modal-form label {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
}

.start-modal-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 28px;
  align-items: center;
  min-height: 62px;
  padding: 0 16px 0 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.start-modal-input:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--cool);
}

.start-modal-input.has-error {
  border-color: var(--error);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 10%, transparent);
}

.start-modal-input > span:first-child {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.start-modal-input input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0 4px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
}

.start-modal-input input::placeholder {
  color: #a9b4c6;
}

.start-modal-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
}

.start-modal-help {
  min-height: 20px;
  margin: 8px 2px 24px;
  color: var(--muted);
  font-size: 12px;
}

.start-modal-help.has-error {
  color: var(--error);
  font-weight: 700;
}

.start-modal-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 15px;
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.start-modal-next:hover:not(:disabled),
.start-modal-next:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  background: var(--blue-deep);
}

.start-modal-next:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.start-modal-confirm {
  text-align: center;
}

.start-modal-complete-mark {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 4px auto 22px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 30px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(49, 133, 255, 0.25);
}

.start-modal-address {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  margin: 4px 0 26px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--soft);
  color: var(--ink);
  font-size: 21px;
}

.start-modal-address span {
  font-weight: 750;
}

.start-modal-address strong {
  color: var(--blue);
}

.start-modal-actions {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 10px;
}

.start-modal-back,
.start-modal-kakao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

.start-modal-back {
  background: var(--soft);
  color: var(--muted);
}

.start-modal-kakao {
  background: var(--kakao-yellow);
  color: var(--kakao-ink);
}

.start-modal-back:hover,
.start-modal-back:focus-visible,
.start-modal-kakao:hover,
.start-modal-kakao:focus-visible {
  transform: translateY(-2px);
  filter: brightness(0.98);
}

.start-modal-terms {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.start-modal-terms a {
  color: inherit;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-thickness 160ms ease;
}

.start-modal-terms a:hover,
.start-modal-terms a:focus-visible {
  color: var(--blue-deep);
  text-decoration-thickness: 2px;
}

.start-modal-auth-message {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cool);
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 700;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-rise-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-section {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(500px, 1fr);
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  width: min(calc(100% - 48px), var(--max));
  min-height: max(790px, 100svh);
  margin: 0 auto;
  padding: 104px 0 40px;
}

.hero-section::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--blue) 28%, transparent) 0%,
      color-mix(in srgb, var(--blue) 13%, transparent) 36%,
      transparent 68%
    ),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--cyan) 25%, transparent) 0%,
      color-mix(in srgb, var(--cyan) 11%, transparent) 38%,
      transparent 70%
    ),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--blue) 9%, var(--cool)) 0%,
      transparent 66%
    ),
    var(--white);
  background-position:
    -24vw 8%,
    78vw 22%,
    38vw 92%,
    center;
  background-repeat: no-repeat;
  background-size:
    74vw 74vw,
    68vw 68vw,
    72vw 52vw,
    100% 100%;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
  animation: hero-gradient-drift 16s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes hero-gradient-drift {
  0% {
    background-position:
      -24vw 8%,
      78vw 22%,
      38vw 92%,
      center;
  }
  50% {
    background-position:
      -8vw 28%,
      60vw 8%,
      24vw 72%,
      center;
  }
  100% {
    background-position:
      5vw 4%,
      48vw 38%,
      46vw 82%,
      center;
  }
}

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

.hero-copy h1,
.section-copy h2,
.center-heading h2,
.crm-copy h2,
.message-heading h2,
.pricing-heading h2,
.final-content h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.065em;
  word-break: keep-all;
}

.hero-copy h1 {
  font-size: clamp(48px, 4.8vw, 66px);
}

.hero-copy h1 em {
  color: var(--blue);
  font-style: normal;
}

.hero-copy > p {
  margin: 24px 0 28px;
  color: var(--muted);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.75;
  letter-spacing: -0.02em;
}

.handle-wrap {
  max-width: 610px;
}

.hero-copy > .handle-wrap {
  max-width: 520px;
}

.handle-form {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  min-height: 67px;
  padding: 8px 8px 8px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 18px 50px rgba(31, 89, 165, 0.12);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.handle-form:focus-within {
  border-color: var(--blue);
  box-shadow: 0 18px 50px rgba(49, 133, 255, 0.18);
}

.handle-prefix {
  color: #344054;
  font-size: 16px;
  font-weight: 700;
}

.handle-form input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

.handle-form input::placeholder {
  color: #a9b4c6;
}

.handle-form button {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 51px;
  border: 0;
  border-radius: 13px;
  padding: 0 18px;
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}

.handle-form button:hover,
.handle-form button:focus-visible {
  background: var(--blue-deep);
  transform: translateX(2px);
}

.handle-form button:active {
  transform: scale(0.98);
}

.form-note {
  min-height: 20px;
  margin: 8px 4px 0;
  color: #7b8799;
  font-size: 12px;
}

.hero-visual-wrap {
  position: relative;
  z-index: 1;
  min-height: 610px;
}

.hero-visual {
  position: absolute;
  z-index: 2;
  top: 7%;
  right: 0;
  left: 0;
  display: grid;
  gap: 0;
  filter: drop-shadow(0 34px 35px rgba(48, 84, 132, 0.16));
}

.hero-showcase-stage {
  position: relative;
  width: 90%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--soft);
  box-shadow:
    0 24px 54px color-mix(in srgb, var(--blue-deep) 12%, transparent),
    0 5px 16px color-mix(in srgb, var(--blue-deep) 8%, transparent);
}

.hero-showcase-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translate3d(24px, 0, 0) scale(0.985);
  transition:
    opacity 420ms ease,
    transform 560ms cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
}

.hero-showcase-slide.is-active {
  z-index: 1;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hero-showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 29px;
  transform: scale(0.94);
  transform-origin: center;
}

.hero-migration-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) 58px minmax(0, 1.08fr);
  align-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 34%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 38%),
    var(--soft);
}

.hero-migration-source,
.hero-migration-result {
  position: relative;
  min-width: 0;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--blue-deep) 11%, transparent),
    0 3px 10px color-mix(in srgb, var(--blue-deep) 7%, transparent);
}

.hero-migration-step {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 750;
}

.hero-migration-input {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 0 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 800;
}

.hero-migration-input svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-right: 8px;
  color: var(--blue);
}

.hero-migration-typed {
  display: inline-block;
  overflow: hidden;
  width: 0;
  white-space: nowrap;
  animation: hero-migration-type 7.2s steps(17, end) infinite;
}

.hero-migration-input i {
  width: 1px;
  height: 17px;
  flex: 0 0 1px;
  background: var(--blue);
  animation: hero-migration-caret 0.7s steps(1, end) infinite;
}

.hero-migration-button {
  display: grid;
  min-height: 42px;
  margin-top: 10px;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: var(--blue);
  box-shadow: 0 9px 20px color-mix(in srgb, var(--blue) 22%, transparent);
  color: var(--white);
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 800;
  animation: hero-migration-button 7.2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

.hero-migration-button span {
  grid-area: 1 / 1;
}

.hero-migration-button span:first-child {
  animation: hero-migration-button-label 7.2s ease infinite;
}

.hero-migration-button span:last-child {
  opacity: 0;
  animation: hero-migration-loading-label 7.2s ease infinite;
}

.hero-migration-skeleton {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.hero-migration-skeleton i {
  height: 24px;
  border-radius: 8px;
  background: var(--cool);
  animation: hero-migration-skeleton 7.2s ease infinite;
}

.hero-migration-transfer {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--blue);
}

.hero-migration-transfer svg {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--blue) 24%, transparent));
  animation: hero-migration-arrow 7.2s ease-in-out infinite;
}

.hero-migration-transfer span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0;
  animation: hero-migration-particle 7.2s ease-in-out infinite;
}

.hero-migration-transfer span:nth-child(2) {
  animation-delay: 0.16s;
}

.hero-migration-transfer span:nth-child(3) {
  animation-delay: 0.32s;
}

.hero-migration-result {
  opacity: 0.42;
  transform: translateX(10px) scale(0.98);
  animation: hero-migration-result 7.2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

.hero-migration-result header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

.hero-migration-result header img {
  width: clamp(70px, 7vw, 102px);
  height: auto;
  border-radius: 0;
  transform: none;
}

.hero-migration-result header span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 800;
  opacity: 0;
  animation: hero-migration-complete 7.2s ease infinite;
}

.hero-migration-result header svg {
  width: 15px;
  height: 15px;
}

.hero-migration-result > strong {
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: clamp(14px, 1.35vw, 19px);
}

.hero-migration-links {
  display: grid;
  gap: 7px;
}

.hero-migration-links span {
  display: flex;
  align-items: center;
  min-height: 36px;
  gap: 9px;
  padding: 6px 9px;
  border-radius: 10px;
  background: var(--soft);
  color: var(--muted);
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 700;
  opacity: 0;
  transform: translateY(6px);
  animation: hero-migration-link-in 7.2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

.hero-migration-links span:nth-child(2) {
  animation-delay: 0.1s;
}

.hero-migration-links span:nth-child(3) {
  animation-delay: 0.2s;
}

.hero-migration-links i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: var(--white);
  color: var(--blue);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.hero-migration-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  margin-top: 12px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--white);
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 800;
  opacity: 0;
  transform: translateY(7px);
  animation: hero-migration-edit-in 7.2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

.hero-migration-edit svg {
  width: 16px;
  height: 16px;
}

@keyframes hero-migration-type {
  0%, 8% { width: 0; }
  32%, 92% { width: 9.8em; }
  100% { width: 0; }
}

@keyframes hero-migration-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes hero-migration-button {
  0%, 32%, 42%, 100% { transform: scale(1); }
  36% { transform: scale(0.96); }
}

@keyframes hero-migration-button-label {
  0%, 35% { opacity: 1; transform: translateY(0); }
  41%, 88% { opacity: 0; transform: translateY(-7px); }
  96%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes hero-migration-loading-label {
  0%, 37% { opacity: 0; transform: translateY(7px); }
  43%, 56% { opacity: 1; transform: translateY(0); }
  62%, 100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes hero-migration-skeleton {
  0%, 38%, 100% { opacity: 1; transform: scaleX(1); transform-origin: left; }
  48% { opacity: 0.42; transform: scaleX(0.9); }
}

@keyframes hero-migration-arrow {
  0%, 40%, 62%, 100% { transform: translateX(0); }
  51% { transform: translateX(7px); }
}

@keyframes hero-migration-particle {
  0%, 40% { opacity: 0; transform: translateX(-16px) scale(0.5); }
  47% { opacity: 1; }
  61% { opacity: 0; transform: translateX(22px) scale(1); }
  100% { opacity: 0; }
}

@keyframes hero-migration-result {
  0%, 48% { opacity: 0.42; transform: translateX(10px) scale(0.98); }
  60%, 92% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0.42; transform: translateX(10px) scale(0.98); }
}

@keyframes hero-migration-link-in {
  0%, 54% { opacity: 0; transform: translateY(6px); }
  66%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(3px); }
}

@keyframes hero-migration-complete {
  0%, 60% { opacity: 0; transform: scale(0.25); filter: blur(4px); }
  70%, 92% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.8); }
}

@keyframes hero-migration-edit-in {
  0%, 67% { opacity: 0; transform: translateY(7px); }
  77%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(3px); }
}

.hero-migration-static {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 34%),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 38%),
    var(--soft);
}

.hero-migration-dashboard {
  width: min(92%, 610px);
  transform: translateY(-4%);
  padding: clamp(20px, 2.3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow:
    0 24px 54px color-mix(in srgb, var(--blue-deep) 13%, transparent),
    0 4px 14px color-mix(in srgb, var(--blue-deep) 7%, transparent);
}

.hero-migration-dashboard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.hero-migration-dashboard > header img {
  width: clamp(86px, 8vw, 118px);
  height: auto;
  border-radius: 0;
  transform: none;
}

.hero-migration-dashboard > header span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--cool);
  color: var(--blue);
  font-size: clamp(10px, 0.9vw, 12px);
  font-weight: 800;
}

.hero-migration-dashboard > header svg {
  width: 15px;
  height: 15px;
}

.hero-migration-dashboard-body {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(14px, 2vw, 24px);
  padding: 20px 0;
}

.hero-migration-dashboard-body aside {
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  background: var(--soft);
}

.hero-migration-dashboard-body aside > span {
  color: var(--muted);
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 750;
}

.hero-migration-dashboard-body aside > strong {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(10px, 1vw, 13px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-migration-dashboard-body aside > strong svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--blue);
}

.hero-migration-dashboard-body aside p {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(9px, 0.8vw, 11px);
  line-height: 1.55;
}

.hero-migration-dashboard-body aside p b {
  margin-right: 2px;
  color: var(--blue);
  font-size: 1.35em;
}

.hero-migration-imported {
  display: grid;
  gap: 7px;
}

.hero-migration-imported > strong {
  margin-bottom: 1px;
  color: var(--ink);
  font-size: clamp(10px, 0.9vw, 12px);
}

.hero-migration-imported > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
}

.hero-migration-imported i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: var(--cool);
  color: var(--blue);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

.hero-migration-imported b {
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(9px, 0.8vw, 11px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-migration-imported small {
  color: var(--muted);
  font-size: clamp(8px, 0.7vw, 10px);
  white-space: nowrap;
}

.hero-migration-dashboard .hero-migration-edit {
  min-height: 42px;
  margin-top: 0;
  opacity: 1;
  transform: none;
  animation: none;
}

.hero-showcase-tabs {
  position: relative;
  z-index: 5;
  width: 84%;
  margin: -2px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--white) 91%, transparent);
  box-shadow: 0 16px 34px rgba(31, 89, 165, 0.14);
  backdrop-filter: blur(18px);
}

.hero-showcase-tabs button {
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 11px;
  padding: 6px 7px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.hero-showcase-tabs button span {
  display: block;
  margin-bottom: 1px;
  color: var(--blue);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.hero-showcase-tabs button:hover,
.hero-showcase-tabs button:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
}

.hero-showcase-tabs button.is-active {
  background: var(--blue);
  color: var(--white);
}

.hero-showcase-tabs button.is-active span {
  color: var(--white);
}

.orbit,
.final-orbit {
  position: absolute;
  border: 1px solid rgba(49, 133, 255, 0.28);
  border-radius: 50%;
}

.orbit-a {
  top: 11%;
  right: 3%;
  width: 510px;
  height: 510px;
}

.orbit-b {
  top: 24%;
  right: 18%;
  width: 310px;
  height: 310px;
  border-color: rgba(49, 133, 255, 0.15);
}

.floating-stat {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 190px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 34px rgba(31, 89, 165, 0.16);
  animation: floating-stat-in 420ms cubic-bezier(0.2, 0, 0, 1) both;
}

.floating-stat .sprite-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.floating-stat span {
  color: #7a8698;
  font-size: 11px;
  line-height: 1.4;
}

.floating-stat strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 13px;
}

.stat-a {
  top: 14%;
  left: -7%;
}

.stat-b {
  top: 57%;
  right: -7%;
  bottom: auto;
  animation-delay: 70ms;
}

@keyframes floating-stat-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.sprite-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--white);
}

.sprite-glyph {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--blue);
}

.sprite-glyph-link {
  transform: none;
}

.sprite-glyph-fan {
  transform: none;
}

.sprite-glyph-click {
  transform: none;
}

.editorial-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(500px, 1.18fr);
  align-items: center;
  gap: clamp(56px, 8vw, 120px);
  width: min(calc(100% - 48px), var(--max));
  min-height: 820px;
  margin: 0 auto;
  padding: 110px 0;
}

.section-copy h2,
.center-heading h2,
.crm-copy h2,
.message-heading h2,
.pricing-heading h2,
.final-content h2 {
  font-size: clamp(40px, 4.4vw, 62px);
}

.section-copy > p,
.center-heading > p,
.crm-copy > p,
.message-heading > p,
.pricing-heading > p,
.final-content > p {
  margin: 25px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: -0.02em;
}

.feature-list {
  display: grid;
  gap: 17px;
  margin: 34px 0 32px;
  padding: 0;
  list-style: none;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 15px;
}

.feature-list .sprite-icon {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  border: 1px solid var(--line);
}

.feature-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.feature-list b {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.text-link,
.white-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--blue);
  font-weight: 800;
}

.text-link span,
.white-link span {
  display: inline-flex;
  transition: transform 180ms ease;
}

.text-link svg,
.white-link svg,
.handle-form button svg,
.start-button svg,
.nav-login-link svg,
.template-cta svg {
  width: 18px;
  height: 18px;
}

.text-link:hover span,
.white-link:hover span {
  transform: translateX(5px);
}

.layered-frame {
  position: relative;
  padding: 40px 0 0 40px;
}

.layered-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 8% 8% 0;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: var(--cool);
}

.layered-frame img {
  position: relative;
  z-index: 1;
  border-radius: 30px;
  box-shadow: 0 28px 60px rgba(31, 89, 165, 0.16);
}

.screen-roll-showcase {
  position: relative;
  width: calc(100% + 72px);
  min-width: 0;
  margin-right: -36px;
  margin-left: -36px;
  overflow: hidden;
  padding: 34px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.screen-roll-showcase::before,
.screen-roll-showcase::after {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 18%;
  max-width: 120px;
  pointer-events: none;
  content: "";
}

.screen-roll-showcase::before {
  left: 0;
  background: linear-gradient(90deg, var(--white) 8%, transparent 100%);
}

.screen-roll-showcase::after {
  right: 0;
  background: linear-gradient(270deg, var(--white) 8%, transparent 100%);
}

.screen-roll-row {
  width: 100%;
  overflow: clip;
  overflow-clip-margin: 42px;
}

.screen-roll-row + .screen-roll-row {
  margin-top: 22px;
}

.screen-roll-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: screen-roll-left 34s linear infinite;
}

.screen-roll-row.row-2 .screen-roll-track {
  animation-duration: 39s;
  animation-direction: reverse;
  animation-delay: -13s;
}

.screen-roll-group {
  display: flex;
  flex: none;
  gap: 14px;
  padding-right: 14px;
}

.screen-roll-card {
  position: relative;
  flex: none;
  width: 158px;
  aspect-ratio: 9 / 17;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 15px 34px color-mix(in srgb, var(--blue-deep) 13%, transparent);
}

.screen-roll-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.screen-roll-card figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 999px;
  background: rgb(255 255 255 / 86%);
  box-shadow: 0 6px 18px rgb(18 31 53 / 12%);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

@keyframes screen-roll-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.analytics-section {
  padding: 130px 24px;
  background: var(--soft);
}

.center-heading,
.message-heading {
  max-width: 820px;
  margin: 0 auto 65px;
  text-align: center;
}

.center-heading > p,
.message-heading > p {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
}

.dashboard-stage {
  width: min(calc(100% - 32px), 920px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--white);
  box-shadow: 0 30px 70px rgba(31, 89, 165, 0.15);
}

.dashboard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.dashboard-toolbar span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.dashboard-toolbar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.link-editor-preview {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(390px, 1.3fr);
  gap: clamp(18px, 2.5vw, 30px);
  min-height: 508px;
  padding: clamp(18px, 2.5vw, 26px);
  background: var(--editor-surface);
  color: var(--ink);
}

.link-editor-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.link-editor-phone-screen {
  position: relative;
  width: min(100%, 250px);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--editor-border);
  border-radius: 28px;
  background: var(--editor-surface);
  box-shadow: 0 18px 36px rgba(17, 24, 39, 0.09);
}

.link-editor-phone-header {
  position: relative;
  z-index: 3;
  min-height: 40px;
  padding: 13px 14px;
  border-radius: 28px 28px 0 0;
  background: var(--cyan);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
}

.link-editor-cover {
  height: 100px;
  background: linear-gradient(180deg, var(--cyan), var(--cyan-soft));
}

.link-editor-avatar {
  display: block;
  width: 68px;
  height: 68px;
  margin: -40px auto 0;
  border: 4px solid var(--white);
  border-radius: 50%;
  object-fit: cover;
}

.link-editor-profile-name {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
}

.link-editor-profile-bio {
  margin: 20px 12px 10px;
  color: var(--editor-secondary);
  font-size: 11px;
  text-align: center;
}

.link-editor-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 12px;
  padding: 11px 13px;
  border: 1px solid var(--editor-border);
  border-radius: 11px;
  background: var(--white);
  color: var(--muted);
  font-size: 11px;
}

.link-editor-search img,
.link-editor-search svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.link-editor-preview-title {
  display: block;
  margin: 20px 12px 10px;
  font-size: 15px;
  text-align: center;
}

.link-editor-preview-links {
  display: grid;
  gap: 8px;
  padding: 0 12px 18px;
}

.link-editor-preview-links article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 7px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 3px 12px rgba(17, 24, 39, 0.06);
  font-size: 10px;
}

.link-editor-preview-links img {
  width: 48px;
  height: 48px;
  border-radius: 7px;
  object-fit: cover;
}

.link-editor-address {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--editor-border);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.08);
  color: var(--cyan);
  font-size: 11px;
}

.link-editor-address b {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
}

.link-editor-panel {
  position: relative;
  height: 480px;
  min-width: 0;
  overflow: hidden;
  align-self: center;
}

.link-editor-account,
.link-editor-block,
.link-editor-block-head {
  display: flex;
  align-items: center;
}

.link-editor-account {
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: var(--white);
}

.link-editor-account-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--cool);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.link-editor-account > div:nth-child(2) {
  display: grid;
  min-width: 0;
  margin-right: auto;
}

.link-editor-account small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-editor-account-actions {
  display: flex;
  gap: 6px;
}

.link-editor-account-actions span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--editor-surface);
  font-size: 11px;
  font-weight: 700;
}

.link-editor-account-actions img,
.link-editor-account-actions svg {
  width: 14px;
  height: 14px;
}

.link-editor-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15px 0 8px;
}

.link-editor-list-title div {
  display: flex;
  gap: 6px;
  font-size: 11px;
}

.link-editor-list-title span,
.link-editor-list-title b {
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--white);
}

.link-editor-list-title b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--blue);
  color: var(--white);
}

.link-editor-list-title b i {
  display: inline-grid;
  width: 13px;
  height: 13px;
  place-items: center;
  font-size: 13px;
  font-style: normal;
  line-height: 1;
}

.link-editor-block {
  position: relative;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  border: 1px solid var(--editor-border);
  border-radius: 8px;
  background: var(--white);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.link-editor-block-list {
  display: flex;
  flex-direction: column;
}

.link-editor-demo-cursor {
  position: absolute;
  z-index: 12;
  top: 157px;
  left: 9px;
  width: 22px;
  height: 28px;
  opacity: 0;
  pointer-events: none;
  filter:
    drop-shadow(0 0 1px var(--white))
    drop-shadow(0 5px 8px rgba(17, 24, 39, 0.24));
  transform: translate3d(0, 0, 0);
  transition:
    transform 480ms cubic-bezier(0.2, 0, 0, 1),
    opacity 160ms ease,
    filter 180ms ease;
}

.link-editor-demo-cursor::before {
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 0 82%, 23% 62%, 40% 100%, 56% 92%, 39% 57%, 72% 57%);
  content: "";
}

.link-editor-demo-cursor i {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.25);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.link-editor-demo-cursor.is-lower {
  transform: translate3d(0, 66px, 0);
}

.link-editor-demo-cursor.is-grabbing i {
  opacity: 0.65;
  transform: scale(1);
}

.link-editor-demo-cursor.is-visible {
  opacity: 1;
}

.link-editor-demo-cursor.is-grabbing {
  filter:
    drop-shadow(0 0 1px var(--white))
    drop-shadow(0 2px 4px rgba(17, 24, 39, 0.2));
}

.link-editor-demo-cursor.is-grabbing::before {
  background: var(--blue);
}

.link-editor-block:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.link-editor-block.is-dragging {
  opacity: 0.45;
  transform: scale(0.985);
}

.link-editor-block.is-drop-target {
  border-color: var(--blue);
  box-shadow: 0 -4px 0 var(--blue), 0 12px 24px rgba(49, 133, 255, 0.12);
  transform: translateY(3px);
}

.link-editor-block.is-auto-moving-down {
  z-index: 4;
  box-shadow: 0 14px 26px rgba(49, 133, 255, 0.16);
  transform: translateY(66px) scale(0.99);
}

.link-editor-block.is-auto-moving-up {
  z-index: 4;
  box-shadow: 0 14px 26px rgba(49, 133, 255, 0.16);
  transform: translateY(-66px) scale(0.99);
}

.link-editor-block.is-collapsed {
  min-height: 58px;
  padding: 8px 10px 8px 34px;
}

.dashboard-stage .link-editor-grip {
  position: absolute;
  left: 10px;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
  right: auto;
  cursor: default;
}

.link-editor-block-summary {
  display: grid;
  flex: 1 1 auto;
  gap: 5px;
  min-width: 0;
  margin-right: auto;
}

.link-editor-block-summary small {
  color: var(--editor-secondary);
  font-size: 9px;
}

.link-editor-block-summary small i {
  display: inline-grid;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  place-items: center;
  border-radius: 4px;
  background: var(--cyan);
  color: var(--white);
  font-style: normal;
}

.link-editor-block-summary small i.is-yellow {
  background: var(--editor-yellow);
}

.link-editor-block-summary small i.is-orange {
  background: var(--editor-orange);
}

.link-editor-block-summary > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-editor-block-summary > span img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 5px;
  object-fit: cover;
}

.link-editor-block-summary > span .link-editor-divider-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 0;
  object-fit: contain;
}

.link-editor-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 51px;
  height: 23px;
  flex: 0 0 51px;
  margin-left: 8px;
  padding-left: 6px;
  border-radius: 999px;
  background: var(--editor-green);
  color: var(--white);
  font-size: 8px;
  font-weight: 800;
}

.link-editor-toggle b {
  line-height: 1;
}

.link-editor-toggle i {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.16);
}

.link-editor-more {
  display: inline-flex;
  margin-left: 8px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.link-editor-more img {
  width: 17px;
  height: 17px;
}

.link-editor-chevron {
  width: 15px;
  height: 15px;
  margin-left: 6px;
}

.link-editor-chevron.is-open {
  transform: rotate(180deg);
}

.link-editor-block.is-expanded {
  display: block;
}

.link-editor-block-head {
  width: 100%;
  min-height: 70px;
  padding: 8px 10px 8px 34px;
  cursor: default;
}

.link-editor-block.is-collapsed:has(.link-editor-block-head) {
  min-height: 0;
  padding: 0;
}

.link-editor-block.is-collapsed .link-editor-block-head {
  min-height: 58px;
}

.link-editor-block-form {
  padding: 14px;
  border-top: 1px solid var(--editor-border);
  animation: link-editor-form-in 220ms cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes link-editor-form-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.link-editor-block-form > strong,
.link-editor-block-form label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
}

.link-editor-style-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.link-editor-style-options > span {
  display: grid;
  min-height: 66px;
  place-items: center;
  border: 1px solid var(--editor-border);
  border-radius: 9px;
  background: var(--editor-surface);
  color: var(--editor-secondary);
  font-size: 9px;
}

.link-editor-style-options i {
  position: relative;
  display: block;
  width: 58px;
  height: 28px;
  border: 4px solid var(--white);
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent);
}

.link-editor-style-options i::before,
.link-editor-style-options i::after {
  position: absolute;
  content: "";
}

.link-editor-style-options i.is-small::before {
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 14px;
  border-radius: 3px;
  background: var(--editor-border);
}

.link-editor-style-options i.is-small::after {
  top: 7px;
  right: 5px;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: var(--editor-secondary);
  box-shadow: 0 8px 0 var(--editor-border);
}

.link-editor-style-options i.is-large::before {
  top: 0;
  right: 0;
  left: 0;
  height: 15px;
  border-radius: 3px 3px 0 0;
  background: var(--editor-border);
}

.link-editor-style-options i.is-large::after {
  right: 10px;
  bottom: 3px;
  left: 10px;
  height: 4px;
  border-radius: 999px;
  background: var(--editor-secondary);
}

.link-editor-block-form label {
  display: block;
  margin-top: 10px;
}

.link-editor-block-form input,
.link-editor-file {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--editor-border);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}

.link-editor-file {
  display: flex;
  align-items: center;
  gap: 8px;
  border-style: dashed;
}

.link-editor-file b {
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--editor-surface);
  font-size: 9px;
}

.link-editor-file span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-editor-file i {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-left: auto;
  place-items: center;
  border-radius: 50%;
  background: var(--editor-border);
  color: var(--muted);
  font-style: normal;
}

.link-editor-block-summary small i {
  font-size: 12px;
  line-height: 1;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  width: min(100%, 960px);
  margin: 38px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--line);
}

.metric-strip article {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 18px;
  background: var(--white);
}

.metric-icon {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 14px;
  background: var(--cool);
  color: var(--blue);
}

.metric-icon svg {
  width: 27px;
  height: 27px;
}

.metric-strip span {
  display: grid;
  align-content: center;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.metric-strip b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.crm-section {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(400px, 0.85fr) minmax(520px, 1.15fr);
  align-items: center;
  gap: 54px;
  min-height: 780px;
  padding: 90px max(24px, calc((100vw - var(--max)) / 2));
  overflow: hidden;
  background: var(--blue);
}

.crm-copy,
.crm-visual {
  position: relative;
  z-index: 2;
}

.crm-ambient {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.crm-glow {
  position: absolute;
  width: clamp(360px, 38vw, 660px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--white) 14%, transparent) 0%,
    color-mix(in srgb, var(--white) 5%, transparent) 34%,
    transparent 70%
  );
  filter: blur(12px);
  opacity: 0.72;
  will-change: transform, opacity;
}

.crm-glow-a {
  top: -28%;
  left: -8%;
  animation: crm-glow-drift-a 13s ease-in-out infinite alternate;
}

.crm-glow-b {
  right: -10%;
  bottom: -34%;
  animation: crm-glow-drift-b 16s ease-in-out infinite alternate;
}

.crm-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
  border-radius: 50%;
  opacity: 0.52;
  will-change: transform;
}

.crm-orbit::after {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid color-mix(in srgb, var(--blue) 58%, var(--white));
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 20px color-mix(in srgb, var(--white) 58%, transparent);
  content: "";
}

.crm-orbit-a {
  top: 8%;
  right: 5%;
  width: clamp(420px, 43vw, 720px);
  aspect-ratio: 1.7;
  transform: rotate(-8deg);
  animation: crm-orbit-drift-a 15s ease-in-out infinite;
}

.crm-orbit-a::after {
  top: 15%;
  left: 13%;
}

.crm-orbit-b {
  bottom: 4%;
  left: 20%;
  width: clamp(300px, 34vw, 560px);
  aspect-ratio: 1.45;
  transform: rotate(10deg);
  animation: crm-orbit-drift-b 18s ease-in-out infinite;
}

.crm-orbit-b::after {
  right: 8%;
  bottom: 20%;
}

.crm-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 72%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--white) 58%, transparent);
  opacity: 0.6;
  will-change: transform, opacity;
  animation: crm-particle-pulse 4.8s ease-in-out infinite;
}

.crm-particle-a {
  top: 18%;
  left: 8%;
}

.crm-particle-b {
  top: 68%;
  left: 44%;
  animation-delay: -1.2s;
}

.crm-particle-c {
  top: 25%;
  right: 31%;
  animation-delay: -2.4s;
}

.crm-particle-d {
  right: 7%;
  bottom: 18%;
  animation-delay: -3.6s;
}

@keyframes crm-glow-drift-a {
  from {
    opacity: 0.52;
    transform: translate3d(-3%, -2%, 0) scale(0.94);
  }

  to {
    opacity: 0.82;
    transform: translate3d(12%, 10%, 0) scale(1.08);
  }
}

@keyframes crm-glow-drift-b {
  from {
    opacity: 0.46;
    transform: translate3d(4%, 8%, 0) scale(1);
  }

  to {
    opacity: 0.76;
    transform: translate3d(-13%, -9%, 0) scale(1.12);
  }
}

@keyframes crm-orbit-drift-a {
  0%,
  100% {
    transform: rotate(-8deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-5deg) translate3d(-14px, 10px, 0);
  }
}

@keyframes crm-orbit-drift-b {
  0%,
  100% {
    transform: rotate(10deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(6deg) translate3d(16px, -12px, 0);
  }
}

@keyframes crm-particle-pulse {
  0%,
  100% {
    opacity: 0.28;
    transform: translate3d(0, 0, 0) scale(0.7);
  }

  50% {
    opacity: 0.88;
    transform: translate3d(0, -13px, 0) scale(1.25);
  }
}

.crm-copy h2 {
  max-width: 520px;
  font-size: clamp(38px, 3.8vw, 50px);
  line-height: 1.08;
}

.crm-copy h2,
.crm-copy > p,
.white-link,
.final-content h2,
.final-content > p {
  color: var(--white);
}

.crm-copy > p {
  color: rgba(255, 255, 255, 0.76);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 31px 0;
}

.chip-row span {
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.white-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 5px;
}

.crm-visual {
  display: grid;
  place-items: center;
}

.crm-visual img {
  width: min(98%, 780px);
  max-width: 100%;
  filter:
    drop-shadow(0 24px 28px rgba(9, 52, 119, 0.2))
    drop-shadow(0 7px 10px rgba(9, 52, 119, 0.14));
  transform-origin: 52% 58%;
  will-change: transform;
  animation: crm-visual-float 6.8s ease-in-out infinite;
}

@keyframes crm-visual-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -9px, 0) scale(1.012);
  }
}

.message-section {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 130px 0;
}

.message-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

.message-visual {
  position: relative;
  min-width: 0;
}

.message-video-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  background: var(--cool);
  border: 1px solid var(--line);
}

.message-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.message-steps {
  display: grid;
  gap: 0;
}

.message-steps article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.message-steps article:first-child {
  border-top: 1px solid var(--line);
}

.message-steps > article > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
}

.message-steps b {
  font-size: 20px;
  letter-spacing: -0.03em;
}

.message-steps p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.migration-section {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(540px, 1.2fr);
  align-items: center;
  gap: clamp(54px, 8vw, 110px);
  width: min(calc(100% - 48px), var(--max));
  min-height: 760px;
  margin: 0 auto;
  padding: 110px 0;
}

.migration-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(40px, 4.4vw, 62px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.065em;
  word-break: keep-all;
}

.migration-copy > p {
  margin: 25px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: -0.02em;
}

.migration-copy > ul {
  display: grid;
  gap: 13px;
  margin: 32px 0;
  padding: 0;
  list-style: none;
}

.migration-copy > ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
}

.migration-copy > ul span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--cool);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

.migration-visual {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
  align-items: center;
  padding: 54px 38px;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: var(--soft);
  box-shadow: 0 28px 65px rgba(31, 89, 165, 0.12);
}

.migration-visual::before {
  content: "";
  position: absolute;
  inset: 13% 8%;
  border: 1px dashed var(--line);
  border-radius: 50%;
}

.migration-card {
  position: relative;
  z-index: 1;
  min-height: 310px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 20px 40px rgba(31, 89, 165, 0.11);
}

.migration-window-bar {
  display: flex;
  gap: 5px;
  margin-bottom: 32px;
}

.migration-window-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
}

.source-card > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.migration-url {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.migration-url-typed {
  display: inline-block;
  overflow: hidden;
  width: 0;
  animation: migration-type 8s steps(6, end) infinite;
}

.migration-url-caret {
  width: 1px;
  height: 1.1em;
  margin-left: 1px;
  background: var(--blue);
  animation: migration-caret 0.7s steps(1, end) infinite;
}

.migration-import-button {
  position: relative;
  display: grid;
  min-height: 36px;
  margin-top: 11px;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 22%, transparent);
  animation: migration-button-press 8s ease-in-out infinite;
}

.migration-import-button span {
  grid-area: 1 / 1;
}

.migration-import-button span:first-child {
  animation: migration-action-label 8s ease infinite;
}

.migration-import-button span:last-child {
  opacity: 0;
  animation: migration-loading-label 8s ease infinite;
}

.source-links {
  display: grid;
  gap: 10px;
  margin-top: 11px;
}

.source-links span {
  height: 38px;
  border-radius: 9px;
  background: var(--cool);
  animation: migration-source-shimmer 8s ease infinite;
}

.migration-arrow {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: auto;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 21px;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(49, 133, 255, 0.28);
  animation: migration-arrow-transfer 8s ease-in-out infinite;
}

.tempick-card > img {
  width: 78px;
  height: auto;
  margin-bottom: 31px;
}

.tempick-card > strong {
  display: block;
  margin-bottom: 17px;
  font-size: 15px;
  letter-spacing: -0.03em;
  animation: migration-result-title 8s ease both infinite;
}

.tempick-card > ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  list-style: none;
}

.tempick-card > ul span {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-weight: 800;
}

.tempick-card > ul li {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateY(7px);
  animation: migration-result-item 8s ease both infinite;
}

.tempick-card > ul span svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tempick-card > ul li:nth-child(2) {
  animation-delay: 0.12s;
}

.tempick-card > ul li:nth-child(3) {
  animation-delay: 0.24s;
}

.migration-complete {
  margin-top: 19px;
  padding: 10px;
  border-radius: 9px;
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  animation: migration-complete-in 8s ease both infinite;
}

.migration-demo-cursor {
  position: absolute;
  z-index: 4;
  top: 37%;
  left: 29%;
  width: 22px;
  height: auto;
  overflow: visible;
  color: var(--ink);
  filter: drop-shadow(0 3px 4px rgba(15, 25, 43, 0.22));
  pointer-events: none;
  animation: migration-cursor-move 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes migration-type {
  0%, 10% { width: 0; }
  28%, 88% { width: 3.9em; }
  100% { width: 0; }
}

@keyframes migration-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@keyframes migration-button-press {
  0%, 30%, 38%, 100% { transform: scale(1); }
  34% { transform: scale(0.96); }
}

@keyframes migration-action-label {
  0%, 35% { opacity: 1; transform: translateY(0); }
  39%, 82% { opacity: 0; transform: translateY(-8px); }
  90%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes migration-loading-label {
  0%, 35% { opacity: 0; transform: translateY(8px); }
  39%, 55% { opacity: 1; transform: translateY(0); }
  60%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes migration-source-shimmer {
  0%, 36%, 100% { opacity: 1; background: var(--cool); }
  43% { opacity: 0.55; background: var(--line); }
  50% { opacity: 1; background: var(--cool); }
}

@keyframes migration-arrow-transfer {
  0%, 38%, 58%, 100% { transform: translateX(0); }
  48% { transform: translateX(6px); }
}

@keyframes migration-arrow-transfer-mobile {
  0%, 38%, 58%, 100% { transform: rotate(90deg) translateX(0); }
  48% { transform: rotate(90deg) translateX(6px); }
}

@keyframes migration-result-title {
  0%, 48% { opacity: 0; transform: translateY(8px); }
  58%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

@keyframes migration-result-item {
  0%, 52% { opacity: 0; transform: translateY(7px); }
  62%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

@keyframes migration-complete-in {
  0%, 62% { opacity: 0; transform: translateY(8px); }
  72%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

@keyframes migration-cursor-move {
  0%, 8% { top: 22%; left: 10%; opacity: 0; }
  12% { top: 37%; left: 29%; opacity: 1; transform: scale(1); }
  16% { transform: scale(0.82); }
  20%, 28% { top: 37%; left: 29%; transform: scale(1); }
  32% { top: 50%; left: 29%; transform: scale(1); }
  35% { top: 50%; left: 29%; transform: scale(0.82); }
  39% { top: 50%; left: 29%; transform: scale(1); }
  48% { top: 50%; left: 50%; opacity: 1; }
  58%, 100% { top: 50%; left: 50%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-migration-typed {
    width: 9.8em;
  }

  .hero-migration-result {
    opacity: 1;
    transform: none;
  }

  .hero-migration-result header span,
  .hero-migration-links span,
  .hero-migration-edit {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .migration-url-typed {
    width: 3.9em;
  }

  .migration-url-typed,
  .migration-url-caret,
  .migration-import-button,
  .migration-import-button span,
  .source-links span,
  .migration-arrow,
  .tempick-card > strong,
  .tempick-card > ul li,
  .migration-complete,
  .migration-demo-cursor {
    animation: none;
  }

  .tempick-card > strong,
  .tempick-card > ul li,
  .migration-complete {
    opacity: 1;
    transform: none;
  }

  .migration-demo-cursor,
  .migration-import-button span:last-child {
    display: none;
  }
}

/* Mobile layout repair: keep demos readable without cropping or overlap. */
@media (max-width: 560px) {
  .hero-visual-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 8px;
    min-height: 0;
  }

  .hero-visual {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .hero-showcase-stage {
    min-height: 214px;
  }

  .hero-showcase-slide img {
    height: 214px;
  }

  .hero-visual-wrap > .floating-stat {
    position: static;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 8px 9px;
    transform: none;
  }

  .hero-visual-wrap > .stat-a,
  .hero-visual-wrap > .stat-b {
    inset: auto;
  }

  .hero-visual-wrap > .floating-stat span {
    display: -webkit-box;
    overflow: hidden;
    font-size: 8px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .hero-visual-wrap > .floating-stat strong {
    font-size: 10px;
  }

  .hero-migration-static {
    padding: 10px;
  }

  .hero-migration-dashboard {
    width: min(96%, 360px);
    padding: 14px;
    border-radius: 18px;
    transform: none;
  }

  .hero-migration-dashboard > header {
    gap: 8px;
    padding-bottom: 10px;
  }

  .hero-migration-dashboard > header img {
    width: 72px;
  }

  .hero-migration-dashboard > header span {
    padding: 5px 7px;
    font-size: 8px;
  }

  .hero-migration-dashboard-body {
    gap: 8px;
    padding: 10px 0;
  }

  .hero-migration-dashboard-body aside {
    padding: 9px;
    border-radius: 11px;
  }

  .hero-migration-dashboard-body aside p {
    margin-top: 9px;
    font-size: 7px;
  }

  .hero-migration-imported {
    gap: 4px;
  }

  .hero-migration-imported > span {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 29px;
    padding: 4px 6px;
  }

  .hero-migration-imported > span small {
    display: none;
  }

  .hero-migration-imported i {
    width: 21px;
    height: 21px;
    font-size: 7px;
  }

  .hero-migration-dashboard .hero-migration-edit {
    min-height: 30px;
    font-size: 8px;
  }

  .dashboard-stage {
    width: calc(100% - 20px);
    overflow: hidden;
  }

  .link-editor-preview {
    gap: 10px;
    min-height: 0;
    padding: 7px;
  }

  .link-editor-panel {
    height: 326px;
  }

  .link-editor-account {
    gap: 7px;
    padding: 9px;
  }

  .link-editor-account-avatar {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    font-size: 11px;
  }

  .link-editor-account-actions span {
    width: 30px;
    height: 30px;
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .link-editor-list-title {
    margin: 9px 0 5px;
  }

  .link-editor-block {
    margin-top: 5px;
  }

  .link-editor-block.is-collapsed,
  .link-editor-block.is-collapsed .link-editor-block-head {
    min-height: 47px;
  }

  .link-editor-block.is-collapsed {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .link-editor-block-head {
    min-height: 54px;
  }

  .link-editor-block-summary {
    gap: 2px;
  }

  .link-editor-block-summary > span {
    gap: 6px;
    font-size: 9px;
  }

  .link-editor-block-summary > span img {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .link-editor-toggle {
    width: 43px;
    height: 20px;
    flex-basis: 43px;
    margin-left: 5px;
    padding-left: 5px;
    font-size: 7px;
  }

  .link-editor-toggle i {
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
  }

  .link-editor-more,
  .link-editor-chevron {
    display: none;
  }

  .link-editor-demo-cursor {
    top: 124px;
    transform: scale(0.8);
    transform-origin: left top;
  }

  .link-editor-demo-cursor.is-lower {
    transform: translate3d(0, 52px, 0) scale(0.8);
  }

  .link-editor-block.is-auto-moving-down {
    transform: translateY(52px) scale(0.99);
  }

  .link-editor-block.is-auto-moving-up {
    transform: translateY(-52px) scale(0.99);
  }

  .link-editor-phone {
    padding-block: 4px 0;
  }

  .link-editor-phone-screen {
    width: min(100%, 174px);
    min-height: 292px;
  }

  .metric-strip {
    display: flex;
    width: calc(100% - 28px);
    gap: 8px;
    padding: 2px 14px 8px;
    overflow-x: auto;
    border: 0;
    background: transparent;
    scroll-padding-inline: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .metric-strip::-webkit-scrollbar {
    display: none;
  }

  .metric-strip article {
    grid-template-columns: 34px minmax(0, 1fr);
    justify-items: start;
    min-width: min(76vw, 260px);
    min-height: 72px;
    flex: 0 0 min(76vw, 260px);
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    text-align: left;
    scroll-snap-align: center;
  }

  .metric-strip article + article {
    border-left: 1px solid var(--line);
  }

  .metric-strip article > div:last-child {
    min-width: 0;
  }

  .metric-strip span,
  .metric-strip b {
    display: block;
    word-break: keep-all;
  }

  .metric-strip span {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.4;
  }

  .metric-strip b {
    font-size: 12px;
  }
}

/* Concentric water-ripple motion for the closing CTA. */
.final-cta-section::before,
.final-cta-section::after,
.final-cta-section .final-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(220px, 24vw, 360px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--white) 34%, transparent);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.35);
  will-change: transform, opacity;
  animation: final-water-ripple 8s cubic-bezier(0.18, 0.62, 0.3, 1) infinite;
}

.final-cta-section::before {
  animation-delay: 0s;
}

.final-cta-section .orbit-one {
  animation-delay: -2s;
}

.final-cta-section::after {
  animation-delay: -4s;
}

.final-cta-section .orbit-two {
  animation-delay: -6s;
}

@keyframes final-water-ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }

  12% {
    opacity: 0.38;
  }

  58% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.7);
  }
}

@media (max-width: 560px) {
  .final-cta-section::before,
  .final-cta-section::after,
  .final-cta-section .final-orbit {
    width: clamp(150px, 48vw, 210px);
    border-color: color-mix(in srgb, var(--white) 30%, transparent);
  }

  @keyframes final-water-ripple {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.4);
    }

    14% {
      opacity: 0.34;
    }

    62% {
      opacity: 0.18;
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(4.6);
    }
  }
}

/* Mobile pricing: same card language as desktop, composed as a vertical stack. */
@media (max-width: 560px) {
  .pricing-section {
    padding: 68px 16px 76px;
  }

  .pricing-heading {
    margin-bottom: 28px;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    overflow: visible;
    padding: 0;
  }

  .free-card,
  .basic-card,
  .pro-card {
    order: initial;
  }

  .plan-card {
    width: 100%;
    min-height: 0;
    padding: 20px;
    border-radius: 20px;
    text-align: left;
  }

  .plan-top {
    min-height: 24px;
    font-size: 11px;
  }

  .plan-top b {
    padding: 5px 8px;
    font-size: 9px;
  }

  .plan-card h3 {
    margin: 8px 0 14px;
    font-size: 23px;
    line-height: 1.15;
  }

  .plan-price {
    justify-content: flex-start;
    gap: 5px;
    margin: 0;
  }

  .plan-price strong {
    font-size: clamp(34px, 10vw, 40px);
  }

  .plan-price span {
    display: inline;
    font-size: 10px;
  }

  .plan-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
    font-size: 11px;
  }

  .plan-card .plan-features li {
    position: relative;
    justify-content: flex-start;
    min-height: 48px;
    padding: 9px 8px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--soft);
    line-height: 1.3;
    text-align: left;
    word-break: keep-all;
  }

  .free-card .plan-features li {
    background: var(--white);
  }

  .plan-card .plan-features li::before {
    content: none;
  }

  .plan-card li > svg {
    display: block;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    flex: 0 0 15px;
  }

  .unlimited-feature {
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: normal;
  }

  .infinity-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .infinity-icon svg {
    width: 11px;
    height: 11px;
    margin: 0;
  }

  .plan-note {
    display: block;
    min-height: 0;
    margin: 18px 0 14px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    font-size: 10px;
    line-height: 1.5;
  }

  .plan-button {
    min-height: 46px;
    margin-top: 0;
    border-radius: 12px;
    font-size: 13px;
  }
}

.template-section {
  overflow: hidden;
  padding: 126px max(24px, calc((100vw - var(--max)) / 2)) 138px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 38%),
    var(--white);
}

.template-heading {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.template-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.066em;
  word-break: keep-all;
}

.template-heading p {
  max-width: 660px;
  margin: 25px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.template-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.template-example {
  min-width: 0;
}

.template-example:nth-child(even) {
  margin-top: 38px;
}

.template-phone {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 22px 48px color-mix(in srgb, var(--blue-deep) 13%, transparent);
}

.template-phone::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent 46%);
  pointer-events: none;
  content: "";
}

.template-phone-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 32px 1fr 7px;
  align-items: center;
  gap: 8px;
}

.template-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 850;
}

.template-phone-top strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-phone-top > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 9px 0 var(--blue), 0 -9px 0 var(--blue);
}

.template-cover {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 148px;
  margin-top: 17px;
  padding: 18px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ink);
  color: var(--white);
}

.template-cover::after {
  position: absolute;
  top: -32px;
  right: -24px;
  width: 106px;
  height: 106px;
  border: 26px solid color-mix(in srgb, var(--white) 16%, transparent);
  border-radius: 50%;
  content: "";
}

.template-cover span,
.template-cover b {
  position: relative;
  z-index: 1;
}

.template-cover span {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.72;
}

.template-cover b {
  max-width: 130px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.045em;
}

.template-blocks {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.template-blocks > span {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  color: var(--ink);
  font-size: 10px;
  font-weight: 750;
}

.template-blocks i {
  color: var(--blue);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.template-blocks b {
  color: var(--blue);
  font-size: 12px;
}

.template-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  min-height: 74px;
  padding: 16px 8px 0;
}

.template-meta > div {
  min-width: 0;
}

.template-meta b,
.template-meta > div > span {
  display: block;
}

.template-meta b {
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.025em;
}

.template-meta > div > span {
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-meta > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: var(--blue);
  font-size: 11px;
  font-weight: 850;
}

.template-meta > a span,
.template-cta span {
  transition: transform 180ms ease;
}

.template-meta > a:hover span,
.template-cta:hover span {
  transform: translateX(4px);
}

.template-shop .template-cover {
  background: var(--blue);
}

.template-portfolio .template-cover {
  background: var(--cool);
  color: var(--ink);
}

.template-portfolio .template-cover::after {
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
}

.template-brand .template-cover {
  background: var(--cyan);
}

.template-expert .template-cover {
  background: var(--blue-deep);
}

.template-cta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin: 60px auto 0;
  padding: 16px 22px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--blue) 26%, transparent);
  color: var(--white);
  font-size: 14px;
  font-weight: 850;
}

/* Template showcase: staggered mobile screens */
.template-section {
  padding-right: max(24px, calc((100vw - var(--max)) / 2));
  padding-left: max(24px, calc((100vw - var(--max)) / 2));
  background: var(--white);
}

.template-gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
  align-items: start;
  gap: clamp(14px, 1.8vw, 24px);
  height: auto;
  overflow: visible;
  padding: 36px 0 48px;
  background: transparent;
}

.template-gallery::before,
.template-gallery::after {
  display: none;
}

.template-example {
  position: relative;
  min-width: 0;
  margin: 0;
}

.template-example:nth-child(1),
.template-example:nth-child(2),
.template-example:nth-child(3),
.template-example:nth-child(4),
.template-example:nth-child(5) {
  margin-top: 0;
  transform: none;
}

.template-phone {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 0.59;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--white);
  box-shadow: 0 20px 46px color-mix(in srgb, var(--blue-deep) 16%, transparent);
}

.template-status {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 29px 29px 0 0;
  background: var(--white);
  color: var(--kakao-ink);
  font-size: 11px;
}

.template-status > i {
  width: 60px;
  height: 20px;
  border-radius: 999px;
  background: var(--kakao-ink);
}

.template-status-system {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
  height: 12px;
}

.template-status-system > i {
  position: relative;
  display: inline-flex;
  flex: none;
  color: var(--kakao-ink);
  font-style: normal;
}

.template-status-signal {
  align-items: flex-end;
  gap: 1px;
  width: 9px;
  height: 9px;
}

.template-status-signal b {
  width: 2px;
  border-radius: 2px 2px 0 0;
  background: currentColor;
}

.template-status-signal b:nth-child(1) {
  height: 4px;
}

.template-status-signal b:nth-child(2) {
  height: 6px;
}

.template-status-signal b:nth-child(3) {
  height: 9px;
}

.template-status-wifi {
  width: 10px;
  height: 8px;
  overflow: hidden;
}

.template-status-wifi::before {
  position: absolute;
  top: 0;
  left: 1px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  content: "";
  transform: rotate(45deg);
}

.template-status-wifi::after {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.template-status-battery {
  width: 13px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.template-status-battery::before {
  position: absolute;
  inset: 1px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.template-status-battery::after {
  position: absolute;
  top: 2px;
  right: -3px;
  width: 2px;
  height: 3px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
  content: "";
}

.template-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 29px;
  background: var(--cool);
}

.template-layout {
  height: 100%;
  padding-top: 46px;
  background: var(--soft);
  color: var(--ink);
}

.template-fixed-profile {
  position: relative;
  display: flex;
  min-height: 168px;
  align-items: center;
  padding: 78px 12px 11px;
  flex-direction: column;
  background: var(--white);
  text-align: center;
}

.template-profile-cover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 48px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cool) 78%, var(--white)), var(--soft));
}

.template-profile-cover::after {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image: radial-gradient(color-mix(in srgb, var(--blue) 26%, transparent) 1px, transparent 1px);
  background-size: 11px 11px;
  content: "";
}

.template-profile-avatar {
  position: absolute;
  z-index: 1;
  top: 24px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
}

.template-fixed-profile > b {
  font-size: 10px;
}

.template-fixed-profile > p {
  margin: 3px 0 8px;
  color: var(--muted);
  font-size: 7px;
}

.template-profile-search {
  display: flex;
  width: 100%;
  min-height: 29px;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: color-mix(in srgb, var(--muted) 70%, var(--white));
  font-size: 7px;
  text-align: left;
}

.template-profile-search svg {
  width: 12px;
  height: 12px;
}

.template-layout-body {
  display: grid;
  gap: 8px;
  height: calc(100% - 168px);
  overflow: hidden;
  padding: 10px;
}

.template-mini-section {
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 5px 13px color-mix(in srgb, var(--blue-deep) 5%, transparent);
}

.template-mini-section > b {
  display: block;
  margin-bottom: 9px;
  font-size: 9px;
}

.template-list-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  min-height: 49px;
  border: 1px solid var(--line);
  background: var(--white);
}

.template-list-row > span:last-child {
  padding: 8px;
  font-size: 8px;
  font-weight: 750;
}

.template-art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 48px;
  overflow: hidden;
  background: color-mix(in srgb, var(--error) 28%, var(--white));
}

.template-art i {
  position: absolute;
  right: 8px;
  top: 7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 36%, transparent);
}

.template-art b {
  position: absolute;
  right: -7px;
  bottom: -11px;
  left: -7px;
  height: 33px;
  background: color-mix(in srgb, var(--error) 30%, var(--blue-deep));
  clip-path: polygon(0 55%, 30% 14%, 52% 64%, 73% 28%, 100% 62%, 100% 100%, 0 100%);
}

.template-art-blue { background: color-mix(in srgb, var(--blue) 28%, var(--white)); }
.template-art-blue b { background: color-mix(in srgb, var(--cyan) 36%, var(--blue)); }
.template-art-green { background: color-mix(in srgb, var(--editor-green) 28%, var(--white)); }
.template-art-green b { background: color-mix(in srgb, var(--editor-green) 38%, var(--blue-deep)); }
.template-art-violet { background: color-mix(in srgb, var(--blue) 20%, var(--white)); }
.template-art-violet b { background: color-mix(in srgb, var(--blue) 30%, var(--error)); }
.template-art-amber { background: color-mix(in srgb, var(--editor-yellow) 30%, var(--white)); }
.template-art-amber b { background: color-mix(in srgb, var(--editor-yellow) 34%, var(--editor-orange)); }

.template-live-date {
  display: grid;
  width: 52px;
  margin-bottom: 8px;
  padding: 7px;
  place-items: center;
  border-radius: 9px;
  background: var(--cyan-soft);
  color: var(--blue-deep);
  font-size: 10px;
}

.template-live-date small {
  font-size: 8px;
}

.template-live-card {
  position: relative;
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: center;
  min-height: 93px;
}

.template-live-card > .template-art {
  min-height: 93px;
  border-radius: 9px;
}

.template-live-card > svg {
  position: absolute;
  left: 23%;
  width: 30px;
  height: 30px;
  color: var(--white);
  transform: translateX(-50%);
}

.template-live-card > span {
  display: grid;
  gap: 8px;
  padding-left: 9px;
  font-size: 8px;
}

.template-live-card > span i {
  width: fit-content;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--error);
  color: var(--white);
  font-style: normal;
  font-weight: 850;
}

.template-mini-button {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-radius: 7px;
  background: var(--cool);
  color: var(--blue-deep);
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}

.template-calendar {
  position: relative;
}

.template-calendar > svg {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 13px;
  color: var(--cyan);
}

.template-calendar > div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  font-size: 7px;
}

.template-calendar .is-today {
  padding: 3px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--white);
}

.template-media-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.template-media-grid .template-art {
  min-height: 122px;
  border-radius: 3px;
}

.template-media-grid > svg,
.template-wide-media > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 28px;
  color: var(--white);
  transform: translate(-50%, -50%);
}

.template-wide-media {
  position: relative;
}

.template-wide-media .template-art {
  min-height: 66px;
  border-radius: 4px;
}

.template-post-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 8px;
}

.template-post-row .template-art {
  min-height: 58px;
  border-radius: 5px;
}

.template-post-row > span {
  font-size: 7px;
  line-height: 1.5;
}

.template-map {
  position: relative;
  height: 104px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--cool);
}

.template-map i {
  position: absolute;
  width: 150%;
  height: 1px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  transform: rotate(-18deg);
}

.template-map i:nth-child(1) { top: 18%; left: -20%; }
.template-map i:nth-child(2) { top: 44%; left: -20%; transform: rotate(22deg); }
.template-map i:nth-child(3) { top: 68%; left: -20%; transform: rotate(-5deg); }
.template-map i:nth-child(4) { top: 84%; left: -20%; transform: rotate(30deg); }

.template-map svg {
  position: absolute;
  top: 28%;
  left: 28%;
  width: 24px;
  color: var(--blue);
}

.template-map-section > strong,
.template-map-section > small {
  display: block;
  margin-top: 7px;
  font-size: 8px;
}

.template-map-section > small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.template-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.template-product-grid > div {
  display: grid;
  gap: 5px;
  font-size: 7px;
}

.template-product-grid .template-art {
  min-height: 80px;
  border-radius: 4px;
}

.template-product-grid span {
  color: var(--error);
  font-weight: 800;
}

.template-review {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 4px 52px 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 7px;
}

.template-review:last-child {
  border-bottom: 0;
}

.template-review > span {
  display: flex;
  color: var(--cyan);
}

.template-review > span svg {
  width: 9px;
  height: 9px;
}

.template-review > small {
  color: var(--muted);
  font-size: 6px;
}

.template-review > .template-art {
  position: absolute;
  top: 4px;
  right: 0;
  width: 46px;
  min-height: 50px;
  border-radius: 5px;
}

.template-meta {
  padding: 15px 4px 0;
}

.template-meta > b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  white-space: normal;
  word-break: keep-all;
}

.template-meta > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  word-break: keep-all;
}

.template-actions {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 20px;
  left: 18px;
  display: grid;
  gap: 8px;
}

.template-actions > span {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--kakao-ink) 16%, transparent);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.template-actions > span.is-primary {
  background: var(--blue);
  color: var(--white);
}

.pricing-section {
  padding: 130px max(24px, calc((100vw - var(--max)) / 2));
  background: var(--soft);
}

.pricing-heading {
  max-width: 760px;
  margin: 0 auto 58px;
  text-align: center;
}

.pricing-badge {
  display: inline-flex;
  margin-bottom: 22px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cool);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.pricing-heading h2 {
  font-size: clamp(38px, 4.2vw, 58px);
}

.pricing-heading > p {
  margin: 20px auto 0;
}

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

.plan-card {
  position: relative;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
}

.free-card {
  border-color: var(--blue);
  background: var(--cool);
}

.basic-card {
  border: 2px solid var(--cyan);
  box-shadow: 0 24px 55px rgba(0, 175, 216, 0.12);
}

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 750;
}

.plan-top b {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--cyan-soft);
  color: var(--blue);
  font-size: 12px;
}

.free-card .plan-top b {
  background: var(--blue);
  color: var(--white);
}

.plan-card h3 {
  margin: 12px 0 24px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
}

.plan-price strong {
  color: var(--ink);
  font-size: clamp(34px, 3.1vw, 46px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.plan-price span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.plan-features {
  display: grid;
  gap: 22px;
  margin: 28px 0 0;
  padding: 0;
  color: var(--ink);
  list-style: none;
  font-size: 16px;
  font-weight: 650;
}

.plan-features li {
  display: flex;
  align-items: center;
  min-width: 0;
  line-height: 1.35;
}

.plan-card li > svg {
  display: block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  flex: 0 0 18px;
  color: var(--blue);
}

.unlimited-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.infinity-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--cool);
  color: var(--blue);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.infinity-icon svg {
  width: 14px;
  height: 14px;
}

.plan-note {
  min-height: 42px;
  margin: 20px 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.plan-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: auto;
  border-radius: 13px;
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  transition: transform 180ms ease, background-color 180ms ease;
}

.plan-button:hover,
.plan-button:focus-visible {
  transform: translateY(-2px);
  background: var(--blue-deep);
}

.plan-button.is-disabled {
  background: #eef1f5;
  color: #929aa5;
}

.pro-card {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}

.final-cta-section {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 690px;
  padding: 110px 24px;
  overflow: hidden;
  background: var(--blue);
}

.final-orbit {
  border-color: rgba(255, 255, 255, 0.25);
}

.orbit-one {
  width: 720px;
  height: 720px;
}

.orbit-two {
  width: 420px;
  height: 420px;
  border-color: rgba(255, 255, 255, 0.14);
}

.final-content {
  position: relative;
  z-index: 2;
  width: min(100%, 820px);
  text-align: center;
}

.final-content > p {
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.74);
}

.handle-wrap.is-inverse {
  max-width: 680px;
  margin: 0 auto;
}

.is-inverse .handle-form {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 20px 50px rgba(13, 55, 119, 0.25);
}

.is-inverse .form-note {
  color: rgba(255, 255, 255, 0.72);
}

footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 70px 0 32px;
}

.footer-brand p {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 24px;
  color: #536075;
  font-size: 13px;
  font-weight: 650;
}

.footer-links a:hover {
  color: var(--blue);
}

.copyright {
  grid-column: 1 / -1;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: #98a2b3;
  font-size: 11px;
}

html[data-reveal-ready="true"] [data-reveal]:not([data-reveal="stagger"]) {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 680ms cubic-bezier(0.2, 0, 0, 1),
    filter 680ms cubic-bezier(0.2, 0, 0, 1),
    transform 680ms cubic-bezier(0.2, 0, 0, 1);
}

html[data-reveal-ready="true"] [data-reveal="left"] {
  transform: translate3d(-38px, 10px, 0);
}

html[data-reveal-ready="true"] [data-reveal="right"] {
  transform: translate3d(38px, 10px, 0);
}

html[data-reveal-ready="true"] [data-reveal="scale"] {
  transform: translate3d(0, 20px, 0) scale(0.975);
}

html[data-reveal-ready="true"] [data-reveal]:not([data-reveal="stagger"])[data-visible="true"] {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

html[data-reveal-ready="true"] [data-reveal="stagger"] > * {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 560ms cubic-bezier(0.2, 0, 0, 1),
    filter 560ms cubic-bezier(0.2, 0, 0, 1),
    transform 560ms cubic-bezier(0.2, 0, 0, 1);
}

html[data-reveal-ready="true"] [data-reveal="stagger"][data-visible="true"] > * {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

html[data-reveal-ready="true"] [data-reveal="stagger"][data-visible="true"] > :nth-child(2) {
  transition-delay: 90ms;
}

html[data-reveal-ready="true"] [data-reveal="stagger"][data-visible="true"] > :nth-child(3) {
  transition-delay: 180ms;
}

html[data-reveal-ready="true"] [data-reveal="stagger"][data-visible="true"] > :nth-child(4) {
  transition-delay: 270ms;
}

html[data-reveal-ready="true"] .template-gallery[data-reveal="stagger"] > .template-example {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(-34px, 20px, 0);
  transition:
    opacity 700ms cubic-bezier(0.2, 0, 0, 1),
    filter 700ms cubic-bezier(0.2, 0, 0, 1),
    transform 700ms cubic-bezier(0.2, 0, 0, 1);
}

html[data-reveal-ready="true"] .template-gallery[data-reveal="stagger"][data-visible="true"] > .template-example {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

html[data-reveal-ready="true"] .template-gallery[data-reveal="stagger"][data-visible="true"] > .template-example:nth-child(2) {
  transition-delay: 80ms;
}

html[data-reveal-ready="true"] .template-gallery[data-reveal="stagger"][data-visible="true"] > .template-example:nth-child(3) {
  transition-delay: 160ms;
}

html[data-reveal-ready="true"] .template-gallery[data-reveal="stagger"][data-visible="true"] > .template-example:nth-child(4) {
  transition-delay: 240ms;
}

html[data-reveal-ready="true"] .template-gallery[data-reveal="stagger"][data-visible="true"] > .template-example:nth-child(5) {
  transition-delay: 320ms;
}

@media (max-width: 1080px) {
  .floating-header {
    gap: 18px;
  }

  .floating-header nav {
    gap: 14px;
  }

  .floating-header nav a:nth-child(4),
  .floating-header nav a:nth-child(5),
  .login-link {
    display: none;
  }

  .hero-section {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .hero-visual-wrap {
    min-height: 530px;
  }

  .editorial-section {
    grid-template-columns: 0.86fr 1.14fr;
  }

  .crm-section {
    grid-template-columns: minmax(360px, 0.85fr) minmax(480px, 1.15fr);
  }
}

@media (max-width: 820px) {
  section[id] {
    scroll-margin-top: 82px;
  }

  .floating-header {
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    min-height: 54px;
    padding: 7px 14px 7px 18px;
    border-radius: 999px;
  }

  .mobile-login-link {
    display: inline-flex;
    grid-column: 3;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
  }

  .menu-toggle {
    display: grid;
    gap: 4px;
    grid-column: 4;
    width: 36px;
    height: 36px;
    place-content: center;
    justify-self: center;
    cursor: pointer;
  }

  .menu-toggle span:not(.sr-only) {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 3px;
    background: var(--ink);
  }

  .menu-toggle > svg {
    width: 22px;
    height: 22px;
    color: var(--ink);
  }

  .floating-header nav {
    position: absolute;
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    width: min(220px, calc(100vw - 32px));
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 14px 36px rgba(31, 89, 165, 0.16);
  }

  .floating-header nav.is-open {
    display: flex;
  }

  .floating-header nav a,
  .floating-header nav a:nth-child(4),
  .floating-header nav a:nth-child(5) {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
  }

  .floating-header nav .nav-login-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin-top: 6px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(49, 133, 255, 0.24);
    font-size: 14px;
    font-weight: 800;
    transition: background-color 160ms ease, transform 160ms ease;
  }

  .floating-header nav .nav-login-link::after {
    display: none;
  }

  .floating-header nav .nav-login-link:hover,
  .floating-header nav .nav-login-link:focus-visible {
    background: var(--blue-deep);
    transform: translateY(-1px);
  }

  .header-actions {
    display: none;
  }

  .mobile-start-bar {
    position: fixed;
    z-index: 120;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    display: block;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--white) 94%, transparent);
    box-shadow: 0 16px 45px rgba(31, 89, 165, 0.2);
    backdrop-filter: blur(18px);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 180ms ease-out,
      transform 320ms cubic-bezier(0.2, 0, 0, 1);
    will-change: transform;
  }

  .mobile-start-bar.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(
      0,
      calc(100% + 24px + env(safe-area-inset-bottom)),
      0
    );
  }

  .mobile-start-bar .handle-wrap {
    max-width: none;
  }

  .mobile-start-bar .handle-form {
    min-height: 58px;
    grid-template-columns: auto minmax(54px, 1fr) auto;
    padding: 5px 5px 5px 14px;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
  }

  .mobile-start-bar .handle-prefix {
    font-size: 14px;
  }

  .mobile-start-bar .handle-form input {
    padding: 0 6px;
    font-size: 14px;
  }

  .mobile-start-bar .handle-form button {
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    white-space: nowrap;
  }

  .site-shell {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .hero-section,
  .editorial-section,
  .crm-section,
  .message-layout,
  .migration-section {
    grid-template-columns: 1fr;
  }

  .hero-section {
    min-height: auto;
    padding-top: 130px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-copy > p br {
    display: none;
  }

  .hero-copy > .handle-wrap {
    display: none;
  }

  .handle-wrap {
    margin-right: auto;
    margin-left: auto;
  }

  .hero-visual-wrap {
    min-height: 520px;
    width: 100%;
    overflow: hidden;
    border-radius: 28px;
  }

  .hero-visual {
    inset: 2% 0 0;
  }

  .hero-visual img {
    width: 100%;
  }

  .editorial-section {
    padding: 90px 0;
  }

  .fan-space-section .section-copy {
    max-width: 660px;
  }

  .layered-frame {
    padding-left: 20px;
  }

  .screen-roll-showcase {
    width: calc(100% + 24px);
    margin-right: -12px;
    margin-left: -12px;
    padding: 12px 0;
    border-radius: 0;
  }

  .screen-roll-showcase::before,
  .screen-roll-showcase::after {
    width: 14%;
  }

  .screen-roll-row + .screen-roll-row {
    margin-top: 12px;
  }

  .screen-roll-group {
    gap: 10px;
    padding-right: 10px;
  }

  .screen-roll-card {
    width: 124px;
    border-radius: 20px;
  }

  .screen-roll-card figcaption {
    right: 9px;
    bottom: 9px;
    left: 9px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .crm-section {
    padding-top: 90px;
    padding-bottom: 55px;
  }

  .crm-copy {
    max-width: 640px;
  }

  .crm-visual img {
    width: min(96%, 710px);
    max-width: 100%;
  }

  .message-steps {
    max-width: 650px;
    margin: 0 auto;
  }

  .migration-section {
    min-height: auto;
    padding: 100px 0;
  }

  .migration-copy {
    max-width: 660px;
  }

  .template-section {
    padding: 92px 0 104px;
  }

  .template-heading {
    width: min(calc(100% - 40px), 650px);
    margin-bottom: 42px;
  }

  .template-heading h2 {
    font-size: clamp(30px, 7vw, 40px);
  }

  .template-heading p {
    font-size: 15px;
  }

  .template-gallery {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    height: auto;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 18px 20px 34px;
    background: transparent;
    scroll-padding-inline: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .template-gallery::-webkit-scrollbar {
    display: none;
  }

  .template-example {
    flex: 0 0 min(68vw, 248px);
    width: min(68vw, 248px);
    scroll-snap-align: start;
  }

  .template-example:nth-child(1),
  .template-example:nth-child(2),
  .template-example:nth-child(3),
  .template-example:nth-child(4),
  .template-example:nth-child(5) {
    margin-top: 0;
    transform: none;
  }

  .template-phone {
    min-height: 0;
    padding: 0;
    border-radius: 23px;
  }

  .template-status {
    top: 0;
    right: 0;
    left: 0;
    grid-template-columns: 1fr 38px 1fr;
    height: 32px;
    padding: 0 10px;
    border-radius: 22px 22px 0 0;
    font-size: 8px;
  }

  .template-status > i {
    width: 38px;
    height: 14px;
  }

  .template-status-system {
    gap: 3px;
    transform: scale(0.72);
    transform-origin: right center;
  }

  .template-screen {
    border-radius: 22px;
  }

  .template-layout {
    padding-top: 32px;
  }

  .template-fixed-profile {
    min-height: 142px;
    padding: 64px 9px 8px;
  }

  .template-profile-cover {
    height: 40px;
  }

  .template-profile-avatar {
    top: 20px;
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  .template-fixed-profile > b {
    font-size: 9px;
  }

  .template-fixed-profile > p,
  .template-profile-search {
    font-size: 6px;
  }

  .template-profile-search {
    min-height: 25px;
  }

  .template-layout-body {
    height: calc(100% - 142px);
    padding: 8px;
  }

  .template-cta {
    margin-top: 32px;
  }

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

  .pricing-heading > p {
    margin-top: 20px;
  }

  .link-editor-preview {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding: 24px;
  }

  .link-editor-panel {
    order: 1;
    width: min(100%, 650px);
    height: 480px;
    margin: 0 auto;
  }

  .link-editor-phone {
    order: 2;
  }

  footer {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .start-modal-backdrop {
    align-items: end;
    padding: 10px;
  }

  .start-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 30px 20px 24px;
    border-radius: 26px;
  }

  .start-modal-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 24px;
  }

  .start-modal-branding {
    gap: 10px;
  }

  .start-modal-header {
    margin-bottom: 26px;
    padding: 0 38px 18px;
  }

  .start-modal-logo {
    width: 84px;
  }

  .start-modal-heading {
    font-size: 14px;
  }

  .start-modal-copy h2 {
    padding: 0 22px;
    font-size: 28px;
  }

  .start-modal-copy p {
    margin-top: 12px;
    font-size: 14px;
  }

  .start-modal-copy {
    margin-bottom: 24px;
  }

  .start-modal-input {
    min-height: 56px;
    padding-right: 12px;
    padding-left: 14px;
  }

  .start-modal-input > span:first-child,
  .start-modal-input input {
    font-size: 14px;
  }

  .start-modal-help {
    margin-bottom: 18px;
  }

  .start-modal-next {
    min-height: 52px;
  }

  .start-modal-complete-mark {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    font-size: 26px;
  }

  .start-modal-address {
    min-height: 60px;
    margin-bottom: 20px;
    font-size: 17px;
  }

  .start-modal-actions {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 8px;
  }

  .start-modal-back,
  .start-modal-kakao {
    min-height: 50px;
    border-radius: 12px;
    font-size: 13px;
  }

  .start-modal-terms {
    font-size: 10px;
  }

  .floating-header {
    top: 10px;
    width: calc(100% - 20px);
    min-height: 50px;
    padding: 7px 12px 7px 18px;
  }

  .brand .brand-logo {
    width: 88px;
    height: auto;
  }

  .mobile-login-link {
    padding-inline: 4px;
    font-size: 12px;
  }

  .menu-toggle {
    width: 34px;
    height: 34px;
  }

  .menu-toggle span:not(.sr-only) {
    width: 17px;
  }

  .hero-section,
  .editorial-section,
  .message-section,
  .migration-section,
  footer {
    width: min(calc(100% - 32px), var(--max));
  }

  .hero-section {
    gap: 26px;
    padding-top: 108px;
    padding-bottom: 46px;
  }

  .hero-copy h1 {
    font-size: clamp(40px, 11vw, 48px);
    line-height: 1.02;
    letter-spacing: -0.06em;
  }

  .hero-copy > p {
    max-width: 470px;
    margin: 18px auto 0;
    font-size: 15px;
    line-height: 1.65;
  }

  .handle-form {
    grid-template-columns: auto minmax(66px, 1fr);
    gap: 0;
    padding: 12px 12px 12px 16px;
  }

  .handle-form button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }

  .mobile-start-bar {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    padding: 6px;
    border-radius: 18px;
  }

  .mobile-start-bar .handle-form {
    grid-template-columns: auto minmax(44px, 1fr) auto;
    min-height: 54px;
    padding: 4px 4px 4px 12px;
  }

  .mobile-start-bar .handle-form button {
    grid-column: auto;
    width: auto;
    min-height: 46px;
    margin-top: 0;
    padding: 0 13px;
    font-size: 13px;
  }

  .mobile-start-bar .handle-form button span:last-child {
    display: none;
  }

  .hero-visual-wrap {
    min-height: 360px;
    width: 100%;
  }

  .hero-visual {
    inset: 0;
    align-items: flex-start;
  }

  .hero-showcase-slide {
    display: none;
  }

  .hero-showcase-slide:first-child {
    display: block;
    opacity: 1;
    transform: none;
  }

  .hero-showcase-slide img {
    width: 100%;
    border-radius: 24px;
  }

  .hero-showcase-tabs {
    display: none;
  }

  .hero-visual-wrap > .orbit,
  .hero-visual-wrap > .orbit-dot,
  .hero-visual-wrap > .floating-stat {
    display: none;
  }

  .section-copy h2,
  .center-heading h2,
  .crm-copy h2,
  .message-heading h2,
  .migration-copy h2,
  .pricing-heading h2,
  .final-content h2 {
    font-size: clamp(37px, 10vw, 48px);
  }

  .section-copy > p,
  .center-heading > p,
  .crm-copy > p,
  .message-heading > p,
  .migration-copy > p,
  .pricing-heading > p,
  .final-content > p {
    font-size: 16px;
  }

  .analytics-section,
  .pricing-section,
  .message-section {
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .editorial-section,
  .migration-section {
    padding-top: 82px;
    padding-bottom: 82px;
  }

  .center-heading,
  .message-heading {
    margin-bottom: 42px;
  }

  .dashboard-toolbar span:last-child {
    display: none;
  }

  .dashboard-stage {
    width: min(calc(100% - 28px), 920px);
    border-radius: 18px;
  }

  .dashboard-stage > img {
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .link-editor-preview {
    gap: 18px;
    min-height: auto;
    padding: 10px;
  }

  .link-editor-panel {
    height: 444px;
  }

  .link-editor-account {
    padding: 11px;
  }

  .link-editor-account-actions span {
    padding: 7px;
    font-size: 0;
  }

  .link-editor-account-actions img,
  .link-editor-account-actions svg {
    width: 16px;
    height: 16px;
  }

  .link-editor-block.is-collapsed,
  .link-editor-block-head {
    padding-right: 8px;
  }

  .link-editor-toggle {
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    margin-left: 4px;
    transform: scale(0.88);
    transform-origin: right center;
  }

  .link-editor-more,
  .link-editor-chevron {
    display: none;
  }

  .link-editor-block-summary {
    width: 100%;
  }

  .link-editor-block-summary > span {
    padding-right: 4px;
  }

  .link-editor-block-form {
    padding: 12px;
  }

  .link-editor-phone-screen {
    width: min(100%, 236px);
    min-height: 404px;
  }

  .metric-strip {
    grid-template-columns: 1fr;
  }

  .crm-section {
    gap: 30px;
    padding: 82px 16px 56px;
  }

  .crm-visual {
    width: 100%;
    transform: none;
  }

  .crm-visual img {
    width: min(94%, 620px);
    max-width: 100%;
    transform: none;
    filter: drop-shadow(0 16px 20px rgba(9, 52, 119, 0.18));
  }

  .message-layout {
    gap: 42px;
  }

  .message-video-frame {
    width: 100%;
    border-radius: 20px;
  }

  .migration-visual {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px;
    border-radius: 24px;
  }

  .migration-card {
    width: 100%;
    min-height: 230px;
    padding: 18px;
    border-radius: 16px;
  }

  .migration-arrow {
    width: 36px;
    height: 36px;
    font-size: 16px;
    animation: migration-arrow-transfer-mobile 8s ease-in-out infinite;
  }

  .migration-demo-cursor {
    display: none;
  }

  .migration-window-bar {
    margin-bottom: 24px;
  }

  .tempick-card > img {
    width: 64px;
    margin-bottom: 25px;
  }

  .tempick-card > strong {
    font-size: 13px;
  }

  .message-steps article {
    grid-template-columns: 48px 1fr;
  }

  .message-steps > article > span {
    width: 42px;
    height: 42px;
  }

  .plan-card {
    width: 100%;
    min-width: 0;
    min-height: 272px;
    padding: 22px 20px;
    border-radius: 20px;
    text-align: center;
  }

  .basic-card {
    order: 1;
    border-width: 2px;
  }

  .free-card {
    order: 2;
  }

  .pro-card {
    order: 3;
  }

  .plan-top {
    justify-content: space-between;
    min-height: 26px;
    font-size: 12px;
  }

  .plan-top > span {
    display: inline;
  }

  .plan-top b {
    position: static;
    padding: 6px 9px;
    font-size: 10px;
    white-space: nowrap;
  }

  .plan-card h3 {
    margin: 6px 0 14px;
    font-size: 24px;
  }

  .plan-price {
    justify-content: center;
    gap: 3px;
    margin-bottom: 10px;
  }

  .plan-price strong {
    font-size: 36px;
    letter-spacing: -0.05em;
  }

  .plan-price span {
    display: none;
  }

  .plan-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
  }

  .plan-card .plan-features li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 54px;
    padding: 8px 8px 8px 26px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--soft);
    line-height: 1.25;
    word-break: keep-all;
  }

  .free-card .plan-features li {
    background: var(--white);
  }

  .plan-card .plan-features li::before {
    position: absolute;
    left: 11px;
    margin-right: 0;
  }

  .unlimited-feature {
    gap: 5px;
    white-space: nowrap;
  }

  .infinity-icon {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  .plan-note {
    display: none;
  }

  .plan-button {
    min-height: 48px;
    margin-top: auto;
    border-radius: 12px;
    font-size: 14px;
  }

  .pricing-section {
    padding-top: 70px;
    padding-bottom: 78px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .pricing-heading {
    margin-bottom: 28px;
  }

  .pricing-badge {
    margin-bottom: 14px;
    padding: 7px 12px;
    font-size: 11px;
  }

  .pricing-heading h2 {
    font-size: 30px;
    line-height: 1.08;
  }

  .pricing-heading > p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.6;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 14px;
    overflow: visible;
    padding: 2px 0;
  }

  .final-cta-section {
    min-height: 590px;
    padding: 82px 16px 118px;
  }

  .final-content {
    width: 100%;
  }

  .final-content .handle-form {
    width: 100%;
  }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Mobile density pass: preserve the desktop mood without desktop-scale spacing. */
  .hero-section {
    gap: 18px;
    padding-top: 92px;
    padding-bottom: 28px;
  }

  .hero-copy h1 {
    max-width: 340px;
    margin-inline: auto;
    font-size: clamp(32px, 9vw, 38px);
    line-height: 1.05;
  }

  .hero-copy > p {
    max-width: 330px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.65;
  }

  .hero-visual-wrap {
    min-height: 355px;
    border-radius: 22px;
  }

  .hero-showcase-stage {
    min-height: 220px;
    width: calc(100% - 12px);
    border-radius: 22px;
  }

  .hero-showcase-slide {
    display: block;
  }

  .hero-showcase-slide:first-child:not(.is-active) {
    opacity: 0;
    transform: translate3d(24px, 0, 0) scale(0.985);
  }

  .hero-showcase-slide img {
    max-height: 220px;
    object-fit: contain;
  }

  .hero-showcase-tabs {
    display: grid;
    width: calc(100% - 24px);
    margin-top: 6px;
    gap: 3px;
    padding: 4px;
    border-radius: 13px;
  }

  .hero-showcase-tabs button {
    min-height: 38px;
    padding: 5px 2px;
    border-radius: 9px;
    font-size: 9px;
  }

  .hero-showcase-tabs button span {
    font-size: 7px;
  }

  .hero-visual-wrap > .floating-stat {
    top: auto;
    bottom: 0;
    display: flex;
    width: calc(50% - 5px);
    min-width: 0;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 13px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--blue-deep) 12%, transparent);
  }

  .hero-visual-wrap > .stat-a {
    left: 0;
  }

  .hero-visual-wrap > .stat-b {
    right: 0;
  }

  .hero-visual-wrap > .floating-stat .sprite-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .hero-visual-wrap > .floating-stat span {
    overflow: hidden;
    font-size: 8px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-visual-wrap > .floating-stat strong {
    overflow: hidden;
    margin-bottom: 1px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section-copy h2,
  .center-heading h2,
  .crm-copy h2,
  .message-heading h2,
  .migration-copy h2,
  .final-content h2 {
    font-size: clamp(29px, 8vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.055em;
  }

  .section-copy > p,
  .center-heading > p,
  .crm-copy > p,
  .message-heading > p,
  .migration-copy > p,
  .final-content > p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.7;
  }

  .editorial-section,
  .analytics-section,
  .crm-section,
  .message-section,
  .migration-section,
  .template-section,
  .pricing-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .center-heading,
  .message-heading {
    margin-bottom: 30px;
  }

  .feature-list {
    gap: 14px;
    margin-top: 28px;
  }

  .feature-list li {
    gap: 12px;
  }

  .feature-list li > svg,
  .feature-list li > span:first-child {
    width: 42px;
    height: 42px;
  }

  .feature-list li b {
    font-size: 14px;
  }

  .feature-list li span {
    font-size: 12px;
    line-height: 1.55;
  }

  .text-link {
    margin-top: 28px;
    font-size: 14px;
  }

  .screen-roll-card {
    width: 112px;
    border-radius: 17px;
  }

  .screen-roll-card figcaption {
    right: 7px;
    bottom: 7px;
    left: 7px;
    padding: 6px 8px;
    font-size: 10px;
  }

  .dashboard-stage {
    width: calc(100% - 24px);
  }

  .dashboard-toolbar {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 11px;
  }

  .link-editor-preview {
    padding: 8px;
  }

  .link-editor-panel {
    height: 390px;
  }

  .link-editor-phone {
    display: grid;
    width: 100%;
    padding-block: 8px 2px;
  }

  .link-editor-phone-screen {
    width: min(100%, 210px);
    min-height: 360px;
  }

  .crm-section {
    gap: 24px;
    padding-inline: 16px;
  }

  .crm-visual img {
    width: min(88%, 520px);
  }

  .message-layout {
    gap: 28px;
  }

  .message-steps article {
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding-block: 16px;
  }

  .message-steps > article > span {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .message-steps h3 {
    font-size: 15px;
  }

  .message-steps p {
    margin-top: 5px;
    font-size: 12px;
  }

  .migration-section {
    gap: 28px;
  }

  .migration-visual {
    gap: 10px;
    padding: 14px;
  }

  .migration-card {
    min-height: 180px;
    padding: 14px;
  }

  .migration-window-bar {
    margin-bottom: 16px;
  }

  .template-section {
    padding-inline: 0;
  }

  .template-heading {
    width: calc(100% - 32px);
    margin-bottom: 24px;
  }

  .template-heading h2 {
    font-size: 30px;
    line-height: 1.1;
  }

  .template-heading p {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.65;
  }

  .template-gallery {
    padding-top: 8px;
    padding-bottom: 24px;
  }

  .template-example {
    flex-basis: min(64vw, 228px);
    width: min(64vw, 228px);
  }

  .template-meta {
    gap: 4px;
    min-height: 62px;
    padding: 12px 4px 0;
    text-align: left;
  }

  .template-meta > b {
    font-size: 12px;
  }

  .template-meta > p {
    font-size: 10px;
    line-height: 1.4;
  }

  .template-cta {
    margin-top: 20px;
    font-size: 13px;
  }

  .pricing-heading h2 {
    font-size: 28px;
  }

  .pricing-heading > p {
    max-width: 330px;
    margin-inline: auto;
    font-size: 13px;
  }

  .plan-card {
    min-height: 248px;
    padding: 18px;
  }

  .plan-card h3 {
    font-size: 22px;
  }

  .plan-price strong {
    font-size: 32px;
  }

  .plan-card .plan-features li {
    min-height: 48px;
  }

  .final-cta-section {
    min-height: 520px;
    padding-top: 68px;
  }

  footer {
    gap: 24px;
    padding-top: 52px;
  }

  /* Mobile composition: treat the landing page as a dedicated small-screen
     experience instead of a scaled-down desktop canvas. */
  .hero-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 92px 16px 34px;
    overflow: hidden;
    background:
      radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 34%),
      radial-gradient(circle at 92% 66%, color-mix(in srgb, var(--editor-cyan) 15%, transparent), transparent 34%),
      linear-gradient(180deg, var(--white) 0%, var(--cool) 58%, var(--white) 100%);
  }

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

  .hero-copy h1 {
    max-width: 320px;
    font-size: clamp(30px, 8.7vw, 36px);
    line-height: 1.08;
    text-wrap: balance;
  }

  .hero-copy > p {
    max-width: 320px;
    font-size: 12px;
    line-height: 1.65;
    text-wrap: balance;
  }

  .hero-copy > .handle-wrap {
    display: none;
  }

  .hero-visual-wrap {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: calc(100% + 32px);
    min-height: 344px;
    margin-inline: -16px;
    padding: 0 12px 2px;
    border-radius: 0;
    overflow: visible;
  }

  .hero-visual {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: minmax(0, 226px) auto;
    gap: 8px;
    width: 100%;
  }

  .hero-showcase-stage {
    width: 100%;
    min-height: 226px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--white) 72%, transparent);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--blue-deep) 10%, transparent);
  }

  .hero-showcase-slide,
  .hero-showcase-slide:first-child {
    display: block;
  }

  .hero-showcase-slide img {
    width: 100%;
    height: 226px;
    max-height: none;
    padding: 8px;
    object-fit: contain;
    border-radius: 18px;
  }

  .hero-showcase-tabs {
    position: static;
    display: grid;
    width: 100%;
    margin: 0;
    padding: 4px;
    border-radius: 14px;
  }

  .hero-showcase-tabs button {
    min-height: 40px;
    padding: 5px 1px;
    font-size: 9px;
    line-height: 1.15;
  }

  .hero-visual-wrap > .floating-stat {
    position: absolute;
    z-index: 5;
    top: 174px;
    bottom: auto;
    display: flex;
    width: min(45%, 154px);
    min-height: 48px;
    padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    background: color-mix(in srgb, var(--white) 94%, transparent);
    backdrop-filter: blur(12px);
  }

  .hero-visual-wrap > .stat-a {
    left: 4px;
  }

  .hero-visual-wrap > .stat-b {
    right: 4px;
  }

  .hero-visual-wrap > .floating-stat .sprite-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border: 0;
    background: transparent;
  }

  .hero-visual-wrap > .floating-stat span,
  .hero-visual-wrap > .floating-stat strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: keep-all;
  }

  .hero-visual-wrap > .floating-stat span {
    font-size: 7px;
    line-height: 1.3;
  }

  .hero-visual-wrap > .floating-stat strong {
    font-size: 9px;
    line-height: 1.25;
  }

  .section-copy,
  .crm-copy,
  .migration-copy,
  .template-heading,
  .pricing-heading,
  .message-heading,
  .center-heading {
    text-align: center;
  }

  .section-copy h2,
  .center-heading h2,
  .crm-copy h2,
  .message-heading h2,
  .migration-copy h2,
  .template-heading h2,
  .pricing-heading h2,
  .final-content h2 {
    max-width: 330px;
    margin-inline: auto;
    font-size: clamp(27px, 7.6vw, 32px);
    line-height: 1.12;
    text-wrap: balance;
  }

  .section-copy > p,
  .center-heading > p,
  .crm-copy > p,
  .message-heading > p,
  .migration-copy > p,
  .template-heading > p,
  .pricing-heading > p,
  .final-content > p {
    max-width: 330px;
    margin: 14px auto 0;
    font-size: 12px;
    line-height: 1.65;
    text-align: center;
    text-wrap: balance;
  }

  .editorial-section,
  .message-section,
  .migration-section,
  footer {
    width: min(calc(100% - 28px), var(--max));
  }

  .editorial-section,
  .analytics-section,
  .crm-section,
  .message-section,
  .migration-section,
  .template-section,
  .pricing-section {
    min-height: auto;
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .feature-list {
    gap: 8px;
    margin: 24px 0 20px;
  }

  .feature-list li {
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    text-align: left;
  }

  .feature-list .sprite-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .feature-list b {
    font-size: 12px;
  }

  .feature-list span {
    font-size: 10px;
  }

  .section-copy .text-link,
  .migration-copy .text-link {
    justify-content: center;
    width: 100%;
    font-size: 13px;
  }

  .screen-roll-showcase {
    width: calc(100% + 28px);
    margin-inline: -14px;
    padding-block: 18px;
  }

  .screen-roll-row + .screen-roll-row {
    margin-top: 10px;
  }

  .metric-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    width: calc(100% - 28px);
    margin-top: 20px;
    border-radius: 14px;
  }

  .metric-strip article {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    min-height: 90px;
    padding: 10px 5px;
    text-align: center;
  }

  .metric-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .metric-icon svg {
    width: 18px;
    height: 18px;
  }

  .metric-strip span {
    font-size: 8px;
  }

  .metric-strip b {
    font-size: 10px;
  }

  .crm-section {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding-inline: 14px;
  }

  .crm-copy h2 {
    max-width: 330px;
  }

  .chip-row {
    justify-content: center;
    gap: 6px;
    margin: 18px 0 0;
  }

  .chip-row span {
    padding: 6px 9px;
    font-size: 9px;
  }

  .crm-visual img {
    width: min(100%, 430px);
  }

  .center-heading,
  .message-heading,
  .template-heading,
  .pricing-heading {
    margin-bottom: 28px;
  }

  .message-layout {
    gap: 24px;
  }

  .message-steps {
    gap: 8px;
  }

  .message-steps article {
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding-block: 10px;
    text-align: left;
  }

  .message-steps > article > span {
    width: 32px;
    height: 32px;
    font-size: 9px;
  }

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

  .message-steps p {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.45;
  }

  .migration-copy > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 20px 0;
  }

  .migration-copy > ul li {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 12px;
    background: var(--soft);
    font-size: 9px;
    line-height: 1.35;
    text-align: center;
  }

  .migration-copy > ul span {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .template-section {
    padding-inline: 14px;
  }

  .template-heading p {
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  .mobile-start-bar .handle-prefix,
  .mobile-start-bar .handle-form input {
    font-size: 12px;
  }

  .mobile-start-bar .handle-form {
    grid-template-columns: auto minmax(34px, 1fr) auto;
    padding-left: 10px;
  }

  .mobile-start-bar .handle-form button {
    padding: 0 10px;
    font-size: 12px;
  }

  .hero-copy h1,
  .section-copy h2,
  .center-heading h2,
  .crm-copy h2,
  .message-heading h2,
  .migration-copy h2,
  .final-content h2 {
    font-size: 29px;
  }

  .pricing-heading h2 {
    font-size: 26px;
  }

  .pricing-section {
    padding-right: 8px;
    padding-left: 8px;
  }

  .pricing-grid {
    gap: 12px;
  }

  .plan-card {
    min-height: 264px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .plan-features {
    font-size: 12px;
  }

  .plan-card .plan-features li {
    padding-right: 6px;
    padding-left: 24px;
  }

  .plan-card .plan-features li::before {
    left: 9px;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .screen-roll-row {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .screen-roll-row::-webkit-scrollbar {
    display: none;
  }

  .screen-roll-track {
    animation: none !important;
    transform: none !important;
  }

  .screen-roll-group[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 560px) {
  .final-cta-section {
    min-height: 520px;
    padding: 68px 18px 104px;
  }

  .final-content {
    display: grid;
    justify-items: center;
  }

  .final-content h2 {
    max-width: 330px;
    margin: 0;
    font-size: clamp(30px, 8.2vw, 34px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -0.055em;
    text-wrap: balance;
  }

  .final-content > p {
    max-width: 310px;
    margin: 18px auto 0;
    color: color-mix(in srgb, var(--white) 78%, transparent);
    font-size: 12px;
    font-weight: 450;
    line-height: 1.55;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .final-content .handle-wrap {
    width: 100%;
    max-width: 360px;
    margin-top: 26px;
  }

  .final-content .handle-form {
    grid-template-columns: auto minmax(48px, 1fr);
    gap: 0;
    min-height: 0;
    padding: 12px;
    border-radius: 20px;
  }

  .final-content .handle-prefix {
    padding-left: 4px;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -0.025em;
  }

  .final-content .handle-form input {
    padding: 0 6px;
    font-size: 14px;
    font-weight: 700;
  }

  .final-content .handle-form button {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 11px;
    padding-inline: 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
  }

  .final-content .handle-form button svg {
    width: 17px;
    height: 17px;
  }

  .final-content .form-note {
    min-height: 0;
    margin-top: 10px;
    color: color-mix(in srgb, var(--white) 72%, transparent);
    font-size: 10px;
    font-weight: 450;
    line-height: 1.45;
  }
}

/* Keep the complete link-editor demo visible in the compact mobile layout. */
@media (max-width: 560px) {
  .link-editor-preview {
    grid-template-rows: auto auto;
    align-items: start;
  }

  .link-editor-panel {
    height: 352px;
    align-self: start;
  }

  .link-editor-block.is-expanded {
    min-height: 54px;
    overflow: hidden;
  }

  .link-editor-block.is-expanded .link-editor-block-head {
    min-height: 54px;
    border-bottom: 0;
  }

  .link-editor-block-form {
    display: none;
  }

  .link-editor-phone {
    align-self: start;
  }
}

/* Mobile section CTAs follow the visual content instead of interrupting it. */
.mobile-section-cta {
  display: none !important;
}

@media (max-width: 560px) {
  .section-copy > .text-link,
  .migration-copy > .text-link {
    display: none;
  }

  .editorial-section > .mobile-section-cta,
  .migration-section > .mobile-section-cta {
    display: inline-flex !important;
    justify-content: center;
    justify-self: center;
    align-self: center;
    width: fit-content;
    margin-top: 24px;
    font-size: 13px;
  }
}

/* Mobile fan-space flow: headline → examples → explanation → CTA. */
@media (max-width: 560px) {
  .fan-space-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    padding-inline: 14px;
  }

  .fan-space-section .section-copy {
    display: contents;
  }

  .fan-space-section .section-copy > h2 {
    order: 1;
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .fan-space-section .section-copy > p {
    order: 2;
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .fan-space-section .screen-roll-showcase {
    order: 3;
    width: calc(100% + 28px);
    margin: 24px -14px 0;
  }

  .fan-space-section .section-copy > .feature-list {
    order: 4;
    width: 100%;
    min-width: 0;
    margin: 24px 0 0;
  }

  .fan-space-section .feature-list li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    padding: 13px 14px;
    box-sizing: border-box;
  }

  .fan-space-section .feature-list .sprite-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .fan-space-section .feature-list span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .fan-space-section > .mobile-section-cta {
    order: 5;
    margin-top: 22px;
  }
}

/* Keep mobile hero annotations attached to the showcase, like the desktop composition. */
@media (max-width: 560px) {
  .hero-visual-wrap > .floating-stat {
    width: min(43%, 148px);
    min-height: 46px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 14px;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--blue-deep) 14%, transparent);
  }

  .hero-visual-wrap > .stat-a {
    top: 18px;
    right: auto;
    bottom: auto;
    left: 2px;
  }

  .hero-visual-wrap > .stat-b {
    top: 160px;
    right: 2px;
    bottom: auto;
    left: auto;
  }

  .hero-visual-wrap > .floating-stat span {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* Keep mobile pricing cards separated, ordered, and internally grouped. */
@media (max-width: 560px) {
  .pricing-grid {
    gap: 20px;
    padding-block: 4px;
  }

  .pricing-grid .free-card {
    order: 1;
  }

  .pricing-grid .basic-card {
    order: 2;
  }

  .pricing-grid .pro-card {
    order: 3;
  }

  .pricing-grid .plan-card {
    min-height: 0;
    padding: 22px 20px;
  }

  .pricing-grid .plan-features {
    margin-top: 20px;
  }

  .pricing-grid .plan-button {
    margin-top: 18px;
  }
}

/* On mobile, keep the block-reordering demo focused and remove the phone preview. */
@media (max-width: 560px) {
  .link-editor-preview {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0;
  }

  .link-editor-phone {
    display: none;
  }

  .link-editor-panel {
    width: 100%;
    max-width: none;
  }
}

/* Template labels stay aligned to the centerline of each preview card. */
.template-meta {
  width: 100%;
  text-align: center;
}

.template-meta > p {
  max-width: 100%;
  margin: 5px auto 0;
}

@media (max-width: 560px) {
  .template-meta {
    text-align: center;
  }
}

/* Header navigation uses a calm filled-state hover instead of motion or an underline. */
@media (min-width: 821px) {
  .floating-header nav a:not(.nav-login-link) {
    padding: 8px 11px;
    border-radius: 999px;
    transition:
      color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease;
  }

  .floating-header nav a:not(.nav-login-link)::after,
  .login-link::after {
    display: none;
  }

  .floating-header nav a:not(.nav-login-link):hover,
  .floating-header nav a:not(.nav-login-link):focus-visible,
  .login-link:hover,
  .login-link:focus-visible {
    background: var(--cool);
    color: var(--blue);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .login-link {
    padding: 8px 10px;
    border-radius: 999px;
    transition:
      color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease;
  }

  .start-button:hover,
  .start-button:focus-visible {
    transform: none;
    background: var(--blue-deep);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--blue) 38%, transparent);
  }

  .start-button:hover span:last-child,
  .start-button:focus-visible span:last-child {
    transform: none;
  }
}

/* Show all editor benefits at once on mobile instead of using a carousel. */
@media (max-width: 560px) {
  .metric-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    width: calc(100% - 28px);
    margin: 20px auto 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--line);
    scroll-snap-type: none;
  }

  .metric-strip article {
    width: auto;
    min-width: 0;
    min-height: 104px;
    flex: initial;
    padding: 11px 5px;
    border: 0;
    border-radius: 0;
    scroll-snap-align: none;
  }

  .metric-strip article + article {
    border-left: 0;
  }

  .metric-strip span {
    margin-top: 0;
    font-size: 8px;
    line-height: 1.35;
  }

  .metric-strip b {
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1.25;
  }
}

/* Mobile plan details use a plain checklist so longer labels never overflow. */
@media (max-width: 560px) {
  .pricing-grid .plan-features {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 22px;
    padding-inline: 4px;
  }

  .pricing-grid .plan-card .plan-features li {
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .pricing-grid .free-card .plan-features li {
    background: transparent;
  }

  .pricing-grid .plan-card .plan-features li::before {
    content: none;
  }

  .pricing-grid .plan-card .plan-features li > svg {
    display: block;
    width: 17px;
    height: 17px;
    margin-right: 8px;
    flex: 0 0 17px;
  }

  .pricing-grid .unlimited-feature {
    min-width: 0;
    white-space: normal;
  }
}

/* 랜딩의 여러 컴포넌트가 display 를 직접 지정해 hidden 속성을 덮어쓴다. 표준 동작을 되돌린다. */
[hidden] {
  display: none !important;
}

/* 사업자 정보와 저작권 줄을 구분한다. 전자상거래법 표기를 기존 랜딩에서 이어받았다. */
.copyright {
  line-height: 1.8;
}

.copyright .copyright-line {
  display: block;
  margin-top: 12px;
}

.copyright a {
  color: inherit;
  text-decoration: underline;
}


/* ── 랜딩허브 신청 폼 ───────────────────────────────────── */
:root{
  --lh-accent:#3185ff;
  --lh-accent-soft:#edf4ff;
  --lh-on-accent:#ffffff;
  --lh-radius:13px;
  --lh-border:#dce7f7;
  --lh-field-bg:#ffffff;
  --lh-surface:#f6f9ff;
  --lh-muted:#667085;
}

/* 원본 시작 버튼 자리를 그대로 잇는 CTA */
.lh-cta{
  display:inline-flex;
  align-items:center;
  gap:13px;
  border-radius:13px;
  background:var(--blue);
  color:var(--white);
  font-weight:800;
  text-decoration:none;
  transition:transform 160ms ease, background-color 160ms ease;
}
.lh-cta:hover,.lh-cta:focus-visible{background:var(--blue-deep);color:var(--white);}
.lh-cta:active{transform:scale(0.98);}
.lh-cta-hero{
  min-height:67px;
  padding:0 30px;
  font-size:18px;
  box-shadow:0 18px 50px rgba(31,89,165,0.18);
}
.lh-cta-bar{
  width:100%;
  min-height:54px;
  justify-content:center;
  font-size:16px;
}

/* 최종 CTA 안의 신청 카드 */
.lh-apply{
  max-width:520px;
  margin:0 auto;
  padding:28px 24px 24px;
  border-radius:22px;
  background:var(--white);
  box-shadow:0 24px 60px rgba(13,55,119,0.28);
  text-align:left;
  color:var(--ink);
}
.lh-apply-title{
  margin:0;
  font-size:20px;
  font-weight:800;
  text-align:center;
}
.lh-apply-desc{
  margin:8px 0 20px;
  font-size:14px;
  color:var(--muted);
  text-align:center;
}
.lh-apply .lh-label{font-size:14px;font-weight:700;color:#344054;}
.lh-apply .lh-input{
  min-height:52px;
  border-radius:12px;
  font-weight:600;
}
.lh-apply .lh-input:focus{border-color:var(--blue);}
.lh-apply .lh-submit{
  min-height:56px;
  margin-top:6px;
  border-radius:13px;
  font-size:17px;
  font-weight:800;
}
.lh-apply .lh-submit:hover{background:var(--blue-deep);}
.lh-apply .lh-agree{font-size:13px;color:#475467;}
.lh-apply .lh-terms{max-height:150px;}

@media (max-width:640px){
  .lh-cta-hero{width:100%;justify-content:center;min-height:60px;font-size:17px;}
  .lh-apply{padding:24px 18px 20px;border-radius:18px;}
}

/* ── 쿠폰 소재에서 이어지는 요소 ──────────────────────────
   광고 소재가 초록 쿠폰이라 쿠폰과 관련된 것만 초록을 씁니다.
   나머지는 원본 블루를 그대로 둡니다. */
:root{
  --lh-green:#0f8a5f;
  --lh-green-neon:#3ddc84;
  --lh-green-deep:#0c3b2b;
  --lh-green-soft:#e7f9f0;
}

/* 소재의 "무료체험 쿠폰" 뱃지 */
.lh-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 20px;
  padding:8px 15px;
  border-radius:999px;
  background:var(--lh-green-soft);
  color:var(--lh-green);
  font-size:14px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.lh-badge b{color:var(--ink);}
.lh-badge.is-on-dark{background:rgba(61,220,132,0.16);color:var(--lh-green-neon);}
.lh-badge.is-on-dark b{color:var(--white);}

/* 히어로 밑에 붙는 쿠폰 코드 한 줄 */
.lh-code-inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:16px 0 0;
  padding:13px 16px;
  border:1.5px dashed var(--lh-green);
  border-radius:14px;
  background:var(--lh-green-soft);
  color:var(--lh-green-deep);
  font-size:14px;
  font-weight:700;
}
.lh-code-inline code{
  padding:5px 12px;
  border-radius:8px;
  background:var(--white);
  color:var(--lh-green-deep);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:16px;
  font-weight:800;
  letter-spacing:0.04em;
}
.lh-copy{
  margin-left:auto;
  padding:7px 14px;
  border:0;
  border-radius:999px;
  background:var(--lh-green);
  color:var(--white);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:background-color 160ms ease;
}
.lh-copy:hover,.lh-copy:focus-visible{background:var(--lh-green-deep);}
.lh-copy.is-done{background:var(--lh-green-deep);}
/* 히어로 CTA 는 좁은 화면에서 하단 고정바로 대체되지만, 쿠폰코드는
   첫 화면에 계속 보여야 해서 handle-wrap 밖에 둡니다. */
.lh-code-inline.is-hero{max-width:520px;margin-bottom:22px;}

/* 이런 분들께 ---------------------------------------------------------- */
.lh-who-section{
  padding:78px max(24px, calc((100vw - var(--max)) / 2)) 82px;
  background:var(--soft);
}
.lh-who-heading{max-width:760px;margin:0 auto 44px;text-align:center;}
.lh-who-heading h2{
  margin:0;
  color:var(--ink);
  font-size:clamp(28px,3.2vw,42px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-0.055em;
  word-break:keep-all;
}
.lh-who-heading p{
  max-width:620px;
  margin:14px auto 0;
  color:var(--muted);
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.65;
  word-break:keep-all;
}
.lh-who-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  width:min(100%,var(--max));
  margin:0 auto;
}
.lh-who-grid article{
  padding:28px 24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--white);
  box-shadow:0 14px 36px rgba(31,89,165,0.07);
}
.lh-who-grid strong{
  display:block;
  margin:0 0 8px;
  color:var(--ink);
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.03em;
}
.lh-who-grid p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
  word-break:keep-all;
}
.lh-who-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin:0 0 16px;
  border-radius:13px;
  background:var(--lh-green-soft);
  color:var(--lh-green);
}

/* 쿠폰 사용법 ---------------------------------------------------------- */
.lh-coupon-section{
  padding:110px max(24px, calc((100vw - var(--max)) / 2)) 118px;
  /* 빛은 왼쪽 카피 뒤에만 둡니다. 쿠폰 카드의 절취선 홈이 배경색을 그대로
     써야 해서, 카드가 놓이는 쪽은 단색이어야 합니다. */
  background:
    radial-gradient(circle at 10% 6%, rgba(61,220,132,0.2), transparent 42%),
    var(--lh-green-deep);
}
.lh-coupon-inner{
  display:grid;
  grid-template-columns:minmax(320px,0.95fr) minmax(320px,1.05fr);
  align-items:center;
  gap:clamp(44px,6vw,86px);
  width:min(100%,var(--max));
  margin:0 auto;
}
.lh-coupon-copy h2{
  margin:0;
  color:var(--white);
  font-size:clamp(34px,3.8vw,52px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.06em;
  word-break:keep-all;
}
.lh-coupon-copy h2 em{color:var(--lh-green-neon);font-style:normal;}
.lh-coupon-copy > p{
  margin:20px 0 0;
  color:rgba(255,255,255,0.78);
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.7;
  word-break:keep-all;
}
.lh-steps{margin:30px 0 0;padding:0;list-style:none;}
.lh-steps li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,0.14);
  color:var(--white);
}
.lh-steps li:first-child{border-top:0;padding-top:0;}
.lh-steps i{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--lh-green-neon);
  color:var(--lh-green-deep);
  font-size:13px;
  font-style:normal;
  font-weight:800;
}
.lh-steps b{display:block;font-size:16px;font-weight:800;letter-spacing:-0.03em;}
.lh-steps span{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,0.7);
  font-size:14px;
  line-height:1.6;
  word-break:keep-all;
}

/* 티켓 모양 쿠폰 카드 */
.lh-ticket{
  position:relative;
  max-width:420px;
  margin:0 auto;
  padding:34px 30px 30px;
  border-radius:24px;
  background:var(--white);
  box-shadow:0 30px 70px rgba(0,0,0,0.34);
  text-align:center;
}
.lh-ticket-top{
  color:var(--lh-green);
  font-size:14px;
  font-weight:800;
  letter-spacing:0.02em;
}
.lh-ticket-title{
  margin:10px 0 0;
  color:var(--ink);
  font-size:clamp(24px,2.4vw,30px);
  font-weight:800;
  letter-spacing:-0.05em;
  line-height:1.2;
  word-break:keep-all;
}
.lh-ticket-cut{
  position:relative;
  margin:24px -30px;
  border-top:2px dashed var(--line);
}
.lh-ticket-cut::before,
.lh-ticket-cut::after{
  content:"";
  position:absolute;
  top:-13px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--lh-green-deep);
}
.lh-ticket-cut::before{left:-13px;}
.lh-ticket-cut::after{right:-13px;}
.lh-ticket-label{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.lh-ticket-code{
  display:block;
  margin:10px 0 0;
  color:var(--lh-green-deep);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:clamp(32px,3.6vw,44px);
  font-weight:800;
  letter-spacing:0.06em;
}
.lh-ticket .lh-copy{margin:18px 0 0;padding:11px 22px;font-size:14px;}
.lh-ticket-note{
  margin:16px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  word-break:keep-all;
}

/* 요금제 카드에 붙는 쿠폰 표시 */
.lh-plan-coupon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0 0 14px;
  padding:10px 12px;
  border:1.5px dashed var(--lh-green);
  border-radius:12px;
  background:var(--lh-green-soft);
  color:var(--lh-green-deep);
  font-size:13px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.lh-plan-coupon code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-weight:800;
}

@media (max-width:900px){
  .lh-who-grid{grid-template-columns:1fr;}
  .lh-coupon-inner{grid-template-columns:1fr;gap:44px;}
  .lh-coupon-copy{text-align:center;}
  .lh-steps li{text-align:left;}
}

@media (max-width:900px){
  .lh-code-inline.is-hero{max-width:340px;margin-right:auto;margin-left:auto;justify-content:center;}
  .lh-code-inline.is-hero .lh-copy{margin-left:0;}
}

@media (max-width:640px){
  .lh-who-section{padding:60px 20px 64px;}
  .lh-coupon-section{padding:74px 20px 80px;}
  .lh-who-grid article{padding:22px 20px;}
  .lh-code-inline{font-size:13px;}
  .lh-copy{margin-left:0;}
  .lh-ticket{padding:28px 22px 24px;}
  .lh-ticket-cut{margin:22px -22px;}
}


/* ── 좁은 화면 본문 크기 ─────────────────────────────────
   광고로 들어오는 트래픽이 대부분 모바일인데 본문이 10~12px 이라
   읽히지 않는다는 지적이 있었습니다. 목업 안쪽은 그대로 둡니다. */
@media (max-width:560px){
  /* 섹션 리드 문단 */
  .hero-copy > p,
  .message-heading > p,
  .center-heading > p,
  .crm-copy > p,
  .section-copy > p,
  .migration-copy > p,
  .template-heading > p,
  .pricing-heading > p,
  .final-content > p{
    font-size:15px;
    line-height:1.65;
  }

  /* 자동 DM 3단계 — 지적받은 곳 */
  .message-steps b{font-size:16px;}
  .message-steps p{font-size:14px;line-height:1.6;}
  .message-steps > article > span{font-size:12px;}

  /* 멀티링크 기능 목록 */
  /* 원본이 .feature-list li b 로 잡아둬서 같은 수준으로 맞춥니다. */
  .feature-list li b{font-size:16px;}
  .feature-list li span{font-size:14px;line-height:1.6;}

  /* 간편 이전 단계 */
  .migration-copy > ul li b{font-size:14px;}

  /* 쿠팡 섹션 칩 */
  .chip-row span{font-size:12px;}

  /* 히어로 화면 전환 탭 — 실제로 누르는 버튼 */
  .hero-showcase-tabs button{font-size:12px;}

  /* 섹션 하단 텍스트 링크 */
  .text-link.mobile-section-cta,
  .template-cta{font-size:15px;}

  /* 요금제 */
  .pricing-badge{font-size:12px;}
  .pricing-grid .plan-card .plan-features li{font-size:14px;}
  .plan-note{font-size:14px;line-height:1.6;}

  /* 쿠폰코드 줄 — .hero-copy > p 에 눌리지 않게 클래스를 두 개 씁니다 */
  .lh-code-inline.is-hero{font-size:14px;}
  .lh-code-inline.is-hero code{font-size:16px;}

  /* 링크 편집 섹션 아래 기능 설명 — 목업이 아니라 본문입니다 */
  .metric-strip b{font-size:14px;}
  .metric-strip span{font-size:13px;line-height:1.55;}

  .lh-plan-coupon{font-size:14px;}

  /* 폼 주변 안내. 원본이 .final-content .form-note 로 잡습니다. */
  .form-note,
  .final-content .form-note{font-size:13px;line-height:1.6;}
  .lh-apply .lh-help{font-size:13px;}
  .lh-apply .lh-agree-text{font-size:14px;}

  /* 푸터 */
  footer .copyright,
  footer .copyright a,
  footer .copyright-line{font-size:12px;}
  .footer-links a{font-size:14px;}
}

/* ── 이런 분들께 섹션 배경 : 3D 아이콘 타일 ─────────────────
   둥근 사각형이 공중에 떠 있는 모양을 CSS 만으로 만듭니다. 이미지가 아니라
   용량이 안 늘고 어느 해상도에서도 안 깨집니다.
   입체감은 네 겹입니다 — 위에서 내려오는 그라데이션, 윗면 하이라이트,
   아랫면 그늘, 바닥 그림자. 여기에 perspective 회전을 얹습니다. */
.lh-who-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(214,41,118,.10), transparent 55%),
    radial-gradient(ellipse at 84% 22%, rgba(49,133,255,.12), transparent 55%),
    linear-gradient(165deg, #eef3ff 0%, #f6f2ff 46%, #fff2f3 100%);
}
.lh-who-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.lh-who-section > .lh-who-heading,
.lh-who-section > .lh-who-grid{position:relative;z-index:1;}

/* 제목은 타일 위에 바로 얹히므로 아주 옅은 반투명 막만 한 겹 둡니다.
   박스를 그리면 배경을 꽉 채운 의미가 없어서, 흐릿하게만 걷어냅니다. */
.lh-who-heading::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;
  width:min(900px,132%);height:190%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(255,255,255,.72) 38%, rgba(255,255,255,0) 74%);
}

.lh-tile{
  position:absolute;
  top:var(--t);
  left:var(--l);
  width:var(--s);
  height:var(--s);
  display:grid;
  place-items:center;
  border-radius:27%;
  transform:perspective(620px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz));
  box-shadow:
    0 22px 34px -12px rgba(23,45,80,.34),
    inset 0 3px 0 rgba(255,255,255,.85),
    inset 0 -10px 18px rgba(23,45,80,.16);
}
.lh-tile svg{width:44%;height:44%;display:block;}
.lh-tile-word svg{width:76%;height:auto;}

/* 윗면에 미끄러지는 광택 한 줄 */
.lh-tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(150deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%);
}

.lh-tile-white{background:linear-gradient(155deg,#ffffff 0%,#e9edf4 100%);color:#5a6b86;}
.lh-tile-red  {background:linear-gradient(155deg,#ff6b60 0%,#d3202a 100%);color:#fff;}
.lh-tile-blue {background:linear-gradient(155deg,#5aa6ff 0%,#1f6fdc 100%);color:#fff;}
.lh-tile-sky  {background:linear-gradient(155deg,#63d9f2 0%,#12a8cf 100%);color:#fff;}
.lh-tile-green{background:linear-gradient(155deg,#5ce6a8 0%,#0f8a5f 100%);color:#fff;}
.lh-tile-amber{background:linear-gradient(155deg,#ffd75e 0%,#f0a416 100%);color:#5c3a00;}
.lh-tile-pink {background:linear-gradient(155deg,#ff8fc3 0%,#e0407f 100%);color:#fff;}
.lh-tile-ig   {background:linear-gradient(150deg,#feda75 0%,#d62976 52%,#4f5bd5 100%);color:#fff;}
.lh-tile-coupang{background:linear-gradient(155deg,#ffffff 0%,#f0f2f6 100%);color:#e52528;}
.lh-tile-toss{background:linear-gradient(155deg,#4b95ff 0%,#0050d8 100%);color:#fff;}
.lh-tile-naver{background:linear-gradient(155deg,#2ee07f 0%,#03a548 100%);color:#fff;}
.lh-tile-kakao{background:linear-gradient(155deg,#ffef7a 0%,#f2d200 100%);color:#3b1e1e;}

/* 천천히 떠다닙니다. 움직임을 꺼둔 사용자에게는 멈춥니다. */
@media (prefers-reduced-motion: no-preference){
  .lh-tile{animation:lh-tile-float 7s ease-in-out infinite;}
  .lh-tile:nth-child(3n){animation-duration:9s;animation-delay:-2.2s}
  .lh-tile:nth-child(3n+1){animation-duration:8s;animation-delay:-4.4s}
  .lh-tile:nth-child(4n){animation-delay:-1.3s}
  .lh-tile:nth-child(5n){animation-delay:-5.6s}
}
@keyframes lh-tile-float{
  0%,100%{translate:0 0}
  50%{translate:0 -14px}
}

@media (max-width:900px){
  /* 좁아져도 배경은 꽉 채웁니다. 개수는 그대로, 크기만 줄입니다. */
  .lh-tile{border-radius:26%;width:calc(var(--s) * .74);height:calc(var(--s) * .74);}
}

@media (max-width:560px){
  .lh-tile{
    width:calc(var(--s) * .5);height:calc(var(--s) * .5);
    box-shadow:
      0 12px 20px -8px rgba(23,45,80,.32),
      inset 0 2px 0 rgba(255,255,255,.85),
      inset 0 -6px 12px rgba(23,45,80,.16);
  }
  .lh-who-heading::before{width:150%;background:radial-gradient(ellipse at center, rgba(255,255,255,.82) 42%, rgba(255,255,255,0) 76%);}
}
.lh-badge.is-meta{background:#e8f1ff;color:#0064e0;}
.lh-badge.is-meta b{color:var(--ink);}
.lh-meta-mark{width:26px;height:15px;display:block;flex:none;}
@media (max-width:560px){.lh-meta-mark{width:22px;height:13px;}}

/* ── 롤링 쇼케이스를 쿠팡 섹션으로 옮기면서 ─────────────────
   가장자리 페이드가 var(--white) 로 흐려지게 되어 있었습니다.
   파란 배경 위에서는 흰 띠로 보이므로 배경색에 맞춥니다. */
.crm-visual .screen-roll-showcase{width:100%;margin:0;padding:0;}
.crm-visual .screen-roll-showcase::before{
  background:linear-gradient(90deg, var(--blue) 4%, transparent 100%);
}
.crm-visual .screen-roll-showcase::after{
  background:linear-gradient(270deg, var(--blue) 4%, transparent 100%);
}

/* ── 타사 비교표 ─────────────────────────────────────────
   앞뒤가 밝은 섹션이라 어둡게 깔아 여기서 시선이 멈추게 합니다.
   행이 아홉이라 짝수 행에 옅은 배경을 깔아 가로로 눈이 새지 않게 합니다. */
.lh-compare-section{
  padding:118px max(20px, calc((100vw - var(--max)) / 2)) 126px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(49,133,255,.20), transparent 55%),
    #0b1220;
}
.lh-compare-heading{max-width:820px;margin:0 auto 52px;text-align:center;}
.lh-compare-heading h2{
  margin:0;
  color:var(--white);
  font-size:clamp(32px,4vw,56px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.06em;
  word-break:keep-all;
}
.lh-compare-heading p{
  margin:18px 0 0;
  color:rgba(255,255,255,.62);
  font-size:clamp(15px,1.3vw,18px);
  line-height:1.7;
}

.lh-compare-wrap{
  width:min(100%,980px);
  margin:0 auto;
  overflow-x:auto;            /* 좁은 화면에서 표가 잘리지 않고 스스로 밀립니다 */
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(255,255,255,.03);
}
.lh-compare{
  width:100%;
  min-width:340px;
  border-collapse:collapse;
  font-size:15px;
}
.lh-compare th,
.lh-compare td{
  padding:16px 18px;
  text-align:center;
  vertical-align:middle;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.lh-compare tbody tr:last-child th,
.lh-compare tbody tr:last-child td{border-bottom:0;}

/* 첫 열은 항목 이름. 왼쪽 정렬이라야 훑을 때 눈이 걸립니다. */
.lh-compare tbody th[scope="row"]{
  text-align:left;
  color:rgba(255,255,255,.9);
  font-weight:700;
  letter-spacing:-0.02em;
  word-break:keep-all;
}
.lh-compare thead th{
  color:rgba(255,255,255,.55);
  font-size:14px;
  font-weight:700;
}
.lh-compare thead th.lh-cmp-us{
  color:#7ab8ff;
  font-size:17px;
  font-weight:800;
}
.lh-compare .lh-cmp-other{color:rgba(255,255,255,.42);}
.lh-compare .lh-cmp-us{
  background:rgba(49,133,255,.10);
  color:var(--white);
}
.lh-compare .lh-cmp-us b{font-weight:800;letter-spacing:-0.02em;}
.lh-compare .lh-cmp-us small{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.55);
  font-size:12px;
  font-weight:600;
}
.lh-cmp-x{color:rgba(255,255,255,.3);font-size:15px;}

/* 짝수 행 줄무늬. 구분선만으로는 열이 셋이라 시선이 옆줄로 샙니다. */
.lh-compare tbody tr:nth-child(even){background:rgba(255,255,255,.025);}
.lh-compare tbody tr:nth-child(even) .lh-cmp-us{background:rgba(49,133,255,.14);}

@media (max-width:640px){
  .lh-compare-section{padding:72px 16px 78px;}
  .lh-compare-heading{margin-bottom:34px;}
  .lh-compare{font-size:14px;}
  .lh-compare th,
  .lh-compare td{padding:13px 10px;}
  .lh-compare thead th.lh-cmp-us{font-size:15px;}
  .lh-compare .lh-cmp-us small{font-size:11px;}
}

/* ── 간편 이전 : 걱정 → 안심 → 해결 ─────────────────────────
   제목 하나로 말하던 자리를 세 박자로 나눕니다. 걱정을 먼저 꺼내 주면
   그 다음 문장이 답으로 읽힙니다. */
/* .migration-copy > p 가 더 구체적이라 같은 수준으로 맞춥니다. */
.migration-copy > p.lh-mig-worry{
  /* 형제들이 margin-inline:auto 로 가운데 정렬됩니다. auto 를 지우면 혼자 왼쪽으로 밀립니다. */
  margin:0 auto 16px;
  color:var(--muted);
  font-size:clamp(19px,2vw,26px);
  font-weight:600;
  line-height:1.4;
  letter-spacing:-0.04em;
  word-break:keep-all;
}

/* inline-block 이라 부모의 text-align 을 그대로 따릅니다.
   데스크톱은 왼쪽, 모바일은 가운데로 알아서 갑니다. */
.lh-mig-check{
  display:inline-block;
  width:88px;
  height:91px;
  margin:0 0 10px;
  vertical-align:middle;
}
.lh-mig-check svg{width:100%;height:100%;display:block;overflow:visible;}
.lh-mig-check path{
  fill:none;
  stroke-width:12;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:0;
}
/* 아래 어두운 획이 두께를 만듭니다. */
.lh-mig-check .lh-chk-shade{stroke:#04613c;opacity:.5;transform:translateY(4px);}
.lh-mig-check .lh-chk-main{stroke:#ffffff;}

.migration-copy > p.lh-mig-ok{
  margin:0 auto 12px;
  color:var(--lh-green);
  font-size:clamp(24px,2.6vw,34px);
  font-weight:800;
  letter-spacing:-0.05em;
}

/* 체크가 그려지고 잠시 머물렀다 다시 그려집니다. 움직임을 꺼둔 사용자에게는
   완성된 상태로 멈춥니다. */
@media (prefers-reduced-motion: no-preference){
  .lh-mig-check path{animation:lh-check-draw 3.2s ease-in-out infinite;}
  .lh-mig-check > svg > g{animation:lh-check-pop 3.2s ease-in-out infinite;transform-origin:50% 48%;}
}
@keyframes lh-check-draw{
  0%{stroke-dashoffset:1}
  22%{stroke-dashoffset:0}
  88%{stroke-dashoffset:0}
  100%{stroke-dashoffset:1}
}
@keyframes lh-check-pop{
  0%{transform:scale(.88)}
  16%{transform:scale(1.05)}
  26%,100%{transform:scale(1)}
}

@media (max-width:640px){
  .migration-copy > p.lh-mig-worry{margin-bottom:12px;font-size:18px;}
  .lh-mig-check{width:72px;height:74px;margin-bottom:6px;}
  .migration-copy > p.lh-mig-ok{font-size:22px;}
}

/* ── 최종 CTA 부제 ────────────────────────────────────────
   쿠폰과 별개로 걸린 두 번째 제안이라, 본문처럼 흐리게 두면 그냥 지나칩니다.
   알약 배경을 깔아 한 덩어리로 눈에 걸리게 합니다.
   .final-content > p 가 더 구체적이라 클래스를 하나 더 얹어 이깁니다. */
.final-content > p.lh-final-invite{
  display:inline-block;
  margin:20px auto 0;
  padding:12px 22px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:clamp(16px,1.5vw,20px);
  font-weight:700;
  line-height:1.45;
  letter-spacing:-0.03em;
  word-break:keep-all;
}
@media (max-width:640px){
  .final-content > p.lh-final-invite{margin-top:16px;padding:11px 18px;font-size:16px;}
}

/* ── 히어로 소통방 초대 ────────────────────────────────────
   최종 CTA 의 초대 배지와 같은 역할입니다. 다만 히어로는 밝은 배경이라
   흰 알약 대신 쿠폰과 같은 초록 계열로 깝니다.
   .hero-copy > p 가 더 구체적이라 클래스를 하나 더 얹어 이깁니다.
   handle-wrap 바깥에 두는 것도 그대로입니다 — 좁은 화면에서 그 안은 숨겨집니다. */
.hero-copy > p.lh-hero-invite{
  display:inline-block;
  margin:0 0 22px;
  padding:12px 20px;
  border:1px solid rgba(15,138,95,.3);
  border-radius:999px;
  background:var(--lh-green-soft);
  color:var(--lh-green-deep);
  font-size:clamp(15px,1.4vw,18px);
  font-weight:700;
  line-height:1.45;
  letter-spacing:-0.03em;
  word-break:keep-all;
}
@media (max-width:900px){
  .hero-copy > p.lh-hero-invite{margin-right:auto;margin-left:auto;}
}
@media (max-width:640px){
  .hero-copy > p.lh-hero-invite{padding:11px 17px;font-size:15px;}
}

/* 버튼 문구가 길어져 기본 17px 로는 두 줄로 접힙니다. */
.lh-apply .lh-submit{font-size:16px;line-height:1.3;word-break:keep-all;}
@media (max-width:400px){
  .lh-apply .lh-submit{font-size:15px;}
}

/* ── 좁은 화면 타일 재배치 ────────────────────────────────
   모바일에서는 카드가 세로로 쌓여 섹션의 아래 2/3 를 덮습니다.
   비는 구간이 제목 아래 한 줄뿐이라, 브랜드 타일을 그 띠로 올리고
   어차피 안 보이는 일반 타일은 내립니다.
   위치는 인라인 변수로 들어가 있어 top/left 를 직접 덮어써야 합니다. */
@media (max-width:900px){
  .lh-tile.is-band{top:20.5%;}
  .lh-tile.is-band-1{left:2%;}
  .lh-tile.is-band-2{left:21%;}
  .lh-tile.is-band-3{left:40%;}
  .lh-tile.is-band-4{left:59%;}
  .lh-tile.is-band-5{left:78%;}
  .lh-tile.is-hide-mobile{display:none;}
}

/* ── 쿠팡 → 멀티링크 담기 데모 ─────────────────────────────
   영상 대신 스크린샷 한 장 + CSS 애니메이션입니다. 자동재생이 막히는
   브라우저가 없고, 움직임을 꺼둔 사용자에게는 완료 상태로 멈춥니다.
   좌표는 스크린샷 원본(1101x630)에서 재서 % 로 넣었습니다. */
.lh-demo{
  position:relative;
  width:100%;
  padding-bottom:16%;      /* 오른쪽 아래 카드가 걸칠 자리 */
  --dur:7s;
}
.lh-demo-shot{
  position:relative;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 26px 60px rgba(6,32,72,.34);
}
.lh-demo-shot img{display:block;width:100%;height:auto}

/* 담기 버튼 자리 — 눌리는 순간 테두리가 번집니다. */
.lh-demo-ring{
  position:absolute;
  left:51.2%;top:91.9%;width:10.2%;height:4%;
  border:2px solid #16b47f;
  border-radius:7px;
  opacity:0;
}

.lh-demo-cursor{
  position:absolute;
  left:0;top:0;
  width:26px;height:26px;
  color:#0f172a;
  filter:drop-shadow(0 3px 5px rgba(8,25,52,.4));
}
.lh-demo-cursor svg{width:100%;height:100%;fill:#fff;stroke:#0f172a;stroke-width:1.1}

/* 담긴 상품이 멀티링크 카드로 날아갑니다. */
.lh-demo-fly{
  position:absolute;
  left:52.1%;top:41.3%;
  width:8%;height:auto;
  border-radius:8px;
  opacity:0;
  box-shadow:0 10px 22px rgba(6,32,72,.34);
}

/* 오른쪽 아래에 걸치는 내 멀티링크 카드 */
.lh-demo-link{
  position:absolute;
  right:-2%;bottom:0;
  width:44%;
  padding:13px 13px 11px;
  border-radius:15px;
  background:#fff;
  box-shadow:0 20px 44px rgba(6,32,72,.3);
}
.lh-demo-link-top{
  display:block;margin:0 0 9px;
  color:#0f172a;font-size:12px;font-weight:800;letter-spacing:-.03em;
}
.lh-demo-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;margin-bottom:6px;
  border:1px solid #e7eef9;border-radius:9px;background:#f8fbff;
}
.lh-demo-row i{width:22px;height:22px;border-radius:6px;background:#dbe7f7;flex:none}
.lh-demo-row em{display:block;height:7px;border-radius:4px;background:#dbe7f7;flex:1}
.lh-demo-row:nth-of-type(3) em{max-width:62%}
.lh-demo-row.is-new{
  border-color:#16b47f;
  background:#eafaf3;
  opacity:0;
  transform:translateY(6px);
}
.lh-demo-row.is-new img{width:26px;height:26px;border-radius:7px;flex:none}
.lh-demo-row.is-new strong{
  display:block;color:#0f172a;font-size:11px;font-weight:800;letter-spacing:-.03em;line-height:1.25;
}
.lh-demo-row.is-new small{
  display:block;margin-top:2px;color:#5c6b82;font-size:10px;font-weight:600;
}

@media (prefers-reduced-motion: no-preference){
  .lh-demo-cursor{animation:lh-demo-cursor var(--dur) cubic-bezier(.4,0,.2,1) infinite}
  .lh-demo-ring{animation:lh-demo-ring var(--dur) ease-out infinite}
  .lh-demo-fly{animation:lh-demo-fly var(--dur) cubic-bezier(.5,0,.3,1) infinite}
  .lh-demo-row.is-new{animation:lh-demo-row var(--dur) ease-out infinite}
}

/* 커서: 오른쪽 아래에서 들어와 버튼 위에서 한 번 누릅니다. */
@keyframes lh-demo-cursor{
  0%   {left:82%;top:74%;transform:scale(1);opacity:0}
  6%   {opacity:1}
  20%  {left:57.5%;top:95%;transform:scale(1)}
  23%  {transform:scale(.82)}
  26%  {transform:scale(1)}
  70%  {left:57.5%;top:95%;opacity:1}
  84%  {left:82%;top:74%;opacity:0}
  100% {left:82%;top:74%;opacity:0}
}
@keyframes lh-demo-ring{
  0%,20% {opacity:0;transform:scale(1)}
  23%    {opacity:1;transform:scale(1)}
  34%    {opacity:0;transform:scale(1.28)}
  100%   {opacity:0;transform:scale(1.28)}
}
/* 상품이 카드 안 새 줄 자리로 날아갑니다. */
@keyframes lh-demo-fly{
  0%,24%  {opacity:0;transform:translate(0,0) scale(1)}
  28%     {opacity:1;transform:translate(0,0) scale(1)}
  46%     {opacity:1;transform:translate(150%,90%) scale(.72)}
  56%     {opacity:0;transform:translate(320%,168%) scale(.42)}
  100%    {opacity:0;transform:translate(320%,168%) scale(.42)}
}
@keyframes lh-demo-row{
  0%,52%  {opacity:0;transform:translateY(6px)}
  60%,88% {opacity:1;transform:translateY(0)}
  96%,100%{opacity:0;transform:translateY(6px)}
}

@media (max-width:900px){
  .lh-demo{padding-bottom:22%}
  .lh-demo-link{width:56%;right:-1%;padding:11px 11px 9px}
  .lh-demo-cursor{width:22px;height:22px}
  .lh-demo-row.is-new strong{font-size:10px}
  .lh-demo-row.is-new small{font-size:9px}
}
@media (max-width:560px){
  .lh-demo{padding-bottom:30%}
  .lh-demo-shot{border-radius:12px}
  .lh-demo-link{width:66%;padding:10px 10px 8px}
  .lh-demo-link-top{font-size:11px}
  .lh-demo-row{padding:5px 6px;margin-bottom:5px}
  .lh-demo-cursor{width:19px;height:19px}
}

/* ── 데모 위에 덮이는 원본 규칙 정리 ──────────────────────
   원본 랜딩의 .crm-visual img 가 폭·그림자·둥둥 뜨는 애니메이션을 걸어둡니다.
   스크린샷이 떠다니면 그 위에 얹은 커서·링 좌표가 어긋나고,
   날아가야 할 썸네일도 제자리에서 흔들리기만 합니다. 여기서 걷어냅니다. */
.crm-visual .lh-demo{width:100%;}
.crm-visual .lh-demo img{
  width:100%;
  max-width:100%;
  filter:none;
  animation:none;
  will-change:auto;
  transform:none;
}
.crm-visual .lh-demo .lh-demo-row.is-new img{width:26px;height:26px;}
@media (prefers-reduced-motion: no-preference){
  .crm-visual .lh-demo img.lh-demo-fly{
    width:8%;
    animation:lh-demo-fly var(--dur) cubic-bezier(.5,0,.3,1) infinite;
  }
}
@media (max-width:900px){
  .crm-visual .lh-demo .lh-demo-row.is-new img{width:22px;height:22px;}
}

/* ── 이런 분들께 : 브랜드 아이콘 ──────────────────────────
   초록 단색 글리프였던 자리에 실제 마크가 들어갑니다. 마크가 색을 갖고
   있으므로 담는 타일은 무채색으로 물러섭니다. */
.lh-who-icon.is-brand{
  width:52px;
  height:52px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--white);
  box-shadow:0 6px 16px rgba(31,89,165,.10);
}
.lh-who-icon.is-brand svg{width:30px;height:30px;display:block}

@media (max-width:640px){
  .lh-who-icon.is-brand{width:46px;height:46px;border-radius:13px}
  .lh-who-icon.is-brand svg{width:26px;height:26px}
}

/* 자동 DM 설명 목록을 팔로우 확인 애니메이션으로 교체한다. */
.message-follow-visual {
  position: relative;
  min-width: 0;
}

.message-follow-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--cool);
}

.message-follow-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

@media (max-width: 980px) {
  .message-visual,
  .message-follow-visual {
    width: min(100%, 650px);
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .message-video-frame,
  .message-follow-frame {
    border-radius: 20px;
  }
}