/* Native work previews: readable HTML, with optional CSS motion. */
.sj-banner-motion { container-type: inline-size; position: relative; text-align: left; }
.sj-motion-window { color: #243b30; background: #f4f7f0; font-size: .8rem; line-height: 1.5; }
.sj-motion-content { padding: clamp(.85rem, 4.5cqw, 1.6rem); }
.sj-motion-eyebrow { display: block; margin: 0; color: #6b7e6c; font-size: clamp(.55rem, 2.1cqw, .65rem); line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; }
.sj-motion-heading { margin-bottom: clamp(1rem, 4cqw, 1.5rem); }
.sj-motion-heading h2 { margin: .35rem 0 0; color: #203d2e; font-size: clamp(1.1rem, 5cqw, 1.6rem); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.sj-motion-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; padding: .4rem clamp(.85rem, 4.5cqw, 1.6rem); border-top: 1px solid #d9e2d4; color: #647660; font-size: clamp(.5rem, 2cqw, .6rem); }
.sj-motion-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 88px; cursor: pointer; color: #365940; border-radius: 5px; }
.sj-motion-toggle:hover { color: #142c1d; background: #e3edda; }
.sj-motion-toggle > span { display: inline-flex; align-items: center; gap: .4rem; }
.sj-motion-toggle .sj-motion-toggle__play { display: none; }
.sj-banner-motion-state { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sj-banner-motion-state:focus-visible ~ .sj-motion-window .sj-motion-toggle { outline: 2px solid #315f42; outline-offset: 2px; }
.sj-banner-motion-state:checked ~ .sj-motion-window .sj-motion-toggle__pause { display: none; }
.sj-banner-motion-state:checked ~ .sj-motion-window .sj-motion-toggle__play { display: inline-flex; }

/* A compact dashboard with a six-month sample dataset. */
.sj-dashboard-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.sj-dashboard-metrics > div { min-width: 0; padding: clamp(.55rem, 2.5cqw, .9rem); border: 1px solid #d6e0ce; border-radius: 7px; background: #fffdf8; }
.sj-dashboard-metrics dt { font-size: clamp(.55rem, 2.2cqw, .67rem); color: #61745d; }
.sj-dashboard-metrics dd { margin: .35rem 0 .15rem; font-size: clamp(1rem, 5.3cqw, 1.8rem); font-weight: 500; line-height: 1.2; letter-spacing: -.055em; color: #244932; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sj-dashboard-metrics dd span { font-size: .55em; letter-spacing: -.025em; }
.sj-dashboard-metrics > div > span { color: #708269; font-size: clamp(.45rem, 1.8cqw, .55rem); }
.sj-dashboard-chart { padding: clamp(.75rem, 3cqw, 1.1rem); border: 1px solid #d6e0ce; border-radius: 8px; background: #fffdf8; }
.sj-dashboard-chart__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sj-dashboard-chart__head h3 { margin: 0; font-size: clamp(.7rem, 2.7cqw, .85rem); font-weight: 500; }
.sj-dashboard-chart__head > span { color: #708269; font-size: .6rem; white-space: nowrap; }
.sj-dashboard-legend { display: flex; gap: 1rem; margin-top: .6rem; color: #6b7e64; font-size: clamp(.5rem, 2cqw, .6rem); }
.sj-dashboard-legend > span { display: flex; align-items: center; gap: .35rem; }
.sj-dashboard-legend > span::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: #386a4a; }
.sj-dashboard-legend > span + span::before { background: #b6ca78; }
.sj-dashboard-plot { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.4rem, 2cqw, .9rem); height: clamp(130px, 34cqw, 180px); margin-top: .5rem; background: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), #e6ecdf calc(25% - 1px), #e6ecdf 25%); }
.sj-dashboard-month { display: flex; flex-direction: column; min-width: 0; }
.sj-dashboard-bars { display: flex; flex: 1; justify-content: center; align-items: end; gap: 3px; min-height: 0; }
.sj-dashboard-bar { width: 35%; max-width: 21px; height: var(--bar-height); border-radius: 3px 3px 0 0; transform-origin: bottom; }
.sj-dashboard-bar--revenue { background: #386a4a; }
.sj-dashboard-bar--profit { background: #b6ca78; }
.sj-dashboard-month > span { display: block; padding-top: .4rem; background: #fffdf8; color: #708269; font-size: clamp(.5rem, 2cqw, .6rem); text-align: center; }
.sj-dashboard-insight { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding: .7rem .85rem; border-radius: 7px; background: #e1ecd9; }
.sj-dashboard-insight > span { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; background: #c6dab8; color: #395b2e; }
.sj-dashboard-insight p { margin: 0; }
.sj-dashboard-insight strong { display: block; font-weight: 500; font-size: clamp(.6rem, 2.5cqw, .75rem); }
.sj-dashboard-insight p > span { display: block; margin-top: .2rem; color: #687b5b; font-size: clamp(.5rem, 2.1cqw, .65rem); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes sj-dashboard-build { 0%, 100% { transform: scaleY(.65); } 18%, 85% { transform: scaleY(1); } }
  .sj-dashboard-bar { animation: sj-dashboard-build 9s cubic-bezier(.22, 1, .36, 1) var(--bar-delay) infinite; }
  .sj-banner-motion-state:checked ~ .sj-motion-window *,
  .sj-banner-motion-state:checked ~ .sj-motion-window *::before,
  .sj-banner-motion-state:checked ~ .sj-motion-window *::after { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-banner-motion-state, .sj-motion-toggle { display: none; }
  .sj-motion-footer { min-height: 42px; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .sj-page-banner__feature { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .sj-banner-motion { width: 100%; max-width: 36rem; justify-self: center; }
}

/* Shared editorial spacing: no simulated app headers or oversized card chrome. */
.sj-page-banner__visual { border-radius: 14px; border-color: #ffffff1c; box-shadow: 0 28px 70px -30px #0006; }
.sj-page-banner__feature { gap: clamp(2rem, 4vw, 4rem); padding-block: 1.5rem; }
.sj-page-banner__feature .sj-page-banner__copy { padding-block: 0; }
.sj-page-banner__copy .sj-page-banner__cta { margin-top: 2rem; gap: .8rem; min-height: 48px; padding: .8rem 1.4rem; border: 1px solid #bce4bd; border-radius: 100px; transition: background .2s, color .2s; }
.sj-page-banner__copy .sj-page-banner__cta:hover { background: #d5eed0; }
.sj-page-banner__copy .sj-page-banner__cta:focus-visible { outline: 2px solid #d5eed0; outline-offset: 5px; }
.sj-motion-window { background: #f7f8f3; }
.sj-motion-content { padding: clamp(1.1rem, 5cqw, 1.75rem); }
.sj-motion-heading { margin-bottom: 1.5rem; }
.sj-motion-heading h2 { margin-top: .6rem; font-size: clamp(1.2rem, 5cqw, 1.65rem); font-weight: 400; }
.sj-motion-eyebrow { color: #637366; letter-spacing: .13em; }
.sj-motion-footer { padding: .35rem clamp(1.1rem, 5cqw, 1.75rem); font-size: .6rem; gap: .25rem .5rem; }
.sj-motion-toggle { min-width: 90px; font-size: .6rem; }
.sj-dashboard-metrics { gap: 0; margin-bottom: 1.5rem; }
.sj-dashboard-metrics > div { padding: .15rem .8rem; background: transparent; border: 0; border-radius: 0; border-left: 1px solid #dce3d8; }
.sj-dashboard-metrics > div:first-child { border: 0; padding-left: 0; }
.sj-dashboard-metrics > div:last-child { padding-right: 0; }
.sj-dashboard-metrics dd { margin-block: .6rem .35rem; font-weight: 400; }
.sj-dashboard-chart { border-color: #dce3d8; border-radius: 6px; padding: 1rem; }
.sj-dashboard-bar { max-width: 19px; border-radius: 2px 2px 0 0; }
.sj-dashboard-bar--profit, .sj-dashboard-legend > span + span::before { background: #a6bea1; }
.sj-dashboard-insight { padding: .75rem 0 0; border-radius: 0; background: transparent; gap: .7rem; }
.sj-dashboard-insight > span { background: #e6ecdf; }

/* A cinematic model assembly: sources converge, layers resolve, decisions emerge. */
.sj-process-window { background: #10271f; color: #e5efdf; }
.sj-orchestration { position: relative; aspect-ratio: 1 / 1.02; overflow: hidden; background: radial-gradient(ellipse at 50% 47%, #426c4638, transparent 62%), #10271f; }
.sj-orchestration-art { position: absolute; inset: 0; }
.sj-orchestration-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#d0e8c606 1px, transparent 1px), linear-gradient(90deg, #d0e8c606 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse at center, #000, transparent 75%); }
.sj-data-sources { position: absolute; top: 7%; left: 6%; right: 6%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4%; }
.sj-data-sources > span { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem .3rem; border: 1px solid #b6d6a52e; border-radius: 5px; background: #183428; color: #c6d6bd; font-size: clamp(.56rem, 2.3cqw, .75rem); }
.sj-data-sources i { width: 4px; height: 4px; border-radius: 50%; background: #abc79a; box-shadow: 0 0 10px #bde3a455; }
.sj-data-routes { position: absolute; top: 16%; left: 20%; right: 20%; height: 19%; }
.sj-data-routes > span { position: absolute; top: 0; height: 100%; width: 50%; }
.sj-data-routes > span:nth-child(1) { left: 0; border-left: 1px solid #9abb8633; border-bottom: 1px solid #9abb8633; border-bottom-left-radius: 22px; }
.sj-data-routes > span:nth-child(2) { left: 50%; width: 0; border-left: 1px solid #9abb8644; }
.sj-data-routes > span:nth-child(3) { right: 0; border-right: 1px solid #9abb8633; border-bottom: 1px solid #9abb8633; border-bottom-right-radius: 22px; }
.sj-data-routes > span::after { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 28px; border-radius: 3px; background: linear-gradient(transparent, #b3dda0); box-shadow: 0 4px 12px #b3dda055; }
.sj-data-routes > span:last-child::after { left: auto; right: -1px; }
.sj-model-aura { position: absolute; width: 60%; height: 35%; left: 20%; top: 30%; border-radius: 50%; background: radial-gradient(ellipse, #a7cc8033, transparent 68%); filter: blur(18px); }
.sj-model-stack { position: absolute; width: 48%; height: 28%; top: 29%; left: 26%; transform-style: preserve-3d; transform: perspective(850px) rotateX(52deg) rotateZ(-30deg); }
.sj-model-plane { position: absolute; inset: 0; border: 1px solid #c1deb163; border-radius: 7px; background: #284b3ce6; box-shadow: 8px 14px 24px #031b1838; }
.sj-model-plane > span { position: absolute; top: 9%; left: 9%; color: #b9d3a9; font-size: clamp(.4rem, 1.55cqw, .53rem); letter-spacing: .13em; font-weight: 500; }
.sj-model-plane--base { transform: translateZ(-32px); background: #173b2fe6; border-color: #76976b66; }
.sj-model-plane--middle { transform: translateZ(0); background: #355b447d; }
.sj-model-plane--top { transform: translateZ(32px); background: linear-gradient(135deg, #45664c, #234436); overflow: hidden; border-color: #c4dfa785; }
.sj-model-grid { position: absolute; inset: 27% 9% 12%; background-image: linear-gradient(#b3cba926 1px, transparent 1px), linear-gradient(90deg, #b3cba926 1px, transparent 1px); background-size: 16.66% 25%; }
.sj-model-cells { position: absolute; inset: 28% 9% 12%; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4%; align-items: end; border-bottom: 1px solid #bfd8ad66; }
.sj-model-cells i { display: block; height: var(--level); background: linear-gradient(to top, #769865, #d3e2ba); border-radius: 1px 1px 0 0; transform-origin: bottom; box-shadow: 1px 0 0 #dbebc833; }
.sj-model-scan { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, #def7cb33 48%, #e9ffda70 50%, transparent 52%); transform: translateX(-110%); }
.sj-model-caption { position: absolute; top: 69%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: .65rem; color: #c4d7b6; font-size: clamp(.65rem, 2.5cqw, .8rem); letter-spacing: .015em; }
.sj-model-caption__line { width: 22px; height: 1px; background: #8ca779; }
.sj-decision-route { position: absolute; top: 72%; left: 50%; height: 6%; width: 1px; background: linear-gradient(#9fbe8055, #cde2b2); }
.sj-decision-output { position: absolute; bottom: 4%; left: 6%; right: 6%; padding: clamp(.75rem, 3cqw, 1rem); border: 1px solid #a0c38940; border-radius: 7px; background: linear-gradient(120deg, #274831, #1a3528); box-shadow: 0 12px 32px #05150f30; }
.sj-decision-output > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: .65rem; }
.sj-decision-label { font-size: clamp(.45rem, 1.8cqw, .58rem); letter-spacing: .13em; color: #a7c293; }
.sj-decision-check { font-size: .85rem; color: #d5e7b9; line-height: 1; }
.sj-decision-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.sj-decision-options > span { font-size: clamp(.5rem, 2cqw, .67rem); line-height: 1.5; color: #dce8cf; }
.sj-decision-options small { display: block; margin-bottom: .25rem; font-size: clamp(.4rem, 1.5cqw, .48rem); letter-spacing: .09em; color: #9eb78e; }
.sj-process-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; padding: 1.3rem 6% .75rem; }
.sj-process-timeline > span { position: relative; display: flex; align-items: center; gap: .5rem; padding-top: .75rem; border-top: 1px solid #76996744; color: #d0dfc2; font-size: clamp(.6rem, 2.3cqw, .75rem); }
.sj-process-timeline small { font-size: .55rem; color: #8aa17e; }
.sj-process-timeline > span::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: #d1e4ac; transform-origin: left; }
.sj-process-window .sj-motion-footer { margin: .5rem 6% 0; padding-inline: 0; border-color: #abc79820; color: #94ad86; }
.sj-process-window .sj-motion-toggle { color: #bdcea9; }
.sj-process-window .sj-motion-toggle:hover { background: #abc79812; color: #ecf4e3; }
.sj-process-window .sj-motion-toggle:focus-visible { outline-color: #d3e5b5; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes sj-data-travel { 0%, 5% { top: 0; opacity: 0; } 10% { opacity: 1; } 31% { top: calc(100% - 28px); opacity: 0; } 100% { top: calc(100% - 28px); opacity: 0; } }
  @keyframes sj-layer-base { 0%, 15%, 90%, 100% { transform: translateZ(-32px); } 38%, 74% { transform: translateZ(-50px); } }
  @keyframes sj-layer-top { 0%, 15%, 90%, 100% { transform: translateZ(32px); } 38%, 74% { transform: translateZ(50px); } }
  @keyframes sj-model-build { 0%, 22%, 100% { transform: scaleY(.4); opacity: .55; } 48%, 86% { transform: scaleY(1); opacity: 1; } }
  @keyframes sj-model-sweep { 0%, 30% { transform: translateX(-110%); } 58%, 100% { transform: translateX(110%); } }
  @keyframes sj-decision-reveal { 0%, 52%, 100% { opacity: .55; transform: translateY(5px); border-color: #a0c38940; } 66%, 88% { opacity: 1; transform: translateY(0); border-color: #c4dda480; } }
  @keyframes sj-phase-progress { 0% { transform: scaleX(0); opacity: 1; } 32% { transform: scaleX(1); opacity: 1; } 34%, 99% { transform: scaleX(1); opacity: .1; } 100% { transform: scaleX(0); opacity: 0; } }
  .sj-data-routes > span::after { animation: sj-data-travel 12s ease-in-out calc(var(--route) * .45s) infinite; }
  .sj-model-plane--base { animation: sj-layer-base 12s cubic-bezier(.22, 1, .36, 1) infinite; }
  .sj-model-plane--top { animation: sj-layer-top 12s cubic-bezier(.22, 1, .36, 1) infinite; }
  .sj-model-cells i { animation: sj-model-build 12s cubic-bezier(.22, 1, .36, 1) calc(var(--cell) * .07s) infinite; }
  .sj-model-scan { animation: sj-model-sweep 12s ease-in-out infinite; }
  .sj-decision-output { animation: sj-decision-reveal 12s ease-in-out infinite; }
  .sj-process-timeline > span::before { animation: sj-phase-progress 12s linear calc(var(--phase) * 4s) infinite both; }
}
@media (max-width: 47.99rem) {
  .sj-page-banner__feature { padding-block: .5rem 1rem; gap: 2rem; }
  .sj-page-banner__copy .sj-page-banner__cta { margin-top: 1.5rem; }
  .sj-page-banner__visual { border-radius: 12px; }
  .sj-orchestration { aspect-ratio: 1 / 1.15; }
  .sj-data-sources > span { gap: .35rem; padding-block: .5rem; }
  .sj-model-stack { width: 46%; left: 27%; height: 25%; top: 31%; }
  .sj-decision-output { bottom: 4%; }
  .sj-model-caption { top: 69%; }
  .sj-process-timeline { gap: .7rem; padding-top: 1rem; }
  .sj-dashboard-chart { padding: .8rem; }
  .sj-dashboard-metrics > div { padding-inline: .6rem; }
  .sj-motion-footer { font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-model-scan { display: none; }
  .sj-model-cells i, .sj-decision-output { opacity: 1; transform: none; }
  .sj-process-timeline > span::before { background: #a8c38a88; }
}

@container (max-width: 300px) {
  .sj-orchestration { aspect-ratio: 1 / 1.35; }
  .sj-model-stack { top: 32%; height: 25%; }
  .sj-model-caption { top: 62%; }
  .sj-decision-route { top: 68%; height: 5%; }
  .sj-decision-options > span { font-size: .6rem; }
  .sj-decision-options small { font-size: .5rem; }
}

.sj-banner-motion--process { background: #10271f; border-color: #78936b55; }