/* Pricing hero art (pa-*): the All Access core unlocking six paid features on a 16s loop. Sits on the hs-* tokens in
   home-showcase.css (the stage root carries the .hs class) and the site's light/dark variables. Convention: an element's
   base style is its final (unlocked) state; keyframes describe the journey, so reduced-motion users see everything
   unlocked. Packets are SMIL on the SVG wires and are hidden for reduced motion. Container units keep it proportional. */
.pa-stage { --pa-t: 16s; --pa-ok: #16a34a; --pa-gold: #f59e0b; container-type: inline-size; position: relative; z-index: 2; isolation: isolate; width: 100%; max-width: 40rem; margin-inline: auto; aspect-ratio: 10 / 8.6; }
[data-bs-theme="dark"] .pa-stage { --pa-ok: #4ade80; --pa-gold: #fbbf24; }
.pa-stage * { animation-duration: var(--pa-t); animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.pa-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.pa-wires path { fill: none; stroke: color-mix(in srgb, var(--cp-accent) 55%, var(--cp-border)); stroke-width: .45; stroke-dasharray: 1.4 1.4; animation: pa-wire 1.1s linear infinite; }
.pa-dot { fill: var(--cp-accent); }
@keyframes pa-wire { to { stroke-dashoffset: -2.8; } }

/* the core */
.pa-core { position: absolute; z-index: 3; left: 50%; top: 50%; width: 18cqw; height: 18cqw; transform: translate(-50%, -50%); display: grid; place-content: center; justify-items: center; gap: .2cqw; border-radius: 50%; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--cp-accent) 78%, #fff), var(--cp-accent) 72%); color: #fff; text-align: center; box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--cp-accent) 80%, transparent), 0 0 0 1.4cqw color-mix(in srgb, var(--cp-accent) 14%, transparent); animation: pa-core 3.2s ease-in-out infinite; }
.pa-core > .bx { font-size: 5cqw; line-height: 1; color: var(--pa-gold); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.pa-core b { font-size: clamp(.5rem, 2cqw, .76rem); font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.pa-core small { max-width: 15cqw; font-size: clamp(.36rem, 1.3cqw, .52rem); font-weight: 700; line-height: 1.2; opacity: .9; }
.pa-core-ring { position: absolute; inset: -2.6cqw; border: .35cqw dashed color-mix(in srgb, var(--cp-accent) 60%, transparent); border-radius: 50%; animation: pa-ring-spin 18s linear infinite; }
@keyframes pa-core { 0%, 100% { box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--cp-accent) 80%, transparent), 0 0 0 1.4cqw color-mix(in srgb, var(--cp-accent) 14%, transparent); } 50% { box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--cp-accent) 80%, transparent), 0 0 0 2.8cqw color-mix(in srgb, var(--cp-accent) 10%, transparent); } }
@keyframes pa-ring-spin { to { transform: rotate(360deg); } }

/* top status pill and the closing banner */
.pa-top { position: absolute; z-index: 4; left: 50%; top: 2.5%; display: grid; transform: translateX(-50%); padding: .9cqw 1.8cqw; border: 1px solid var(--cp-border); border-radius: 999px; background: color-mix(in srgb, var(--cp-surface) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 18px -10px rgba(27, 19, 64, .4); color: var(--cp-text); font-size: clamp(.42rem, 1.55cqw, .6rem); font-weight: 800; white-space: nowrap; }
.pa-top > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .6cqw; }
.pa-top i { color: var(--cp-accent); font-size: 1.3em; }
.pa-top .is-a { animation-name: pa-top-a; }
.pa-top .is-b { color: var(--pa-ok); animation-name: pa-top-b; }
.pa-top .is-b i { color: var(--pa-ok); }
@keyframes pa-top-a { 0%, 58% { opacity: 1; } 61%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes pa-top-b { 0%, 58% { opacity: 0; } 61%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
.pa-banner { position: absolute; z-index: 4; left: 50%; top: 69%; width: 26%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2cqw; padding: 1.3cqw 1.6cqw; border: 1px solid color-mix(in srgb, var(--pa-ok) 45%, var(--cp-border)); border-radius: 2cqw; background: color-mix(in srgb, var(--cp-surface) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 44px -18px rgba(27, 19, 64, .5); animation-name: pa-banner; }
.pa-banner > i { flex: none; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; background: color-mix(in srgb, #22c55e 18%, var(--cp-surface)); color: var(--pa-ok); font-size: 3cqw; }
.pa-banner b { display: block; color: var(--cp-text); font-size: clamp(.46rem, 1.75cqw, .68rem); font-weight: 800; line-height: 1.2; }
.pa-banner span { display: block; margin-top: .3cqw; color: var(--cp-text-muted); font-size: clamp(.38rem, 1.4cqw, .54rem); line-height: 1.3; }
@keyframes pa-banner { 0%, 60% { opacity: 0; transform: translate(-50%, 10px) scale(.94); } 65%, 96% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, 10px) scale(.94); } }

/* feature cards */
.pa-node { position: absolute; z-index: 2; width: 32%; transform: translateY(-50%); padding: 1.5cqw 1.7cqw 1.6cqw; border: 1px solid var(--cp-accent); border-radius: 2.2cqw; background: color-mix(in srgb, var(--cp-surface) 96%, transparent); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--cp-accent) 55%, rgba(27, 19, 64, .5)); }
.pa-node.is-1, .pa-node.is-2, .pa-node.is-3 { left: 1%; }
.pa-node.is-4, .pa-node.is-5, .pa-node.is-6 { right: 1%; }
.pa-node.is-1, .pa-node.is-4 { top: 15.1%; }
.pa-node.is-2, .pa-node.is-5 { top: 50%; }
.pa-node.is-3, .pa-node.is-6 { top: 84.9%; }
.pa-node.is-1 { animation-name: pa-unlock-1; } .pa-node.is-2 { animation-name: pa-unlock-2; } .pa-node.is-3 { animation-name: pa-unlock-3; } .pa-node.is-4 { animation-name: pa-unlock-4; } .pa-node.is-5 { animation-name: pa-unlock-5; } .pa-node.is-6 { animation-name: pa-unlock-6; }
.pa-node-head { display: flex; align-items: center; gap: 1.2cqw; }
.pa-node-head > i { flex: none; display: grid; place-items: center; width: 5.2cqw; height: 5.2cqw; border-radius: 1.5cqw; background: var(--cp-accent); color: #fff; font-size: 2.8cqw; box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--cp-accent) 70%, transparent); }
.pa-node-head > div { min-width: 0; }
.pa-node-head b { display: flex; align-items: center; gap: .6cqw; color: var(--cp-text); font-size: clamp(.48rem, 1.9cqw, .72rem); font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-node-head span { display: block; margin-top: .3cqw; color: var(--cp-text-muted); font-size: clamp(.38rem, 1.4cqw, .54rem); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-new { flex: none; padding: .25cqw .9cqw; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: clamp(.32rem, 1.15cqw, .46rem); font-weight: 800; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.pa-lock { position: absolute; right: -1.1cqw; top: -1.1cqw; z-index: 3; display: grid; place-items: center; width: 4.2cqw; height: 4.2cqw; border: .35cqw solid var(--cp-surface); border-radius: 50%; background: var(--pa-ok); color: #fff; font-size: 2.3cqw; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); }
.pa-lock i { grid-area: 1 / 1; }
.pa-lock i:first-child { opacity: 0; }
.pa-node.is-1 .pa-lock { animation-name: pa-lock-1; } .pa-node.is-2 .pa-lock { animation-name: pa-lock-2; } .pa-node.is-3 .pa-lock { animation-name: pa-lock-3; } .pa-node.is-4 .pa-lock { animation-name: pa-lock-4; } .pa-node.is-5 .pa-lock { animation-name: pa-lock-5; } .pa-node.is-6 .pa-lock { animation-name: pa-lock-6; }
.pa-node.is-1 .pa-lock i:first-child { animation-name: pa-lock-out-1; } .pa-node.is-2 .pa-lock i:first-child { animation-name: pa-lock-out-2; } .pa-node.is-3 .pa-lock i:first-child { animation-name: pa-lock-out-3; } .pa-node.is-4 .pa-lock i:first-child { animation-name: pa-lock-out-4; } .pa-node.is-5 .pa-lock i:first-child { animation-name: pa-lock-out-5; } .pa-node.is-6 .pa-lock i:first-child { animation-name: pa-lock-out-6; }
.pa-node.is-1 .pa-lock i:last-child { animation-name: pa-lock-in-1; } .pa-node.is-2 .pa-lock i:last-child { animation-name: pa-lock-in-2; } .pa-node.is-3 .pa-lock i:last-child { animation-name: pa-lock-in-3; } .pa-node.is-4 .pa-lock i:last-child { animation-name: pa-lock-in-4; } .pa-node.is-5 .pa-lock i:last-child { animation-name: pa-lock-in-5; } .pa-node.is-6 .pa-lock i:last-child { animation-name: pa-lock-in-6; }
/* unlock windows: packets land at 10, 19, 28, 37, 46, 55% */
@keyframes pa-unlock-1 { 0%, 10% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } 13%, 96% { opacity: 1; filter: none; border-color: var(--cp-accent); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--cp-accent) 55%, rgba(27, 19, 64, .5)); } 100% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } }
@keyframes pa-unlock-2 { 0%, 19% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } 22%, 96% { opacity: 1; filter: none; border-color: var(--cp-accent); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--cp-accent) 55%, rgba(27, 19, 64, .5)); } 100% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } }
@keyframes pa-unlock-3 { 0%, 28% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } 31%, 96% { opacity: 1; filter: none; border-color: var(--cp-accent); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--cp-accent) 55%, rgba(27, 19, 64, .5)); } 100% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } }
@keyframes pa-unlock-4 { 0%, 37% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } 40%, 96% { opacity: 1; filter: none; border-color: var(--cp-accent); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--cp-accent) 55%, rgba(27, 19, 64, .5)); } 100% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } }
@keyframes pa-unlock-5 { 0%, 46% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } 49%, 96% { opacity: 1; filter: none; border-color: var(--cp-accent); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--cp-accent) 55%, rgba(27, 19, 64, .5)); } 100% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } }
@keyframes pa-unlock-6 { 0%, 55% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } 58%, 96% { opacity: 1; filter: none; border-color: var(--cp-accent); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--cp-accent) 55%, rgba(27, 19, 64, .5)); } 100% { opacity: .55; filter: grayscale(1); border-color: var(--cp-border); box-shadow: none; } }
@keyframes pa-lock-1 { 0%, 10% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); transform: scale(1); } 12% { transform: scale(1.25); } 14%, 96% { background: var(--pa-ok); transform: scale(1); } 100% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); } }
@keyframes pa-lock-2 { 0%, 19% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); transform: scale(1); } 21% { transform: scale(1.25); } 23%, 96% { background: var(--pa-ok); transform: scale(1); } 100% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); } }
@keyframes pa-lock-3 { 0%, 28% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); transform: scale(1); } 30% { transform: scale(1.25); } 32%, 96% { background: var(--pa-ok); transform: scale(1); } 100% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); } }
@keyframes pa-lock-4 { 0%, 37% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); transform: scale(1); } 39% { transform: scale(1.25); } 41%, 96% { background: var(--pa-ok); transform: scale(1); } 100% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); } }
@keyframes pa-lock-5 { 0%, 46% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); transform: scale(1); } 48% { transform: scale(1.25); } 50%, 96% { background: var(--pa-ok); transform: scale(1); } 100% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); } }
@keyframes pa-lock-6 { 0%, 55% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); transform: scale(1); } 57% { transform: scale(1.25); } 59%, 96% { background: var(--pa-ok); transform: scale(1); } 100% { background: color-mix(in srgb, var(--cp-text) 45%, var(--cp-surface)); } }
@keyframes pa-lock-out-1 { 0%, 11% { opacity: 1; } 13%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes pa-lock-in-1 { 0%, 11% { opacity: 0; } 13%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-lock-out-2 { 0%, 20% { opacity: 1; } 22%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes pa-lock-in-2 { 0%, 20% { opacity: 0; } 22%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-lock-out-3 { 0%, 29% { opacity: 1; } 31%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes pa-lock-in-3 { 0%, 29% { opacity: 0; } 31%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-lock-out-4 { 0%, 38% { opacity: 1; } 40%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes pa-lock-in-4 { 0%, 38% { opacity: 0; } 40%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-lock-out-5 { 0%, 47% { opacity: 1; } 49%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes pa-lock-in-5 { 0%, 47% { opacity: 0; } 49%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-lock-out-6 { 0%, 56% { opacity: 1; } 58%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes pa-lock-in-6 { 0%, 56% { opacity: 0; } 58%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* mini demos (each starts just after its card unlocks) */
.pa-demo { margin-top: 1.3cqw; padding-top: 1.2cqw; border-top: 1px solid color-mix(in srgb, var(--cp-border) 70%, transparent); }
.pa-node.is-1 .pa-demo { animation-name: pa-demo-1; } .pa-node.is-2 .pa-demo { animation-name: pa-demo-2; } .pa-node.is-3 .pa-demo { animation-name: pa-demo-3; } .pa-node.is-4 .pa-demo { animation-name: pa-demo-4; } .pa-node.is-5 .pa-demo { animation-name: pa-demo-5; } .pa-node.is-6 .pa-demo { animation-name: pa-demo-6; }
@keyframes pa-demo-1 { 0%, 10% { opacity: 0; } 14%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-demo-2 { 0%, 19% { opacity: 0; } 23%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-demo-3 { 0%, 28% { opacity: 0; } 32%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-demo-4 { 0%, 37% { opacity: 0; } 41%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-demo-5 { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pa-demo-6 { 0%, 55% { opacity: 0; } 59%, 96% { opacity: 1; } 100% { opacity: 0; } }
/* 1. accounts counter climbs 1 → limit, pips fill */
@property --pa-n { syntax: '<integer>'; inherits: false; initial-value: 15; }
.pa-demo-acc { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 1cqw; }
.pa-count { --pa-n: 15; counter-reset: pan var(--pa-n); color: var(--cp-text); font-size: clamp(.9rem, 3.6cqw, 1.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; animation-name: pa-count; }
.pa-count::before { content: counter(pan); }
.pa-demo-acc small { color: var(--cp-text-muted); font-size: clamp(.38rem, 1.4cqw, .54rem); font-weight: 700; }
.pa-pips { grid-column: 1 / -1; display: block; height: 1.6cqw; width: 100%; margin-top: 1cqw; border-radius: .3cqw; background: repeating-linear-gradient(90deg, var(--cp-accent) 0 calc(100% / 15 - .5cqw), transparent calc(100% / 15 - .5cqw) calc(100% / 15)); transform-origin: left; animation-name: pa-pips; }
@keyframes pa-count { 0%, 12% { --pa-n: 1; } 30%, 100% { --pa-n: 15; } }
@keyframes pa-pips { 0%, 12% { clip-path: inset(0 93.4% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
/* 2. investments: sparkline draws, quote ticks */
.pa-spark { display: block; width: 100%; height: 5.5cqw; overflow: visible; }
.pa-spark polyline { fill: none; stroke: var(--pa-ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 112; stroke-dashoffset: 0; animation-name: pa-spark; }
.pa-quote { display: flex; align-items: baseline; gap: 1cqw; margin-top: .8cqw; }
.pa-quote > b { color: var(--cp-text); font-size: clamp(.46rem, 1.75cqw, .66rem); font-weight: 800; }
.pa-price { display: inline-grid; color: var(--cp-text); font-size: clamp(.46rem, 1.75cqw, .66rem); font-weight: 800; font-style: normal; }
.pa-price > span { grid-area: 1 / 1; }
.pa-price > span:first-child { opacity: 0; animation-name: pa-price-out; }
.pa-price > span:last-child { animation-name: pa-price-in; }
.pa-quote > i { margin-left: auto; padding: .25cqw .9cqw; border-radius: 999px; background: color-mix(in srgb, #22c55e 16%, var(--cp-surface)); color: var(--pa-ok); font-size: clamp(.38rem, 1.4cqw, .54rem); font-style: normal; font-weight: 800; }
.pa-live { display: flex; align-items: center; gap: .6cqw; margin-top: .6cqw; color: var(--cp-text-muted); font-size: clamp(.36rem, 1.3cqw, .5rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pa-live b { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--pa-ok); animation: pa-live 1.4s ease-in-out infinite; }
@keyframes pa-spark { 0%, 21% { stroke-dashoffset: 112; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes pa-price-out { 0%, 42% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes pa-price-in { 0%, 42% { opacity: 0; } 45%, 100% { opacity: 1; } }
@keyframes pa-live { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .5; } }
/* 3. alerts slide in */
.pa-demo-alert { display: grid; gap: .8cqw; }
.pa-toast { display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.1cqw; border: 1px solid var(--cp-border); border-radius: 1.3cqw; background: var(--cp-surface); box-shadow: 0 10px 20px -14px rgba(27, 19, 64, .5); }
.pa-toast > i { flex: none; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: color-mix(in srgb, var(--pa-gold) 20%, var(--cp-surface)); color: #b45309; font-size: 2cqw; }
.pa-toast.is-2 > i { background: color-mix(in srgb, #22c55e 18%, var(--cp-surface)); color: var(--pa-ok); }
.pa-toast > div { min-width: 0; }
.pa-toast b { display: block; color: var(--cp-text); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-toast span { display: block; color: var(--cp-text-muted); font-size: clamp(.34rem, 1.25cqw, .48rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-toast.is-1 { animation-name: pa-toast-1; }
.pa-toast.is-2 { animation-name: pa-toast-2; }
.pa-toast.is-1 > i { animation: pa-bell var(--pa-t) ease-in-out infinite both; }
@keyframes pa-toast-1 { 0%, 31% { opacity: 0; transform: translateX(-10px); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes pa-toast-2 { 0%, 38% { opacity: 0; transform: translateX(-10px); } 42%, 100% { opacity: 1; transform: none; } }
@keyframes pa-bell { 0%, 34% { transform: rotate(0); } 36% { transform: rotate(-16deg); } 38% { transform: rotate(14deg); } 40% { transform: rotate(-8deg); } 42%, 100% { transform: rotate(0); } }
/* 4. intelligence: question, then a grounded answer */
.pa-q { display: inline-block; max-width: 100%; padding: .7cqw 1.4cqw; border-radius: 1.6cqw 1.6cqw .4cqw 1.6cqw; background: var(--cp-accent); color: #fff; font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation-name: pa-q; }
.pa-ans { display: flex; align-items: center; gap: 1cqw; margin-top: .8cqw; padding: .8cqw 1.1cqw; border: 1px solid var(--cp-border); border-radius: 1.3cqw; background: var(--cp-surface); animation-name: pa-ans; }
.pa-ans > i { flex: none; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 2cqw; }
.pa-ans > div { min-width: 0; }
.pa-ans b { display: block; color: var(--cp-text); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-ans span { display: block; color: var(--cp-text-muted); font-size: clamp(.34rem, 1.25cqw, .48rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes pa-q { 0%, 40% { opacity: 0; transform: translateY(4px); } 44%, 100% { opacity: 1; transform: none; } }
@keyframes pa-ans { 0%, 48% { opacity: 0; transform: translateY(6px); } 53%, 100% { opacity: 1; transform: none; } }
/* 5. split intelligence: confidence fills, split sent */
.pa-reco { display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.1cqw; border: 1px solid var(--cp-border); border-radius: 1.3cqw; background: var(--cp-surface); animation-name: pa-reco; }
.pa-reco > i { flex: none; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 1cqw; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 2cqw; }
.pa-reco > div { flex: 1; min-width: 0; }
.pa-reco b { display: block; color: var(--cp-text); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-reco span { display: block; color: var(--cp-text-muted); font-size: clamp(.34rem, 1.25cqw, .48rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-conf { flex: none; display: grid; gap: .4cqw; justify-items: end; width: 6cqw; font-style: normal; }
.pa-conf i { display: block; width: 100%; height: 1.1cqw; border-radius: 999px; background: linear-gradient(90deg, var(--cp-accent), var(--pa-ok)); transform-origin: left; animation-name: pa-conf; }
.pa-conf b { color: var(--pa-ok); font-size: clamp(.38rem, 1.4cqw, .54rem); font-weight: 800; animation-name: pa-conf-label; }
.pa-sent { display: inline-flex; align-items: center; gap: .6cqw; margin-top: .8cqw; padding: .5cqw 1.2cqw; border-radius: 999px; background: color-mix(in srgb, #22c55e 16%, var(--cp-surface)); color: var(--pa-ok); font-size: clamp(.38rem, 1.4cqw, .54rem); font-weight: 800; animation-name: pa-sent; }
@keyframes pa-reco { 0%, 49% { opacity: 0; transform: translateY(6px); } 53%, 100% { opacity: 1; transform: none; } }
@keyframes pa-conf { 0%, 53% { transform: scaleX(0); } 64%, 100% { transform: scaleX(1); } }
@keyframes pa-conf-label { 0%, 60% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes pa-sent { 0%, 66% { opacity: 0; transform: scale(.7); } 70%, 100% { opacity: 1; transform: none; } }
/* 6. refresh spins, then syncs; exports pop */
.pa-sync { display: flex; align-items: center; gap: 1cqw; }
.pa-sync > i { flex: none; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent); font-size: 2.2cqw; }
.pa-spin { animation-name: pa-spin; animation-timing-function: linear; }
.pa-sync > div { min-width: 0; }
.pa-sync b { display: block; color: var(--cp-text); font-size: clamp(.4rem, 1.5cqw, .58rem); font-weight: 800; }
.pa-sync > div > span { display: block; color: var(--cp-text-muted); font-size: clamp(.34rem, 1.25cqw, .48rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-swap { display: grid; }
.pa-swap > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-swap > span:first-child { opacity: 0; animation-name: pa-swap-out; }
.pa-swap > span:last-child { color: var(--pa-ok); animation-name: pa-swap-in; }
.pa-files { display: flex; gap: .6cqw; margin-top: .9cqw; }
.pa-files span { display: inline-flex; align-items: center; gap: .4cqw; padding: .45cqw 1cqw; border: 1px solid var(--cp-border); border-radius: 999px; color: var(--cp-text); font-size: clamp(.36rem, 1.3cqw, .5rem); font-weight: 800; }
.pa-files span i { font-size: 1.25em; }
.pa-files .is-xlsx { animation-name: pa-file-1; } .pa-files .is-csv { animation-name: pa-file-2; } .pa-files .is-pdf { animation-name: pa-file-3; }
.pa-files .is-xlsx i { color: #16a34a; } .pa-files .is-csv i { color: #7c3aed; } .pa-files .is-pdf i { color: #dc2626; }
@keyframes pa-spin { 0%, 58% { transform: rotate(0); } 72%, 100% { transform: rotate(1080deg); } }
@keyframes pa-swap-out { 0%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes pa-swap-in { 0%, 70% { opacity: 0; } 73%, 100% { opacity: 1; } }
@keyframes pa-file-1 { 0%, 74% { opacity: 0; transform: translateY(6px) scale(.8); } 78%, 100% { opacity: 1; transform: none; } }
@keyframes pa-file-2 { 0%, 77% { opacity: 0; transform: translateY(6px) scale(.8); } 81%, 100% { opacity: 1; transform: none; } }
@keyframes pa-file-3 { 0%, 80% { opacity: 0; transform: translateY(6px) scale(.8); } 84%, 100% { opacity: 1; transform: none; } }

@media (max-width: 767.98px) {
    .pa-stage { max-width: 30rem; }
}
@media (max-width: 575.98px) {
    .pa-demo { display: none; }
    .pa-node { width: 33%; padding: 1.6cqw 1.5cqw; }
    .pa-node-head > i { display: none; }
    .pa-node-head b { font-size: clamp(.5rem, 2.4cqw, .72rem); white-space: normal; }
    .pa-node-head span { display: none; }
    .pa-banner { width: 34%; top: 66%; }
}
@media (prefers-reduced-motion: reduce) {
    .pa-stage *, .pa-core, .pa-core-ring, .pa-wires path { animation: none !important; }
    .pa-dot { display: none; }
    .pa-top .is-a { opacity: 0; }
    .pa-top .is-b { opacity: 1; }
    .pa-banner { opacity: 1; transform: translateX(-50%); }
    .pa-price > span:first-child, .pa-swap > span:first-child, .pa-lock i:first-child { opacity: 0; }
}