/* Bloei's eigen procesvisual: alleen beweging na een bewuste stapkeuze. */
.copiloot-story{margin-top:40px}
.copiloot-story [hidden]{display:none!important}
.copiloot-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:24px}
.copiloot-tabs button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:12px 8px;border:1px solid #a8c3b9;border-radius:12px;background:#fffdf9;color:#28574a;font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.copiloot-tabs button span{font-family:Georgia,serif;font-size:20px;font-weight:400;color:#8b5b2c}
.copiloot-tabs button:hover{background:#e5f0e9}
.copiloot-tabs button[aria-selected=true]{background:#175c4c;border-color:#175c4c;color:#fff;box-shadow:inset 0 -4px #9ad6ba}
.copiloot-tabs button[aria-selected=true] span{color:#c2e8d6}
.copiloot-story :focus-visible{outline:3px solid #92601e;outline-offset:4px}
.copiloot-panel{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:36px;align-items:center;padding:32px;margin-bottom:24px;background:#fffdf9;border:1px solid #d3ded6;border-radius:20px}
.copiloot-explanation{min-width:0}
.copiloot-explanation h3{font-size:clamp(27px,2.6vw,38px);font-weight:600;line-height:1.15;margin:14px 0 20px;letter-spacing:-.02em}
.copiloot-explanation>p:not(.studio-overline){font-size:16px;line-height:1.75;color:#49685c}
.copiloot-explanation .copiloot-control{margin-top:20px;padding-left:16px;border-left:3px solid #33806b;font-weight:700}
.copiloot-panel figure{margin:0;min-width:0}
.copiloot-panel figure a{display:flex;align-items:center;aspect-ratio:1280/900;border:1px solid #d3ded6;border-radius:12px;background:#edf3ef;overflow:hidden}
.copiloot-panel img{display:block;width:100%;height:auto}
.copiloot-panel figcaption{font-size:12px;color:#4f6b60;margin-top:12px;text-align:center}
.copiloot-story.is-interactive .copiloot-panels{display:grid}
.copiloot-story.is-interactive .copiloot-panel{grid-area:1/1;margin-bottom:0;visibility:hidden;pointer-events:none}
.copiloot-story.is-interactive .copiloot-panel.is-active{visibility:visible;pointer-events:auto;animation:copiloot-in .22s ease-out}
@keyframes copiloot-in{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){
  .copiloot-tabs button{flex-direction:column;gap:4px;font-size:14px}
  .copiloot-panel{grid-template-columns:1fr;gap:24px;padding:26px}
}
@media(max-width:540px){
  .copiloot-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .copiloot-tabs button{flex-direction:row;justify-content:flex-start;padding:12px;min-height:52px}
  .copiloot-tabs button:last-child{grid-column:1/-1}
  .copiloot-panel{padding:22px 18px}
  .copiloot-explanation h3{font-size:29px}
}
@media(prefers-reduced-motion:reduce){
  .copiloot-tabs button{transition:none}
  .copiloot-story.is-interactive .copiloot-panel.is-active{animation:none}
}