/* "Find your first automation" walkthrough (public/nn/walkthrough.js). Same card, chip and
   timeline language as the agent demos. The Book button borrows .lo-agent-meet from offer.css,
   repeated here so the contact page, which does not load offer.css, gets it too. */
/* a fixed width: full width up to 760px, never sized by its content (its parents are flex boxes) */
.lo-wt { width: 100%; max-width: 760px; margin: 0 auto; text-align: left; box-sizing: border-box; align-self: center; flex: none; }
.lo-wt-card { width: 100%; box-sizing: border-box; }
.lo-wt-card { position: relative; background: #fff; border: 1px solid #E4E9F5; border-radius: 22px; box-shadow: 0 30px 60px -44px rgba(35, 42, 80, .45); padding: 28px 32px 26px; }

/* progress: the demo timeline, five nodes */
.lo-wt-dots { list-style: none; margin: 0 0 26px; padding: 0; display: flex; align-items: center; }
.lo-wt-dots li { flex: 1; display: flex; align-items: center; }
.lo-wt-dots li:last-child { flex: none; }
.lo-wt-dots li::after { content: ""; flex: 1; height: 2px; margin: 0 6px; background: #E4E9F5; transition: background-color .3s ease; }
.lo-wt-dots li:last-child::after { display: none; }
.lo-wt-dots li.is-done::after { background: #536ee5; }
.lo-wt-dots span { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid #D5DBEA; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background-color .3s ease, border-color .3s ease; }
.lo-wt-dots span svg { width: 12px; height: 12px; }
.lo-wt-dots .is-now span { border-color: #536ee5; box-shadow: 0 0 0 4px #EEF1FD; }
.lo-wt-dots .is-done span { background: #536ee5; border-color: #536ee5; }

/* the question */
/* one height for every step (set by walkthrough.js); Back and Next stay on the bottom edge */
.lo-wt-stage { display: flex; flex-direction: column; transition: opacity .16s ease, transform .16s ease; }
.lo-wt-stage > .lo-wt-nav, .lo-wt-result > .lo-wt-nav { margin-top: auto; padding-top: 24px; }
.lo-wt-result { flex: 1; display: flex; flex-direction: column; }
.lo-wt-probe { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.lo-wt-stage.is-leaving { opacity: 0; transform: translateY(-6px); }
.lo-wt-stage.is-entering { opacity: 0; transform: translateY(8px); transition: none; }
.lo-wt-step { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #536ee5; }
.lo-wt-q { margin: 0; font-family: var(--brand-font-heading); font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #232323; outline: none; }
.lo-wt-hint { margin: 6px 0 0; font-size: 15px; color: #6B7280; }
.lo-wt-opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lo-wt-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid #D5DBEA; border-radius: 999px; background: #fff; color: #232323; font: 500 15px/1.25 var(--brand-font-body); text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.lo-wt-opt:hover { border-color: #536ee5; color: #1B44C8; }
.lo-wt-opt.is-on { border-color: #536ee5; background: #EEF1FD; color: #1B44C8; }
.lo-wt-opt:focus-visible, .lo-wt-back:focus-visible, .lo-wt-next:focus-visible { outline: 2px solid #536ee5; outline-offset: 2px; }
.lo-wt-box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #C9D1EA; display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background-color .2s ease, border-color .2s ease; }
.lo-wt-box svg { width: 12px; height: 12px; }
.lo-wt-opt.is-on .lo-wt-box { background: #536ee5; border-color: #536ee5; color: #fff; }

/* back and next */
.lo-wt-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; }
.lo-wt-back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px; border: 0; background: none; color: #6B7280; font: 600 15px/1 var(--brand-font-body); cursor: pointer; transition: color .2s ease; }
.lo-wt-back:hover { color: #232323; }
.lo-wt-back svg, .lo-wt-next svg { width: 16px; height: 16px; }
.lo-wt-next { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: #232323; color: #fff; font: 600 15px/1 var(--brand-font-body); cursor: pointer; transition: background-color .25s ease, opacity .2s ease; }
.lo-wt-next:hover:not([disabled]) { background: #536ee5; }
.lo-wt-next[disabled] { opacity: .35; cursor: default; }

/* the result */
.lo-wt-agent { display: flex; align-items: center; gap: 18px; }
.lo-wt-face { width: 88px; height: 88px; flex: none; display: block; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: 0 0 0 1px #E4E9F5, 0 18px 36px -24px rgba(35, 42, 80, .5); }
.lo-wt-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-wt-face.is-small { width: 28px; height: 28px; border-width: 2px; box-shadow: 0 0 0 1px #E4E9F5; }
.lo-wt-name { font-size: 32px; }
.lo-wt-line { margin: 4px 0 0; font-size: 17px; color: #2C3444; }
.lo-wt-body { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: #4B5563; }
.lo-wt-stat { margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: #F5F7FE; display: flex; flex-direction: column; gap: 4px; }
.lo-wt-stat b { font-family: var(--brand-font-heading); font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #1B44C8; }
.lo-wt-stat span { font-size: 14px; color: #6B7280; }
.lo-wt-stat.is-plain p { margin: 0; font-size: 15px; line-height: 1.6; color: #2C3444; }
.lo-wt-flag { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #FFF6E6; color: #8A5A00; font-size: 15px; font-weight: 600; }
.lo-wt-note { margin: 14px 0 0; font-size: 15px; color: #4B5563; }
.lo-wt-next-up { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 15px; color: #4B5563; }
.lo-wt-next-up a { color: #536ee5; font-weight: 600; text-decoration: none; }
.lo-wt-next-up a:hover { color: #1B44C8; }

/* the dark pill with the header's text slide (also in offer.css) */
.lo-wt .lo-agent-meet { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: #232323; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .25s ease; }
.lo-wt .lo-agent-meet:hover { background: #536ee5; color: #fff; }
.lo-wt .lo-agent-meet svg { width: 16px; height: 16px; transition: transform .25s ease; }
.lo-wt .lo-agent-meet:hover svg { transform: translateX(3px); }
.lo-wt .lo-slide { display: inline-grid; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.lo-wt .lo-slide > span { grid-area: 1 / 1; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.lo-wt .lo-slide > span + span { transform: translateY(100%); }
.lo-wt .lo-agent-meet:hover .lo-slide > span:first-child { transform: translateY(-100%); }
.lo-wt .lo-agent-meet:hover .lo-slide > span + span { transform: none; }

/* where it sits: the homepage closing card and the contact page */
.lo-wt-intro { max-width: 640px; margin: 0 auto; }
.lo-wt-skip { margin: 18px 0 0; text-align: center; font-size: 15px; color: #6B7280; }
.lo-wt-skip a { color: #232323; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #C9D1EA; transition: text-decoration-color .2s ease; }
.lo-wt-skip a:hover { text-decoration-color: #536ee5; }
.nn-d-cta .lo-wt { margin-top: 32px; }
.lo-wt-contact { margin: 40px auto 0; }
.lo-wt-skip-contact { margin-bottom: 48px; }

@media (max-width: 767px) {
  .lo-wt-card { padding: 22px 18px 20px; border-radius: 18px; }
  .lo-wt-q { font-size: 23px; }
  .lo-wt-name { font-size: 26px; }
  .lo-wt-opt { min-height: 44px; padding: 0 15px; font-size: 15px; }
  .lo-wt-agent { gap: 14px; }
  .lo-wt-face { width: 68px; height: 68px; }
  .lo-wt-face.is-small { width: 28px; height: 28px; }
  .lo-wt-stat b { font-size: 22px; }
  .lo-wt-nav { flex-wrap: wrap-reverse; }
  .lo-wt-result .lo-wt-nav { justify-content: center; }
  .lo-wt-result .lo-agent-meet { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-wt-stage, .lo-wt-dots span, .lo-wt-dots li::after { transition: none; }
}

/* the AI step's second group, shown once they say they use some AI */
.lo-wt-sub { margin-top: 20px; }
.lo-wt-sub.is-hidden { display: none; }
.lo-wt-sub .lo-wt-hint { margin: 0; font-weight: 600; color: #2C3444; }
.lo-wt-sub .lo-wt-opts { margin-top: 12px; }