/* De scènes zijn illustratieve voorbeelden, geen bedienbare onderdelen. */
.journey-example{display:flex;align-items:center;gap:8px;margin-bottom:22px;font-size:10px;color:var(--muted)}
.journey-example>span{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.journey-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0}
.journey-step{min-width:0}
.journey-scene{position:relative;min-height:286px;padding:18px 13px 10px;background:#f1ece4;border:1px solid #e9e2d8;border-radius:10px;overflow:hidden}
.journey-step:nth-child(2) .journey-scene{background:#e9eee7;border-color:#dee5db}
.journey-step:nth-child(3) .journey-scene{background:#f8ece3;border-color:#efdfd2}
.journey-step:nth-child(4) .journey-scene{background:#eeeee5;border-color:#e1e2d3}
.journey-caption{display:flex;align-items:center;gap:10px;font-size:9px;color:var(--muted);line-height:1.3}
.journey-index{display:grid;place-items:center;width:27px;height:27px;background:var(--paper);border:1px solid #dcd5cb;border-radius:50%;font-size:11px;font-weight:700;color:var(--ink)}
.journey-copy{padding:22px 4px 0}
.journey-copy h3{font-size:17px;line-height:1.4;margin-bottom:11px}
.journey-copy p{font-size:12px;line-height:1.85}
.step-visual{position:relative;width:100%;max-width:280px;height:226px;margin-inline:auto;display:flex;align-items:center;justify-content:center;color:var(--ink);font-style:normal;font-family:var(--sans);line-height:1.5;isolation:isolate}
.step-visual:before{content:'';position:absolute;z-index:-1;width:168px;height:168px;border:1px solid #b8ad9a35;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.scene-card{width:calc(100% - 14px);max-width:240px;background:var(--paper);border:1px solid #ddd5c9;border-radius:7px;box-shadow:0 8px 17px #4637230b;overflow:hidden;text-align:left}
.scene-browserbar{height:27px;border-bottom:1px solid #e9e3db;padding:0 10px;display:flex;align-items:center;gap:3px}
.scene-browserbar>i{width:3px;height:3px;border-radius:50%;background:#cbc5bb}
.scene-browserbar>span{margin-left:9px;font-size:7px;color:var(--muted)}
.scene-brand{display:flex;align-items:center;gap:7px;padding:12px;border-bottom:1px solid #e9e3db}
.scene-brand img{object-fit:contain;flex:none}
.scene-brand strong{font-size:8px;display:block}
.scene-brand span{font-size:7px;color:var(--muted);display:block}
.mini-website{position:absolute;top:29px;height:126px}
.website-skeleton{padding:12px 13px}
.skeleton-nav{display:flex;align-items:center;gap:7px;padding-bottom:10px;border-bottom:1px solid #eee8df}
.skeleton-nav b{height:6px;width:32px;background:#bcb2a0;border-radius:2px;margin-right:auto}
.skeleton-nav span{height:3px;width:18px;background:#ded7cc;border-radius:2px}
.skeleton-content{display:flex;gap:12px;padding-top:13px}
.skeleton-content>div:first-child{flex:1}
.skeleton-content b,.skeleton-content span{display:block;height:4px;background:#cec5b6;margin-bottom:5px;width:80%;border-radius:1px}
.skeleton-content b:nth-child(2){width:60%}
.skeleton-content span{height:2px;background:#e1d9ce;margin-bottom:3px;width:90%}
.skeleton-content i{display:block;width:31px;height:9px;background:#dca387;border-radius:2px;margin-top:7px}
.skeleton-photo{width:61px;height:56px;background:#ece4d8;display:grid;place-items:center;border-radius:3px;color:#b0a28c}
.connection-wire{position:absolute;top:154px;width:1px;height:18px;background:#c0b4a0}
.connection-tile{position:absolute;top:170px;left:0;right:0;display:flex;align-items:center;gap:7px;padding:9px 10px;background:var(--paper);border:1px solid #d9d0c3;border-radius:7px;box-shadow:0 7px 13px #493a2510}
.connection-tile img{flex:none;object-fit:contain}
.connection-tile>div{min-width:0;flex:1}
.connection-tile strong{font-size:8px;display:block}
.connection-tile div span{font-size:7px;color:var(--muted);display:block;margin-top:2px}
.connection-tile>.icon{color:#607052}
.mini-chat{max-width:228px}
.mini-chat .scene-brand{padding:10px;background:#fffdf9}
.scene-message{background:#dce8d3;border-radius:6px 1px 6px 6px;padding:9px 10px;font-size:9px;line-height:1.7;margin:14px 9px 0 24px;box-shadow:0 1px 1px #283c1d0a}
.scene-message small{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:6px;color:#68785e;margin-top:3px}
.scene-message small>.icon{color:#5898a2}
.scene-reply{display:flex;gap:3px;margin:10px 0 10px 11px;background:#efede6;width:max-content;padding:8px 10px;border-radius:5px 5px 5px 1px}
.scene-reply>span{width:3px;height:3px;border-radius:50%;background:#aaa394}
.scene-composer{display:flex;align-items:center;gap:7px;border-top:1px solid #ece8df;padding:8px 10px;color:#8d887f}
.scene-composer>span{font-size:7px;flex:1}
.mini-proposal{max-width:226px;padding:12px}
.proposal-heading{display:flex;align-items:center;gap:6px;padding-bottom:10px;border-bottom:1px solid #eee7dd}
.proposal-heading>.icon{color:var(--orange-dark)}
.proposal-heading>strong{font-size:9px;flex:1}
.proposal-heading>span{font-size:7px;color:var(--muted);border:1px solid #e1d7ca;padding:1px 5px;border-radius:3px}
.proposal-old{padding:10px 1px 8px}
.proposal-old>span,.proposal-new>span{display:block;font-size:6px;letter-spacing:.07em;color:#837b6c}
.proposal-old p{font-size:8px;margin-top:4px;line-height:1.6}
.proposal-new{padding:9px 10px;background:#fbecdf;border-left:2px solid #cf7851}
.proposal-new>span{color:var(--orange-dark);font-size:5.7px}
.proposal-new p{font-size:9px;line-height:1.6;color:var(--ink);margin-top:5px}
.proposal-pending{display:flex;align-items:center;gap:5px;font-size:7px;color:#8e6538;margin-top:11px}
.proposal-pending>span{height:4px;width:4px;background:#ba8449;border-radius:50%}
.mini-published{position:absolute;top:21px;max-width:228px}
.published-content{padding:17px 17px 14px}
.published-content>span{font-size:6px;color:var(--muted);letter-spacing:.12em;display:block;margin-bottom:8px}
.published-content>strong{font-family:var(--serif);font-weight:400;font-size:22px;font-style:italic;line-height:1.1;letter-spacing:-.02em;display:block}
.published-content>p{font-size:9px;margin-top:9px;color:var(--orange-dark)}
.published-badge{display:flex;align-items:center;gap:4px;width:max-content;padding:3px 6px;border-radius:3px;background:#ecf0e5;color:#586d47;font-size:6px;margin-top:11px}
.approval-receipt{position:absolute;bottom:1px;left:9px;display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--paper);border:1px solid #d9d3c5;border-radius:6px;box-shadow:0 5px 13px #493a2510}
.approval-receipt>span{width:25px;height:25px;display:grid;place-items:center;background:#dce5d2;border-radius:50%;color:#506742}
.approval-receipt strong{font-size:8px;display:block}
.approval-receipt small{font-size:6px;color:var(--muted);display:block;margin-top:2px;letter-spacing:.025em}
.mini-account{max-width:223px}
.scene-input{margin:10px 12px 0;padding:5px 8px;border:1px solid #e3dbd0;border-radius:3px}
.scene-input>span{font-size:6px;color:var(--muted);display:block}
.scene-input>strong{font-size:8px;font-weight:500}
.scene-action{margin:11px 12px 12px;background:var(--orange-dark);color:white;border-radius:3px;padding:7px 10px;text-align:center;font-size:8px;font-weight:600}
.scene-floating-label{display:flex;align-items:center;justify-content:center;gap:6px;position:absolute;bottom:-6px;left:5px;right:5px;width:max-content;max-width:100%;margin-inline:auto;padding:7px 10px;border:1px solid #ded5c7;background:var(--paper);border-radius:5px;font-size:7px;box-shadow:0 3px 9px #493a250b}
.scene-floating-label>.icon{color:#657051}
.mini-plugin{max-width:225px}
.plugin-identity{display:flex;gap:10px;align-items:center;padding:15px 14px 11px}
.plugin-identity strong{font-size:11px;line-height:1.4;display:block}
.plugin-identity div>span{font-size:7px;color:var(--muted);display:block;margin-top:3px}
.plugin-file{display:flex;align-items:center;gap:7px;margin:0 12px;padding:7px;border:1px solid #e3dbd0;border-radius:4px;color:#7f7564}
.plugin-file>span{font-size:8px;flex:1}
.plugin-file>.icon:last-child{color:#5f754b}
.mini-access{max-width:228px;padding:12px}
.access-person{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #eee7dd}
.access-person>span{width:25px;height:25px;display:grid;place-items:center;background:#eee9df;border-radius:50%;font-size:7px;color:#84745b}
.access-person>div{flex:1}
.access-person strong{font-size:8px;display:block}
.access-person small{font-size:7px;color:var(--muted);display:block}
.access-person>.icon{color:#677c55}
.access-footnote{padding-top:9px;font-size:6.5px;color:var(--muted)}
@media(min-width:1500px){.journey-scene{padding-inline:17px}.step-visual{height:234px}.journey-scene{min-height:294px}}
@media(max-width:1050px) and (min-width:801px){.journey-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}.journey-scene{padding-inline:25px}.journey-copy{padding-top:17px}.step-visual{max-width:280px}}
@media(max-width:800px){.journey-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 17px}.journey-scene{padding:14px 10px 10px;min-height:280px}.journey-caption{gap:7px;font-size:8px}.journey-copy{padding:17px 1px 0}.journey-copy h3{font-size:16px}.journey-copy p{font-size:11px}}
@media(max-width:540px){.journey-steps{grid-template-columns:1fr;gap:30px}.journey-scene{min-height:282px;padding:15px 20px 12px}.journey-caption{font-size:10px;gap:10px}.journey-copy{padding:16px 2px 0}.journey-copy h3{font-size:19px;margin-bottom:8px}.journey-copy p{font-size:13px}.step-visual{max-width:265px}.journey-example{font-size:9px}.journey-index{width:28px;height:28px}.scene-card{max-width:246px}.mini-chat{max-width:236px}.scene-message{font-size:10px}.journey-copy p{max-width:410px}}
@media(max-width:1024px){
    .journey-step{min-width:0}
    .journey-caption{font-size:12px;line-height:1.6;gap:9px}
    .journey-index{flex:none;font-size:12px}
    .journey-copy h3{overflow-wrap:break-word;line-height:1.45}
    .journey-copy p{font-size:13px;line-height:1.85}
    .journey-example{font-size:12px;line-height:1.7}
    .journey-example>span{flex:none}
}