.onboarding-shell,
.onboarding-loading,
.onboarding-preview-finished {
  width: min(100%, 390px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: hidden;
  color: var(--color-text-primary, #1a1a1a);
  background: var(--color-surface, #ffffff);
  font-family: var(--font-app, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: 0;
  box-sizing: border-box;
}

.onboarding-shell *,
.onboarding-loading *,
.onboarding-preview-finished * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.onboarding-shell button,
.onboarding-shell input,
.onboarding-preview-finished button {
  font: inherit;
}

.onboarding-coach-target {
  position: relative !important;
  z-index: 1002 !important;
}

.onboarding-coach-target-clone.drawer-avatar-button {
  position: fixed;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 8px #ffffff, 0 10px 28px rgba(0, 0, 0, 0.34);
  pointer-events: auto;
  cursor: pointer;
}

.onboarding-coach-target-clone.drawer-avatar-button :is(.drawer-avatar-photo, .drawer-avatar-default) {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.onboarding-coach-interactive {
  transform-origin: center;
  animation: onboarding-coach-pulse 1.8s ease-in-out infinite;
  will-change: transform;
}

.onboarding-coach-readonly,
.onboarding-coach-readonly * {
  pointer-events: none !important;
  user-select: none !important;
}

.onboarding-coach-scroll-lock {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

@keyframes onboarding-coach-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

.onboarding-coach-interactive.onboarding-coach-move-target {
  animation: none;
}

.onboarding-coach-move-target > .project-folder-card-bg,
.onboarding-coach-move-target > .sales-side-card-bg,
.onboarding-coach-move-target > .pipeline-card {
  animation: onboarding-project-move-hint 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  will-change: transform;
}

.onboarding-coach-move-target.dragging-source > .project-folder-card-bg,
.onboarding-coach-move-target.dragging-source > .sales-side-card-bg,
.onboarding-coach-move-target.dragging-source > .pipeline-card {
  animation: none;
  transform: none;
}

@keyframes onboarding-project-move-hint {
  0%, 12%, 100% { transform: translateX(0); }
  46% { transform: translateX(var(--onboarding-move-x, 44px)); }
  66% { transform: translateX(0); }
}

.onboarding-coach-dimmer {
  position: fixed;
  /* NAO usar `inset:0` nem `bottom`. inset:0 fixa top E bottom ao mesmo tempo que
     a altura; quando os tres brigam, o SAFARI obedece o bottom (prende no fundo da
     area visivel, acima da barra) e IGNORA a altura — o veu ficava curto por mais
     que eu aumentasse. O Chromium obedece a altura, por isso so quebrava no iPhone.
     Preso so no TOPO (top:0, sem bottom) e com altura ENORME, cobre infinito para
     baixo em qualquer estado da barra. top:0 mantem o buraco de destaque alinhado.
     Igor, 03/09/26. */
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 300vh;
  z-index: 1001;
  pointer-events: none;
  opacity: 1;
  transition: opacity 180ms ease;
}

/* A mascara pinta o destaque; o coach filtra interacoes pelos elementos reais.
   O hit-testing do recorte durante transicoes pode capturar toques no mobile. */
.onboarding-coach-dimmer {
  background: rgba(128, 128, 128, 0.58);
  pointer-events: none;
}

.onboarding-coach-dimmer.is-clear {
  background: transparent;
  pointer-events: none;
}

.onboarding-coach-dimmer.is-transitioning {
  opacity: 0;
}

.onboarding-coach {
  --onboarding-coach-bg: #111111;
  --coach-inline-padding: 44px;
  --coach-arrow-depth: 18px;
  --coach-arrow-half: 13px;
  position: fixed;
  z-index: 1003;
  box-sizing: border-box;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 56px var(--coach-inline-padding) 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background: var(--onboarding-coach-bg);
  color: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
  font-family: var(--font-app, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: 0;
  opacity: 1;
  transition: opacity 180ms ease;
}

.onboarding-coach-feature-projects {
  --onboarding-coach-bg: var(--section-projetos, #CD5458);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 20px 60px rgba(111, 30, 35, 0.32);
}

.onboarding-coach-feature-projects .onboarding-coach-message,
.onboarding-coach-feature-tasks .onboarding-coach-message,
.onboarding-coach-feature-deadlines .onboarding-coach-message,
.onboarding-coach-feature-clients .onboarding-coach-message,
.onboarding-coach-feature-finance .onboarding-coach-message {
  color: #ffffff;
}

.onboarding-coach-feature-tasks {
  --onboarding-coach-bg: var(--section-tarefas, #E98C50);
  box-shadow: 0 20px 60px rgba(132, 66, 25, 0.3);
}

.onboarding-coach-feature-deadlines {
  --onboarding-coach-bg: var(--section-agenda, #4B81CF);
  box-shadow: 0 20px 60px rgba(34, 75, 136, 0.3);
}

.onboarding-coach-feature-clients {
  --onboarding-coach-bg: var(--section-clientes, #6251A3);
  box-shadow: 0 20px 60px rgba(68, 43, 120, 0.3);
}

.onboarding-coach-feature-sales {
  --onboarding-coach-bg: var(--section-vendas, #EFC433);
  color: #111111;
  border-color: rgba(17, 17, 17, 0.12);
  box-shadow: 0 20px 60px rgba(135, 98, 0, 0.26);
}

.onboarding-coach-feature-sales .onboarding-coach-message,
.onboarding-coach-feature-sales .onboarding-coach-back,
.onboarding-coach-feature-sales .onboarding-coach-close {
  color: #111111;
}

.onboarding-coach-feature-finance {
  --onboarding-coach-bg: var(--section-financeiro, #4CAF84);
  box-shadow: 0 20px 60px rgba(28, 103, 72, 0.3);
}

.onboarding-coach-feature-intro {
  --onboarding-feature-accent: #ffffff;
  --onboarding-coach-bg: #111111;
}

.onboarding-coach-feature-intro-projects {
  --onboarding-feature-accent: var(--section-projetos, #CD5458);
}

.onboarding-coach-feature-intro-tasks { --onboarding-feature-accent: var(--section-tarefas, #E98C50); }
.onboarding-coach-feature-intro-deadlines { --onboarding-feature-accent: var(--section-agenda, #4B81CF); }
.onboarding-coach-feature-intro-clients { --onboarding-feature-accent: var(--section-clientes, #6251A3); }
.onboarding-coach-feature-intro-sales { --onboarding-feature-accent: var(--section-vendas, #EFC433); }
.onboarding-coach-feature-intro-finance { --onboarding-feature-accent: var(--section-financeiro, #4CAF84); }

.onboarding-coach-feature-intro .onboarding-coach-feature-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  place-items: center;
  color: var(--onboarding-feature-accent);
}

.onboarding-coach-feature-intro .onboarding-coach-feature-icon svg {
  width: 42px;
  height: 42px;
  stroke-width: 2.2;
}

.onboarding-coach-feature-intro .onboarding-coach-action {
  background: var(--onboarding-feature-accent);
  color: #ffffff;
}

.onboarding-coach-feature-intro-sales .onboarding-coach-action {
  color: #111111;
}

.sheet-tool-vendas .onboarding-stage-locked:disabled {
  opacity: 1;
  color: #111111;
  background-color: #f1f1f1;
  cursor: not-allowed;
  -webkit-text-fill-color: #111111;
}

.onboarding-coach.is-transitioning {
  opacity: 0;
  pointer-events: none;
}

.onboarding-coach-tour_account_menu {
  transition:
    left 240ms cubic-bezier(0.16, 1, 0.3, 1),
    top 240ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease;
  will-change: left, top;
}

html.onboarding-tour-profile .drawer-primary {
  padding-top: 40px;
}

html.onboarding-tour-profile .drawer-avatar-button.onboarding-coach-interactive {
  box-shadow: 0 0 0 8px #ffffff, 0 10px 28px rgba(0, 0, 0, 0.34);
}

html.onboarding-tour-side-pages .drawer-primary {
  pointer-events: none !important;
}

@media (max-width: 719px) {
  html.onboarding-tour-profile .drawer-primary {
    padding-top: 28px;
  }

  html.onboarding-tour-profile .drawer-avatar-button {
    margin-right: 8px;
  }

  .onboarding-coach-tour_side_pages {
    width: min(340px, calc(100vw - 28px));
  }

  .onboarding-coach-tour_account_menu {
    width: min(340px, calc(100vw - 28px));
  }
}

.onboarding-coach.is-standalone {
  width: min(360px, calc(100vw - 32px));
  padding: 58px var(--coach-inline-padding) 28px;
  text-align: center;
}

.onboarding-coach.is-standalone .onboarding-coach-message {
  text-align: center;
}

.onboarding-coach.is-standalone .onboarding-coach-action {
  width: 100%;
}

.onboarding-coach-message {
  margin: 0 !important;
  color: #d0d0d0;
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.5 !important;
  letter-spacing: 0;
  text-align: center;
  text-wrap: pretty;
}

.onboarding-coach-message-title,
.onboarding-coach-message-body {
  color: inherit;
  font: inherit;
}

.onboarding-coach-page-name {
  color: #ffffff;
  font: inherit;
  font-weight: 750;
}

.onboarding-coach-page-name.is-sales { color: var(--section-vendas, #EFC433); }
.onboarding-coach-page-name.is-projects { color: var(--section-projetos, #CD5458); }
.onboarding-coach-page-name.is-home { color: #ffffff; }
.onboarding-coach-page-name.is-finance { color: var(--section-financeiro, #4CAF84); }
.onboarding-coach-page-name.is-agenda { color: var(--section-agenda, #4B81CF); }

.onboarding-coach::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
}

.onboarding-coach > * {
  position: relative;
  z-index: 2;
}

.onboarding-coach-avatar {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--onboarding-coach-bg, #111111);
  border-radius: 50%;
  background: #ffffff;
  filter: none !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.onboarding-coach[data-arrow] .onboarding-coach-avatar {
  opacity: 1;
}

.onboarding-coach-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none !important;
  transform: translateY(9%) scale(1.58);
}

.onboarding-coach[data-arrow="none"] .onboarding-coach-avatar,
.onboarding-coach[data-arrow="bottom"] .onboarding-coach-avatar,
.onboarding-coach[data-arrow="left"] .onboarding-coach-avatar,
.onboarding-coach[data-arrow="right"] .onboarding-coach-avatar {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(calc(-50% + var(--coach-avatar-shift-x, 0px)), calc(-50% + var(--coach-avatar-shift-y, 0px)));
}

.onboarding-coach[data-arrow="top"] .onboarding-coach-avatar {
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  transform: translate(calc(-50% + var(--coach-avatar-shift-x, 0px)), calc(50% + var(--coach-avatar-shift-y, 0px)));
}

.onboarding-coach[data-arrow="top"] {
  padding-right: var(--coach-inline-padding);
  padding-bottom: 58px;
  padding-left: var(--coach-inline-padding);
}

.onboarding-coach[data-arrow="bottom"],
.onboarding-coach[data-arrow="left"],
.onboarding-coach[data-arrow="right"] {
  padding-top: 58px;
  padding-right: var(--coach-inline-padding);
  padding-left: var(--coach-inline-padding);
}

.onboarding-coach-tour_side_pages {
  padding: 58px var(--coach-inline-padding) 26px;
}

.onboarding-coach-tour_menu_more[data-arrow] {
  padding-right: var(--coach-inline-padding);
  padding-left: var(--coach-inline-padding);
}

.onboarding-coach-mission_project_move[data-arrow] {
  padding-right: var(--coach-inline-padding);
  padding-bottom: 82px;
}

.onboarding-coach-mission_sales_move[data-arrow] {
  padding-right: var(--coach-inline-padding);
  padding-bottom: 82px;
}

.onboarding-coach-mission_project_move[data-arrow] .onboarding-coach-avatar {
  top: auto;
  right: auto;
  bottom: 10px;
  left: 50%;
  transform: translate(calc(-50% + var(--coach-avatar-shift-x, 0px)), var(--coach-avatar-shift-y, 0px));
}

.onboarding-coach-mission_sales_move[data-arrow] .onboarding-coach-avatar {
  top: auto;
  right: auto;
  bottom: 10px;
  left: 50%;
  transform: translate(calc(-50% + var(--coach-avatar-shift-x, 0px)), var(--coach-avatar-shift-y, 0px));
}

.onboarding-coach[data-arrow="left"]::after {
  left: calc(var(--coach-arrow-depth) * -1 + 2px);
  top: calc(var(--coach-arrow-y, 50%) - var(--coach-arrow-half));
  border-top: var(--coach-arrow-half) solid transparent;
  border-bottom: var(--coach-arrow-half) solid transparent;
  border-right: var(--coach-arrow-depth) solid var(--onboarding-coach-bg);
}

.onboarding-coach[data-arrow="right"]::after {
  right: calc(var(--coach-arrow-depth) * -1 + 2px);
  top: calc(var(--coach-arrow-y, 50%) - var(--coach-arrow-half));
  border-top: var(--coach-arrow-half) solid transparent;
  border-bottom: var(--coach-arrow-half) solid transparent;
  border-left: var(--coach-arrow-depth) solid var(--onboarding-coach-bg);
}

.onboarding-coach[data-arrow="top"]::after {
  top: calc(var(--coach-arrow-depth) * -1 + 2px);
  left: calc(var(--coach-arrow-x, 50%) - var(--coach-arrow-half));
  border-right: var(--coach-arrow-half) solid transparent;
  border-bottom: var(--coach-arrow-depth) solid var(--onboarding-coach-bg);
  border-left: var(--coach-arrow-half) solid transparent;
}

.onboarding-coach[data-arrow="bottom"]::after {
  bottom: calc(var(--coach-arrow-depth) * -1 + 2px);
  left: calc(var(--coach-arrow-x, 50%) - var(--coach-arrow-half));
  border-top: var(--coach-arrow-depth) solid var(--onboarding-coach-bg);
  border-right: var(--coach-arrow-half) solid transparent;
  border-left: var(--coach-arrow-half) solid transparent;
}

.onboarding-coach-tour_primary_nav::after {
  display: none;
}

.onboarding-coach-nav-pointers {
  position: absolute !important;
  z-index: 1 !important;
  right: 0;
  bottom: calc(var(--coach-arrow-depth) * -1 + 2px);
  left: 0;
  height: var(--coach-arrow-depth);
  pointer-events: none;
}

.onboarding-coach-nav-pointer {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: var(--coach-arrow-depth) solid var(--onboarding-coach-bg);
  border-right: var(--coach-arrow-half) solid transparent;
  border-left: var(--coach-arrow-half) solid transparent;
  transform: translateX(-50%);
}

.onboarding-coach[data-arrow="none"]::after {
  display: none;
}

.onboarding-coach-close,
.onboarding-coach-back {
  position: absolute;
  top: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.onboarding-coach-close {
  right: 14px;
}

.onboarding-coach-back {
  left: 14px;
}

.onboarding-coach-back svg {
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}

.onboarding-coach-close:hover,
.onboarding-coach-close:focus-visible,
.onboarding-coach-back:hover,
.onboarding-coach-back:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.onboarding-coach-back:disabled {
  opacity: 0.45;
  cursor: default;
}

.onboarding-coach-action {
  width: 100%;
  min-height: 54px;
  margin-top: 24px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
}

.onboarding-coach-action:disabled {
  background: #555555;
  color: #aaaaaa;
  cursor: default;
}

.onboarding-coach.is-reward {
  padding-top: 74px !important;
  padding-bottom: 22px !important;
}

.onboarding-coach.is-reward .onboarding-coach-avatar {
  top: 12px !important;
  bottom: auto !important;
  width: 52px;
  height: 52px;
  transform: translate(calc(-50% + var(--coach-avatar-shift-x, 0px)), var(--coach-avatar-shift-y, 0px)) !important;
}

.onboarding-coach.is-reward .onboarding-coach-action {
  margin-top: 18px;
}

.onboarding-coach-error {
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
  color: #922d33 !important;
  font-size: 14px;
  text-align: center;
}

.onboarding-coach-error p {
  margin: 0 0 8px;
}

.onboarding-coach-retry {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: #111111;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 700px) {
  .onboarding-coach {
    --coach-inline-padding: 32px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: min(356px, calc(100vw - 32px));
    padding: 54px var(--coach-inline-padding) 24px;
  }

  .onboarding-coach[data-arrow="bottom"] {
    padding-top: 56px;
  }

  .onboarding-coach-mission_project_create {
    top: max(76px, env(safe-area-inset-top));
    bottom: auto;
  }

  .onboarding-coach.is-keyboard-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: min(356px, calc(100vw - 24px));
    max-height: 72px;
    min-height: 64px;
    padding: 8px 10px 8px 16px !important;
    overflow: hidden;
    border-radius: 20px;
    transition:
      left 180ms cubic-bezier(0.16, 1, 0.3, 1),
      top 180ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 140ms ease;
  }

  .onboarding-coach.is-keyboard-open :is(
    .onboarding-coach-avatar,
    .onboarding-coach-back,
    .onboarding-coach-close,
    .onboarding-coach-feature-icon,
    .onboarding-coach-error,
    .onboarding-coach-nav-pointers
  ) {
    display: none !important;
  }

  .onboarding-coach.is-keyboard-open .onboarding-coach-message {
    display: -webkit-box;
    max-height: 40px;
    overflow: hidden;
    color: inherit;
    font-size: 14px !important;
    font-weight: 650;
    line-height: 1.35 !important;
    text-align: center;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .onboarding-coach.is-keyboard-open .onboarding-coach-action {
    display: grid;
    width: auto;
    min-width: 104px;
    min-height: 42px;
    margin: 0;
    padding: 0 16px;
    place-items: center;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }

  .onboarding-coach.is-keyboard-open .onboarding-coach-message-body {
    display: none;
  }

  .onboarding-coach.is-reward {
    --coach-inline-padding: 28px;
    width: min(344px, calc(100vw - 24px));
  }
}

.onboarding-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  min-height: 64px;
  padding: max(7px, env(safe-area-inset-top)) 20px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
}

.onboarding-topbar-start {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.onboarding-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.onboarding-topbar-back {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-tag-bg, #ebebeb);
  color: #111111;
  cursor: pointer;
}

.onboarding-topbar-back svg {
  width: 19px;
  height: 19px;
  transform: rotate(180deg);
}

.onboarding-skip {
  min-height: 42px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary, #6b6b6b);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.onboarding-stage {
  width: 100%;
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.onboarding-stage.is-exiting,
.onboarding-stage.is-entering {
  pointer-events: none;
}

.onboarding-stage.is-exiting.is-forward {
  --onboarding-motion-name: onboarding-element-exit-left;
}

.onboarding-stage.is-entering.is-forward {
  --onboarding-motion-name: onboarding-element-enter-right;
}

.onboarding-stage.is-exiting.is-backward {
  --onboarding-motion-name: onboarding-element-exit-right;
}

.onboarding-stage.is-entering.is-backward {
  --onboarding-motion-name: onboarding-element-enter-left;
}

.onboarding-stage:is(.is-exiting, .is-entering) :is(
  .onboarding-visual,
  .onboarding-copy > h1,
  .onboarding-copy > .onboarding-description,
  .onboarding-copy > .onboarding-field,
  .onboarding-copy > .onboarding-photo-picker,
  .onboarding-chips > *,
  .onboarding-pains > *,
  .onboarding-summary > *,
  .onboarding-copy > .onboarding-error,
  .onboarding-copy > .onboarding-actions,
  .onboarding-copy > .onboarding-skip-step
) {
  animation-name: var(--onboarding-motion-name);
  animation-fill-mode: both;
  will-change: transform, opacity;
}

.onboarding-stage.is-exiting :is(
  .onboarding-visual,
  .onboarding-copy > h1,
  .onboarding-copy > .onboarding-description,
  .onboarding-copy > .onboarding-field,
  .onboarding-copy > .onboarding-photo-picker,
  .onboarding-chips > *,
  .onboarding-pains > *,
  .onboarding-summary > *,
  .onboarding-copy > .onboarding-error,
  .onboarding-copy > .onboarding-actions,
  .onboarding-copy > .onboarding-skip-step
) {
  animation-duration: var(--motion-exit-duration, 170ms);
  animation-delay: var(--motion-exit-delay, 0ms);
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.onboarding-stage.is-entering :is(
  .onboarding-visual,
  .onboarding-copy > h1,
  .onboarding-copy > .onboarding-description,
  .onboarding-copy > .onboarding-field,
  .onboarding-copy > .onboarding-photo-picker,
  .onboarding-chips > *,
  .onboarding-pains > *,
  .onboarding-summary > *,
  .onboarding-copy > .onboarding-error,
  .onboarding-copy > .onboarding-actions,
  .onboarding-copy > .onboarding-skip-step
) {
  animation-duration: var(--motion-enter-duration, 340ms);
  animation-delay: var(--motion-enter-delay, 40ms);
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.onboarding-visual {
  --motion-shift: 58px;
  --motion-exit-duration: 205ms;
  --motion-enter-duration: 390ms;
  --motion-enter-delay: 0ms;
}

.onboarding-copy > h1,
.onboarding-summary > :first-child {
  --motion-shift: 42px;
  --motion-exit-delay: 12ms;
  --motion-enter-delay: 42ms;
}

.onboarding-copy > .onboarding-description,
.onboarding-summary > :nth-child(2) {
  --motion-shift: 36px;
  --motion-exit-delay: 25ms;
  --motion-enter-delay: 72ms;
}

.onboarding-copy > .onboarding-field {
  --motion-shift: 32px;
  --motion-exit-delay: 38ms;
  --motion-enter-delay: 98ms;
}

.onboarding-copy > .onboarding-photo-picker {
  --motion-shift: 32px;
  --motion-exit-delay: 38ms;
  --motion-enter-delay: 98ms;
}

.onboarding-copy > .onboarding-actions {
  --motion-shift: 30px;
  --motion-exit-duration: 155ms;
  --motion-exit-delay: 62ms;
  --motion-enter-duration: 320ms;
  --motion-enter-delay: 150ms;
}

.onboarding-copy > .onboarding-skip-step {
  --motion-shift: 26px;
  --motion-exit-duration: 145ms;
  --motion-exit-delay: 72ms;
  --motion-enter-duration: 300ms;
  --motion-enter-delay: 172ms;
}

.onboarding-chips > *,
.onboarding-pains > * {
  --motion-shift: 30px;
  --motion-exit-duration: 130ms;
  --motion-enter-duration: 300ms;
}

.onboarding-chips > :nth-child(1), .onboarding-pains > :nth-child(1) { --motion-exit-delay: 28ms; --motion-enter-delay: 76ms; }
.onboarding-chips > :nth-child(2), .onboarding-pains > :nth-child(2) { --motion-exit-delay: 32ms; --motion-enter-delay: 86ms; }
.onboarding-chips > :nth-child(3), .onboarding-pains > :nth-child(3) { --motion-exit-delay: 36ms; --motion-enter-delay: 96ms; }
.onboarding-chips > :nth-child(4), .onboarding-pains > :nth-child(4) { --motion-exit-delay: 40ms; --motion-enter-delay: 106ms; }
.onboarding-chips > :nth-child(5), .onboarding-pains > :nth-child(5) { --motion-exit-delay: 44ms; --motion-enter-delay: 116ms; }
.onboarding-chips > :nth-child(6), .onboarding-pains > :nth-child(6) { --motion-exit-delay: 48ms; --motion-enter-delay: 126ms; }
.onboarding-chips > :nth-child(7) { --motion-exit-delay: 52ms; --motion-enter-delay: 136ms; }
.onboarding-chips > :nth-child(8) { --motion-exit-delay: 56ms; --motion-enter-delay: 146ms; }
.onboarding-chips > :nth-child(9) { --motion-exit-delay: 60ms; --motion-enter-delay: 156ms; }
.onboarding-chips > :nth-child(10) { --motion-exit-delay: 64ms; --motion-enter-delay: 166ms; }
.onboarding-chips > :nth-child(11) { --motion-exit-delay: 68ms; --motion-enter-delay: 176ms; }
.onboarding-chips > :nth-child(n + 12) { --motion-exit-delay: 72ms; --motion-enter-delay: 186ms; }

@keyframes onboarding-element-exit-left {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(calc(var(--motion-shift, 40px) * -1)); }
}

@keyframes onboarding-element-enter-right {
  from { opacity: 0; transform: translateX(var(--motion-shift, 40px)); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes onboarding-element-exit-right {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(var(--motion-shift, 40px)); }
}

@keyframes onboarding-element-enter-left {
  from { opacity: 0; transform: translateX(calc(var(--motion-shift, 40px) * -1)); }
  to { opacity: 1; transform: translateX(0); }
}

.onboarding-visual {
  position: relative;
  width: 100%;
  height: 282px;
  flex: 0 0 282px;
  overflow: hidden;
  background: #ffffff;
}

.onboarding-pose {
  position: absolute;
  z-index: 1;
  right: auto;
  left: 50%;
  bottom: -24px;
  display: block;
  width: 238px;
  height: auto;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1) contrast(1.08);
  transform: translateX(-50%);
}

.onboarding-shell.is-dense .onboarding-visual {
  height: 158px;
  flex-basis: 158px;
}

.onboarding-shell.is-dense .onboarding-pose {
  right: auto;
  bottom: -24px;
  width: 174px;
}

.onboarding-shell[data-step="recognition_professions"] .onboarding-pose {
  bottom: -26px;
  width: 205px;
}

.onboarding-copy {
  width: 100%;
  padding: 28px 22px max(36px, env(safe-area-inset-bottom));
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.onboarding-progress {
  min-height: 8px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.onboarding-progress span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d6d6d6;
  transition: width 180ms ease, background 180ms ease;
}

.onboarding-progress span.is-complete {
  background: #111111;
}

.onboarding-progress span.is-current {
  width: 24px;
  background: #111111;
}

.onboarding-copy h1 {
  margin: 0;
  color: #111111;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 850;
}

.onboarding-desktop-break {
  display: none;
}

.onboarding-description {
  margin: 15px 0 0;
  color: var(--color-text-secondary, #6b6b6b);
  font-size: 15px;
  line-height: 1.48;
}

.onboarding-shell[data-step="recognition_intro"] .onboarding-copy {
  align-items: center;
  text-align: center;
}

.onboarding-shell[data-step="recognition_intro"] .onboarding-description {
  max-width: 330px;
}

.onboarding-shell[data-step="recognition_intro"] .onboarding-field > span,
.onboarding-shell[data-step="recognition_intro"] .onboarding-field input {
  text-align: center;
}

.onboarding-shell[data-step="recognition_intro"] .onboarding-field input {
  border-radius: 999px;
}

.onboarding-shell[data-step="recognition_intro"] .onboarding-field input:focus {
  border-color: #111111;
}

.onboarding-shell[data-step="recognition_intro"] .onboarding-primary {
  position: relative;
  justify-content: center;
}

.onboarding-shell[data-step="recognition_intro"] .onboarding-primary svg {
  position: absolute;
  right: 21px;
}

.onboarding-shell[data-step="recognition_photo"] .onboarding-copy {
  align-items: center;
  text-align: center;
}

.onboarding-shell[data-step="recognition_photo"] .onboarding-visual {
  display: grid;
  place-items: center;
}

.onboarding-shell[data-step="recognition_photo"] .onboarding-visual > .onboarding-photo-picker {
  width: auto;
  margin: 0;
}

.onboarding-shell[data-step="recognition_photo"] .onboarding-photo-button {
  width: 172px;
  height: 172px;
}

.onboarding-shell[data-step="recognition_photo"] .onboarding-description {
  max-width: 340px;
}

.onboarding-shell[data-step="recognition_photo"] .onboarding-primary {
  position: relative;
  justify-content: center;
}

.onboarding-shell[data-step="recognition_photo"] .onboarding-primary svg {
  position: absolute;
  right: 21px;
}

.onboarding-shell[data-step="recognition_professions"] .onboarding-copy {
  align-items: center;
  text-align: center;
}

.onboarding-shell[data-step="recognition_professions"] .onboarding-profession-chips {
  justify-content: center;
}

.onboarding-shell[data-step="recognition_professions"] .onboarding-primary {
  position: relative;
  justify-content: center;
}

.onboarding-shell[data-step="recognition_professions"] .onboarding-primary svg {
  position: absolute;
  right: 21px;
}

.onboarding-shell[data-step="recognition_services"] .onboarding-copy {
  align-items: center;
  text-align: center;
}

.onboarding-shell[data-step="recognition_services"] .onboarding-service-chips {
  justify-content: center;
}

.onboarding-shell[data-step="recognition_services"] .onboarding-primary {
  position: relative;
  justify-content: center;
}

.onboarding-shell[data-step="recognition_services"] .onboarding-primary svg {
  position: absolute;
  right: 21px;
}

.onboarding-shell[data-step="recognition_pains"] .onboarding-copy {
  align-items: center;
  text-align: center;
}

.onboarding-shell[data-step="recognition_pains"] .onboarding-primary {
  position: relative;
  justify-content: center;
}

.onboarding-shell[data-step="recognition_pains"] .onboarding-primary svg {
  position: absolute;
  right: 21px;
}

.onboarding-shell[data-step="recognition_summary"] .onboarding-primary {
  position: relative;
  justify-content: center;
}

.onboarding-shell[data-step="recognition_summary"] .onboarding-primary svg {
  position: absolute;
  right: 21px;
}

.onboarding-shell.is-dense .onboarding-copy {
  padding-top: 24px;
}

.onboarding-shell.is-dense .onboarding-copy h1 {
  font-size: 27px;
  line-height: 1.1;
}

.onboarding-picker,
.onboarding-field,
.onboarding-summary {
  width: 100%;
}

.onboarding-field {
  display: grid;
  gap: 7px;
  margin-top: 26px;
}

.onboarding-field > span {
  color: #5f5f5f;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
}

.onboarding-field input {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 0 17px;
  border: 2px solid transparent;
  border-radius: 16px;
  outline: none;
  background: var(--color-tag-bg, #ebebeb);
  color: #171717;
  font: 550 16px/1.3 var(--font-app, "Inter", sans-serif);
}

.onboarding-field input::placeholder {
  color: var(--color-text-muted, #ababab);
}

.onboarding-field input:focus {
  border-color: var(--onboarding-accent, #111111);
  background: #ffffff;
}

.onboarding-photo-picker {
  width: 100%;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.onboarding-photo-button {
  position: relative;
  width: 132px;
  height: 132px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #111111;
  border-radius: 50%;
  background: #f0f0f0;
  color: #777777;
  cursor: pointer;
  overflow: visible;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
}

.onboarding-photo-button.has-photo {
  background: #ffffff;
}

.onboarding-photo-button > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.onboarding-photo-placeholder svg {
  width: 48px;
  height: 48px;
  stroke-width: 1.5;
}

.onboarding-photo-add {
  position: absolute;
  right: -2px;
  bottom: 4px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
}

.onboarding-photo-add svg {
  width: 17px;
  height: 17px;
}

.onboarding-photo-label,
.onboarding-photo-remove {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-app, "Inter", sans-serif);
  cursor: pointer;
}

.onboarding-photo-label {
  margin-top: 12px;
  color: #111111;
  font-size: 13px;
  font-weight: 800;
}

.onboarding-photo-remove {
  margin-top: 5px;
  color: #777777;
  font-size: 11px;
  font-weight: 700;
}

.onboarding-photo-error {
  max-width: 300px;
  margin: 8px 0 0;
  color: #a73e42;
  font-size: 11px;
  line-height: 1.35;
}

.onboarding-chips {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onboarding-chips button {
  min-height: 42px;
  padding: 0 14px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--color-tag-bg, #ebebeb);
  color: #333333;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 750;
  cursor: pointer;
}

.onboarding-chips button.is-selected {
  border-color: var(--onboarding-accent, #111111);
  background: var(--onboarding-accent-soft, #f1f1f1);
  color: #111111;
}

.onboarding-profession-chips button.is-selected {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}

.onboarding-pill-create {
  width: 154px;
  min-height: 42px;
  padding: 3px 4px 3px 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 2px solid #111111;
  border-radius: 999px;
  background: #ffffff;
}

.onboarding-pill-create:focus-within {
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08);
}

/* Vence a regra global que mantém campos editáveis em peso 400. */
.onboarding-shell.onboarding-shell .onboarding-picker.onboarding-picker .onboarding-pill-create input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111111;
  font-family: var(--font-app, "Inter", sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  font-variation-settings: "wght" 750 !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.onboarding-pill-create button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
}

.onboarding-pill-create button:disabled {
  background: transparent;
  color: #9b9b9b;
  cursor: default;
}

.onboarding-pill-create button svg {
  width: 17px;
  height: 17px;
}

.onboarding-selection-note {
  margin: 12px 2px 0;
  color: #777777;
  font-size: 12px;
  line-height: 1.45;
}

.onboarding-services .onboarding-chips {
  margin-top: 14px;
  gap: 6px;
}

.onboarding-service-chips > button {
  min-height: 34px;
  padding: 0 10px;
  border-color: #111111;
  background: #ffffff;
  color: #111111;
  font-size: 11px;
}

.onboarding-service-create {
  width: 132px;
  min-height: 34px;
  padding: 2px 3px 2px 10px;
}

.onboarding-shell.onboarding-shell .onboarding-picker.onboarding-picker .onboarding-service-create input {
  height: 26px;
  font-size: 11px !important;
}

.onboarding-service-create button {
  width: 26px;
  min-width: 26px;
  min-height: 26px;
  height: 26px;
}

.onboarding-service-create button svg {
  width: 14px;
  height: 14px;
}

.onboarding-service-chips button.is-selected {
  border-color: var(--service-selected-color, #111111);
  background: var(--service-selected-color, #111111);
  color: var(--service-selected-ink, #ffffff);
}

.onboarding-pain-remove {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-tag-bg, #ebebeb);
  color: #666666;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.onboarding-pains {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.onboarding-pain {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 16px;
  background: #f1f1f1;
}

.onboarding-pain.is-selected {
  border-color: #111111;
  background: #111111;
}

.onboarding-pain-main {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0;
  background: transparent;
  color: #202020;
  text-align: center;
  cursor: pointer;
}

.onboarding-pain-main:disabled {
  opacity: 0.42;
  cursor: default;
}

.onboarding-pain-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  color: var(--pain-color);
}

.onboarding-pain-icon svg {
  width: 38px;
  height: 38px;
  stroke-width: 1.8;
}

.onboarding-pain-main strong {
  display: block;
  margin: 0;
  color: #171717;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 850;
}

.onboarding-pain.is-selected .onboarding-pain-main strong {
  color: #ffffff;
}

.onboarding-summary {
  margin-top: 8px;
  text-align: center;
}

.onboarding-shell.is-dense .onboarding-summary .onboarding-summary-title {
  margin: 0;
  padding: 0;
  color: #171717;
  font-family: var(--font-app);
  font-size: 24px;
  line-height: 1.28;
  font-weight: 800;
}

.onboarding-summary-support {
  margin: 18px 0 0;
  color: var(--color-text-secondary, #6b6b6b);
  font-family: var(--font-app);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
}

.onboarding-error {
  margin-top: 20px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  background: #fff0f0;
  color: #7c2e2e;
  font-size: 12px;
  line-height: 1.4;
}

.onboarding-error button {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7c2e2e;
  font-weight: 850;
  cursor: pointer;
}

.onboarding-actions {
  width: 100%;
  min-height: 54px;
  margin-top: 30px;
  display: flex;
  align-items: stretch;
}

.onboarding-primary {
  width: 100%;
  min-height: 54px;
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  transition: transform 150ms ease, opacity 150ms ease;
}

.onboarding-primary svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.onboarding-primary:active,
.onboarding-topbar-back:active {
  transform: translateY(1px);
}

.onboarding-primary:disabled,
.onboarding-skip:disabled,
.onboarding-topbar-back:disabled,
.onboarding-error button:disabled {
  cursor: wait;
  opacity: 0.5;
  box-shadow: none;
}

.onboarding-skip-step {
  align-self: center;
  margin-top: 14px;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: #707070;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
  cursor: pointer;
}

.onboarding-loading {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 32px;
}

.onboarding-loading-logo {
  display: block;
  width: 94px;
  height: auto;
}

.onboarding-loading-bar {
  width: 112px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #dddddd;
}

.onboarding-loading-bar::after {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #111111;
  animation: onboarding-loading 900ms ease-in-out infinite alternate;
}

.onboarding-loading p {
  margin: 0;
  color: #757575;
  font-size: 13px;
}

.onboarding-preview-finished {
  padding: 42px 28px max(42px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.onboarding-preview-finished.is-recognition-complete {
  background: #e3f3ea;
}

.onboarding-preview-finished img {
  width: 86px;
}

.onboarding-preview-finished .onboarding-preview-bob {
  width: 228px;
  max-width: 70vw;
  filter: grayscale(1) contrast(1.08);
}

.onboarding-preview-finished h1 {
  margin: 8px 0 0;
  color: #111111;
  font-size: 30px;
  line-height: 1.08;
}

.onboarding-preview-finished p {
  margin: 15px 0 0;
  color: #626262;
  font-size: 15px;
  line-height: 1.45;
}

.onboarding-preview-finished button {
  width: 100%;
  min-height: 54px;
  margin-top: 30px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

@keyframes onboarding-loading {
  from { transform: translateX(0); }
  to { transform: translateX(70px); }
}

@media (hover: hover) {
  .onboarding-skip:hover,
  .onboarding-skip-step:hover {
    color: #111111;
  }

  .onboarding-chips button:hover {
    background: #dedede;
  }

  .onboarding-chips button.is-selected:hover {
    background: var(--onboarding-accent-soft, #f1f1f1);
  }

  .onboarding-profession-chips button.is-selected:hover {
    background: #111111;
  }

  .onboarding-service-chips button.is-selected:hover {
    background: var(--service-selected-color, #111111);
  }
}

@media (min-width: 700px) {
  .onboarding-shell,
  .onboarding-loading,
  .onboarding-preview-finished {
    width: min(calc(100% - 48px), 1040px);
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
    margin-top: 24px;
    margin-bottom: 24px;
    border-radius: var(--radius-xl, 32px);
    box-shadow: var(--shadow-modal, 0 32px 96px rgba(0, 0, 0, 0.18));
  }

  .onboarding-topbar {
    min-height: 72px;
    padding: 14px 28px;
  }

  .onboarding-stage {
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
    padding: 0 40px 32px;
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    column-gap: 42px;
  }

  .onboarding-visual,
  .onboarding-shell.is-dense .onboarding-visual {
    width: 100%;
    height: 100%;
    min-height: 620px;
    flex-basis: auto;
  }

  .onboarding-pose,
  .onboarding-shell.is-dense .onboarding-pose {
    top: 50%;
    bottom: auto;
    width: 310px;
    transform: translate(-50%, -50%);
  }

  .onboarding-shell[data-step="recognition_photo"] .onboarding-photo-button {
    width: 220px;
    height: 220px;
  }

  .onboarding-shell[data-step="recognition_professions"] .onboarding-pose {
    top: 50%;
    bottom: auto;
    width: 350px;
  }

  .onboarding-copy,
  .onboarding-shell.is-dense .onboarding-copy {
    width: 100%;
    max-width: 600px;
    min-width: 0;
    padding: 42px 20px;
    justify-content: center;
    justify-self: center;
  }

  .onboarding-copy h1,
  .onboarding-shell.is-dense .onboarding-copy h1 {
    font-size: 34px;
  }

  .onboarding-shell[data-step="recognition_intro"] .onboarding-copy h1 {
    max-width: 520px;
    align-self: center;
  }

  .onboarding-desktop-break {
    display: block;
  }

  .onboarding-description {
    max-width: 520px;
    font-size: 16px;
  }

  .onboarding-field,
  .onboarding-photo-picker,
  .onboarding-actions,
  .onboarding-skip-step,
  .onboarding-summary {
    max-width: 520px;
    align-self: center;
  }

  .onboarding-picker {
    max-width: 600px;
  }

  .onboarding-pains {
    width: 100%;
    max-width: 600px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .onboarding-pain-main {
    padding: 16px 12px;
    gap: 12px;
  }

  .onboarding-pain-main strong {
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .onboarding-topbar {
    padding-left: 18px;
    padding-right: 18px;
  }

  .onboarding-pose {
    width: 220px;
  }

  .onboarding-copy {
    padding-left: 18px;
    padding-right: 18px;
  }

  .onboarding-copy h1 {
    font-size: 27px;
  }

  .onboarding-shell.is-dense .onboarding-copy h1 {
    font-size: 25px;
  }

  .onboarding-chips button {
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
  }

  .onboarding-shell.onboarding-shell .onboarding-picker.onboarding-picker .onboarding-pill-create input {
    font-size: 12px !important;
  }

}

@media (max-height: 720px) {
  .onboarding-visual {
    height: 226px;
    flex-basis: 226px;
  }

  .onboarding-pose {
    width: 208px;
  }

  .onboarding-shell.is-dense .onboarding-visual {
    height: 132px;
    flex-basis: 132px;
  }

  .onboarding-shell.is-dense .onboarding-pose {
    width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-coach-interactive {
    animation: none;
    transform: none;
  }

  .onboarding-coach-move-target > .project-folder-card-bg,
  .onboarding-coach-move-target > .sales-side-card-bg,
  .onboarding-coach-move-target > .pipeline-card {
    animation: none;
    transform: none;
  }

  .onboarding-loading-bar::after {
    animation: none;
    transform: translateX(35px);
  }

  .onboarding-progress span,
  .onboarding-primary {
    transition: none;
  }

  .onboarding-stage:is(.is-exiting, .is-entering) :is(
    .onboarding-visual,
    .onboarding-copy > *,
    .onboarding-chips > *,
    .onboarding-pains > *,
    .onboarding-summary > *
  ) {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}


/* RAIO-X 03/09/26: o menu (.bottom-nav) tem backdrop-filter e, no Safari, o vidro
   amostra a Home ATRAS do menu e nao o veu na frente — o menu fica CLARO enquanto
   o resto escurece. Desliga o vidro do menu SO durante o onboarding (html.onboarding-active
   e :has como reforco). O app normal mantem o vidro. Sem vidro, o veu escurece o
   menu igual ao resto. */
html.onboarding-active .bottom-nav,
html:has(.onboarding-coach-dimmer) .bottom-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Passo de detalhes do onboarding: ao rolar a ficha para o topo (block:"start"),
   deixar o primeiro campo — o "Nome do cliente" e afins — cair LOGO ABAIXO do
   coach, nao atras dele. O coach dos passos de detalhes ocupa ~260px no topo;
   a margem reserva esse espaco. Vale para as fichas *-details e a aba de valores
   do financeiro. Igor, 03/09/26. */
html.onboarding-active [data-onboarding$="-details"],
html.onboarding-active [data-onboarding="payment-values"],
html.onboarding-active [data-onboarding="payment-value-field"] {
  scroll-margin-top: 300px;
}