/* SMB-only enhancement. The complete story remains visible without JavaScript. */
.cl-business-motion .cl-header { transition: box-shadow 250ms ease; }
.cl-business-motion.cl-has-scrolled .cl-header { box-shadow: 0 8px 24px -18px #1f2e3e66; }
.cl-business-motion.cl-motion-enabled .cl-header::after {
  content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--navy), #7696b6);
  transform: scaleX(var(--cl-page-progress, 0)); transform-origin: left; pointer-events: none;
}
.cl-business-motion .cl-flow-connector { transform-origin: top; }
@media (min-width: 1001px) {
  .cl-business-motion .cl-hero-grid { grid-template-columns: 1.25fr 1fr; gap: 56px; }
  .cl-business-motion .cl-hero h1 { font-size: clamp(45px, 4.3vw, 60px); }
}
.cl-funnel { margin-top: 40px; }
.cl-funnel-steps { list-style: none; padding: 0; margin: 0; min-width: 0; }
.cl-funnel-step {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 64px; align-items: center; padding: 48px 0 64px; border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}
.cl-funnel-copy { min-width: 0; }
.cl-funnel-copy .cl-funnel-kicker {
  display: flex; align-items: center; gap: 12px; color: var(--steel);
  text-transform: uppercase; font-size: 11px; letter-spacing: 1.6px; font-weight: 600; margin: 0 0 22px;
}
.cl-funnel-kicker > span {
  display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #c5d1da;
  border-radius: 50%; font-size: 10px; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.cl-funnel-copy h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.16; margin-bottom: 20px; }
.cl-funnel-copy > p { font-size: 15px; line-height: 1.75; color: var(--muted); }
.cl-funnel-copy .cl-capability-evidence,
.cl-funnel-copy .cl-funnel-practical {
  font-size: 14px; line-height: 1.75; padding: 0 0 0 18px; margin: 24px 0; border-left: 2px solid #b9cbbc;
}
.cl-funnel-copy .cl-capability-evidence strong { font-size: 19px; font-weight: 600; letter-spacing: -.4px; }
.cl-funnel-copy .cl-capability-evidence a { font-size: 12px; color: var(--steel); line-height: 1.6; margin-top: 8px; }
.cl-funnel-copy .cl-capability-measure {
  padding-top: 18px; margin: 24px 0 0; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.7; color: var(--steel); font-weight: 500;
}
.cl-funnel-inline { margin: 0; min-width: 0; }
.cl-funnel-inline figcaption { font-size: 11px; color: var(--muted); margin-top: 16px; text-align: center; }
.cl-funnel-scene { min-width: 0; }
.cl-funnel-canvas {
  border: 1px solid #d0dbdf; border-radius: 14px; min-width: 0; overflow: hidden;
  background: radial-gradient(#b5c6c54d .8px, transparent .8px) 0 0 / 16px 16px, #edf2f1;
  box-shadow: 0 22px 50px -32px #263e485c;
}
.cl-canvas-heading {
  height: 40px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; background: var(--navy); color: white;
}
.cl-canvas-brand { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; }
.cl-canvas-brand i { color: #8fa89c; font-style: normal; padding: 0 6px; }
.cl-canvas-example { font-size: 8px; letter-spacing: 1px; color: #d7e4df; border: 1px solid #70877d; border-radius: 3px; padding: 3px 6px; }
.cl-canvas-title { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 22px; }
.cl-canvas-count { color: #57736a; font-size: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-canvas-caption { font-size: 13px; font-weight: 500; line-height: 1.45; }
.cl-canvas-stage { margin: 0 22px; }
.cl-funnel-route { display: flex; justify-content: space-between; gap: 4px; position: relative; margin: 18px 24px 0; isolation: isolate; }
.cl-funnel-route::before, .cl-funnel-route::after {
  content: ""; height: 1px; position: absolute; top: 16px; left: 16px; right: 16px; background: #b8cac4; z-index: -1;
}
.cl-funnel-route::after { background: #496e5d; transform: scaleX(var(--cl-funnel-progress, 0)); transform-origin: left; transition: transform 350ms ease; }
.cl-funnel-route a {
  display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px;
  border: 1px solid #bdccc7; border-radius: 50%; text-decoration: none; color: #52685d;
  background: #edf2f1; font-size: 9px; font-variant-numeric: tabular-nums;
  transition: color 250ms ease, background 250ms ease, box-shadow 250ms ease;
}
.cl-funnel-route a.is-complete { background: #d0e0d7; border-color: #a8c0b2; }
.cl-funnel-route a[aria-current="step"], .cl-funnel-route a:hover { background: var(--navy); color: white; border-color: var(--navy); box-shadow: 0 0 0 4px #1f2e3e0b; }
.cl-funnel-canvas .cl-canvas-note { text-align: center; margin: 10px 12px 12px; font-size: 10px; color: #567166; }
/* A consistent fictional customer passes through ten small interface illustrations. */
.cl-mock { background: white; border: 1px solid #ccd8d6; border-radius: 9px; overflow: hidden; box-shadow: 0 10px 25px -20px #233e4966; font-size: 12px; line-height: 1.5; color: var(--ink); }
.cl-mock-top { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border-bottom: 1px solid #e6eaea; background: #fafcfb; font-size: 11px; font-weight: 500; }
.cl-mock-top svg { width: 16px; height: 16px; color: #567568; }
.cl-mock-menu { margin-left: auto; color: #829790; letter-spacing: 2px; }
.cl-mock-body { height: 260px; padding: 18px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.cl-ui-status { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid #dbe5df; background: #f0f6f2; font-size: 10px; color: #446853; min-height: 39px; }
.cl-ui-status > span { font-size: 11px; }
.cl-ui-overline { display: block; font-size: 8px; font-weight: 600; letter-spacing: 1.1px; color: #607970; }
.cl-ui-title { font-family: var(--head); font-size: 21px; line-height: 1.2; letter-spacing: -.5px; display: block; color: var(--navy); }
.cl-ui-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.cl-ui-chip { display: inline-block; padding: 3px 9px; font-size: 9px; border: 1px solid #d3dfd9; background: #f1f6f3; border-radius: 4px; color: #4d6e5e; }
.cl-ui-line { height: 5px; width: 100%; max-width: 250px; background: #e5ebe8; border-radius: 3px; margin-top: 8px; }
.cl-ui-line-short { width: 60%; }
.cl-ui-button { display: inline-block; padding: 10px 13px; background: var(--navy); color: white; border-radius: 5px; font-size: 10px; white-space: nowrap; }
.cl-ui-avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #e8e0d6; color: #6e5d45; font-size: 11px; flex-shrink: 0; }
.cl-search-query { display: flex; justify-content: space-between; gap: 8px; padding: 11px 13px; border: 1px solid #d4dfe0; border-radius: 20px; font-size: 11px; box-shadow: 0 3px 7px #1f2e3e06; }
.cl-search-query > span { color: #597c69; }
.cl-search-result { padding: 6px 10px; }
.cl-search-result > b { display: block; font-size: 15px; font-family: var(--head); margin-top: 6px; letter-spacing: -.4px; color: #365c81; }
.cl-answer-card { display: flex; gap: 10px; padding: 13px; background: #f1f3f9; border: 1px solid #e2e5ee; border-radius: 6px; }
.cl-answer-spark { font-size: 23px; color: #7972a0; line-height: 1.2; }
.cl-answer-card strong, .cl-answer-card div > span { display: block; font-size: 11px; }
.cl-answer-card div > span { font-size: 10px; color: #6a7185; margin-top: 3px; }
.cl-mini-site { border: 1px solid #dde5e1; border-radius: 5px; overflow: hidden; }
.cl-mini-nav { display: flex; justify-content: space-between; padding: 10px 12px; font-size: 7px; }
.cl-mini-nav b { letter-spacing: 1.4px; }
.cl-mini-nav > span { color: #6d8076; }
.cl-mini-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; padding: 10px 14px 8px; background: #f5f5ef; gap: 6px; }
.cl-mini-hero .cl-ui-overline { font-size: 6px; letter-spacing: .9px; }
.cl-mini-hero strong { display: block; font-family: var(--head); line-height: 1.15; font-size: 24px; letter-spacing: -.8px; margin: 7px 0 10px; }
.cl-mini-hero .cl-ui-button { font-size: 8px; padding: 7px 9px; }
.cl-house { width: 100%; height: 136px; }
.cl-mini-features { display: flex; justify-content: space-around; font-size: 7px; padding: 9px 4px; color: #678172; }
.cl-ui-handoff { display: flex; align-items: center; gap: 10px; font-size: 10px; }
.cl-ui-handoff > span:last-child { margin-left: auto; color: #587368; }
.cl-chat-identity { display: flex; gap: 10px; align-items: center; margin-bottom: 2px; }
.cl-assistant-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #e9efe9; font-size: 21px; color: #5a7b65; }
.cl-chat-identity strong, .cl-chat-identity div > span { display: block; font-size: 11px; }
.cl-chat-identity div > span { font-size: 8px; color: #718379; margin-top: 2px; }
.cl-demo-bubble { max-width: 84%; align-self: flex-start; background: #edf2f0; border-radius: 0 9px 9px; padding: 10px 13px; font-size: 11px; }
.cl-demo-bubble-person { align-self: flex-end; background: var(--navy); color: #fff; border-radius: 9px 0 9px 9px; }
.cl-chat-extract { display: flex; align-items: center; gap: 10px; padding: 10px 0 0; border-top: 1px solid #e6ece7; font-size: 10px; }
.cl-chat-extract > span { font-size: 7px; letter-spacing: .6px; color: #667b70; }
.cl-chat-extract > b { margin-left: auto; color: #5e826c; }
.cl-mock-chat .cl-mock-body { gap: 9px; }
.cl-form-progress { display: flex; gap: 5px; align-items: center; margin-bottom: 6px; }
.cl-form-progress > span { width: 25px; height: 3px; background: #72927e; border-radius: 2px; }
.cl-form-progress > span:nth-child(3) { background: #e0e9e3; }
.cl-form-progress > small { margin-left: auto; font-size: 9px; color: #778a7e; }
.cl-mock-form .cl-mock-body { gap: 9px; }
.cl-mock-form .cl-ui-title { font-size: 19px; }
.cl-demo-options { display: grid; gap: 6px; }
.cl-demo-options > span { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #dbe4df; border-radius: 5px; font-size: 11px; }
.cl-demo-options > span.is-chosen { border-color: #92b09c; background: #f0f6f1; }
.cl-demo-options i { display: grid; place-items: center; font-size: 8px; font-style: normal; width: 13px; height: 13px; border: 1px solid #bbcdc0; border-radius: 3px; }
.cl-demo-options .is-chosen i { background: #64856f; color: white; border-color: #64856f; }
.cl-form-bottom { display: flex; align-items: center; gap: 15px; justify-content: space-between; }
.cl-form-bottom > span:first-child { font-size: 8px; color: #6d8074; }
.cl-form-bottom .cl-ui-button { padding: 8px 12px; }
.cl-crm-pipeline { display: flex; gap: 6px; }
.cl-crm-pipeline > span { flex: 1; text-align: center; padding: 6px 3px; border-bottom: 3px solid #dfe6e2; color: #798b80; font-size: 9px; }
.cl-crm-pipeline > .is-chosen { border-color: #709280; color: #3d624e; }
.cl-crm-person { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.cl-crm-person div { flex: 1; }
.cl-crm-person strong { display: block; font-size: 15px; font-family: var(--head); }
.cl-crm-person div > span { display: block; font-size: 9px; margin-top: 3px; color: #75877c; }
.cl-crm-fields { display: grid; grid-template-columns: 1fr 1fr; background: #f3f6f4; border-radius: 5px; padding: 12px; gap: 12px; }
.cl-crm-fields span, .cl-quote-summary div > span { display: block; font-size: 7px; letter-spacing: .8px; color: #6b8474; }
.cl-crm-fields b, .cl-quote-summary b { display: block; font-size: 11px; font-weight: 500; margin-top: 4px; }
.cl-crm-timeline { display: grid; gap: 9px; position: relative; margin-left: 4px; }
.cl-crm-timeline::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: #b9cebf; }
.cl-crm-timeline > span { display: flex; align-items: center; gap: 11px; font-size: 10px; }
.cl-crm-timeline i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #80a18d; z-index: 1; }
.cl-email-meta { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; border-bottom: 1px solid #e2e8e4; padding-bottom: 12px; }
.cl-email-meta > span { font-size: 7px; letter-spacing: 1px; color: #7b8c83; align-self: center; }
.cl-email-meta > strong { font-size: 11px; font-weight: 500; }
.cl-email-copy { font-size: 11px; line-height: 1.7; padding-top: 3px; }
.cl-email-copy b { display: block; margin-bottom: 8px; font-weight: 500; }
.cl-email-copy p { margin: 0 0 8px; }
.cl-email-rule { display: flex; gap: 10px; align-items: center; background: #f2f4fa; border: 1px solid #e5e7ee; border-radius: 6px; padding: 10px 12px; }
.cl-email-rule > span { color: #80769f; font-size: 20px; }
.cl-email-rule strong { display: block; font-size: 10px; }
.cl-email-rule div > span { font-size: 9px; color: #7c7b88; }
.cl-quote-heading .cl-ui-title { margin-top: 8px; }
.cl-quote-row { display: flex; gap: 12px; padding: 12px; border: 1px solid #dce5df; border-radius: 5px; align-items: center; }
.cl-quote-check { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e5efe7; color: #61816d; }
.cl-quote-row strong, .cl-quote-row div > span { display: block; font-size: 11px; }
.cl-quote-row div > span { font-size: 9px; color: #748479; margin-top: 3px; }
.cl-quote-summary { display: flex; justify-content: space-between; gap: 12px; padding-top: 3px; }
.cl-booking-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; }
.cl-booking-calendar > strong { font-size: 13px; display: block; margin-bottom: 16px; }
.cl-weekday, .cl-calendar-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; text-align: center; font-size: 10px; }
.cl-weekday { font-size: 7px; color: #7c9083; margin-bottom: 8px; }
.cl-calendar-days > span { padding: 5px 2px; border-radius: 4px; }
.cl-calendar-days > .is-chosen { background: var(--navy); color: #fff; }
.cl-time-slots { display: grid; align-content: center; gap: 9px; border-left: 1px solid #e0e8e2; padding-left: 18px; }
.cl-time-slots > span { font-size: 7px; color: #6d8475; letter-spacing: .5px; }
.cl-time-slots > b { font-size: 10px; font-weight: 500; border: 1px solid #d7e2da; border-radius: 4px; padding: 8px; }
.cl-time-slots > .is-chosen { background: #eff6f0; border-color: #87a48f; color: #456f51; }
.cl-time-slots i { float: right; font-style: normal; }
.cl-booking-confirm { display: flex; gap: 11px; align-items: center; padding: 13px; margin-top: 4px; background: #f1f6f2; border-radius: 6px; }
.cl-booking-confirm svg { width: 24px; height: 24px; color: #537961; }
.cl-booking-confirm strong, .cl-booking-confirm div > span { display: block; font-size: 10px; }
.cl-booking-confirm div > span { font-size: 9px; margin-top: 4px; color: #6b8472; }
.cl-video-screen { position: relative; padding: 18px 22px; height: 203px; border-radius: 6px; overflow: hidden; color: white; background: radial-gradient(ellipse at top right, #658379, transparent 75%), #243d36; }
.cl-video-screen::after { content: ""; position: absolute; width: 180px; height: 180px; right: -32px; top: -25px; border-radius: 50%; border: 1px solid #b6cbb233; box-shadow: 0 0 0 30px #b6cbb20a, 0 0 0 60px #b6cbb20a; }
.cl-video-mark { font-size: 7px; letter-spacing: 1.5px; color: #ccdacd; }
.cl-play-symbol { display: grid; place-items: center; position: absolute; right: 30px; top: 70px; width: 48px; height: 48px; border: 1px solid #b3c9ba; border-radius: 50%; padding-left: 3px; background: #ffffff0a; font-size: 15px; }
.cl-video-screen > strong { display: block; margin-top: 29px; font-family: var(--head); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.6px; }
.cl-video-track { position: absolute; left: 22px; right: 22px; bottom: 18px; height: 2px; background: #b6cbb24d; }
.cl-video-track > span { display: block; height: 2px; width: 36%; background: #d3e3d0; }
.cl-video-chapters { display: flex; justify-content: space-between; gap: 5px; font-size: 9px; padding-top: 8px; }
.cl-video-chapters b { font-size: 8px; color: #5f826a; margin-right: 3px; }
.cl-meeting-wave { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 4px; }
.cl-team-avatar { background: #dfe8e1; color: #4f715a; }
.cl-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 38px; }
.cl-wave i { width: 3px; height: var(--bar); background: #8eab98; border-radius: 2px; }
.cl-recap-sheet { padding: 14px; border: 1px solid #dce6df; border-radius: 6px; box-shadow: 0 4px 0 -1px #eef2ef, 0 5px 0 -1px #dce6df; }
.cl-recap-sheet .cl-ui-title { font-size: 20px; margin: 7px 0 12px; }
.cl-recap-sheet > div { display: flex; gap: 8px; font-size: 10px; margin-top: 8px; }
.cl-recap-sheet b { color: #65876e; }
.cl-recap-outputs { display: flex; justify-content: center; gap: 20px; font-size: 9px; color: #577563; margin-top: 5px; }
/* Only a wide, tall viewport receives the shared sticky canvas. */
@media (min-width: 961px) and (min-height: 700px) {
  .cl-funnel-enhanced .cl-funnel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
  .cl-funnel-enhanced .cl-funnel-step { display: block; min-height: 590px; padding: 38px 0 92px; }
  .cl-funnel-enhanced .cl-funnel-step:last-child { padding-bottom: 80px; }
  .cl-funnel-enhanced .cl-funnel-inline { display: none; }
  .cl-funnel-enhanced .cl-funnel-canvas { position: sticky; top: 116px; }
}
@media (max-width: 1100px) {
  .cl-funnel-step, .cl-funnel-enhanced .cl-funnel { gap: 40px; }
  .cl-canvas-stage { margin: 0 15px; }
  .cl-canvas-title, .cl-canvas-heading { padding-left: 16px; padding-right: 16px; }
  .cl-funnel-route { margin-left: 16px; margin-right: 16px; gap: 3px; }
  .cl-funnel-route a { width: 28px; height: 28px; }
  .cl-funnel-route::before, .cl-funnel-route::after { top: 14px; }
}
@media (max-width: 960px) {
  .cl-funnel-step { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 48px; }
  .cl-funnel-copy, .cl-funnel-inline { width: 100%; max-width: 600px; margin: 0 auto; }
  .cl-funnel-copy h3 { font-size: 29px; }
  .cl-funnel-inline { border: 1px solid #d0dbdf; border-radius: 10px; padding: 20px; background: #edf2f1; }
  .cl-funnel-inline figcaption { margin: 14px 0 0; font-size: 10px; }
}
@media (max-width: 420px) {
  .cl-funnel-inline { padding: 12px; }
  .cl-mock-body { padding: 13px; height: auto; min-height: 274px; }
  .cl-mock-top { padding: 0 12px; }
  .cl-ui-status { font-size: 9px; padding-left: 12px; padding-right: 12px; }
  .cl-mini-hero strong { font-size: 21px; }
  .cl-mini-nav { font-size: 6px; }
  .cl-mini-hero .cl-ui-button { font-size: 7px; }
  .cl-ui-handoff { font-size: 9px; }
  .cl-ui-title { font-size: 20px; }
  .cl-crm-person strong { font-size: 14px; }
  .cl-crm-person div > span { font-size: 8px; }
  .cl-booking-layout { gap: 12px; }
  .cl-booking-calendar > strong { font-size: 12px; }
  .cl-time-slots { padding-left: 10px; }
  .cl-video-screen { padding-left: 14px; }
  .cl-video-screen > strong { font-size: 21px; }
  .cl-play-symbol { right: 15px; width: 40px; height: 40px; }
  .cl-video-chapters { font-size: 8px; }
  .cl-recap-outputs { gap: 14px; font-size: 8px; }
  .cl-wave { gap: 2px; }
  .cl-recap-sheet { padding: 11px; }
  .cl-recap-sheet .cl-ui-title { font-size: 19px; }
}
.cl-business-motion:not(.cl-motion-enabled) .cl-header { transition: none; }
@media (prefers-reduced-motion: reduce), print {
  .cl-business-motion .cl-header::after { display: none; }
  .cl-business-motion .cl-header, .cl-funnel-route a, .cl-funnel-route::after { transition: none; }
}
@media print {
  .cl-funnel, .cl-funnel-step { display: block !important; }
  .cl-funnel-step { min-height: 0 !important; break-inside: avoid; padding: 24px 0 !important; }
  .cl-funnel-inline { display: block !important; max-width: 440px; margin: 20px auto 0; }
  .cl-funnel-canvas { display: none !important; }
}