/* A scroll-controlled product story. The completed composition is the fallback. */
.showreel.evolution-section { height: auto; background: #080d11; color: #f7f7f3; }
.evolution-section.evolution-motion { height: 340svh; }
.evolution-sticky { position: relative; height: 100svh; min-height: 730px; padding: 106px 6vw 32px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 18px; overflow: clip; isolation: isolate; }
.evolution-motion .evolution-sticky { position: sticky; top: 0; }
.evolution-heading { text-align: center; position: relative; z-index: 3; }
.evolution-eyebrow { font-size: 12px; letter-spacing: .17em; text-transform: uppercase; color: #a2b1b5; margin-bottom: 20px; }
.evolution-title { font-size: clamp(48px,6.1vw,94px); line-height: 1.05; letter-spacing: -.055em; font-weight: 300; }
.evolution-title > span { color: #697579; transition: color .4s; white-space: nowrap; }
.evolution-section[data-stage="0"] .evolution-title > span:nth-child(1),
.evolution-section[data-stage="1"] .evolution-title > span:nth-child(2) { color: #f7f7f3; }
.evolution-section[data-stage="2"] .evolution-title > span:nth-child(3) { color: #b7f3d7; }
.evo-scene { width: min(1000px,77vw,calc((100svh - 350px) * 1.88)); aspect-ratio: 1.88; align-self: center; justify-self: center; position: relative; container-type: inline-size; perspective: 1600px; }
.evo-light { pointer-events: none; position: absolute; width: 90%; height: 140%; top: -20%; border-radius: 50%; z-index: -1; }
.evo-light-violet { left: -32%; background: radial-gradient(ellipse,#5141aa35,transparent 66%); }
.evo-light-emerald { right: -30%; background: radial-gradient(ellipse,#1e96713d,transparent 66%); }
.evo-window { position: absolute; left: 5%; top: 0; width: 90%; height: 100%; border-radius: 1.5cqw; transform: scale(.83) translateY(-2%); transform-origin: center; box-shadow: 0 3cqw 9cqw #0008,0 0 0 1px #cbe8e12b; }
.evo-interface,.evo-wireframe { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; text-align: left; }
.evo-interface { background: #f9fafc; color: #2b3041; }
.evo-browser-bar { height: 4cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 2cqw; font: 1.05cqw Arial,sans-serif; color: #9a9fae; background: #eceff2; }
.evo-browser-bar > span:nth-child(2) { min-width: 36%; text-align: center; padding: .5cqw 3cqw; border-radius: .4cqw; background: #ffffff; font-size: .9cqw; }
.evo-app-shell { height: calc(100% - 4cqw); display: grid; grid-template-columns: 19% 1fr; }
.evo-sidebar { display: flex; flex-direction: column; gap: .4cqw; padding: 2.7cqw 1.2cqw 1.7cqw; background: #eef0f6; color: #797a8b; font-size: 1.15cqw; }
.evo-sidebar > strong { display: block; color: #303046; font-size: 4.1cqw; letter-spacing: -.25cqw; font-weight: 500; margin: 0 1cqw 1.7cqw; }
.evo-sidebar > strong > span { color: #6955d2; }
.evo-sidebar > span { padding: 1.2cqw 1cqw; white-space: nowrap; }
.evo-sidebar > .evo-team { display: flex; justify-content: space-between; gap: .5cqw; font-size: .95cqw; color: #626077; border: 1px solid #dddfeb; background: #f8f9fc; border-radius: .4cqw; margin-bottom: 1cqw; }
.evo-team b { font-weight: 400; }
.evo-active-nav { border-radius: .5cqw; background: #dedbf1; color: #604eb0; }
.evo-sidebar > .evo-sidebar-bottom { margin-top: auto; display: flex; align-items: center; gap: .8cqw; padding: 0 .7cqw; font-size: .9cqw; }
.evo-sidebar-bottom i { display: grid; place-items: center; height: 2.8cqw; width: 2.8cqw; border-radius: 50%; background: #daddea; color: #64637f; font-style: normal; font-size: .8cqw; }
.evo-app-main { min-width: 0; padding: 1.7cqw 2.8cqw; display: flex; flex-direction: column; }
.evo-topline { display: flex; justify-content: space-between; align-items: center; color: #9693a2; font-size: 1cqw; }
.evo-avatars { display: flex; padding-right: .5cqw; }
.evo-avatars i { display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; border-radius: 50%; border: .2cqw solid #fff; margin-right: -.5cqw; background: #e4ddf6; font: .8cqw Arial,sans-serif; color: #6a5894; }
.evo-avatars i:nth-child(2) { background: #deece5; color: #557367; }
.evo-avatars i:nth-child(3) { background: #f0e4d7; color: #95785b; }
.evo-app-title { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; margin: 1.2cqw 0 1.7cqw; }
.evo-app-title > div > small { display: block; font-size: .8cqw; letter-spacing: .08cqw; color: #918d9e; margin-bottom: .7cqw; }
.evo-app-title > div > strong { display: block; font-size: 3.3cqw; font-weight: 400; letter-spacing: -.15cqw; }
.evo-app-title > span { color: #fff; font-size: 1cqw; background: #6551c8; border-radius: .6cqw; padding: 1cqw 1.3cqw; }
.evo-board-toolbar { display: flex; justify-content: space-between; font-size: 1.1cqw; color: #9690a2; margin-bottom: 1.8cqw; border-bottom: 1px solid #e5e5ef; padding-bottom: 1.2cqw; }
.evo-board-toolbar b { color: #6650bf; font-weight: 500; }
.evo-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2cqw; flex: 1; min-height: 0; }
.evo-lane { background: #f0eef7; padding: 1cqw; border-radius: .8cqw; display: flex; flex-direction: column; gap: 1cqw; min-width: 0; }
.evo-lane:nth-child(2) { background: #f5f0e9; }
.evo-lane:nth-child(3) { background: #eaf3ee; }
.evo-lane-heading { display: flex; align-items: center; justify-content: space-between; font-size: 1.1cqw; color: #726b81; padding-bottom: .4cqw; }
.evo-lane-heading small { font-size: .8cqw; margin-left: .6cqw; color: #9b95a6; }
.evo-task { display: flex; flex-direction: column; gap: .65cqw; padding: .9cqw 1.2cqw; border: 1px solid #e4e1ee; background: #fff; border-radius: .65cqw; box-shadow: 0 .2cqw .5cqw #21163808; }
.evo-task > small { align-self: flex-start; padding: .3cqw .5cqw; border-radius: .3cqw; font-size: .7cqw; color: #9b773f; background: #f8ecd9; }
.evo-task > .evo-tag-mint { color: #5e8974; background: #e2f1e8; }
.evo-task > .evo-tag-violet { color: #8369bb; background: #eee6fb; }
.evo-task > strong { font-size: 1.35cqw; line-height: 1.25; font-weight: 400; min-height: 2.7cqw; }
.evo-task > span { display: flex; justify-content: space-between; align-items: center; font-size: .75cqw; color: #9890a3; }
.evo-task > span > i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #eae4f4; display: grid; place-items: center; font: .7cqw Arial,sans-serif; color: #8975a6; }
.evo-task > span > .evo-done { color: #6d967d; }
.evo-task-feature { border-color: #b5a6e1; }
.evo-task-track { height: .4cqw; border-radius: 1cqw; background: #eee6ff; overflow: hidden; }
.evo-task-track > i { width: 60%; height: 100%; display: block; background: #9577d6; }
.evo-add { color: #9a90a5; font-size: .95cqw; padding: .4cqw; }
.evo-wireframe { opacity: 0; visibility: hidden; background: #101c24; color: #ddebea; border: 1px solid #85b5b56e; }
.evo-wire-chrome { height: 4cqw; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #83b2b238; padding: 0 2cqw; font-size: .85cqw; letter-spacing: .1cqw; color: #95b6b9; }
.evo-wire-shell { display: grid; grid-template-columns: 19% 1fr; height: calc(100% - 4cqw); }
.evo-wire-side { display: flex; flex-direction: column; gap: 2cqw; padding: 3cqw 2cqw; border-right: 1px solid #83b2b238; }
.evo-wire-side b { font-size: 3.5cqw; font-weight: 400; letter-spacing: -.2cqw; color: #9eb7bc; margin-bottom: 2cqw; }
.evo-wire-side i { height: 1.1cqw; border: 1px solid #80a9aa4d; border-radius: .25cqw; width: 90%; }
.evo-wire-side i:nth-child(3) { width: 65%; }
.evo-wire-main { padding: 3.4cqw 3cqw; background-image: linear-gradient(#87b4b406 1px,transparent 1px),linear-gradient(90deg,#87b4b406 1px,transparent 1px); background-size: 2cqw 2cqw; }
.evo-wire-kicker { display: block; font-size: .85cqw; letter-spacing: .12cqw; color: #80a6ab; margin-bottom: 1.5cqw; }
.evo-wire-main > strong { font-size: 4cqw; font-weight: 300; line-height: 1.05; letter-spacing: -.17cqw; }
.evo-wire-tabs { display: flex; gap: 1.5cqw; padding: 2.5cqw 0 1.8cqw; border-bottom: 1px solid #83b2b238; }
.evo-wire-tabs i { height: .75cqw; width: 7cqw; border: 1px solid #83b2b252; border-radius: .2cqw; }
.evo-wire-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6cqw; margin-top: 2cqw; }
.evo-wire-board > div { display: flex; flex-direction: column; gap: 1.2cqw; }
.evo-wire-board span { font-size: .8cqw; color: #81a2a8; letter-spacing: .15cqw; }
.evo-wire-block { display: block; height: 6.4cqw; border: 1px solid #8fc5bd57; border-radius: .65cqw; background: #7ebdaf05; transform-origin: left; }
.evo-mobile { position: absolute; left: 0; top: 20%; width: 21%; height: 82%; background: #f6f8ef; color: #28463b; border: .5cqw solid #c7d8d3; border-radius: 2.3cqw; overflow: hidden; padding: 1.8cqw 1.4cqw 1.3cqw; transform: rotate(-7deg); box-shadow: 0 2.5cqw 6cqw #0009; container-type: inline-size; }
.evo-mobile-top { display: flex; align-items: center; justify-content: space-between; }
.evo-mobile-top strong { font-size: 15cqw; letter-spacing: -.9cqw; font-weight: 400; }
.evo-mobile-top > span { display: grid; place-items: center; width: 14cqw; height: 14cqw; border-radius: 50%; background: #e1e7d9; font-size: 5cqw; }
.evo-mobile > p { font-size: 4.6cqw; color: #849483; margin: 9cqw 0 6cqw; letter-spacing: .3cqw; }
.evo-mobile > h3 { font-size: 17cqw; letter-spacing: -.8cqw; font-weight: 400; line-height: 1.03; }
.evo-mobile-dates { display: flex; justify-content: space-between; margin: 8cqw 0; gap: 2cqw; }
.evo-mobile-dates > span { display: flex; flex-direction: column; align-items: center; gap: 3cqw; font-size: 5cqw; padding: 4cqw 3.5cqw; }
.evo-mobile-dates b { font-size: 7cqw; font-weight: 400; }
.evo-mobile-dates > span:first-child { color: #f2f4e6; background: #3c6755; border-radius: 4cqw; }
.evo-mobile-card { background: #dce6c8; border-radius: 6cqw; padding: 7cqw; }
.evo-mobile-card small { font-size: 4.5cqw; color: #6c8259; letter-spacing: .2cqw; }
.evo-mobile-card strong { display: block; font-size: 11cqw; line-height: 1.1; font-weight: 400; margin: 5cqw 0 8cqw; letter-spacing: -.4cqw; }
.evo-mobile-card > span { display: flex; justify-content: space-between; font-size: 5cqw; }
.evo-mobile-card b { font-weight: 400; }
.evo-mobile-task { display: flex; align-items: center; gap: 5cqw; border-bottom: 1px solid #dbe3d7; padding: 7cqw 0; font-size: 6cqw; }
.evo-mobile-task i { font-style: normal; color: #65865d; font-size: 10cqw; }
.evo-mobile-task small { display: block; font-size: 4.6cqw; color: #8c9985; margin-top: 2cqw; }
.evo-mobile-nav { display: flex; justify-content: space-between; font-size: 9cqw; color: #6a826c; padding-top: 7cqw; }
.evo-assistant { position: absolute; top: 29%; right: -1%; width: 32%; background: #fcfbff; color: #363141; border: .25cqw solid #e3daf2; border-radius: 1.6cqw; padding: 2cqw; box-shadow: 0 3cqw 7cqw #0008; transform: rotate(5deg); container-type: inline-size; }
.evo-assistant-top { display: flex; align-items: center; gap: 4cqw; padding-bottom: 6cqw; border-bottom: 1px solid #e8e2ef; }
.evo-assistant-top > i { display: grid; place-items: center; flex: 0 0 14cqw; height: 14cqw; color: #79639f; background: #ece4f6; border-radius: 50%; font-style: normal; font-size: 10cqw; }
.evo-assistant-top strong { display: block; font-size: 6cqw; font-weight: 500; }
.evo-assistant-top div > span { display: block; font-size: 3.8cqw; color: #9a91a7; margin-top: 2cqw; }
.evo-assistant-top > span:last-child { margin-left: auto; font-size: 9cqw; color: #978ba7; }
.evo-question { background: #ece5f7; border-radius: 4cqw 4cqw 0 4cqw; margin: 7cqw 0 7cqw 10cqw; padding: 5cqw; font-size: 4.8cqw; }
.evo-answer { font-size: 5cqw; line-height: 1.5; }
.evo-answer ol { list-style-position: inside; margin: 4cqw 0; }
.evo-answer li { padding: 2cqw 0; border-bottom: 1px solid #eee9f4; font-size: 4.2cqw; }
.evo-answer small { color: #9b8dab; font-size: 3.5cqw; }
.evo-ask { display: flex; justify-content: space-between; align-items: center; border: 1px solid #e8e1ee; border-radius: 3cqw; padding: 4cqw; margin-top: 7cqw; color: #a399b0; font-size: 4cqw; }
.evo-ask b { color: #705a95; font-size: 7cqw; font-weight: 400; }
.evo-channel-label { position: absolute; bottom: -4%; left: 50%; transform: translateX(-50%); color: #8ab6a9; font-size: 12px; white-space: nowrap; letter-spacing: .04em; }
.evolution-footer { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1fr auto; gap: 4vw; align-items: end; max-width: 1240px; width: 100%; margin: 0 auto; }
.evolution-progress { max-width: 330px; }
.evolution-steps { display: flex; justify-content: space-between; gap: 15px; }
.evolution-steps button { color: #95a6aa; min-height: 44px; font-size: 14px; white-space: nowrap; }
.evolution-steps button small { font-size: 11px; margin-right: 6px; color: #64797f; }
.evolution-steps button[aria-pressed="true"] { color: #d4f7e8; }
.evolution-steps button[aria-pressed="true"] small { color: #8cbdac; }
.evolution-track { height: 1px; background: #ffffff20; margin-top: 4px; overflow: hidden; }
.evolution-track > i { display: block; width: 100%; height: 100%; background: #9fdbca; transform-origin: left; }
.evolution-caption { font-size: 15px; line-height: 1.5; color: #adb9bd; min-height: 45px; margin-bottom: 4px; }
.evolution-caption > span[hidden] { display: none; }
.evolution-cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid #aec9c280; font-size: 16px; color: #f3f8f4; white-space: nowrap; }
.evolution-cta > span { font-size: 26px; }
.evolution-cta:hover { color: #b7f3d7; border-color: #b7f3d7; }
.evolution-steps button:focus-visible,.evolution-cta:focus-visible { outline: 2px solid #b7f3d7; outline-offset: 6px; }
.evolution-static[data-stage="0"] .evo-interface { visibility: hidden; }
.evolution-static[data-stage="0"] .evo-wireframe { opacity: 1; visibility: visible; }
.evolution-static[data-stage="0"] .evo-window,.evolution-static[data-stage="1"] .evo-window { transform: none; }
.evolution-static:not([data-stage="2"]) .evo-mobile,.evolution-static:not([data-stage="2"]) .evo-assistant,.evolution-static:not([data-stage="2"]) .evo-channel-label { visibility: hidden; }
@media (min-width: 701px) and (max-height: 820px) {
 .evolution-sticky { min-height: 640px; padding-top: 88px; padding-bottom: 25px; gap: 10px; }
 .evolution-eyebrow { margin-bottom: 12px; }
 .evolution-title { font-size: min(6.1vw,68px); }
 .evo-scene { width: min(930px,74vw,calc((100svh - 300px) * 1.88)); }
 .evolution-caption { font-size: 14px; }
}
@media (max-width: 700px) {
 .evolution-section.evolution-motion { height: 310svh; }
 .evolution-sticky { padding: 96px 7vw 27px; min-height: 700px; gap: 17px; }
 .evolution-eyebrow { font-size: 10px; margin-bottom: 16px; }
 .evolution-title { font-size: 10.4vw; line-height: 1.02; max-width: 410px; margin: auto; }
 .evolution-title > span { display: inline-block; }
 .evo-scene { width: min(100%,430px,calc((100svh - 430px) * .92)); aspect-ratio: .92; }
 .evo-window { left: 0; top: 4%; width: 100%; height: 57%; transform: scale(.87) translateY(-12%); }
 .evo-mobile { top: 42%; left: 1%; width: 30%; height: 61%; border-radius: 3.6cqw; padding: 2.5cqw 2cqw 1.6cqw; border-width: .6cqw; transform: rotate(-5deg); }
 .evo-mobile > p { margin-top: 9cqw; }
 .evo-mobile-task { padding: 5cqw 0; }
 .evo-mobile-nav { padding-top: 5cqw; }
 .evo-assistant { top: 42%; right: 0; width: 55%; padding: 3.5cqw; border-radius: 2.8cqw; transform: rotate(4deg); }
 .evo-channel-label { display: none; }
 .evolution-footer { grid-template-columns: 1fr; gap: 13px; text-align: center; align-items: center; }
 .evolution-progress { order: 1; width: 100%; max-width: none; }
 .evolution-caption { order: 0; font-size: 14px; min-height: 42px; margin: 0; }
 .evolution-cta { order: 2; justify-self: center; font-size: 15px; min-height: 44px; padding: 3px 0; gap: 30px; }
 .evolution-steps button { font-size: 13px; min-height: 36px; }
 .evolution-steps button small { font-size: 10px; }
 .evolution-track { margin-top: 0; }
}
@media (max-width: 700px) and (max-height: 760px) {
 .evolution-sticky { padding-top: 78px; padding-bottom: 20px; min-height: 630px; gap: 10px; }
 .evolution-title { font-size: 9.4vw; }
 .evolution-eyebrow { margin-bottom: 10px; }
 .evo-scene { width: min(100%,calc((100svh - 360px) * .92)); }
 .evolution-footer { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
 .showreel.evolution-section { height: auto; }
 .evolution-sticky { position: relative; }
 .evolution-title > span { transition: none; }
}