/* EXPLORE N3CA+ LOOK — html.prx (assets/revamp/products-x.js) */
.prx { --pr-frame: rgba(17, 19, 31, .07); --pr-line: #e3e4ea; --pr-grey: #555a6b; }
/* hero: untouched, except the secondary button's label (its gradient-clip text vanished under the shared button) */
.prx .n3Btn--line .btn__label, .prx .n3Btn--fill .btn__label, .prx .n3Btn--fill:hover .btn__label { background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }
.prx .prG { color: transparent; background: linear-gradient(90deg, #11131f 0 50%, #a3a7b3 50% 100%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position .9s cubic-bezier(.65, 0, .35, 1); }
.prx h2:hover .prG { background-position: 0 0; }
.prx .prNo { display: block; font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; color: #4a3dcc; }
.prx .n3Pill { display: none !important; }
/* frame lines on every section after the hero */
.prx .n3Why, .prx .n3Title, .prx .n3Prod { position: relative; isolation: isolate; background: #fff !important; }
.prx .n3Why::before, .prx .n3Title::before, .prx .n3Prod::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); z-index: -1; pointer-events: none; border-left: 1px solid var(--pr-frame); border-right: 1px solid var(--pr-frame); }
.prx .n3Why__title, .prx .n3Title__heading { color: #11131f !important; font-weight: 500 !important; letter-spacing: -.03em !important; font-size: clamp(34px, 3.6vw, 56px) !important; line-height: 1.08 !important; margin: 0 !important; text-align: left !important; }
/* why: one screen, heading left, the eight benefits as a 4 x 2 hairline board */
.prx .n3Why { min-height: 100vh; display: flex !important; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 96px var(--pad-x) !important; border-top: 1px solid var(--pr-line); }
.prx .n3Why__head { margin: 0 0 56px !important; padding: 0 24px !important; max-width: 760px; text-align: left !important; align-items: flex-start !important; display: block !important; }
.prx .n3Why__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; border-top: 1px solid var(--pr-line); }
.prx .n3Feat { position: relative; background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 32px 24px 44px !important; min-height: 0 !important; height: auto !important; border-bottom: 1px solid var(--pr-line) !important; transform: none !important; }
.prx .n3Feat:not(:nth-child(4n + 1)) { border-left: 1px solid var(--pr-line) !important; }
.prx .n3Feat .prNo { position: absolute; right: 24px; top: 32px; color: #a3a7b3; }
.prx .n3Card__head { display: block !important; margin: 0 0 10px !important; }
.prx .n3Card__icon { display: block !important; width: 28px !important; height: 28px !important; margin: 0 0 20px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.prx .n3Card__icon img { width: 28px; height: 28px; display: block; }
.prx .n3Card__title { margin: 0 !important; color: #11131f !important; font: 600 19px/1.3 "Geologica", sans-serif !important; letter-spacing: -.01em !important; text-transform: none !important; }
.prx .n3Card__desc { margin: 0 !important; color: var(--pr-grey) !important; font-size: 15px !important; line-height: 1.6 !important; }
/* hover: corner brackets draw in */
.prx .n3Feat::after, .prx .n3PanelCell::after { content: ""; position: absolute; inset: 12px; pointer-events: none; opacity: 0; transform: scale(1.04); transition: opacity .3s, transform .5s cubic-bezier(.2, .8, .2, 1); --c: #29ccb2; --l: 14px;
  background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px var(--l), linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px var(--l), linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px var(--l); background-repeat: no-repeat; }
.prx .n3Feat:hover::after, .prx .n3PanelCell:hover::after { opacity: 1; transform: none; }
/* intro to the products: heading left, lead right */
.prx .n3Title { padding: clamp(96px, 10vw, 144px) var(--pad-x) 56px !important; border-top: 1px solid var(--pr-line); }
.prx .n3Title__row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding: 0 24px; max-width: none !important; margin: 0 !important; }
.prx .n3Title__lead { margin: 0 !important; color: var(--pr-grey) !important; font-size: 18px !important; line-height: 1.6 !important; max-width: 520px; justify-self: end; text-align: left !important; }
/* products: a numbered rail (sticky) and the panels as hairline boards */
.prx .n3Prod { display: grid !important; grid-template-columns: 300px minmax(0, 1fr) !important; gap: 0 !important; padding: 0 var(--pad-x) !important; border-top: 1px solid var(--pr-line); }
.prx .n3Prod__rail { position: relative !important; border-right: 1px solid var(--pr-line); padding: 0 !important; background: none !important; }
.prx .n3Prod__tabs { position: sticky !important; top: 72px; display: block !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.prx .n3Prod__marker { display: none !important; }
.prx .n3Tab { display: flex !important; align-items: center; gap: 16px; width: 100% !important; height: auto !important; padding: 20px 24px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--pr-line) !important; border-radius: 0 !important; background: #fff !important; color: #8a8f9c !important; font: 500 16px/1.2 "Geologica", sans-serif !important; text-align: left; position: relative; transition: color .25s, background .25s; }
.prx .n3Tab .prNo { color: #a3a7b3; }
.prx .n3Tab::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #4a3dcc; transform: scaleY(0); transform-origin: top; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.prx .n3Tab:hover { color: #11131f !important; }
.prx .n3Tab.is-active { color: #11131f !important; }
.prx .n3Tab.is-active::before { transform: none; }
.prx .n3Tab.is-active .prNo { color: #4a3dcc; }
.prx .n3Prod__panels { padding: 0 !important; margin: 0 !important; max-width: none !important; display: block !important; }
.prx .n3Panel { padding: 72px 0 72px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--pr-line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important; }
.prx .n3Panel__head { padding: 0 40px !important; margin: 0 0 40px !important; max-width: 760px; text-align: left !important; display: block !important; }
.prx .n3Panel__logo img { height: 40px; width: auto; display: block; margin: 0 0 24px; }
.prx .n3Panel__title { margin: 0 0 14px !important; color: #11131f !important; font: 500 clamp(28px, 2.6vw, 40px)/1.1 "Geologica", sans-serif !important; letter-spacing: -.025em !important; }
.prx .n3Panel__desc { margin: 0 !important; color: var(--pr-grey) !important; font-size: 16.5px !important; line-height: 1.6 !important; }
.prx .n3Panel__bento { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; margin: 0 0 40px !important; border-top: 1px solid var(--pr-line); border-bottom: 1px solid var(--pr-line); padding: 0 !important; background: none !important; }
.prx .n3PanelCell { position: relative; display: flex !important; flex-direction: column; background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 28px 40px 32px !important; margin: 0 !important; min-height: 0 !important; height: auto !important; grid-column: auto !important; grid-row: auto !important; }
.prx .n3PanelCell:nth-child(even) { border-left: 1px solid var(--pr-line) !important; }
.prx .n3PanelCell:nth-child(n + 3) { border-top: 1px solid var(--pr-line) !important; }
.prx .n3PanelCell__text { margin: 0 !important; color: #11131f !important; font: 500 16.5px/1.5 "Geologica", sans-serif !important; max-width: 40ch; order: 0; }
.prx .n3PanelCell__illo { order: 1; height: 160px; margin-top: 24px; background: none !important; border: 0 !important; border-radius: 0 !important; }   /* illustration slot (docs/ILLUSTRATION-GUIDE.md) */
.prx .n3Panel__cta { margin: 0 40px !important; }
/* the purple "Ready to transform" band repeats the footer CTA right below it, so it steps aside */
.prx .n3Cta { display: none !important; }
@media (max-width: 900px) {
  .prx .n3Why { min-height: 0; }
  .prx .n3Why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .prx .n3Feat:not(:nth-child(4n + 1)) { border-left: 0 !important; }
  .prx .n3Feat:nth-child(even) { border-left: 1px solid var(--pr-line) !important; }
  .prx .n3Title__row { grid-template-columns: 1fr; padding: 0 4px; }
  .prx .n3Title__lead { justify-self: start; }
  .prx .n3Prod { grid-template-columns: 1fr !important; }
  .prx .n3Prod__rail { border-right: 0; }
  .prx .n3Prod__tabs { display: flex !important; overflow-x: auto; top: 64px; z-index: 5; border-bottom: 1px solid var(--pr-line) !important; }
  .prx .n3Tab { width: auto !important; flex: none; border-bottom: 0 !important; padding: 16px 18px !important; }
  .prx .n3Tab::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; transform: scaleX(0); }
  .prx .n3Tab.is-active::before { transform: none; }
  .prx .n3Panel__head, .prx .n3PanelCell { padding-left: 4px !important; padding-right: 4px !important; }
  .prx .n3Panel__bento { grid-template-columns: 1fr !important; }
  .prx .n3PanelCell:nth-child(even) { border-left: 0 !important; }
  .prx .n3PanelCell + .n3PanelCell { border-top: 1px solid var(--pr-line) !important; }
  .prx .n3Panel__cta { margin: 0 4px !important; }
}
@media (max-width: 560px) { .prx .n3Why__grid { grid-template-columns: 1fr !important; } .prx .n3Feat { border-left: 0 !important; } }
/* fixes */
.prx .n3Why__head { margin-left: 0 !important; margin-right: auto !important; max-width: 900px; }
.prx .n3Feat { display: block !important; }
.prx .n3Card__desc { margin-top: 0 !important; }
.prx .n3Card__icon img { filter: brightness(0) saturate(100%) invert(24%) sepia(83%) saturate(2400%) hue-rotate(240deg) brightness(86%) contrast(96%); }   /* icons in brand purple */
.prx .n3Card--cta { display: flex !important; flex-direction: column; justify-content: space-between; gap: 24px; }
.prx .n3Card__ctaTitle { margin: 40px 0 0 !important; color: #11131f !important; -webkit-text-fill-color: #11131f !important; background: none !important; font: 600 19px/1.3 "Geologica", sans-serif !important; text-transform: none !important; }
.prx .n3WhyCta { align-self: flex-start; width: auto !important; }
.prx .n3WhyCta .btn__label { -webkit-text-fill-color: #fff !important; color: #fff !important; background: none !important; }
.prx .n3Prod__rail { width: auto !important; max-width: none !important; justify-self: stretch; }
.prx .n3Prod__panels { width: auto !important; }
.prx .n3Panel { display: block !important; }
.prx .n3Panel__cta { display: inline-flex !important; width: auto !important; }
@media (max-width: 560px) { .prx .n3Feat:nth-child(n) { border-left: 0 !important; } .prx .n3Why { padding-left: 20px !important; padding-right: 20px !important; } .prx .n3Why__head, .prx .n3Feat { padding-left: 4px !important; padding-right: 4px !important; } .prx .n3Feat .prNo { right: 4px; } }

/* ---- round 2 ---- */
/* boards are see-through, so the frame lines run unbroken down both sides */
.prx .n3Feat, .prx .n3PanelCell, .prx .n3Tab { background: transparent !important; }
/* rail: the filled block marks the active product (moved by main.js), the bar follows the nav */
.prx .n3Prod__tabs { top: var(--prx-top, 72px) !important; transition: top .3s ease; }
.prx .n3Prod__marker { display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; width: auto !important; background: #4a3dcc !important; border-radius: 0 !important; z-index: 0; transition: transform .5s cubic-bezier(.2, .8, .2, 1), height .5s cubic-bezier(.2, .8, .2, 1); }
.prx .n3Tab { position: relative; z-index: 1; }
.prx .n3Tab::before { display: none !important; }
.prx .n3Tab.is-active, .prx .n3Tab.is-active:hover { color: #fff !important; }
.prx .n3Tab.is-active .prNo { color: rgba(255, 255, 255, .7); }
/* panel head: text left, Learn More right */
.prx .n3Panel__head { max-width: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
.prx .n3Panel__head > :not(.n3Panel__cta) { grid-column: 1; max-width: 680px; }
.prx .n3Panel__head > .n3Panel__cta { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0 !important; }
.prx .n3PanelCell__illo { height: 200px; }
@media (max-width: 900px) {
  .prx .n3Prod__marker { display: none !important; }
  .prx .n3Tab.is-active, .prx .n3Tab.is-active:hover { color: #11131f !important; box-shadow: inset 0 -2px 0 #4a3dcc; }
  .prx .n3Tab.is-active .prNo { color: #4a3dcc; }
  .prx .n3Prod__tabs { background: #fff !important; top: calc(var(--prx-top, 72px) - 8px) !important; }
  .prx .n3Panel__head { grid-template-columns: 1fr; }
  .prx .n3Panel__head > .n3Panel__cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 24px !important; }
}
.prx .n3Prod__marker { background-image: none !important; }
/* rail fills the screen height under the bar; the eight rows share it */
@media (min-width: 901px) {
  .prx .n3Prod__tabs { height: calc(100vh - var(--prx-top, 72px)); display: flex !important; flex-direction: column; transition: top .3s ease, height .3s ease; }
  .prx .n3Tab { flex: 1 1 0; min-height: 0; }
}
/* hero: the frame lines run through it too (layout untouched) */
.prx .n3Hero { position: relative; isolation: isolate; }
.prx .n3Hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); z-index: 2; pointer-events: none; border-left: 1px solid var(--pr-frame); border-right: 1px solid var(--pr-frame); }

/* ---- card illustrations (assets/revamp/products-art.js) ---- */
.prx .n3PanelCell__illo { display: grid; place-items: center; padding: 0; flex: none !important; height: 200px !important; }
.prx .n3PanelCell__illo svg { width: 100%; height: 100%; max-width: 340px; max-height: 200px; overflow: visible; display: block; }
.prx [data-pa] .p { fill: #fff; stroke: rgba(17, 24, 39, .5); stroke-width: .9; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1), fill-opacity .6s .9s; }
.prx [data-pa].is-drawn .p { stroke-dashoffset: 0; fill-opacity: 1; }
.prx [data-pa] .l { fill: none; stroke: rgba(17, 24, 39, .45); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.prx [data-pa] .l.k { stroke: rgba(17, 24, 39, .4); }
.prx [data-pa] .l.dash { stroke-dasharray: 3 4; }
.prx [data-pa] .l.flow { stroke-dasharray: 3 4; animation: paMarch 1.2s linear infinite; }
.prx [data-pa] .l.teal, .prx [data-pa] .l.scan { stroke: #29ccb2; stroke-width: 1.4; }
.prx [data-pa] .l.tick { stroke: #29ccb2; stroke-width: 1.6; }
.prx [data-pa] .l.acc-l { stroke: #4a3dcc; stroke-width: 1.6; }
.prx [data-pa] .bx.soft .p.ft, .prx [data-pa] .p.soft { fill: #eceafb; }
.prx [data-pa] .bx.soft .p.fl, .prx [data-pa] .bx.soft .p.fr { fill: #f5f4fd; }
.prx [data-pa] .bx.key .p { stroke: rgba(17, 24, 39, .85); fill: #11131f; }
.prx [data-pa] .bx.acc .p, .prx [data-pa] .p.accf { fill: #4a3dcc; stroke: #4a3dcc; }
.prx [data-pa] .bx.acc .p.fl { fill: #3b31a6; stroke: #3b31a6; }
.prx [data-pa] .bx.acc .p.fr { fill: #2d2580; stroke: #2d2580; }
.prx [data-pa] .p.q { fill: #11131f; stroke: none; }
.prx [data-pa] .bx.ghost .p { fill: none !important; stroke: rgba(17, 24, 39, .55); }
.prx .n3PanelCell:hover [data-pa] .p { stroke: rgba(17, 24, 39, .75); }
/* review 27 Oct 2026 (same layer as card-art.css): each side of a plain box takes its own quiet shade so volumes read
   solid; on hover the line work re-traces (products-art.js), the purple part lifts on a spring, key pieces nudge up
   and the flows run faster, while the idle loop keeps going */
.prx [data-pa] .bx:not(.soft):not(.key):not(.acc):not(.ghost) > .p.ft { fill: #fbfbff; }
.prx [data-pa] .bx:not(.soft):not(.key):not(.acc):not(.ghost) > .p.fl { fill: #f1f0fa; }
.prx [data-pa] .bx:not(.soft):not(.key):not(.acc):not(.ghost) > .p.fr { fill: #e6e5f3; }
.prx [data-pa] g:not(.bx) > .p.ft:not(.soft):not(.q):not(.accf) { fill: #fbfbff; }
.prx [data-pa] .bx.acc, .prx [data-pa] .bx.key { transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.prx .n3PanelCell:hover [data-pa] .bx.acc { transform: translateY(-6px); }
.prx .n3PanelCell:hover [data-pa] .bx.key { transform: translateY(-3px); transition-delay: .08s; }
.prx .n3PanelCell:hover [data-pa] .l.flow { animation-duration: .5s; }
.prx [data-pa].pa-re .p { stroke-dashoffset: 1; transition: none; }
.prx [data-pa].pa-hv .p { transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1), fill-opacity .6s .9s, stroke .3s; }
@media (prefers-reduced-motion: reduce) { .prx [data-pa] .bx.acc, .prx [data-pa] .bx.key { transition: none; transform: none !important; } }
/* motion v2 (agentic-designer-work/motion/card-illustrations.md): parts stay visible and travel → hold → arrive,
   lights stay on long enough to read, eased in-out; hover lifts the whole drawing and draws corner brackets instead of
   lifting single parts or re-tracing every line */
.prx [data-pa] g[class*="a-"] { animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
.prx [data-pa] .a-move, .prx [data-pa] .a-path { animation-name: paMove2; }
.prx [data-pa] .a-stream { animation-name: paStream2; animation-timing-function: cubic-bezier(.65, 0, .35, 1) !important; }
.prx [data-pa] .a-seq { animation-name: paSeq3; }
.prx [data-pa] .a-blink { animation-name: paBlink2; }
.prx [data-pa] .a-turn { animation-name: paTurn2; }
@keyframes paMove2 { 0% { transform: translate(0, 0); opacity: 0; } 8% { transform: translate(0, 0); opacity: 1; } 50%, 70% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 80%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes paStream2 { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 55%, 78% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 88%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes paSeq3 { 0%, 8% { opacity: 0; } 22%, 62% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes paTurn2 { 0%, 4% { opacity: 0; } 10%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes paBlink2 { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.prx .n3PanelCell:hover [data-pa] .bx.acc, .prx .n3PanelCell:hover [data-pa] .bx.key { transform: none; }
.prx .n3PanelCell:hover [data-pa] .l.flow { animation-duration: 1.2s; }
.prx [data-pa] svg { transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.prx .n3PanelCell:hover [data-pa] svg { transform: translateY(-4px); }
.prx [data-pa] g.floor > .p.floor { fill: #f7f6fd; stroke: rgba(17, 24, 39, .3); }
.prx [data-pa] .brk { fill: none; stroke: #4a3dcc; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .4s cubic-bezier(.23, 1, .32, 1), opacity .2s; }
.prx .n3PanelCell:hover [data-pa] .brk { stroke-dashoffset: 0; opacity: 1; }
.prx [data-pa] .brk { display: none; }   /* the cells draw their own hover brackets; one set is enough */
@media (prefers-reduced-motion: reduce) { .prx [data-pa] svg { transition: none; transform: none !important; } .prx [data-pa] .brk { transition: opacity .2s; stroke-dashoffset: 0; } }
/* motion: always running while on screen */
.prx [data-pa] g[class*="a-"] { transform-box: view-box; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .2, 1); animation-play-state: paused; }
.prx [data-pa].is-on g[class*="a-"], .prx [data-pa].is-on .l.flow { animation-play-state: running; }
.prx [data-pa] .l.flow { animation-play-state: paused; }
.prx [data-pa] .a-move { animation-name: paMove; animation-duration: 3s; }
.prx [data-pa] .a-stream { animation-name: paStream; animation-duration: 4s; animation-timing-function: linear !important; }
.prx [data-pa] .a-lift { animation-name: paLift; animation-duration: 4s; }
.prx [data-pa] .a-bob { animation-name: paBob; animation-duration: 4s; animation-timing-function: ease-in-out !important; }
.prx [data-pa] .a-swap, .prx [data-pa] .a-plug, .prx [data-pa] .a-gate { animation-name: paSwap; animation-duration: 4s; }
.prx [data-pa] .a-sweep { animation-name: paSweep; animation-duration: 3s; animation-timing-function: ease-in-out !important; }
.prx [data-pa] .a-drop { animation-name: paDrop; animation-duration: 3s; }
.prx [data-pa] .a-fill { animation-name: paFill; animation-duration: 5s; }
.prx [data-pa] .a-path { animation-name: paMove; animation-duration: 5s; }
.prx [data-pa] .a-blink { animation-name: paBlink; animation-duration: 2s; animation-timing-function: ease-in-out !important; }
.prx [data-pa] .a-turn { animation-name: paTurn; animation-duration: 6s; opacity: 0; }
.prx [data-pa] .a-seq { animation-name: paSeq; animation-duration: 4s; opacity: 0; }
.prx [data-pa] .a-alt { animation-name: paAlt; animation-duration: 4s; opacity: 0; }
.prx [data-pa] .a-type { animation-name: paType; animation-duration: 4s; }
.prx [data-pa] .a-wave { animation-name: paWave; animation-duration: 2.4s; transform-box: fill-box; transform-origin: center; }
.prx [data-pa] .a-pulse { animation-name: paPulse; animation-duration: 2.4s; transform-box: fill-box; transform-origin: center; }
.prx [data-pa] .a-needle { animation-name: paNeedle; animation-duration: 4s; transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes paMarch { to { stroke-dashoffset: -14; } }
@keyframes paMove { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 70% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 82%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes paStream { 0% { transform: translate(0, 0); opacity: 0; } 8%, 88% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes paLift { 0%, 55%, 100% { transform: translate(0, 0); } 20%, 38% { transform: translate(var(--dx), var(--dy)); } }
@keyframes paBob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx), var(--dy)); } }
@keyframes paSwap { 0%, 12% { transform: translate(0, 0); } 42%, 62% { transform: translate(var(--dx), var(--dy)); } 92%, 100% { transform: translate(0, 0); } }
@keyframes paSweep { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx), var(--dy)); } }
@keyframes paDrop { 0%, 10% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 50%, 85% { transform: translate(var(--dx), var(--dy)); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes paFill { 0% { transform: translate(var(--dx), var(--dy)); } 55%, 85% { transform: translate(0, 0); } 100% { transform: translate(var(--dx), var(--dy)); } }
@keyframes paBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes paTurn { 0%, 30%, 100% { opacity: 0; } 6%, 24% { opacity: 1; } }
@keyframes paSeq { 0%, 25%, 100% { opacity: 0; } 8%, 18% { opacity: 1; } }
@keyframes paAlt { 0%, 55%, 100% { opacity: 0; } 10%, 45% { opacity: 1; } }
@keyframes paType { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes paWave { 0% { transform: scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes paPulse { 0%, 100% { transform: scale(.92); opacity: .5; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes paNeedle { 0%, 100% { transform: rotate(-35deg); } 50%, 70% { transform: rotate(25deg); } }
@media (prefers-reduced-motion: reduce) { .prx [data-pa] g[class*="a-"], .prx [data-pa] .l.flow { animation: none !important; opacity: 1 !important; } }
/* review: the product rail reads larger, and so do the product logos in the panels */
.prx .n3Tab { font-size: 20px !important; letter-spacing: -.01em; }
.prx .n3Tab .prNo { font-size: 13px; }
.prx .n3Panel__logo img { height: 56px !important; width: auto; }
@media (max-width: 900px) { .prx .n3Tab { font-size: 17px !important; } .prx .n3Panel__logo img { height: 46px !important; } }
/* review: no empty box under the last product. The final panel ends at its cards, so "N3CA Loan" (the sticky
   rail's last tab) lines up with the bottom of the grid and the CTA follows directly. */
.n3Prod__panels > .n3Panel:last-child { padding-bottom: 0 !important; border-bottom: 0 !important; }
.n3Prod__panels > .n3Panel:last-child .n3Panel__bento { margin-bottom: 0 !important; }
/* review: header spacing.
   "Everything your bank needs to grow": the top padding was 144px; now 64, matching the bottom.
   "What N3CA brings": the heading sits in the middle of its box, the same space above it as between it and the grid. */
.prx .n3Title { padding-top: 64px !important; padding-bottom: 64px !important; }
html.prx .n3Why { gap: 0 !important; justify-content: flex-start !important; }
.prx .n3Why__head { margin-bottom: 96px !important; }
@media (max-width: 760px) { .prx .n3Why { padding-top: 64px !important; } html.prx .n3Why__head { margin-bottom: 64px !important; } }