/* Entry-only logo composition experiments. Keep separate from the app/results CSS churn. */
.entry-step .brand-lockup .brand-mark,
:root:not([data-theme="dark"]) .entry-step .brand-lockup .brand-mark,
:root[data-theme="dark"] .entry-step .brand-lockup .brand-mark {
  z-index: 3;
  width: clamp(132px, 13.5vw, 177px);
  height: clamp(132px, 13.5vw, 177px);
  margin-bottom: -30px;
  transform: translateY(22px);
}

.entry-step .brand-lockup h1 {
  position: relative;
  z-index: 2;
  margin-top: 0;
}

.entry-step .brand-lockup h1 .splash-word-dinner,
.entry-step .brand-lockup h1 .splash-word-consensus {
  display: block;
}

.entry-step .brand-lockup h1 .splash-word-dinner {
  color: var(--soft-white, #fffaf2);
}

.entry-step .brand-lockup h1 .splash-word-consensus {
  color: var(--coral, #ff6f5e);
}

:root[data-splash-logo-layout="tight"] .entry-step .brand-lockup h1 {
  line-height: 0.8;
}

:root[data-splash-logo-layout="tight"] .entry-step .brand-lockup h1 .splash-word-consensus,
:root[data-splash-logo-layout="tight"] .entry-step .brand-lockup h1 > span:not(.splash-word-dinner) {
  margin-top: -0.08em;
}

:root[data-splash-logo-layout="large"] .entry-step .brand-lockup .brand-mark,
:root[data-splash-logo-layout="large"]:not([data-theme="dark"]) .entry-step .brand-lockup .brand-mark,
:root[data-splash-logo-layout="large"][data-theme="dark"] .entry-step .brand-lockup .brand-mark {
  width: clamp(150px, 15.8vw, 208px);
  height: clamp(150px, 15.8vw, 208px);
  margin-bottom: -38px;
  transform: translateY(28px);
}

:root[data-splash-logo-layout="large"] .entry-step .brand-lockup h1 {
  line-height: 0.78;
}

:root[data-splash-logo-layout="large"] .entry-step .brand-lockup h1 .splash-word-consensus,
:root[data-splash-logo-layout="large"] .entry-step .brand-lockup h1 > span:not(.splash-word-dinner) {
  margin-top: -0.11em;
}

:root[data-splash-logo-layout="split"] .entry-step .brand-lockup {
  gap: clamp(2px, 0.45vw, 7px);
}

:root[data-splash-logo-layout="split"] .entry-step .brand-lockup .eyebrow {
  display: none;
}

:root[data-splash-logo-layout="split"] .entry-step .brand-lockup .brand-mark,
:root[data-splash-logo-layout="split"]:not([data-theme="dark"]) .entry-step .brand-lockup .brand-mark,
:root[data-splash-logo-layout="split"][data-theme="dark"] .entry-step .brand-lockup .brand-mark {
  order: 2;
  width: clamp(138px, 13vw, 182px);
  height: clamp(138px, 13vw, 182px);
  margin: -0.04em 0;
  transform: none;
}

:root[data-splash-logo-layout="split"] .entry-step .brand-lockup h1 {
  display: contents;
}

:root[data-splash-logo-layout="split"] .entry-step .brand-lockup h1 .splash-word-dinner,
:root[data-splash-logo-layout="split"] .entry-step .brand-lockup h1 .splash-word-consensus {
  display: block;
  max-width: 560px;
  font-family: var(--display-font, "Fraunces", Georgia, serif);
  font-size: clamp(3.45rem, 7.4vw, 6.35rem);
  font-weight: 680;
  letter-spacing: 0;
  line-height: 0.82;
  text-align: center;
}

:root[data-splash-logo-layout="split"] .entry-step .brand-lockup h1 .splash-word-dinner {
  order: 1;
  color: var(--soft-white, #fffaf2);
}

:root[data-splash-logo-layout="split"] .entry-step .brand-lockup h1 .splash-word-consensus {
  order: 3;
}

:root[data-splash-logo-layout="split"] .entry-step .brand-lockup .hero-subtitle {
  order: 4;
}

.user-splash-logo-lab {
  display: grid;
  gap: 7px;
  border-bottom: 1px solid var(--border);
  padding: 9px 2px;
}

.user-splash-logo-lab > span {
  padding: 0 6px;
  color: var(--muted-text);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.user-splash-logo-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.user-feature-menu .user-splash-logo-options button {
  display: inline-flex;
  width: auto;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 999px;
  padding: 0 9px;
  background: transparent;
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 820;
  text-align: center;
}

.user-feature-menu .user-splash-logo-options button.is-selected,
.user-feature-menu .user-splash-logo-options button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--coral, #ff6f5e) 38%, var(--border));
  background: color-mix(in srgb, var(--coral, #ff6f5e) 12%, var(--panel-bg));
  color: var(--text);
}

@media (max-width: 680px) {
  .entry-step .brand-lockup .brand-mark,
  :root:not([data-theme="dark"]) .entry-step .brand-lockup .brand-mark,
  :root[data-theme="dark"] .entry-step .brand-lockup .brand-mark {
    width: clamp(116px, 31vw, 136px);
    height: clamp(116px, 31vw, 136px);
    margin-bottom: -24px;
    transform: translateY(18px);
  }

  :root[data-splash-logo-layout="large"] .entry-step .brand-lockup .brand-mark,
  :root[data-splash-logo-layout="large"]:not([data-theme="dark"]) .entry-step .brand-lockup .brand-mark,
  :root[data-splash-logo-layout="large"][data-theme="dark"] .entry-step .brand-lockup .brand-mark {
    width: clamp(132px, 35vw, 154px);
    height: clamp(132px, 35vw, 154px);
    margin-bottom: -30px;
    transform: translateY(22px);
  }

  :root[data-splash-logo-layout="split"] .entry-step .brand-lockup .brand-mark,
  :root[data-splash-logo-layout="split"]:not([data-theme="dark"]) .entry-step .brand-lockup .brand-mark,
  :root[data-splash-logo-layout="split"][data-theme="dark"] .entry-step .brand-lockup .brand-mark {
    width: clamp(112px, 30vw, 134px);
    height: clamp(112px, 30vw, 134px);
    margin: -0.02em 0;
    transform: none;
  }

  :root[data-splash-logo-layout="split"] .entry-step .brand-lockup h1 .splash-word-dinner,
  :root[data-splash-logo-layout="split"] .entry-step .brand-lockup h1 .splash-word-consensus {
    max-width: 320px;
    font-size: clamp(2.85rem, 13.5vw, 3.72rem);
  }
}