/* 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:64px; gap:24px; }
.product-page .site-header .brand { font-size:25px; gap:8px; letter-spacing:-.8px; }
.product-page .site-header .brand img { width:25px; height:30px; }
.product-page .desktop-nav { gap:22px; }
.product-page .desktop-nav a { display:flex; align-items:center; min-height:40px; font-size:13px; white-space:nowrap; }
.product-page .header-actions { gap:16px; }
.product-page .header-actions .login-link { padding:10px 0; font-size:13px; }
.product-page .header-actions .button { min-height:40px; padding:9px 14px; font-size:13px; border-radius:6px; white-space:nowrap; }
.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; align-items:center; gap:8px; line-height:1; }
.brand-beta { display:inline-block; padding:4px 5px; border:1px solid var(--line); border-radius:4px; color:var(--muted); font-family:Inter,sans-serif; font-size:9px; line-height:1; font-weight:500; letter-spacing:.3px; text-transform:uppercase; }
.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; }
.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 { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr); align-items:center; gap:52px; 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-source-core { position:relative; text-align:center; }
.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: short rows, paired alternatives on mobile, optional details. */
.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; margin-inline:auto; text-align:center; }
.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) { .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 .header-inner { gap:12px; } .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; gap:8px; } .jp-source-list span,.jp-source-list a { padding:10px; font-size:12px; } .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; } }
@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 { 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-header h2 { font-size:20px; }

/* Großbildansicht: die Fläche gehört dem Bild, die Bedienung liegt als Randnotiz darüber. */
.jp-lightbox { inset:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#fff; overflow:hidden; }
.jp-lightbox[open] { display:flex; flex-direction:column; }
.jp-lightbox::backdrop { background:#080e1a; }
.jp-lightbox-stage { flex:1; min-height:0; display:flex; padding:18px 78px 6px; }
/* Das Bild füllt die Bühne und bleibt dabei unverzerrt. */
.jp-lightbox-stage img { flex:1; min-width:0; align-self:stretch; object-fit:contain; }
/* Hochformat: ein Querformat-Bild wird sonst winzig, deshalb füllt es die Höhe und wird geschoben. */
.jp-lightbox-stage[data-zoom="true"] { overflow:auto; overscroll-behavior:contain; }
.jp-lightbox-stage[data-zoom="true"] img { flex:none; width:auto; max-width:none; }
.jp-lightbox-stage[data-zoomable="true"] img { cursor:zoom-in; }
.jp-lightbox-stage[data-zoom="true"] img { cursor:zoom-out; }
.jp-lightbox-bar { display:flex; align-items:center; gap:20px; width:min(1600px,100%); margin:0 auto; padding:10px 26px 20px; }
.jp-lightbox-text { flex:1; min-width:0; }
.jp-lightbox-text h2 { font-size:15px; font-weight:600; letter-spacing:-.2px; color:#fff; }
.jp-lightbox-text p { margin:3px 0 0; font-size:13px; line-height:1.5; color:#ffffffa8; }
.jp-lightbox-count,.jp-lightbox-original { flex-shrink:0; font-size:12px; color:#ffffff8a; font-variant-numeric:tabular-nums; }
.jp-lightbox-original:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.jp-lightbox-step,.jp-lightbox-close { position:absolute; z-index:2; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:#0b1524a6; color:#ffffffcc; backdrop-filter:blur(6px); cursor:pointer; transition:background .18s,color .18s; }
.jp-lightbox-step { top:calc(50% - 50px); width:48px; height:48px; }
.jp-lightbox-step[data-screenshot-step="-1"] { left:16px; rotate:180deg; }
.jp-lightbox-step[data-screenshot-step="1"] { right:16px; }
.jp-lightbox-close { top:16px; right:16px; width:40px; height:40px; }
.jp-lightbox-step:hover,.jp-lightbox-close:hover { background:#1d2c45e6; color:#fff; }
.jp-lightbox :focus-visible { outline:2px solid #fff; outline-offset:2px; }
.jp-lightbox .icon { width:20px; height:20px; }
@media(max-width:700px) {
 .jp-lightbox-stage { padding:12px 12px 4px; }
 .jp-lightbox-bar { flex-wrap:wrap; gap:10px 14px; padding:8px 14px 14px; }
 .jp-lightbox-text { flex-basis:100%; order:1; }
 .jp-lightbox-text p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
 .jp-lightbox-step { position:static; order:2; width:42px; height:42px; }
 .jp-lightbox-step[data-screenshot-step="1"] { order:5; }
 .jp-lightbox-count { order:3; flex:1; text-align:center; }
 .jp-lightbox-original { order:4; }
 .jp-lightbox-close { top:10px; right:10px; }
}
@media(prefers-reduced-motion:reduce) { .jp-lightbox-step,.jp-lightbox-close { transition:none; } }
@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-orb { display:grid; place-items:center; width:144px; height:144px; margin:0 auto 16px; border-radius:50%; background:radial-gradient(circle at 35% 25%,#99baff55,#3b68ba22); box-shadow:inset 0 0 0 1px #9dc0ff26,0 0 50px #6199ff22; }
.jp-source-orb .icon { width:44px; height:44px; color:#a7c0ff; }
.jp-source-connections { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; fill:none; stroke:#9cbbed; stroke-width:1.5; }
.jp-source-connections marker path { fill:#9cbbed; stroke:none; }
.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-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; }
@media(max-width:700px) {

 .jp-source-flow { gap:24px; }
 .jp-source-core { display:block; padding:0; }
 .jp-source-core img { width:100px; height:100px; margin:0 auto 18px; }
 .jp-source-list > :nth-child(n) { margin-left:0; }
 .jp-source-list span,.jp-source-list a { padding:12px; }
 .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:4px; height:1px; 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; }

/* 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; }
.contact-banner .jp-heading-accent { color:#c9ddff; }
.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; }


@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%; }



}
@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); }
.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; }



@media(max-width:950px) {
 .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; }
.jp-shot-window.jp-shot-open { cursor:zoom-in; }
/* 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:30px; height:30px; padding:0; border:0; border-radius:7px; background:#ffffffb8; color:#5c6c83; backdrop-filter:blur(3px); cursor:pointer; transition:background .18s,color .18s; }
.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:15px; height:15px; }
.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:.85; pointer-events:auto; }
.jp-shot-tools:hover,.jp-shot-tools:focus-within { opacity:1; }
.jp-shot-tools > button:hover,.jp-shot-tools > a:hover { background:#fff; color:var(--blue); }
.jp-shot-tools > :focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@media(hover:none),(pointer:coarse),(max-width:700px) {
 .jp-shot-tools,.jp-enlarge { opacity:.72; 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:34px; height:34px; }
 .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; cursor:grab; touch-action:none; user-select:none; }
.jp-focus-map[data-dragging=true] { cursor:grabbing; }
.jp-focus-map img { display:block; width:100%; height:auto; pointer-events:none; }
.jp-focus-map i { position:absolute; border:2px solid #2852ce; background:#2852ce20; }
@media(max-width:700px) { .jp-focus-map { left:12px; bottom:12px; width:62px; } }

/* 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 { --detail-surface:#e8eef8; --detail-open:#e1eaf7; }
.jp-knowledge { --detail-surface:#ffffff0d; --detail-open:#ffffff16; --detail-nested:#ffffff0d; --detail-ink:#fff; --detail-body:#d2e0f4; --detail-icon:#ffffff16; --detail-accent:#b9d2ff; }
.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; }
.product-page .jp-inline-visual.presentation-visual .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; } }

/* Detail actions stay with the copy; animation controls belong to their scene. */
/* Beginnt immer eine eigene Zeile, auch neben einem Button im Fließtext. */
.jp-feature-trigger { display:flex; width:fit-content; align-items:center; gap:7px; align-self:flex-start; margin:12px 0 18px; padding:5px 0; min-height:34px; border:0; background:none; color:#315991; font:600 12px/1.4 Inter,sans-serif; cursor:pointer; }
.jp-feature-trigger > span { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#e5edf9; font:600 12px/1 Georgia,serif; }
.jp-feature-trigger:hover { color:var(--blue); }
.jp-feature-trigger:focus-visible { outline:2px solid var(--blue); outline-offset:4px; border-radius:4px; }
.jp-feature-popover { position:fixed; inset:auto; margin:0; padding:0; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 130px); overflow:auto; overscroll-behavior:contain; border:1px solid #d7e1ef; border-radius:16px; background:#f7f9fd; color:var(--ink); box-shadow:0 18px 65px #142b5533; }
.jp-feature-popover > header { position:sticky; top:0; z-index:4; display:flex; align-items:start; gap:16px; padding:18px 20px 14px; background:#f7f9fd; }
.jp-feature-popover h4 { flex:1; margin:0; font:650 16px/1.4 Inter,sans-serif; color:var(--ink); }
.jp-feature-popover > header button { display:grid; place-items:center; flex:0 0 32px; height:32px; padding:0; border:0; border-radius:50%; background:#e8eef8; color:var(--ink); cursor:pointer; }
.jp-feature-popover > header button .icon { width:16px; height:16px; }
.jp-feature-popover > .jp-detail-content { padding:0 20px 20px; }
.jp-feature-popover > header button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.product-page .visual[data-sequence] { border-radius:16px; background:#f0f4fb; }
.product-page .visual[data-sequence] .visual-controls { margin:0; padding:8px; gap:6px; flex-wrap:nowrap; background:#e6edf8; border-radius:0 0 16px 16px; }
.product-page .visual[data-sequence] .visual-steps { gap:4px; flex:1; }
.product-page .visual[data-sequence] .visual-steps button { flex:1; min-height:38px; padding:7px 6px; border-radius:8px; font-size:11px; line-height:1.3; color:#526684; }
.product-page .visual[data-sequence] .visual-steps button[aria-pressed=true] { background:#fff; color:#214cc2; box-shadow:0 2px 5px #16396a0c; }
.product-page .visual[data-sequence] .visual-steps button::after { bottom:1px; left:8px; right:8px; }
.product-page .visual[data-sequence] .motion-toggle { flex:0 0 30px; min-height:38px; padding:4px; border-radius:8px; background:#d9e4f5; }
@media(min-width:951px) {
 .jp-panel { align-items:stretch; }
 .jp-panel > .jp-panel-copy { display:flex; flex-direction:column; padding-top:0; }
 .jp-panel > .jp-panel-copy > .jp-inline-visual { margin-top:auto; }
 .jp-panel > .jp-panel-media > .jp-shot { height:100%; display:flex; flex-direction:column; }
 .jp-panel > .jp-panel-media > .jp-shot > figcaption { margin-top:auto; }
}
@media(max-width:950px) {
 .jp-panel > .jp-panel-copy { padding-top:0; }
 .product-page .jp-panel-copy > .jp-inline-visual { margin-top:0; }
}

/* Shared grid track reserves the tallest tab at the current viewport width. */
.jp-tabs-stable { display:grid; grid-template-columns:minmax(0,1fr); }
.jp-tabs-stable > .jp-tabs { grid-area:1 / 1; min-width:0; }
.jp-tabs-stable > .jp-panel { grid-area:2 / 1; min-width:0; }
.jp-tabs-stable > .jp-panel[hidden] { display:grid !important; visibility:hidden; pointer-events:none; }

/* The spoken and written case conversation uses the shared feature layout. */
.jp-inline-visual .voice-orb { top:12px; height:64px; }
.jp-inline-visual .voice-scene { inset:88px 14px 16px; }
.jp-inline-visual .spoken-question { font:600 19px/1.4 Inter,sans-serif; letter-spacing:-.035em; }
.jp-inline-visual .voice-evidence { padding:12px; gap:10px; }
.jp-inline-visual .voice-evidence strong { font-size:12px; }
.jp-inline-visual .voice-evidence span { font-size:11px; }
.jp-inline-visual .voice-context { font-size:12px; padding-bottom:8px; }
.jp-chat-symbol { display:grid; place-items:center; position:absolute; top:18px; left:calc(50% - 27px); width:54px; height:54px; border-radius:16px; background:#dfe9fc; color:var(--blue); }
.jp-chat-symbol .icon { width:28px; height:28px; }

/* Build the case sketch from parties, disputed access and supporting documents. */
.jp-sketch-sequence .jp-op-person-left,.jp-sketch-sequence .jp-op-person-right { bottom:82px; }
.jp-sketch-issue { position:absolute; bottom:48px; left:0; right:0; text-align:center; color:#294c89; font-size:11px; font-weight:600; }
.jp-sketch-evidence { position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:10px; }
.jp-sketch-evidence span { display:flex; align-items:center; gap:5px; padding:6px 9px; background:#fff; border-radius:7px; color:#526684; font-size:10px; }
.jp-sketch-evidence .icon { width:16px; height:16px; color:var(--blue); }

.bea-focus .jp-focus-map,.assessment-focus .jp-focus-map { left:auto; right:10px; }

/* Decision paths appear with the shared three-step animation. */
.jp-decision-lines { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#8aa9df; stroke-width:2; }
.jp-decision-root { display:grid; place-items:center; min-height:58px; position:absolute; top:20px; left:18%; right:18%; padding:16px 12px; border-radius:12px; background:#244e9a; color:white; text-align:center; box-shadow:0 10px 24px #244e9a20; }
.jp-decision-branches,.jp-decision-outcomes { position:absolute; left:3%; right:3%; display:grid; grid-template-columns:1fr 1fr; gap:22px; text-align:center; }
.jp-decision-branches { top:130px; }
.jp-decision-outcomes { top:213px; }
.jp-decision-branches > div,.jp-decision-outcomes > div { display:grid; place-items:center; min-height:44px; padding:8px; border-radius:9px; background:#fff; box-shadow:0 8px 20px #1739650d; font-size:11px; }
.jp-decision-outcomes > div { background:#dfeaff; color:#244e9a; font-weight:600; }
.login-link { border:0; padding:0; background:none; color:inherit; font-family:inherit; cursor:pointer; text-align:left; }
.login-link:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.mobile-nav .login-link { padding:10px 0; }
#beta-login-dialog { width:min(510px,calc(100% - 32px)); }
#beta-login-dialog .dialog-heading form { margin:0; }
#beta-login-dialog h2 { font-size:28px; letter-spacing:-.7px; }
#beta-login-dialog > p { font-size:14px; }
#beta-login-dialog > p a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
#beta-login-dialog .button-row { margin-top:24px; }

/* Konkretisierung 2026-09-17: Listen in Details, Automatisierungsmodi, Abschluss/Export */
.jp-detail-content ol,.jp-detail-content ul { margin:12px 0 0; padding-left:20px; display:grid; gap:8px; }
.jp-detail-content p + ol,.jp-detail-content p + ul { margin-top:14px; }
.jp-modes { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:8px 0 0; padding:0; }
.jp-modes li { padding:22px; border:1px solid #d5dfef; border-radius:14px; background:white; }
.jp-modes strong { display:block; font-size:15px; line-height:1.4; color:var(--ink); }
.jp-modes small { display:inline-block; margin-top:8px; padding:3px 8px; border-radius:999px; background:#e8eef8; color:var(--blue); font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; }
.jp-modes span { display:block; margin-top:10px; font-size:14px; color:var(--muted); }
.jp-never { margin:22px 0 28px; padding:22px; border:1px solid #d5dfef; border-radius:14px; background:white; }
.jp-never h3 { margin:0; font-size:15px; line-height:1.4; }
.jp-never .jp-points { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 28px; margin-top:14px; font-size:14px; color:var(--muted); }
.jp-never .jp-points strong { color:var(--ink); font-weight:600; }
.jp-extra { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:44px; padding-top:36px; border-top:1px solid var(--line); scroll-margin-top:110px; }
.jp-extra h3 { margin:0 0 10px; font-size:17px; line-height:1.4; }
.jp-extra p { margin:0; font-size:15px; color:var(--muted); }
@media(max-width:800px) { .jp-modes,.jp-never .jp-points,.jp-extra { grid-template-columns:1fr; } }
.jp-points { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; color:var(--ink); font-size:15px; line-height:1.5; }
.jp-points li { position:relative; padding-left:26px; }
.jp-points li::before { content:''; position:absolute; left:2px; top:.32em; width:11px; height:6px; border-left:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(-45deg); }

/* Umbau 2026-09-17: Anker, Eignung, Datenschutz, Preisnotiz, simulierte Falleinreichung */
.jp-anchor { display:block; height:0; }
.jp-try { margin:20px 0 4px; align-self:flex-start; }
.jp-points-minus li::before { top:.62em; width:11px; height:0; border-left:0; border-bottom:2px solid var(--muted); transform:none; }
.jp-fit { padding:28px; border:1px solid #d5dfef; border-radius:14px; background:white; }
.jp-fit .jp-points { margin:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 32px; }
.jp-trust { grid-template-columns:repeat(2,minmax(0,1fr)); }
.jp-trust-link { margin:24px 0 0; font-size:14px; }
.jp-trust-link a { position:relative; color:var(--blue); font-weight:600; }
.jp-price-note { margin:18px 0 0; font-size:12px; line-height:1.6; color:#c5d2ea; }
/* Simulierte Falleinreichung im Layout des Mandantenportals (neutral, Kanzleifarbe Grün wie in der Demo-Kanzlei). */
.intake-demo { --portal:#14543b; --portal-line:#e5e5e5; --portal-muted:#737373; position:fixed; width:min(960px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; background:transparent; overflow:visible; color:#0a0a0a; font-family:Inter,sans-serif; }
.intake-demo[open] { display:flex; flex-direction:column; gap:10px; }
.intake-demo::backdrop { background:#0d1b33b8; backdrop-filter:blur(5px); }
.intake-demo-meta { display:grid; gap:8px; color:#fff; }
.intake-demo-badge { margin:0; font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:#cfe0ff; }
.intake-demo-progress { list-style:none; display:flex; gap:6px; margin:0; padding:0; font-size:11px; color:#b9c8e6; }
.intake-demo-progress li { flex:1; padding-top:7px; border-top:3px solid #ffffff33; }
.intake-demo-progress li[data-state=done] { border-color:#9db4e8; }
.intake-demo-progress li[data-state=current] { border-color:#fff; color:#fff; font-weight:600; }
.portal-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; max-height:calc(100dvh - 110px); border-radius:12px; background:#fff; overflow:hidden; box-shadow:0 25px 90px #0a193988; }
.portal-header { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--portal-line); }
.portal-header strong { font-size:15px; font-weight:600; outline:none; }
.portal-context { margin-left:auto; font-size:12px; color:var(--portal-muted); }
.portal-close { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--portal-line); border-radius:8px; background:#fff; color:#0a0a0a; cursor:pointer; }
.portal-close .icon { width:15px; height:15px; }
.portal-shell[data-view=firm] .portal-header { background:linear-gradient(90deg,#1f3fa6,#16307c); border-color:transparent; color:#fff; }
.portal-shell[data-view=firm] .portal-header img { filter:invert(1); }
.portal-shell[data-view=firm] .portal-context { color:#d6e2ff; }
.portal-shell[data-view=firm] { --portal:#244dc4; }
.portal-body { display:grid; align-content:start; gap:10px; padding:16px; overflow-y:auto; overscroll-behavior:contain; font-size:14px; line-height:1.55; }
.portal-body > * { margin:0; }
.portal-heading { display:block; margin-top:6px !important; font-size:14px; font-weight:600; color:var(--portal); }
.portal-textarea { width:100%; padding:10px 12px; border:1px solid var(--portal-line); border-radius:8px; background:#fff; font:inherit; color:inherit; resize:vertical; }
.portal-textarea:focus-visible,.portal-button:focus-visible,.portal-close:focus-visible { outline:2px solid var(--portal); outline-offset:2px; }
.portal-hint-row { display:flex; justify-content:space-between; gap:16px; font-size:12px; color:var(--portal-muted); }
.portal-dropzone { display:grid; justify-items:center; gap:8px; padding:20px; border:2px dashed #d4d4d4; border-radius:10px; text-align:center; font-size:12px; color:var(--portal-muted); }
.portal-dropzone p { margin:0; }
.portal-mail-row { display:flex; align-items:center; gap:10px; padding:4px 8px; font-size:13px; color:#404040; }
.portal-icon { display:inline-grid; place-items:center; }
.portal-icon .icon { width:16px; height:16px; }
.portal-files { list-style:none; display:grid; gap:1px; margin:0; padding:0; }
.portal-file { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid #ececec; border-radius:8px; background:#fafafa; font-size:14px; color:#404040; }
.portal-file-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.portal-file-status { font-size:12px; font-weight:500; color:#16a34a; }
.portal-consent { display:flex; gap:10px; align-items:flex-start; margin-top:6px !important; font-size:13px; color:#404040; }
.portal-consent input { margin-top:3px; accent-color:var(--portal); }
.portal-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--portal-line); background:#fff; }
.portal-actions[hidden] { display:none; }
.portal-actions-note { font-size:12px; color:var(--portal-muted); }
.portal-button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 16px; border:1px solid transparent; border-radius:8px; font:600 14px/1.3 Inter,sans-serif; cursor:pointer; transition:background .15s; }
.portal-button.is-primary { background:var(--portal); color:#fff; }
.portal-button.is-primary:hover { filter:brightness(1.12); }
.portal-button.is-outline { border-color:var(--portal-line); background:#fff; color:#0a0a0a; font-weight:500; }
.portal-button.is-outline:hover { background:#f5f5f5; }
.portal-button.is-small { min-height:0; padding:5px 12px; font-size:12px; }
.portal-button:disabled { opacity:.5; cursor:not-allowed; }
.portal-processing { display:grid; justify-items:center; gap:10px; padding:36px 12px; text-align:center; }
.portal-processing h3,.portal-title { margin:0; font-size:17px; font-weight:600; line-height:1.4; }
.portal-processing p,.portal-muted { margin:0; max-width:520px; font-size:14px; color:var(--portal-muted); }
.portal-spinner { width:26px; height:26px; border:3px solid #e5e5e5; border-top-color:var(--portal); border-radius:50%; animation:portal-spin .9s linear infinite; }
.portal-success { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#dcfce7; color:#16a34a; }
.portal-success .icon { width:22px; height:22px; }
.intake-demo-log { list-style:none; display:grid; gap:6px; margin:8px 0 0; padding:0; font-size:13px; text-align:left; color:#404040; }
.intake-demo-log li { position:relative; padding-left:24px; animation:intake-log-in .3s both; }
.intake-demo-log li::before { content:''; position:absolute; left:2px; top:.35em; width:11px; height:6px; border-left:2px solid var(--portal); border-bottom:2px solid var(--portal); transform:rotate(-45deg); }
@keyframes intake-log-in { from { opacity:0; } to { opacity:1; } }
@keyframes portal-spin { to { transform:rotate(360deg); } }
.portal-question-head { display:grid; grid-template-columns:1fr auto; gap:6px 12px; font-size:13px; color:var(--portal-muted); }
.portal-question-head strong { color:#0a0a0a; font-weight:600; }
.portal-question-head i { grid-column:1 / -1; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--portal) var(--done),#ececec var(--done)); }
.portal-question { margin-top:8px !important; font-size:16px; font-weight:600; line-height:1.45; }
.portal-label { font-size:13px; font-weight:600; color:#0a0a0a; }
.portal-suggestions,.portal-tags { display:flex; flex-wrap:wrap; gap:8px; }
.portal-proposal { padding:16px; border-radius:8px; background:#f5f5f5; font-size:14px; line-height:1.7; white-space:pre-wrap; }
.intake-demo-request { display:grid; gap:12px; }
.portal-tags span { padding:3px 10px; border-radius:999px; background:#f1f1f1; font-size:12px; color:#404040; }
.intake-demo-score { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline; max-width:360px; font-size:13px; color:var(--portal-muted); }
.intake-demo-score b { font-size:18px; color:#0a0a0a; }
.intake-demo-score i { grid-column:1 / -1; height:6px; border-radius:6px; background:linear-gradient(90deg,#16a34a 78%,#ececec 78%); }
.portal-reasons { margin:0; padding-left:18px; display:grid; gap:4px; font-size:13px; color:#262626; }
.portal-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; font-size:13px; }
.portal-facts dt { color:var(--portal-muted); }
.portal-facts dd { margin:2px 0 0; font-weight:600; }
.intake-demo-sorted { list-style:none; margin:0; padding:0; font-size:13px; }
.intake-demo-sorted li { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:12px; padding:9px 0; border-top:1px solid var(--portal-line); }
.intake-demo-sorted span { color:var(--portal-muted); }
@media(max-width:800px) { .jp-fit .jp-points,.jp-trust { grid-template-columns:1fr; } }
@media(max-width:600px) { .intake-demo { width:calc(100% - 16px); } .portal-context { display:none; } .portal-facts { grid-template-columns:1fr; } .intake-demo-progress { font-size:10px; } .intake-demo-sorted li { grid-template-columns:1fr; gap:2px; } .portal-actions { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .intake-demo-log li,.portal-spinner { animation:none; } }

/* Screenshots: Bildunterschrift direkt unter dem Bild. */
.jp-panel .jp-shot figcaption { margin-top:14px; }

/* Ablauf-Animation: volle Breite unter Text und Bild, ohne Schritt-Tabs. */
.jp-flow { position:relative; margin:48px 0 0; padding:0; }
.jp-flow-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.jp-flow .motion-toggle { flex:0 0 24px; height:24px; justify-content:center; border-radius:50%; background:transparent; color:#8a9ab5; font-size:11px; padding:0; opacity:.6; transition:opacity .2s,color .2s; }
.jp-flow .motion-toggle:hover,.jp-flow .motion-toggle:focus-visible { opacity:1; color:var(--blue); }
.jp-flow-beam { flex:1; height:2px; border-radius:2px; background:#e3e9f3; }
.jp-flow-beam i { display:block; height:100%; width:12.5%; border-radius:3px; background:#a9bce6; transition:width 1.1s cubic-bezier(.3,.8,.2,1); }
.jp-flow[data-phase="1"] .jp-flow-beam i { width:37.5%; }
.jp-flow[data-phase="2"] .jp-flow-beam i { width:62.5%; }
.jp-flow[data-phase="3"] .jp-flow-beam i { width:100%; }
.jp-flow-track { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:0; padding:0; }
.jp-flow-step { display:flex; opacity:.5; transform:translateY(10px) scale(.97); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.2,1); }
.jp-flow-step.is-done { opacity:1; transform:none; }
.jp-flow-step.is-active { opacity:1; transform:translateY(-6px) scale(1.02); }
.jp-flow-card { flex:1; display:grid; align-content:start; gap:10px; min-height:196px; padding:18px; border:1px solid #d5dfef; border-radius:14px; background:#ffffffb3; font-size:13px; line-height:1.5; color:var(--muted); transition:background .6s,border-color .6s,box-shadow .6s; }
.jp-flow-step.is-done .jp-flow-card { background:#fff; }
.jp-flow-step.is-active .jp-flow-card { background:#fff; border-color:#7f9fee; box-shadow:0 22px 48px #1b3f7326,0 0 0 4px #6f9bff2e; }
.jp-flow-card > strong { font-size:14px; line-height:1.35; color:var(--ink); }
.jp-flow-card p { margin:0; }
.jp-flow-num { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#c3d0ea; color:#fff; font-size:11px; font-weight:600; transition:background .6s; }
.jp-flow-step.is-active .jp-flow-num,.jp-flow-step.is-done .jp-flow-num { background:linear-gradient(135deg,#4f7cff,#31c7e8); }
/* upcoming cards keep their content hidden */
.jp-flow-step:not(.is-active):not(.is-done) .jp-flow-card > :not(.jp-flow-num):not(strong) { opacity:0; }
.jp-flow-card > :not(.jp-flow-num):not(strong) { transition:opacity .4s; }
/* 1 · website */
.jp-flow-browser { display:grid; gap:7px; padding:12px; border:1px solid #cbd6e8; border-radius:8px; background:#fff; }
.jp-flow-browser i,.jp-flow-paper i { display:block; height:5px; border-radius:3px; background:#e5eaf1; }
.jp-flow-browser i:nth-child(2) { width:62%; }
.jp-flow-cta { position:relative; justify-self:start; margin-top:4px; padding:7px 10px; border-radius:5px; background:var(--blue); color:#fff; font-size:12px; }
.jp-flow-step.is-active .jp-flow-cta { animation:jp-flow-press 2.2s ease both; }
.jp-flow-cursor { position:absolute; right:-6px; bottom:-10px; width:0; height:0; border-left:9px solid #10203e; border-top:5px solid transparent; border-bottom:9px solid transparent; transform:rotate(-20deg); }
.jp-flow-step.is-active .jp-flow-cursor { animation:jp-flow-cursor 2.2s ease both; }
/* 2 · typed text and files */
.jp-flow-typed { min-height:3em; color:var(--ink); font-weight:500; }
.jp-flow-typed.is-typing::after { content:''; display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px; background:var(--blue); animation:jp-flow-caret .7s steps(1) infinite; }
.jp-flow-chips { display:flex; flex-wrap:wrap; gap:6px; }
.jp-flow-chips span { padding:4px 8px; border:1px dashed #9db4e8; border-radius:6px; background:#fff; font-size:11px; color:#315991; }
.jp-flow-step:is(.is-active,.is-done) .jp-flow-pop > * { animation:jp-flow-pop .55s cubic-bezier(.2,1.4,.4,1) both; }
.jp-flow-pop > :nth-child(1) { animation-delay:.9s !important; }
.jp-flow-pop > :nth-child(2) { animation-delay:1.15s !important; }
.jp-flow-pop > :nth-child(3) { animation-delay:1.4s !important; }
/* 3 · question, answer, checks */
.jp-flow-bubble { padding:8px 10px; border-radius:10px 10px 10px 2px; background:#e8eefb; color:var(--ink); font-weight:600; }
.jp-flow-answer { justify-self:end; padding:6px 10px; border-radius:10px 10px 2px 10px; background:var(--blue); color:#fff; font-size:12px; }
.jp-flow-step:is(.is-active,.is-done) .jp-flow-bubble { animation:jp-flow-slide .5s .1s both; }
.jp-flow-step:is(.is-active,.is-done) .jp-flow-answer { animation:jp-flow-slide-right .5s .6s both; }
.jp-flow-question { font-weight:600; color:var(--ink); }
.jp-flow-checks,.jp-flow-docs,.jp-flow-bars { list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.jp-flow-checks li { position:relative; padding-left:20px; }
.jp-flow-checks li::before { content:''; position:absolute; left:2px; top:.4em; width:9px; height:5px; border-left:2px solid #31c7e8; border-bottom:2px solid #31c7e8; transform:rotate(-45deg); }
/* chat · typed question on the right, opened document with marked passage */
.jp-flow-answer.is-typing::after { background:#fff; }
.jp-flow-answer[data-type] { min-height:2.2em; }
.jp-flow-doc { display:grid; gap:7px; padding:14px; border:1px solid #cbd6e8; border-radius:6px; background:#fff; }
.jp-flow-doc b { font-size:12px; color:var(--ink); }
.jp-flow-doc i { display:block; height:6px; border-radius:3px; background:#e5eaf1; }
.jp-flow-doc i:last-child { width:60%; }
.jp-flow-doc .is-marked { position:relative; overflow:hidden; }
.jp-flow-doc .is-marked::after { content:''; position:absolute; inset:0; background:#f8a5c8; transform-origin:left; }
.jp-flow-step:is(.is-active,.is-done) .jp-flow-doc .is-marked::after { animation:jp-flow-grow .8s .5s cubic-bezier(.2,.8,.2,1) both; }
.jp-flow-doc .is-marked + .is-marked::after { animation-delay:1s !important; }
.jp-flow-step.is-active .jp-flow-doc { animation:jp-flow-pop .6s cubic-bezier(.2,1.3,.4,1) both; }
/* 4 · score */
.jp-flow-score { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:baseline; }
.jp-flow-score b { font-size:24px; color:var(--ink); font-variant-numeric:tabular-nums; }
.jp-flow-score > i { grid-column:1 / -1; height:6px; border-radius:6px; background:#e3e9f3; overflow:hidden; }
.jp-flow-score em { display:block; height:100%; width:78%; border-radius:6px; background:linear-gradient(90deg,#1f9d55,#5fd38f); transform-origin:left; }
.jp-flow-step:is(.is-active,.is-done) .jp-flow-score em { animation:jp-flow-grow 1.2s .15s cubic-bezier(.2,.8,.2,1) both; }
/* work 1 · messy uploads */
.jp-flow-messy { padding:8px 0 4px; }
.jp-flow-messy span:nth-child(1) { transform:rotate(-7deg) translateY(3px); }
.jp-flow-messy span:nth-child(2) { transform:rotate(5deg) translateY(-2px); }
.jp-flow-messy span:nth-child(3) { transform:rotate(-3deg) translateX(6px); }
.jp-flow-messy span:nth-child(4) { transform:rotate(8deg); }
.jp-flow-step.is-active .jp-flow-messy span { animation:jp-flow-float 2.4s ease-in-out infinite alternate; }
.jp-flow-messy span:nth-child(even) { animation-delay:-1.2s; }
/* work 2 · sorted documents */
.jp-flow-docs li { position:relative; overflow:hidden; padding:6px 9px; border-radius:6px; background:#fff; border:1px solid #dbe4f4; font-size:12px; color:var(--ink); }
.jp-flow-docs li::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,#7fe3ff66 50%,transparent 70%); transform:translateX(-120%); }
.jp-flow-step.is-active .jp-flow-docs li::after { animation:jp-flow-shimmer 1s 1.6s both; }
.jp-flow-docs.jp-flow-pop > :nth-child(1) { animation-delay:.2s !important; }
.jp-flow-docs.jp-flow-pop > :nth-child(2) { animation-delay:.5s !important; }
.jp-flow-docs.jp-flow-pop > :nth-child(3) { animation-delay:.8s !important; }
/* work 3 · judgements */
.jp-flow-bars li { display:grid; gap:3px; font-size:11px; }
.jp-flow-bars i { display:block; height:6px; width:var(--w); border-radius:6px; background:linear-gradient(90deg,#1f9d55,#5fd38f); transform-origin:left; }
.jp-flow-bars .is-negative i { background:linear-gradient(90deg,#d9534f,#f0908c); }
.jp-flow-step:is(.is-active,.is-done) .jp-flow-bars i { animation:jp-flow-grow 1s .3s cubic-bezier(.2,.8,.2,1) both; }
.jp-flow-bars li:nth-child(2) i { animation-delay:.5s !important; }
.jp-flow-bars li:nth-child(3) i { animation-delay:.7s !important; }
/* work 4 · draft writes itself */
.jp-flow-paper { display:grid; gap:7px; padding:14px; border:1px solid #cbd6e8; border-radius:6px; background:#fff; }
.jp-flow-paper b { font-size:12px; color:var(--ink); }
.jp-flow-paper i { transform-origin:left; background:#c9d5ea; }
.jp-flow-paper i:nth-of-type(4) { width:55%; }
.jp-flow-step:is(.is-active,.is-done) .jp-flow-paper i { animation:jp-flow-grow .7s both; }
.jp-flow-paper i:nth-of-type(1) { animation-delay:.2s !important; }
.jp-flow-paper i:nth-of-type(2) { animation-delay:.6s !important; }
.jp-flow-paper i:nth-of-type(3) { animation-delay:1s !important; }
.jp-flow-paper i:nth-of-type(4) { animation-delay:1.4s !important; }
.jp-flow-paper span { justify-self:end; padding:3px 8px; border-radius:999px; background:#e8eefb; font-size:11px; font-weight:600; color:#214cc2; }
.jp-flow-step:is(.is-active,.is-done) .jp-flow-paper span { animation:jp-flow-pop .5s 1.8s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes jp-flow-pop { from { opacity:0; transform:scale(.6) translateY(8px); } }
@keyframes jp-flow-slide { from { opacity:0; transform:translateX(-14px); } }
@keyframes jp-flow-slide-right { from { opacity:0; transform:translateX(14px); } }
@keyframes jp-flow-grow { from { transform:scaleX(0); } }
@keyframes jp-flow-shimmer { to { transform:translateX(120%); } }
@keyframes jp-flow-caret { 50% { opacity:0; } }
@keyframes jp-flow-float { to { translate:0 -5px; } }
@keyframes jp-flow-press { 0%,55% { transform:none; box-shadow:0 0 0 0 #4f7cff66; } 65% { transform:scale(.94); } 75% { transform:none; box-shadow:0 0 0 10px #4f7cff00; } }
@keyframes jp-flow-cursor { 0% { transform:translate(60px,34px) rotate(-20deg); } 55%,100% { transform:rotate(-20deg); } }
.jp-knowledge { margin-top:48px; }
@media(max-width:900px) { .jp-flow-track { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .jp-flow { padding:20px 16px 22px; } .jp-flow-track { grid-template-columns:1fr; gap:12px; } .jp-flow-card { min-height:0; } .jp-flow-step.is-active { transform:none; } }
@media(prefers-reduced-motion:reduce) { .jp-flow-step,.jp-flow-beam i { transition:none; } }