/* A compact excerpt of the onboarding conversation, in the landing's visual language. */
.onboarding { padding: clamp(2.5rem, 5vw, 5rem) 0; }
.onboarding-inner { max-width: 70rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.onboarding-copy h2 { max-width: 14ch; margin: 0 0 1.5rem; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 600; }
.onboarding-copy > p:not(.product-example-label) { color: var(--muted); line-height: 1.7; font-size: 1rem; }
.onboarding-benefits { padding: 0; margin: 1.5rem 0; list-style: none; font-size: .9375rem; line-height: 1.65; }
.onboarding-benefits li { position: relative; padding-left: 1.4rem; margin-top: .75rem; }
.onboarding-benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); }
.onboarding-copy > p.onboarding-note { font-size: .8125rem; margin: 1.75rem 0 0; }
.onboarding-demo { border: 1px solid rgba(17,17,17,.16); border-radius: 1.25rem; overflow: hidden; background: var(--card, #fff); }
.onboarding-demo-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(17,17,17,.12); font-size: .8125rem; font-weight: 600; }
.onboarding-demo-heading span + span { color: var(--muted); font-weight: 400; }
.onboarding-conversation { padding: 1.25rem 1.5rem; }
.onboarding-message { font-size: .9375rem; line-height: 1.6; }
.onboarding-message p { margin: 0; }
.onboarding-message .onboarding-speaker, .onboarding-speaker { margin: 0 0 .4rem; font-size: .6875rem; font-weight: 600; color: var(--muted); }
.onboarding-message-user { margin: 1rem 0 1rem 2rem; padding: .875rem 1rem; background: #f2f2ef; border-radius: 1rem 1rem .25rem 1rem; }
.onboarding-choice-hint, .onboarding-own-words { color: var(--muted); font-size: .75rem; line-height: 1.5; margin: .875rem 0 .5rem; }
.onboarding-choices { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.onboarding-choices li { border: 1px solid rgba(17,17,17,.22); border-radius: .7rem; padding: .45rem .65rem; font-size: .75rem; line-height: 1.4; }
@media (max-width: 720px) {
  .onboarding-inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .onboarding-copy h2 { max-width: 16ch; margin-bottom: 1rem; }
  .onboarding-benefits { margin: 1rem 0; }
  .onboarding-copy > p.onboarding-note { margin-top: 1rem; }
  .onboarding-conversation { padding: 1rem; }
  .onboarding-demo-heading { padding: 1rem; }
  .onboarding-message-user { margin-left: 1rem; }
}

/* A single journey: the recommendation explicitly refers back to the conversation. */
.personalized-flow { max-width: 70rem; margin: 0 auto; scroll-margin-top: 1.5rem; }
.personalized-flow .flow-recommendation { border-top: 1px solid rgba(17,17,17,.16); }
.onboarding-copy { padding-top: 1rem; }
.onboarding-copy > p.flow-takeaway { margin-top: 1.75rem; font-size: .9375rem; }
.flow-takeaway strong { display: block; color: var(--foreground); font-weight: 600; }
.flow-takeaway span { display: block; margin-top: .35rem; }
.onboarding-conversation > .onboarding-message-user:first-child { margin-top: 0; }
.recommendation-basis { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(17,17,17,.16); font-size: .875rem; line-height: 1.65; }
.recommendation-basis h3 { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; }
.recommendation-basis p { margin: .6rem 0 0; color: var(--muted); }
.recommendation-basis strong { color: var(--foreground); }

@media (max-width: 720px) {
  .onboarding-copy { padding-top: 0; }
  .onboarding-copy > p.flow-takeaway { margin-top: 1rem; }
}

.examples-signup { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 0 clamp(2.5rem, 5vw, 5rem); }