/* Product page: three work areas, readable evidence, details on demand. */
.product-page { --ink:#14243b; --muted:#526278; --paper:#f5f7fb; font-size:16px; line-height:1.65; }
.product-page .container { width:min(1240px,calc(100% - 80px)); }
.product-page h1 { font-size:clamp(35px,3.8vw,54px); line-height:1.17; letter-spacing:-2px; }
.product-page h2 { font-size:clamp(29px,3vw,40px); line-height:1.22; letter-spacing:-1.3px; }
.product-page h3 { font-size:23px; line-height:1.35; letter-spacing:-.6px; }
.product-page .header-inner { height:86px; gap:20px; }
.product-page .site-header .brand { font-size:34px; gap:12px; }
.product-page .site-header .brand img { width:38px; height:46px; }
.product-page .desktop-nav { gap:22px; }
.product-page .desktop-nav a { font-size:13px; }
.product-page .header-actions { gap:18px; }
.product-page button,.product-page a,.product-page summary { touch-action:manipulation; }
.jp-kicker { display:block; color:var(--blue); font-size:12px; font-weight:650; letter-spacing:.9px; text-transform:uppercase; }
.jp-hero { padding:64px 0 56px; background:radial-gradient(ellipse at 85% 20%,#e5ecfc,transparent 60%),var(--paper); }
.jp-hero > .container { width:min(1440px,calc(100% - 80px)); }
.jp-hero-top { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); align-items:center; gap:24px; min-height:480px; }
.jp-hero-top .jp-kicker { margin-bottom:16px; }
.jp-lead { max-width:700px; color:var(--muted); font-size:18px; line-height:1.75; margin:22px 0 26px; }
.jp-hero-demo { min-width:0; overflow:hidden; border:1px solid #bdcbe0; border-radius:14px; background:#fff; box-shadow:0 24px 64px #142b5524; }
.jp-hero-demo video { display:block; width:100%; height:auto; aspect-ratio:1600/1050; object-fit:contain; }
.jp-hero-demo-footer { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:12px 16px; color:var(--muted); font-size:12px; }
.jp-hero-demo-footer button { border:0; background:none; color:var(--blue); font:inherit; font-weight:650; cursor:pointer; padding:4px 0; }
.brand-wordmark { display:flex; flex-direction:column; line-height:1.05; }
.brand-beta { display:inline-block; order:-1; align-self:flex-end; margin:0 3px 5px 0; padding:3px 9px; border-radius:2px; background:#d82b38; color:#fff; font-family:Inter,sans-serif; font-size:10px; line-height:1.1; font-weight:750; letter-spacing:1.4px; text-transform:uppercase; transform:rotate(-9deg); }
.jp-hero-product { margin:56px auto 0; max-width:1140px; }
.jp-shot { margin:0 auto; min-width:0; width:100%; max-width:680px; }
.hero-shot { max-width:1040px; }
.team-focus { max-width:460px; }
#funktionen .jp-panel-media > .jp-shot { max-width:680px; }
.jp-shot-link { display:block; position:relative; border:1px solid #a8b8cf; border-radius:12px; padding:10px; background:#e7edf5; box-shadow:0 9px 24px #142b551f; }
.jp-shot-link:hover { border-color:#668acf; }
.jp-shot-window { border:1px solid #c6d1e0; border-radius:5px; overflow:hidden; position:relative; background:#fff; }
.jp-shot-window img { display:block; width:100%; max-width:100%; height:auto; margin:0; }

.jp-shot figcaption { padding:16px 3px 0; }
.jp-shot figcaption p { color:var(--muted); font-size:13px; line-height:1.65; }

.jp-overview { padding:42px 0; }
.jp-routes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.jp-route { display:block; border-radius:10px; padding:16px 12px; transition:background .2s; }
.jp-route:hover,.jp-route:focus-visible { background:var(--paper); }
.jp-route:hover h3,.jp-route:focus-visible h3 { color:var(--blue); }

.jp-route h3 { font-size:18px; margin:2px 0 10px; }
.jp-route p { color:var(--muted); font-size:14px; }
.jp-section { padding:86px 0; scroll-margin-top:76px; }
.jp-tint { background:var(--paper); }
.jp-compact { padding:26px 0; }
.jp-section-head { margin-bottom:32px; max-width:780px; }
.jp-section-head > div { display:flex; align-items:center; gap:13px; margin-bottom:12px; }
.jp-area-icon { width:53px; height:53px; object-fit:contain; }
.jp-section-head > p { margin-top:18px; color:var(--muted); max-width:720px; }










.jp-tabs { display:flex; flex-wrap:nowrap; gap:28px; max-width:100%; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#c6d2e7 transparent; margin-bottom:30px; padding:3px 2px 8px; }
.jp-tabs button { position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-height:46px; padding:10px 2px; border:0; border-radius:0; background:transparent; color:var(--muted); font:inherit; font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; transition:color .2s; }
.jp-tabs button::after { content:""; position:absolute; inset:auto 0 0; height:3px; border-radius:3px; background:var(--blue); transform:scaleX(0); transition:transform .2s; }
.jp-tabs button:hover { color:var(--ink); }
.jp-tabs button[aria-selected=true] { color:var(--blue); }
.jp-tabs button[aria-selected=true]::after { transform:scaleX(1); }
.jp-tabs button:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; border-radius:4px; }
@media(max-width:700px) {
 .jp-tabs { gap:22px; margin-bottom:24px; }
 .jp-tabs button { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .jp-tabs button,.jp-tabs button::after { transition:none; } }
.jp-panel { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(0,1.7fr); gap:40px; align-items:start; }
.jp-panel-copy { padding-top:10px; }
.jp-panel-copy > p { color:var(--muted); margin-top:17px; line-height:1.75; }
.jp-panel-copy h3 { font-size:25px; }
.jp-result { margin-top:28px; padding:18px 0 0; }
.jp-result strong { color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.6px; }
.jp-result p { margin-top:8px; color:var(--muted); font-size:14px; line-height:1.7; }







.jp-detail-content p + p { margin-top:14px; }
.jp-details
.jp-details .jp-shot { margin-top:16px; }

.assessment-focus .jp-shot-window { aspect-ratio:auto; padding:18px; background:white; }
.assessment-focus .jp-shot-window img { width:100%; margin:0; }

.jp-knowledge { background:radial-gradient(ellipse at 50% 55%,#284b8a,transparent 65%),#10203e; color:#fff; padding:48px; border-radius:28px; margin-top:64px; }
.jp-knowledge-heading { max-width:740px; }
.jp-knowledge-heading h3 { font-size:24px; }
.jp-knowledge p { color:#d2ddf1; margin-top:13px; }
.jp-source-flow { display:grid; grid-template-columns:1fr 35px 1fr 35px 1fr; align-items:center; gap:16px; margin-top:28px; }
.jp-source-list { display:grid; gap:8px; }
.jp-source-list span,.jp-source-list a { border-radius:12px; padding:13px 18px; font-size:14px; background:#ffffff0d; }
.jp-source-list a:hover { background:#274574; }
.jp-flow-arrow { font-size:24px; color:#b3c7ea; text-align:center; }
.jp-source-core { position:relative; text-align:center; padding:24px 8px; }
.jp-source-core > .icon { display:block; width:38px; height:38px; margin:0 auto 12px; color:#a7c0ff; }
.jp-source-core strong { font-size:15px; }
.jp-knowledge
.jp-knowledge
.jp-knowledge
.jp-facts { margin:0; display:grid; gap:16px; }
.jp-facts dt { color:var(--ink); font-weight:600; margin-bottom:5px; }
.jp-facts dd { margin:0; }
.jp-knowledge .jp-facts dt { color:white; }
.jp-research-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.jp-control-head { margin-bottom:36px; }
.jp-loop { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin:8px 0 0; padding:0; }
.jp-loop li { position:relative; padding:0 20px 0 0; }
.jp-loop li:not(:last-child)::after { content:''; position:absolute; left:84px; right:0; top:37px; height:2px; background:linear-gradient(90deg,#b4c7ef,#dde6f7); transform-origin:left; }
.jp-loop strong { display:block; font-size:15px; line-height:1.4; }
.jp-loop span { display:block; font-size:14px; color:var(--muted); margin-top:10px; }














.jp-pricing { display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:start; }
/* Comparison: concise benefits, one highlighted product column, native disclosures. */
.jp-comparison table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; text-align:left; font-size:15px; line-height:1.5; }
.jp-comparison th,.jp-comparison td { padding:24px 26px; vertical-align:middle; }
.jp-comparison thead th { color:var(--muted); font-size:13px; font-weight:500; padding-block:24px; }
.jp-comparison th:first-child { width:31%; padding-left:0; }
.jp-comparison th:nth-child(2) { width:29%; }
.jp-comparison thead th:last-child { border-radius:22px 22px 0 0; background:#183665; color:#fff; }
.jp-compare-brand { display:block; font-size:26px; line-height:1.2; font-weight:750; letter-spacing:-1px; }
.jp-compare-brand > span { color:#8cb6ff; }
.jp-compare-subline { display:block; margin-top:6px; color:#c5d6f1; font-size:12px; }
.jp-comparison tbody th { font-weight:500; }
.jp-compare-area { display:block; margin-bottom:6px; color:var(--muted); font-size:11px; letter-spacing:.7px; text-transform:uppercase; }
.jp-comparison tbody th strong { display:block; max-width:250px; font-size:18px; font-weight:650; letter-spacing:-.4px; line-height:1.4; }
.jp-compare-before { color:var(--muted); }
.jp-compare-product { background:#183665; color:#fff; }
.jp-comparison tbody tr:last-child .jp-compare-product { border-radius:0 0 22px 22px; }
.jp-comparison tbody tr:nth-child(even) > :not(.jp-compare-product) { background:#f6f8fc; }
.jp-comparison tbody tr:nth-child(even) > th { box-shadow:-18px 0 #f6f8fc; border-radius:8px 0 0 8px; }
.jp-comparison tbody tr > * { transition:background-color .2s; }
.jp-comparison tbody tr:hover .jp-compare-product,.jp-comparison tbody tr:focus-within .jp-compare-product { background:#22487e; }


.jp-compare-check { display:grid; place-items:center; flex:0 0 23px; height:23px; border-radius:50%; background:#a7c9ff; color:#173460; font-size:14px; }

.jp-compare-product details[open]


.jp-compare-detail a { display:inline-flex; gap:10px; align-items:center; min-height:44px; margin-top:8px; color:#fff; font-weight:600; }
.jp-compare-detail a:hover { text-decoration:underline; text-underline-offset:4px; }
.jp-compare-scope { margin-top:22px; max-width:820px; color:var(--muted); font-size:12px; }


@media(max-width:1000px) { .jp-comparison th,.jp-comparison td { padding:20px 18px; } .jp-comparison tbody th strong { font-size:16px; } .jp-comparison table { font-size:14px; } }
@media(max-width:700px) {
 .jp-comparison table,.jp-comparison tbody { display:block; }
 .jp-comparison thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .jp-comparison tbody tr { display:block; margin-bottom:28px; }
 .jp-comparison th:first-child { display:block; width:auto; padding:0 0 14px; }
 .jp-comparison tbody th strong { max-width:none; font-size:20px; }
 .jp-comparison tbody tr:nth-child(even) > :not(.jp-compare-product) { background:transparent; box-shadow:none; }
 .jp-comparison td { display:block; padding:18px; }
 .jp-comparison .jp-compare-before { background:#f2f5fa !important; border-radius:14px 14px 0 0; }
 .jp-comparison .jp-compare-product { border-radius:0 0 14px 14px !important; }
 .jp-comparison td::before { content:attr(data-label); display:block; margin-bottom:8px; font-size:11px; font-weight:600; letter-spacing:.3px; }
 .jp-compare-product::before { color:#b9d2f8; }


}
@media(prefers-reduced-motion:reduce) { .jp-comparison tbody tr > *, }
.jp-price-card { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(145deg,#192e51,#101c34); color:white; border-radius:26px; padding:38px; box-shadow:0 22px 50px #142b551c; }
.jp-price { margin:24px 0; }
.jp-price strong { font-family:Poppins,sans-serif; font-size:52px; line-height:1.2; letter-spacing:-2px; }
.jp-price span { display:block; color:var(--muted); font-size:14px; margin-top:5px; }
.jp-price-card ul { padding:0; list-style:none; margin:0 0 30px; display:grid; gap:13px; font-size:15px; }
.jp-price-card li::before { content:'✓'; color:var(--blue); margin-right:12px; }
.jp-price-detail { padding:14px 8px; }
.jp-price-rate { color:var(--muted); font-size:13px; margin-top:6px; }
.jp-cost-example { padding:0; font-size:14px; }
.jp-cost-example dl { margin:14px 0 0; display:grid; gap:10px; }
.jp-cost-example dl > div { display:flex; justify-content:space-between; gap:20px; }
.jp-cost-example dd { margin:0; font-variant-numeric:tabular-nums; white-space:nowrap; }
.jp-cost-total { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:12px; }
.jp-cost-total > span { font-weight:600; }
.jp-cost-total small { display:block; color:var(--muted); font-size:11px; font-weight:400; }
.jp-cost-example
.jp-cost-example .jp-detail-content > p { margin-top:16px; }
.jp-faq { display:grid; grid-template-columns:.7fr 1.3fr; gap:65px; }
.jp-faq .jp-kicker { margin-bottom:16px; }
.jp-faq
.jp-faq
.product-page .contact-section { padding-block:0 65px; }
.product-page .contact-banner { padding:44px; }
.product-page .contact-banner h2 { max-width:800px; }
.product-page .contact-banner p { max-width:760px; }
.product-page .screenshot-dialog-content { overscroll-behavior:contain; }

@media(max-width:1100px) { .product-page .desktop-nav { gap:14px; } .product-page .desktop-nav a { font-size:12px; } .product-page .header-actions { gap:10px; } .jp-panel { gap:26px; grid-template-columns:.85fr 1.35fr; } .jp-route {  }    }
@media(max-width:950px) { .product-page .header-inner { height:80px; } .product-page .site-header .brand { font-size:30px; gap:10px; } .product-page .site-header .brand img { width:34px; height:41px; } .jp-hero-top { grid-template-columns:1fr; gap:30px; min-height:0; } .jp-hero-person { width:min(720px,100%); justify-self:center; } .jp-panel { grid-template-columns:1fr; gap:24px; } .jp-panel-copy { max-width:720px; } .jp-panel-media { width:100%; } .jp-result { margin-top:20px; padding-top:14px; } .jp-result p { max-width:650px; } .jp-loop { grid-template-columns:repeat(2,minmax(0,1fr)); } .jp-loop li:nth-child(2)::after { display:none; } .jp-faq { gap:30px; grid-template-columns:.8fr 1.2fr; } .jp-price-card { padding:25px; } }
@media(max-width:700px) { .product-page .container { width:calc(100% - 40px); } .product-page h1 { font-size:35px; letter-spacing:-1.5px; } .product-page h2 { font-size:29px; } .jp-hero { padding-top:32px; } .jp-hero-top { gap:24px; }  .jp-hero-top h1 br { display:none; } .jp-lead { font-size:16px; margin:20px 0 24px; } .jp-hero-product { margin-top:36px; }   .jp-routes { grid-template-columns:1fr; gap:4px; } .jp-route {  padding:20px 0;  }  .jp-route:not(:last-child) { border-radius:0; } .jp-overview { padding:15px 0; } .jp-section { padding:52px 0; } .jp-compact { padding:16px 0; } .jp-section-head { margin-bottom:26px; } .jp-section-head > div { margin-bottom:10px; } .jp-panel-copy h3 { font-size:24px; }             .jp-knowledge { padding:24px 20px; margin-top:32px; } .jp-knowledge-heading h3 { font-size:23px; } .jp-source-flow { grid-template-columns:1fr; gap:10px; } .jp-source-list { grid-template-columns:1fr 1fr; gap:8px; } .jp-source-list span,.jp-source-list a { padding:10px; font-size:12px; } .jp-flow-arrow { transform:rotate(90deg); } .jp-source-core { display:flex; align-items:center; justify-content:center; gap:10px; } .jp-source-core > .icon { width:30px; height:30px; margin:0; } .jp-research-grid { grid-template-columns:1fr; gap:28px; }  .jp-loop { grid-template-columns:1fr; gap:20px; margin-top:24px; } .jp-loop li { padding:4px 0 24px 88px; min-height:110px; } .jp-loop li:not(:last-child)::after { display:block; left:31px; top:75px; bottom:0; width:2px; height:auto; right:auto; transform:none; transform-origin:top; } .jp-pricing,.jp-faq { grid-template-columns:1fr; gap:28px; }        .jp-price-detail { padding:0; } .jp-price strong { font-size:48px; } .jp-cost-example { padding:0; } .product-page .contact-banner { padding:28px 22px; } .product-page .header-actions .button { font-size:12px; padding:10px 12px; } .product-page .header-inner { gap:12px; } .product-page .brand { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { .product-page *, .product-page *::before, .product-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.jp-tabs-group { scroll-margin-top:96px; overflow-anchor:none; }

.jp-cost-inputs { display:grid; gap:12px; margin-block:20px 10px; }
.jp-slider-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.jp-slider-heading label { font-size:14px; font-weight:600; }
.jp-slider-heading output { padding:5px 12px; border-radius:10px; background:#e5edff; color:#2345a2; font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.jp-slider-field input[type=range] { --fill:0%; display:block; appearance:none; -webkit-appearance:none; width:100%; height:44px; padding:0; margin:0; border:0; border-radius:12px; background:transparent; cursor:pointer; touch-action:pan-y; }
.jp-slider-field input[type=range]::-webkit-slider-runnable-track { height:8px; border-radius:10px; background:linear-gradient(to right,#325dde 0 var(--fill),#dce4f4 var(--fill) 100%); }
.jp-slider-field input[type=range]::-moz-range-track { height:8px; border-radius:10px; background:linear-gradient(to right,#325dde 0 var(--fill),#dce4f4 var(--fill) 100%); }
.jp-slider-field input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; height:26px; width:26px; margin-top:-9px; border:5px solid white; border-radius:50%; background:#325dde; box-shadow:0 2px 9px #23468840,0 0 0 1px #ccd7ed; transition:box-shadow .2s; }
.jp-slider-field input[type=range]::-moz-range-thumb { box-sizing:border-box; height:26px; width:26px; border:5px solid white; border-radius:50%; background:#325dde; box-shadow:0 2px 9px #23468840,0 0 0 1px #ccd7ed; transition:box-shadow .2s; }
.jp-slider-field input[type=range]:active::-webkit-slider-thumb { box-shadow:0 0 0 7px #325dde20,0 2px 9px #23468840; }
.jp-slider-field input[type=range]:active::-moz-range-thumb { box-shadow:0 0 0 7px #325dde20,0 2px 9px #23468840; }
.jp-slider-field input[type=range]:focus-visible { outline-offset:0; }
@media(max-width:400px) { .jp-slider-heading output { font-size:14px; padding:5px 8px; } .jp-slider-heading label { font-size:13px; } }


.product-page .screenshot-dialog { height:94dvh; }
.product-page .screenshot-dialog-header h2 { font-size:20px; }
.product-page .screenshot-dialog-content { flex:1; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:16px; overflow:hidden; background:#e7edf5; padding:20px; }
.product-page .screenshot-dialog-content img { width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; margin:0; }
.product-page #screenshot-description { margin:0; padding:0; }
@media(max-width:700px) { .jp-shot-link { padding:7px; }  }

.invoice-ai-focus { max-width:560px; }

/* Open diagrams: visual connections carry meaning instead of enclosing boxes. */
.jp-source-flow { padding-block:12px; }
.jp-source-core::before { content:''; position:absolute; width:164px; height:164px; top:0; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 35% 25%,#99baff55,#3b68ba22 60%,transparent 70%); box-shadow:inset 0 0 0 1px #9dc0ff26,0 0 50px #6199ff22; }
.jp-source-core img { position:relative; display:block; width:110px; height:110px; margin:0 auto 20px; }
.jp-source-core strong { position:relative; display:block; }
.jp-source-list > :nth-child(2) { margin-left:10px; }
.jp-source-list > :nth-child(3) { margin-left:20px; }
.jp-source-list > :nth-child(4) { margin-left:30px; }
.jp-source-list:last-child > :nth-child(n) { margin-left:0; }
.jp-flow-arrow { position:relative; height:2px; background:#7ba6ef66; font-size:0; }
.jp-flow-arrow::after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; left:0; top:-3.5px; background:#c9ddff; box-shadow:0 0 14px #a3c8ff; }
.jp-knowledge
.jp-loop-art { display:block; width:76px; height:76px; object-fit:contain; margin-bottom:20px; }
.jp-price-card::before { content:''; position:absolute; z-index:-1; width:350px; height:350px; border-radius:50%; right:-180px; top:-200px; background:radial-gradient(circle at 30% 70%,#618ee3aa,#345da73d 65%); box-shadow:0 0 0 40px #91b9ff08,0 0 0 80px #91b9ff06; }
.jp-price-card h3 { color:#fff; }
.jp-price-card .jp-price span { color:#c4d3ec; }
.jp-price-card li::before { color:#a9c9ff; }
.jp-price-card .button { background:#dce8ff; color:#183360; border-color:transparent; }
.jp-price-card .button:hover { background:#fff; }
.jp-price-detail #price-total { font-size:26px; font-weight:650; letter-spacing:-.8px; color:var(--ink); }
.jp-cost-bar { display:flex; height:14px; border-radius:20px; overflow:hidden; margin:26px 0 20px; background:#e0e7f4; }
.jp-cost-bar span { min-width:0; transition:width .65s cubic-bezier(.2,.8,.2,1); }
#cost-base-bar { background:#294775; }
#cost-seats-bar { background:#718fd0; }
#cost-usage-bar { background:#3c64ec; }
.jp-cost-example dl > div dt::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; background:#294775; }
.jp-cost-example dl > div:nth-child(2) dt::before { background:#718fd0; }
.jp-cost-example dl > div:nth-child(3) dt::before { background:#3c64ec; }
.jp-faq


@keyframes jp-flow-packet { 0% { transform:translateX(-5px); opacity:0; } 20% { opacity:1; } 80% { opacity:1; } 100% { transform:translateX(30px); opacity:0; } }
@keyframes jp-node-arrive { from { transform:translateY(12px); opacity:.35; } to { transform:none; opacity:1; } }
@keyframes jp-core-arrive { 0% { transform:scale(.88); } 65% { transform:scale(1.06); } 100% { transform:scale(1); } }
@media(prefers-reduced-motion:no-preference) {
 .jp-source-flow.is-visible .jp-source-list > * { animation:jp-node-arrive .7s both; }
 .jp-source-flow.is-visible .jp-source-list > :nth-child(2) { animation-delay:.12s; }
 .jp-source-flow.is-visible .jp-source-list > :nth-child(3) { animation-delay:.24s; }
 .jp-source-flow.is-visible .jp-source-list > :nth-child(4) { animation-delay:.36s; }
 .jp-source-flow.is-visible .jp-source-list > :nth-child(5) { animation-delay:.48s; }
 .jp-source-flow.is-visible .jp-flow-arrow::after { animation:jp-flow-packet 1.2s .4s 2 both; }
 .jp-source-flow.is-visible .jp-flow-arrow:nth-child(4)::after { animation-delay:1s; }
 .jp-source-flow.is-visible .jp-source-core img { animation:jp-core-arrive 1.1s .45s both; }
 .jp-loop.is-visible .jp-loop-art { animation:jp-node-arrive .7s both; }
 .jp-loop.is-visible li:nth-child(2) .jp-loop-art { animation-delay:.25s; }
 .jp-loop.is-visible li:nth-child(3) .jp-loop-art { animation-delay:.5s; }
 .jp-loop.is-visible li:nth-child(4) .jp-loop-art { animation-delay:.75s; }
}
@media(max-width:700px) {

 .jp-source-flow { gap:24px; }
 .jp-source-core { display:block; padding:24px 0 12px; }
 .jp-source-core img { width:100px; height:100px; margin:0 auto 18px; }
 .jp-source-core::before { width:145px; height:145px; }
 .jp-source-list > :nth-child(n) { margin-left:0; }
 .jp-source-list span,.jp-source-list a { padding:12px; }
 .jp-flow-arrow { width:35px; justify-self:center; }
 .jp-loop-art { position:absolute; left:0; top:0; width:64px; height:64px; margin:0; }

 .jp-price-detail #price-total { font-size:23px; }
}

@media(max-width:700px) {
 .jp-hero-top { gap:18px; }
 .jp-hero-copy { display:contents; }
 .jp-hero-copy > .jp-kicker { grid-row:1; margin:0; }
 .jp-hero-copy > h1 { grid-row:2; }
 .jp-hero-people { grid-row:3; }
 .jp-hero-copy > .jp-lead { grid-row:4; margin:0; }
 .jp-hero-copy > .button-row { grid-row:5; margin-top:6px; }
}

/* Motion guides attention to sections and controls; product screenshots stay still. */
.product-page .desktop-nav a { position:relative; }
.product-page .desktop-nav a::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.product-page .desktop-nav a:hover::after,.product-page .desktop-nav a:focus-visible::after { transform:scaleX(1); }
.jp-route { transition:background .3s,box-shadow .3s; }

.jp-route:hover,.jp-route:focus-visible { background:linear-gradient(135deg,#eef3ff,#f7f9fd); box-shadow:0 12px 28px #1b3d7010; }
.jp-route h3 { transition:color .25s; }
.jp-source-list a { transition:background .25s,box-shadow .25s; }
.jp-source-list a:hover,.jp-source-list a:focus-visible { background:#426bb455; box-shadow:inset 3px 0 #a8c8ff; }
.jp-shot-link { transition:border-color .25s,box-shadow .25s; }
.jp-shot-link:hover,.jp-shot-link:focus-visible { box-shadow:0 12px 30px #142b5530; }
.product-page .button { position:relative; overflow:hidden; }
.product-page .button::after { content:''; pointer-events:none; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,#ffffff30 50%,transparent 75%); transform:translateX(-120%); }
@keyframes jp-heading-enter { from { opacity:.3; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes jp-connection-enter { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes jp-button-sheen { to { transform:translateX(120%); } }
@media(prefers-reduced-motion:no-preference) {
 .jp-section-head.is-visible > div { animation:jp-heading-enter .55s both; }
 .jp-section-head.is-visible > h2 { animation:jp-heading-enter .65s .08s both; }
 .jp-section-head.is-visible > p { animation:jp-heading-enter .65s .16s both; }
 .jp-route.is-visible { animation:jp-heading-enter .65s both; }
 .jp-route.is-visible:nth-child(2) { animation-delay:.1s; }
 .jp-route.is-visible:nth-child(3) { animation-delay:.2s; }
 .jp-loop.is-visible li:not(:last-child)::after { animation:jp-connection-enter .7s .25s both; }
 .jp-loop.is-visible li:nth-child(2)::after { animation-delay:.5s; }
 .jp-loop.is-visible li:nth-child(3)::after { animation-delay:.75s; }

 .product-page .button:focus-visible::after { animation:jp-button-sheen .6s; }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {


 .product-page .button:hover::after { animation:jp-button-sheen .6s; }
}
@media(max-width:700px) {
 @keyframes jp-connection-enter { from { transform:scaleY(0); } to { transform:scaleY(1); } }
}

/* Still reference preview with a separate, user-started product walkthrough. */
.jp-demo-poster { display:block; }
.jp-demo-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; font-size:12px; }
.jp-demo-play { display:inline-flex; align-items:center; gap:9px; border:0; border-radius:7px; padding:10px 13px; background:#142b55; color:#fff; font:inherit; font-weight:600; cursor:pointer; transition:background .2s; }
.jp-demo-play:hover { background:#24467c; }
.jp-demo-duration { opacity:.7; font-weight:400; }
.jp-demo-actions > a { color:#294568; padding:8px 0; }
.jp-demo-actions :focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.product-page .jp-video-dialog { height:fit-content; }
.product-page .jp-video-dialog video { flex:0 1 auto; width:100%; height:auto; max-height:calc(94dvh - 180px); min-height:0; object-fit:contain; background:#101b2f; }
.jp-video-dialog > p { flex-shrink:0; padding:12px 22px; font-size:13px; color:var(--muted); }
@media(max-width:500px) { .jp-demo-actions { gap:8px; font-size:11px; } .jp-demo-play { gap:7px; padding:10px; } .jp-video-dialog > p { padding:12px; font-size:12px; } }

.jp-research-panel { display:grid; }
.jp-research-panel .jp-shot { max-width:680px; }

/* Editorial headings. */
.product-page main h1,.product-page main h2,.product-page main h3 { font-family:Inter,sans-serif; font-weight:700; }
.product-page main h1 { letter-spacing:-.055em; line-height:1.08; }
.product-page main h2 { letter-spacing:-.045em; line-height:1.14; }
.product-page main h3 { letter-spacing:-.035em; }
.jp-heading-accent { color:#2852ce; }
.product-page .visual { border:0; border-radius:22px; background:transparent; box-shadow:none; }
.product-page .visual-canvas { border-radius:22px; }
.product-page .visual-controls { background:transparent; border:0; padding:14px 2px 0; flex-wrap:wrap; }
.product-page .visual-steps button,.product-page .motion-toggle { min-height:44px; }
.product-page .draft-paper { bottom:38px; top:68px; padding:20px; }
.product-page .draft-paragraph { margin-top:14px; }
.product-page .review-stamp { bottom:20px; }

.jp-voice-section { background:linear-gradient(125deg,#edf2fd,#f8faff 65%,#e8effc); }
.jp-voice-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start; gap:64px; }
.jp-voice-grid .jp-panel-copy { padding-top:28px; }
.jp-voice-grid .jp-kicker { margin-bottom:18px; }
.jp-voice-grid .visual { max-width:640px; width:100%; }
.jp-voice-grid .voice-canvas { height:420px; background:radial-gradient(ellipse at 50% 5%,#d8e4ff,transparent 70%); }
.jp-voice-grid .spoken-question { font-family:Inter,sans-serif; font-weight:600; letter-spacing:-.035em; }
.jp-voice-grid .jp-details .jp-shot { margin-top:8px; }

@media (max-width:950px) {
 .jp-voice-grid { grid-template-columns:1fr; }
 .jp-voice-grid .jp-panel-copy { max-width:680px; padding-top:0; }
 .jp-voice-grid .visual { margin-inline:auto; }
}
@media (max-width:680px) {
 .product-page .visual-controls { gap:2px 12px; }
 .product-page .visual-steps { gap:12px; }
 .product-page .visual-steps button { font-size:12px; }
 .product-page .draft-paper { inset-inline:8%; }



 .jp-voice-grid { gap:16px; }
 .jp-voice-grid .voice-canvas { height:380px; }
}
@media (prefers-reduced-motion:reduce) {
 .product-page [data-sequence] * { animation:none !important; transition:none !important; }
}

/* Small explanatory sequences belong to their product feature, beside its screenshot. */
.product-page .jp-inline-visual { margin:22px 0 0; max-width:440px; }
.product-page .jp-inline-visual .visual-canvas { height:280px; border-radius:12px; background:radial-gradient(ellipse at 50% 60%,#e1eafe 0%,#eef3fb70 48%,transparent 75%); }
.product-page .jp-inline-visual .visual-controls { padding:6px 0 0; gap:12px; flex-wrap:nowrap; }
.product-page .jp-inline-visual .visual-steps { flex:1; gap:10px; justify-content:space-between; }
.product-page .jp-inline-visual .visual-steps button { position:relative; min-height:38px; padding:8px 0; font-size:11px; }
.jp-inline-visual .visual-steps button::after { content:""; position:absolute; bottom:2px; left:0; right:0; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; }
.jp-inline-visual .visual-steps button[aria-pressed=true]::after { transform:scaleX(1); }
.jp-inline-visual[data-running=true] .visual-steps button[aria-pressed=true]::after { animation:feature-step-time 4s linear both; }
.product-page .jp-inline-visual .motion-toggle { flex:0 0 32px; min-height:38px; justify-content:center; font-size:16px; }
.jp-inline-visual .website-frame { inset:14px 5px 16px; }
.jp-inline-visual .browser-address { padding:8px 12px; gap:12px; font-size:10px; }
.jp-inline-visual .website-content { padding:14px 18px; }
.jp-inline-visual .website-brand { font-family:Inter,sans-serif; font-size:19px; }
.jp-inline-visual .website-brand span { font-size:11px; margin-top:4px; }
.jp-inline-visual .website-lines { gap:7px; margin:16px 0; }
.jp-inline-visual .website-cta { padding:9px 11px; font-size:12px; }
.jp-inline-visual .intake-form { width:86%; left:7%; top:19px; padding:14px; }
.jp-inline-visual .intake-form > strong { font-family:Inter,sans-serif; font-size:17px; }
.jp-inline-visual .form-example { padding:9px; margin-top:9px; font-size:12px; }
.jp-inline-visual .upload-example { padding:10px; margin-top:9px; font-size:12px; }
.jp-inline-visual .intake-progress { margin-top:12px; }
.jp-inline-visual .intake-result img { width:116px; height:116px; }
.jp-inline-visual .intake-result > strong { font-family:Inter,sans-serif; font-size:18px; }
.jp-inline-visual .intake-result > span { font-size:11px; margin-top:5px; }
.jp-inline-visual .result-check { font-size:11px; margin-top:12px; }
.jp-inline-visual .intake-progress i { transition:background .5s; }
.jp-inline-visual[data-phase="1"] .intake-progress i { background:var(--blue); transition-delay:.8s; }
.jp-inline-visual[data-phase="1"] .intake-progress i:last-child { transition-delay:1.4s; }
.jp-inline-visual .preparation-canvas { padding:10px 0; }
.jp-inline-visual .format-inputs { gap:6px; }
.jp-inline-visual .format-inputs > span { font-size:10px; padding:4px 7px; }
.jp-inline-visual .preparation-sheet { top:48px; inset-inline:3%; padding:12px 14px; }
.jp-inline-visual .preparation-title { font-size:14px; margin-bottom:8px; gap:8px; }
.jp-inline-visual .prepared-files { gap:4px; }
.jp-inline-visual .prepared-files > div { font-size:12px; padding:3px 0; }
.jp-inline-visual[data-phase="0"] .prepared-files > div:first-child { transform:translateY(29px); }
.jp-inline-visual[data-phase="0"] .prepared-files > div:nth-child(2) { transform:translateY(-29px); }
.jp-inline-visual .preparation-note { font-size:11px; line-height:1.45; margin-top:8px; padding-top:8px; gap:3px; }
.jp-inline-visual .preparation-note strong { font-weight:650; }
.jp-inline-visual .evidence-orbit { inset:6px 0 auto; height:140px; }
.jp-inline-visual .evidence-node { gap:3px; }
.jp-inline-visual .evidence-node .icon,.jp-inline-visual .evidence-node > strong { width:40px; height:40px; padding:8px; border-radius:10px; }
.jp-inline-visual .evidence-node > strong { padding:0; font-size:27px; line-height:40px; }
.jp-inline-visual .evidence-node span { font-size:10px; }
.jp-inline-visual .assessment-sheet { top:104px; inset-inline:3%; padding:11px 13px; }
.jp-inline-visual .assessment-sheet > strong { font-family:Inter,sans-serif; font-size:14px; margin-bottom:7px; }
.jp-inline-visual .assessment-row { font-size:11px; margin-top:4px; opacity:.35; transition:opacity .5s,transform .6s; }
.jp-inline-visual[data-phase="0"] .row-one,.jp-inline-visual[data-phase="1"] .row-one,.jp-inline-visual[data-phase="1"] .row-two,.jp-inline-visual[data-phase="2"] .assessment-row { opacity:1; transform:none; }
.jp-inline-visual .source-trace { font-size:10px; padding-top:7px; margin-top:7px; }
.jp-inline-visual .draft-inputs { top:7px; inset-inline:0; gap:10px; }
.jp-inline-visual .draft-inputs > span { font-size:11px; gap:6px; }
.product-page .jp-inline-visual .draft-paper { top:43px; bottom:29px; inset-inline:8%; padding:12px; }
.jp-inline-visual .paper-letterhead { font-size:10px; padding-bottom:6px; gap:2px; }
.jp-inline-visual .paper-letterhead span:first-child { font-family:Inter,sans-serif; font-size:14px; }
.product-page .jp-inline-visual .draft-paragraph { margin-top:9px; }
.jp-inline-visual .draft-paragraph > strong { font-size:10px; margin-bottom:5px; }
.jp-inline-visual .writing-lines { gap:4px; }
.jp-inline-visual .writing-lines i { height:3px; }
.jp-inline-visual .writing-lines i:nth-child(2) { transition-delay:.15s; }
.jp-inline-visual .writing-lines i:nth-child(3) { transition-delay:.3s; }
.product-page .jp-inline-visual .review-stamp { right:3px; bottom:7px; padding:7px 10px; font-size:11px; }



@keyframes feature-step-time { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media(max-width:950px) {
 .jp-voice-grid { gap:30px; }
 .product-page .jp-inline-visual { max-width:440px; }
}
@media(prefers-reduced-motion:reduce) {
 .jp-inline-visual .visual-steps button::after { animation:none !important; }
}

/* Reading focus: rerasterize at the displayed size, never stretch a GPU texture. */
.jp-shot .jp-shot-window { aspect-ratio:4/3; }
.jp-focus-toggle[hidden] { display:none; }
.jp-shot-window.jp-reading-window > img { position:absolute; max-width:none; height:auto; }
/* Screenshot actions float over the frame only when needed. */
.jp-shot-tools { position:absolute; z-index:3; top:18px; right:18px; display:flex; gap:6px; opacity:0; pointer-events:none; transition:opacity .18s; }
.jp-enlarge,.jp-shot-tools > button,.jp-shot-tools > a { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid #d4deeb; border-radius:8px; background:#fffffff2; color:#243e63; box-shadow:0 2px 8px #152b481a; cursor:pointer; }
.jp-enlarge { position:absolute; z-index:2; top:18px; right:18px; margin:0; opacity:0; transition:opacity .18s; }
.jp-shot-tools .jp-enlarge { position:static; width:auto; height:auto; opacity:1; border:0; background:none; box-shadow:none; }
.jp-enlarge .icon,.jp-shot-tools .icon { width:18px; height:18px; }
.jp-shot-link:hover .jp-shot-tools,.jp-shot-link:focus-within .jp-shot-tools,.jp-shot-link:hover > .jp-enlarge,.jp-shot-link:focus-visible > .jp-enlarge { opacity:1; pointer-events:auto; }
.jp-shot-tools > button:hover,.jp-shot-tools > a:hover { background:#edf3ff; border-color:#96afd9; color:var(--blue); }
.jp-shot-tools > :focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.jp-reading-window[data-focused=true] { cursor:move; }
@media(hover:none),(pointer:coarse),(max-width:700px) {
 .jp-shot-tools,.jp-enlarge { opacity:1; pointer-events:auto; }
 .jp-shot-tools { top:12px; right:12px; }
 .jp-enlarge { top:12px; right:12px; }
 .jp-shot-tools > button,.jp-shot-tools > a,.jp-enlarge { width:40px; height:40px; }
 .jp-shot-tools .jp-enlarge { width:auto; height:auto; }
}
@media(prefers-reduced-motion:reduce) { .jp-shot-tools,.jp-enlarge { transition:none; } }

/* Simple line symbols explain the feedback loop without repeating the section artwork. */
.icon.jp-loop-art { width:64px; height:64px; padding:17px; color:var(--blue); border-radius:50%; background:#eaf0fc; }

/* A viewport marker keeps every enlarged screenshot easy to orient within. */
.jp-shot .jp-reading-window { padding:0; }
.jp-focus-map { position:absolute; z-index:2; left:18px; bottom:18px; width:78px; border:2px solid #fff; border-radius:5px; background:#fff; box-shadow:0 2px 10px #14243b30; overflow:hidden; opacity:0; pointer-events:none; transition:opacity .18s; }
.jp-focus-map img { display:block; width:100%; height:auto; }
.jp-focus-map i { position:absolute; border:2px solid #2852ce; background:#2852ce20; }
.jp-shot-link[data-focused=true] .jp-focus-map { opacity:1; }
@media(max-width:700px) { .jp-focus-map { left:12px; bottom:12px; width:62px; } }
@media(prefers-reduced-motion:reduce) { .jp-focus-map { transition:none; } }

/* Shared disclosure surface, spacing and controls across the product page. */
.product-page { --detail-surface:#edf2f9; --detail-open:#e8eff9; --detail-nested:#fff; --detail-ink:#14243b; --detail-body:#526278; --detail-icon:#fff; --detail-accent:#2852ce; }
.jp-disclosure { margin-top:20px; border:0; border-radius:14px; background:var(--detail-surface); color:var(--detail-ink); transition:background-color .2s; }
.jp-disclosure[open] { background:var(--detail-open); }
.jp-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; padding:14px 18px; margin:0; font-size:14px; font-weight:600; line-height:1.5; color:var(--detail-ink); list-style:none; cursor:pointer; }
.jp-disclosure > summary::-webkit-details-marker { display:none; }
.jp-disclosure > summary:hover { color:var(--detail-accent); }
.jp-disclosure > summary:focus-visible { outline:2px solid var(--detail-accent); outline-offset:3px; border-radius:12px; }
.jp-disclosure-icon { display:grid; place-items:center; flex:0 0 28px; height:28px; border-radius:50%; background:var(--detail-icon); color:var(--detail-accent); font-size:21px; font-weight:400; line-height:1; }
.jp-disclosure[open] > summary > .jp-disclosure-icon { font-size:0; }
.jp-disclosure[open] > summary > .jp-disclosure-icon::after { content:'−'; font-size:21px; }
.jp-detail-content { padding:4px 18px 20px; color:var(--detail-body); font-size:14px; line-height:1.7; }
.jp-detail-content h3 { color:var(--detail-ink); }
.jp-disclosure .jp-disclosure { background:var(--detail-nested); }
.jp-disclosure .jp-disclosure > summary { font-size:13px; }
.jp-tint,.jp-voice-section { --detail-surface:#e8eef8; --detail-open:#e1eaf7; }
.jp-knowledge,.jp-compare-product { --detail-surface:#ffffff0d; --detail-open:#ffffff16; --detail-nested:#ffffff0d; --detail-ink:#fff; --detail-body:#d2e0f4; --detail-icon:#ffffff16; --detail-accent:#b9d2ff; }
.jp-compare-product .jp-disclosure { margin:0; }
.jp-compare-product .jp-disclosure > summary { padding:12px; gap:10px; }
.jp-compare-product .jp-detail-content { padding:0 14px 14px; }
.jp-compare-scope { max-width:820px; }
.jp-faq .jp-disclosure { margin:0 0 10px; }
.jp-disclosure.demo-options { padding:0; border:0; }
.jp-disclosure.demo-options[open] > summary { margin:0; }
.jp-disclosure.demo-options .jp-detail-content { color:var(--detail-ink); }
.jp-visual-details > .jp-detail-content { padding:8px 28px 28px; }
.jp-visual-details .jp-tabs { margin-bottom:26px; }
.jp-visual-details .jp-panel { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:36px; }
.jp-visual-details .jp-shot { margin-top:0; }
.jp-visual-details .jp-panel-copy h3 { font-size:23px; }
.jp-visual-details .presentation-visual { margin-top:24px; }
.jp-visual-details .presentation-canvas { height:360px; }
.jp-visual-details .deck-slide { inset:16px 8px 20px; }
.jp-visual-details .deck-back { inset:22px 14px 14px; }
.jp-visual-details .deck-page h4 { font-size:17px; }
.jp-visual-details .deck-page img { width:88px; height:88px; }
.jp-visual-details .deck-heading,.jp-visual-details .deck-footer { padding-inline:12px; }
.jp-visual-details .visual-steps { gap:4px; }
.jp-visual-details .visual-steps button { padding:8px; font-size:11px; }
@media(max-width:950px) { .jp-visual-details .jp-panel { grid-template-columns:1fr; gap:24px; } .jp-visual-details .presentation-visual { max-width:420px; } }
@media(max-width:700px) { .jp-disclosure > summary { padding:12px 14px; gap:12px; } .jp-detail-content { padding:4px 14px 18px; } .jp-visual-details > .jp-detail-content { padding:4px 14px 18px; } }
@media(prefers-reduced-motion:reduce) { .jp-disclosure { transition:none; } }

/* Header portrait above the live product demo. */
.jp-hero-people { display:block; width:100%; height:auto; object-fit:contain; }
.jp-hero > .container > .jp-hero-demo { width:min(100%,1000px); margin:46px auto 0; }

@media(max-width:950px) {
 .jp-hero-people { max-width:680px; justify-self:center; }
 .jp-hero > .container > .jp-hero-demo { margin-top:32px; }
}
@media(max-width:700px) {
 .jp-hero > .container > .jp-hero-demo { margin-top:28px; }

}

/* Feature-specific diagrams reuse the same three-step, viewport-aware sequence controls. */
.jp-op-canvas { color:var(--ink); font-size:12px; line-height:1.45; }
.jp-op-sheet { position:absolute; inset:24px 10px 42px; padding:16px; background:#fff; border-radius:12px; box-shadow:0 12px 28px #17396512; }
.jp-op-title { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:650; margin-bottom:14px; }
.jp-op-title .icon { width:22px; height:22px; color:var(--blue); flex-shrink:0; }
.jp-op-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; font-size:11px; }
.jp-op-row > strong { color:#294c89; font-size:10px; font-weight:600; text-align:right; }
.jp-op-chips { display:flex; gap:6px; margin-bottom:9px; }
.jp-op-chips span { padding:5px 8px; border-radius:6px; background:#edf2fc; color:#385784; font-size:10px; }
.jp-op-result { position:absolute; bottom:14px; left:12px; right:12px; display:flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:8px; background:#254f9a; color:#fff; border-radius:8px; font-size:10px; font-weight:550; text-align:center; }
.jp-op-result .icon { flex:0 0 16px; width:16px; height:16px; }
.jp-operation-visual .jp-op-at-1,.jp-operation-visual .jp-op-at-2 { opacity:0; transform:translateY(10px); transition:opacity .5s,transform .6s; }
.jp-operation-visual[data-phase="1"] .jp-op-at-1,.jp-operation-visual[data-phase="2"] .jp-op-at-1,.jp-operation-visual[data-phase="2"] .jp-op-at-2 { opacity:1; transform:none; }
.jp-op-canvas > .jp-op-network { position:absolute; inset:8px 0; }
.jp-op-person { position:absolute; width:116px; padding:10px 6px; border-radius:12px; background:#fff; box-shadow:0 8px 20px #17396512; text-align:center; }
.jp-op-person .icon { display:block; width:25px; height:25px; margin:0 auto 5px; color:var(--blue); }
.jp-op-person strong,.jp-op-person small { display:block; font-size:10px; }
.jp-op-person small { color:var(--muted); margin-top:3px; }
.jp-op-person-top { top:10px; left:calc(50% - 58px); }
.jp-op-person-left { left:4px; bottom:20px; }
.jp-op-person-right { right:4px; bottom:20px; }
.jp-op-connections { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#7c9dd9; stroke-width:2; stroke-dasharray:5 5; }
.jp-op-scan { padding:5px 9px; background:#f0f5ff; border-radius:7px; }
.jp-op-chart { height:110px; display:flex; align-items:end; justify-content:center; gap:28px; padding:0 12px; }
.jp-op-chart > div { height:100%; width:44px; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:5px; font-size:10px; color:var(--muted); }
.jp-op-chart i { display:block; width:100%; height:var(--bar-height); border-radius:5px 5px 0 0; background:#6087d2; transform:scaleY(.08); transform-origin:bottom; transition:transform .8s; }
.jp-operation-visual[data-phase="1"] .jp-op-chart i,.jp-operation-visual[data-phase="2"] .jp-op-chart i { transform:scaleY(1); }
.jp-op-chart > div:nth-child(2) i { background:#3c65b3; transition-delay:.12s; }
.jp-op-chart > div:nth-child(3) i { background:#234e99; transition-delay:.24s; }
.jp-op-chart-label { text-align:center; color:var(--muted); margin-top:8px; font-size:10px; }
.jp-op-task { display:flex; gap:8px; align-items:center; padding:10px; margin:8px 0; background:#edf3fc; border-radius:7px; font-size:11px; }
.jp-op-task .icon { width:22px; height:22px; flex-shrink:0; color:var(--blue); }
.jp-op-assignment { display:flex; align-items:center; gap:9px; margin-top:8px; }
.jp-op-assignment strong,.jp-op-assignment small { display:block; font-size:10px; }
.jp-op-assignment small { color:var(--muted); }
.jp-op-avatar { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#dae6fb; color:#2852a4; font-size:10px; }
.jp-op-message { position:absolute; top:16px; left:8px; right:32px; display:flex; align-items:start; gap:9px; padding:12px; background:#fff; border-radius:11px; box-shadow:0 8px 20px #1739650d; }
.jp-op-message .icon { width:22px; height:22px; flex-shrink:0; color:var(--blue); }
.jp-op-message strong,.jp-op-message span { display:block; font-size:11px; }
.jp-op-message span { color:var(--muted); margin-top:4px; }
.jp-op-message-review { top:102px; left:24px; right:8px; background:#e3edfc; }
.jp-op-message-in { top:188px; }
.jp-op-files { position:absolute; top:12px; left:10px; right:10px; display:flex; gap:7px; justify-content:center; }
.jp-op-files span { display:flex; align-items:center; gap:5px; padding:7px; background:#fff; border-radius:7px; font-size:10px; }
.jp-op-files .icon { width:17px; height:17px; color:var(--blue); }
.jp-op-bea .jp-op-sheet { top:62px; }
.jp-op-attachments { display:flex; align-items:center; gap:9px; padding:12px; margin-top:12px; border-radius:8px; background:#eaf1fc; }
.jp-op-attachments .icon { color:var(--blue); width:23px; height:23px; }
.jp-op-total { display:flex; justify-content:space-between; margin-top:8px; padding:10px; background:#e9f0fc; border-radius:7px; }
.jp-op-role { display:flex; align-items:center; justify-content:space-between; padding:10px; border-radius:7px; background:#eaf1fc; margin-bottom:8px; }
@media(max-width:360px) { .jp-op-sheet { padding:12px; inset-inline:4px; } .jp-op-title { font-size:12px; } .jp-op-chips span { padding:4px 6px; } .jp-op-chart { gap:20px; } }