/* Three compact, illustrative workspace cards beside the actual pricing plans. */
.dx-plan-stories { scroll-margin-top: 95px; }
.dx-plan-stories__tools { display: grid; justify-items: end; gap: 10px; flex: 0 0 auto; }
.dx-plan-stories__tools > span { color: #7a899d; font-size: 12px; }
.dx-plan-stories__tools button { padding: 7px 11px; min-height: 34px; border: 1px solid #d7e1ed; border-radius: 8px; background: #fff; color: #586f89; font: inherit; font-size: 11px; cursor: pointer; }
.dx-plan-stories__tools button:focus-visible,.dx-plan-story__link:focus-visible { outline: 3px solid #317f68; outline-offset: 4px; }
.dx-plan-stories__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.dx-plan-story { --accent: #3873b6; --tint: #eaf2ff; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid #dce5f0; border-radius: 20px; background: #fff; box-shadow: 0 6px 23px #273f5c05; }
.dx-plan-story--capacity { --accent: #23846b; --tint: #e5f5ee; }
.dx-plan-story--custom { --accent: #865ab1; --tint: #f3ecfb; }
.dx-plan-story__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dx-plan-story__top > span:last-child { color: #8796aa; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-align: right; }
.dx-plan-story__icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 11px; background: var(--tint); color: var(--accent); }
.dx-plan-story__icon svg { width: 20px; height: 20px; }
.dx-plan-story h3 { margin: 14px 0 8px; color: #213857; font-size: clamp(17px,1.35vw,20px); letter-spacing: -.025em; line-height: 1.3; }
.dx-plan-story > p { margin: 0 0 14px; color: #6a7e98; font-size: 12px; line-height: 1.7; }
.dx-plan-scene { margin-top: auto; min-width: 0; padding: 11px; border: 1px solid #e1e8f1; border-radius: 13px; background: radial-gradient(circle at 95% 0,var(--tint),transparent 70%),#fafcfe; }
.dx-plan-scene__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.dx-plan-scene__head b { color: #425d7c; font-size: 11px; line-height: 1.4; }
.dx-plan-scene__head small { color: #8296ac; font-size: 8px; letter-spacing: .05em; font-weight: 750; text-align: right; }
.dx-plan-meter + .dx-plan-meter { margin-top: 11px; }
.dx-plan-meter > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.dx-plan-meter > div > span { color: #657c98; font-size: 10px; }
.dx-plan-meter strong { color: #8796a8; font-size: 10px; font-weight: 500; text-align: right; white-space: nowrap; }
.dx-plan-meter strong b { color: #3f699a; font-weight: 800; }
.dx-plan-meter__track { display: block; height: 7px; border-radius: 5px; background: #e2eaf4; overflow: hidden; }
.dx-plan-meter__track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#4c89be,#8cbae0); transform: scaleX(var(--fill)); transform-origin: left; transition: transform .7s ease; border-radius: inherit; }
.dx-plan-meter__track--lilac i { background: linear-gradient(90deg,#9581b5,#c2b3d9); }
.dx-plan-scene__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #e4ebf3; color: #7a8ca2; font-size: 9px; line-height: 1.5; }
.dx-plan-scene__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .65; flex: 0 0 auto; }
.dx-plan-scene__foot > b { margin-left: auto; color: var(--accent); font-size: 9px; font-weight: 650; }
.dx-plan-addon { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dx-plan-addon > span { display: inline-flex; gap: 8px; align-items: center; color: #547f6c; font-size: 11px; }
.dx-plan-addon i { display: grid; place-items: center; width: 23px; height: 23px; border: 1px dashed #96c2ae; border-radius: 7px; font-size: 16px; font-style: normal; }
.dx-plan-addon strong { color: #33775d; font-size: 24px; line-height: 1.2; text-align: right; }
.dx-plan-addon strong small { display: block; font-size: 9px; color: #819a8d; font-weight: 500; }
.dx-plan-cost-track { display: flex; gap: 3px; height: 7px; margin-top: 10px; overflow: hidden; border-radius: 5px; }
.dx-plan-cost-track i:first-child { flex: 0 0 calc(var(--base) * 100% - 3px); background: #a9ccb9; transition: flex-basis .7s; }
.dx-plan-cost-track i:last-child { flex: 1; background: #388a6b; }
.dx-plan-cost { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; margin-top: 8px; color: #829a8c; font-size: 9px; }
.dx-plan-cost b { color: #5c7f6d; }
.dx-plan-cost strong { margin-left: 3px; color: #2b7356; font-size: 13px; }
.dx-plan-cost small { margin-left: 2px; font-size: 9px; }
.dx-plan-modules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.dx-plan-modules > span { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 26px; padding: 5px 7px; border: 1px solid #e1e5ed; border-radius: 7px; color: #8692a4; background: #fafbfe; font-size: 10px; transition: background .35s,border-color .35s,color .35s; }
.dx-plan-modules i { display: grid; place-items: center; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 4px; background: #ecf0f5; font-size: 9px; font-style: normal; }
.dx-plan-modules > .is-selected { color: #79549b; border-color: #ddd0eb; background: #f6effb; }
.dx-plan-modules > .is-selected i { color: #fff; background: #a180bf; }
.dx-plan-quote-path { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; color: #9a88ae; font-size: 9px; }
.dx-plan-quote-path span { color: #776288; font-weight: 650; }
.dx-plan-quote-path i { font-style: normal; }
.dx-plan-story__link { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 30px; margin-top: 12px; color: var(--accent); font-size: 11px; font-weight: 750; text-decoration: none; }
.dx-plan-story__link > span { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }
.dx-plan-story__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.dx-plan-stories__note { margin: 16px 0 0; color: #8290a3; font-size: 11px; line-height: 1.7; }
@media (min-width: 1101px) { .dx-plan-scene { min-height: 157px; } }
@media (min-width: 721px) and (max-width: 1100px) { .dx-plan-stories__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .dx-plan-story:last-child { grid-column: 1 / -1; width: min(100%,480px); justify-self: center; } }
@media (max-width: 720px) { .dx-plan-stories__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } .dx-plan-story { padding: 20px; } .dx-plan-stories__tools { justify-items: start; margin-top: 17px; } .dx-plan-story h3 { font-size: 19px; } }
@media (max-width: 360px) { .dx-plan-story { padding: 17px; } .dx-plan-scene { padding: 11px; } .dx-plan-scene__foot > b { margin-left: 10px; } .dx-plan-modules > span { padding: 6px; font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .dx-plan-meter__track i,.dx-plan-cost-track i:first-child,.dx-plan-modules > span { transition: none; } }