/* Hub actors: a short explanatory handoff and gentle, pausable character motion. */
.hero-with-dots { max-width: none; }
.hero-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero-description { min-width: 0; }
.hero-description .intro { margin-top: 0; }
.dots-scene { margin: 0; min-width: 0; }
.dots-stage { position: relative; padding: 54px 8px 24px; background: #edf1e6; border-radius: 16px; }
.dots-route { position: absolute; inset: 0; width: 100%; height: auto; pointer-events: none; }
.dots-colleagues { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.dot-colleague { min-width: 0; text-align: center; }
.dot-art { display: block; width: 100%; max-width: 138px; height: auto; margin: auto; overflow: visible; }
.dot-colleague strong { display: block; margin-top: 12px; font-size: 12px; font-weight: 650; }
.dot-colleague > span { display: block; margin: 5px auto 0; max-width: 13ch; font-size: 11px; line-height: 1.5; color: #4a614e; }
.dots-scene figcaption { margin: 16px 0 0; line-height: 1.6; }
.dots-scene figcaption strong { display: block; font-size: 12px; font-weight: 600; color: #314f3d; }
.dots-scene figcaption span { display: block; margin-top: 4px; font-size: 11px; color: #52644f; }
.dots-handoff { opacity: 0; }
/* easeInOutSine from https://easings.co/js/easing.js keeps the idle sway soft. */
.dot-colleague, .actor-portrait { --friendly-duration: 4.8s; --friendly-delay: 0s; --friendly-ease: cubic-bezier(.445, .05, .55, .95); }
:is(.dot-colleague, .actor-portrait).dot-bruno { --friendly-duration: 5.6s; --friendly-delay: .08s; }
:is(.dot-colleague, .actor-portrait).dot-kalle { --friendly-duration: 5.2s; --friendly-delay: .16s; }
:is(.dot-colleague, .actor-portrait).dot-luma { --friendly-duration: 6s; --friendly-delay: .24s; }
:is(.dot-colleague, .actor-portrait).dot-human { --friendly-duration: 6.4s; --friendly-delay: .32s; }
.friendly-character { transform-box: view-box; transform-origin: 60px 132px; }
.dot-human .friendly-character { transform-origin: 60px 108px; }
.eyes-blink, .character-shadow { transform-box: fill-box; transform-origin: center; }
:is(.dots-scene, .actor-portrait):is([data-motion="playing"], [data-motion="done"]) .friendly-character { animation: friendly-sway var(--friendly-duration) var(--friendly-ease) var(--friendly-delay) infinite; }
:is(.dots-scene, .actor-portrait):is([data-motion="playing"], [data-motion="done"]) .eyes-blink { animation: friendly-blink 6.4s linear var(--friendly-delay) infinite; }
:is(.dots-scene, .actor-portrait):is([data-motion="playing"], [data-motion="done"]) .character-shadow { animation: friendly-shadow var(--friendly-duration) var(--friendly-ease) var(--friendly-delay) infinite; }
.dots-scene[data-motion="done"] .dot-luma .arm.l, .actor-portrait.dot-luma[data-motion="done"] .arm.l { transform-box: fill-box; transform-origin: 70% 12%; animation: friendly-wave 6s cubic-bezier(.77, 0, .175, 1) infinite; }
.dots-scene[data-motion="done"] .dot-human .human-head, .actor-portrait.dot-human[data-motion="done"] .human-head { animation: friendly-nod 6.4s cubic-bezier(.77, 0, .175, 1) infinite; }
@keyframes friendly-sway {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-4px) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
  75% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes friendly-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.9); opacity: .75; } }
@keyframes friendly-blink { 0%, 38%, 42%, 76%, 80%, 100% { transform: scaleY(1); } 40%, 78% { transform: scaleY(.12); } }
@keyframes friendly-wave { 0%, 30%, 70%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(30deg) translate(2px, -4px); } 50% { transform: rotate(45deg) translate(2px, -7px); } }
@keyframes friendly-nod { 0%, 30%, 70%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(3px); } }
.dots-controls { margin: 12px 0 0; gap: 12px; }
.dots-controls[hidden] { display: none; }
.dots-motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #c7d3bf; border-radius: 7px; background: transparent; color: #415b48; font: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; }
.dots-motion-toggle:focus-visible { outline: 3px solid #71953b; outline-offset: 4px; }
.dots-control-play, .dots-motion-toggle[data-paused] .dots-control-pause { display: none; }
.dots-motion-toggle[data-paused] .dots-control-play { display: block; }
@media (hover: hover) and (pointer: fine) { .dots-motion-toggle:hover { background: #edf1e6; border-color: #8a9e7a; } }
:is(.dot-art, .actor-art) :is(.eyes, .body-g, .lens, .wrench, .human-head, .human-approval) { transform-box: fill-box; transform-origin: center; }
:is(.dot-art, .actor-art) .body-g { transform-origin: 50% 100%; }
:is(.dot-art, .actor-art) .arm { transform-box: fill-box; }
:is(.dot-art, .actor-art) .wrench { transform-origin: 20% 100%; }
:is(.dot-art, .actor-art) .watch-hand { transform-box: view-box; transform-origin: 89px 110px; }
.dots-scene[data-motion="playing"] .dots-handoff { animation: dots-handoff 4.8s cubic-bezier(.77, 0, .175, 1) both; }
.dots-scene[data-motion="playing"] .dot-bruno .eyes { animation: dots-scan .8s cubic-bezier(.77, 0, .175, 1) 1; }
.dots-scene[data-motion="playing"] .dot-bruno .watch-hand { animation: actor-clock .8s cubic-bezier(.77, 0, .175, 1) both; }
.dots-scene[data-motion="playing"] .dot-fink .arm.r { animation: dots-write .6s cubic-bezier(.77, 0, .175, 1) 2 .8s; }
.dots-scene[data-motion="playing"] .dot-kalle .arm.r { animation: dots-tool .4s cubic-bezier(.77, 0, .175, 1) 2 2s; }
.dots-scene[data-motion="playing"] .dot-kalle .wrench { animation: actor-tool .8s cubic-bezier(.77, 0, .175, 1) 1 2s; }
.dots-scene[data-motion="playing"] .dot-luma .eyes { animation: dots-scan 1.2s cubic-bezier(.77, 0, .175, 1) 1 2.8s; }
.dots-scene[data-motion="playing"] .dot-luma .lens { animation: dots-check 1.2s cubic-bezier(.77, 0, .175, 1) 1 2.8s; }
.dots-scene[data-motion="playing"] .dot-human .human-head { animation: actor-nod .8s cubic-bezier(.77, 0, .175, 1) 1 4s; }
.dots-scene[data-motion="playing"] .dot-human .human-approval { animation: actor-approve .6s cubic-bezier(.77, 0, .175, 1) 1 4.2s both; }
.dots-scene[data-motion="playing"] .hero-incoming { animation: hero-incoming 4.8s cubic-bezier(.23, 1, .32, 1) both; }
.dots-scene[data-motion="playing"] .dot-fink .paper .ln1 { animation: hero-draft-one 4.8s linear both; }
.dots-scene[data-motion="playing"] .dot-fink .paper .ln2 { animation: hero-draft-two 4.8s linear both; }
.dots-scene[data-motion="playing"] .dot-fink .paper .ln3 { animation: hero-draft-three 4.8s linear both; }
.dots-scene[data-motion="playing"] .dot-kalle .export-package { animation: hero-package 4.8s cubic-bezier(.23, 1, .32, 1) both; }
.dots-scene[data-motion="playing"] .dot-luma .test-pass { animation: hero-test-result 4.8s linear both; }
@keyframes hero-incoming { 0% { opacity: 0; transform: translateY(-6px); } 10%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes hero-draft-one { 0%, 20% { opacity: .15; } 26%, 100% { opacity: 1; } }
@keyframes hero-draft-two { 0%, 26% { opacity: .15; } 33%, 100% { opacity: 1; } }
@keyframes hero-draft-three { 0%, 33% { opacity: .15; } 40%, 100% { opacity: 1; } }
@keyframes hero-package { 0%, 42% { opacity: .2; transform: translateY(3px) scale(.95); } 58%, 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-test-result { 0%, 70% { opacity: 0; } 80%, 100% { opacity: 1; } }
:is(.dots-scene, .actor-portrait)[data-paused] * { animation-play-state: paused !important; }
@keyframes dots-handoff {
  0%, 6% { opacity: 0; transform: translate(0, 0); }
  10%, 14% { opacity: 1; transform: translate(0, 0); }
  24%, 32% { opacity: 1; transform: translate(84px, -14px); }
  42%, 50% { opacity: 1; transform: translate(168px, -20px); }
  60%, 70% { opacity: 1; transform: translate(252px, -14px); }
  84%, 94% { opacity: 1; transform: translate(336px, 0); }
  100% { opacity: 0; transform: translate(336px, 0); }
}
@keyframes dots-scan { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes dots-write {
  0%, 100% { transform: rotate(25deg) translate(-14px, -10px); }
  50% { transform: rotate(32deg) translate(-16px, -8px); }
}
@keyframes dots-check { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-12px); } }
@keyframes dots-tool {
  0%, 100% { transform: rotate(20deg) translate(-8px, -6px); }
  50% { transform: rotate(28deg) translate(-10px, -8px); }
}
.actors-section { padding: 64px 0 72px; border-top: 1px solid #d9e0d4; scroll-margin-top: 28px; }
.actors-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.actors-heading h2 { margin: 0; max-width: 14ch; font-weight: 600; }
.actors-heading > p { margin: 0; max-width: 52ch; font-size: 17px; }
.actor-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.actor-explanation { min-width: 0; }
.actor-portrait { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; --actor-duration: 5.2s; --actor-ease: cubic-bezier(.77, 0, .175, 1); --actor-reveal-ease: cubic-bezier(.23, 1, .32, 1); }
.actor-art { display: block; flex: 0 0 auto; width: 100%; max-width: 200px; height: auto; aspect-ratio: 200 / 168; overflow: visible; }
.actor-portrait > span { font-size: 12px; line-height: 1.4; color: #52644f; }
.actor-action-caption { display: block; font-size: 11px; line-height: 1.5; color: #638165; margin-top: 5px; }
/* Input → work → result: each story runs once on entry or deliberate replay. */
.actor-brief, .actor-thoughts, .actor-files, .actor-review-focus, .actor-review-pointer { opacity: 0; }
.actor-workspace :is(.actor-draft, .actor-package, .human-approval) { transform-box: fill-box; transform-origin: center; }
.actor-workspace :is(.actor-draft-one, .actor-draft-two, .actor-draft-three) { transform-box: fill-box; transform-origin: left center; }
.actor-portrait.dot-fink[data-motion="playing"] .arm.r { animation: actor-write var(--actor-duration) var(--actor-ease) both; }
.actor-portrait.dot-fink[data-motion="playing"] .paper .ln1 { animation: actor-line var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait.dot-fink[data-motion="playing"] .paper .ln2 { animation: actor-line-two var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait.dot-fink[data-motion="playing"] .paper .ln3 { animation: actor-line-three var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-brief { animation: actor-brief var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-thoughts { animation: actor-thinking var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-thought-two { animation: actor-thought var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-thought-three { animation: actor-thought-last var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-draft { animation: actor-draft var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-draft-one { animation: actor-draft-one var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-draft-two { animation: actor-draft-two var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-draft-three { animation: actor-draft-three var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait.dot-bruno[data-motion="playing"] .watch-hand { animation: actor-clock var(--actor-duration) var(--actor-ease) both; }
.actor-portrait.dot-bruno[data-motion="playing"] .eyes { animation: actor-look var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-incoming { animation: actor-incoming var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-notification { animation: actor-notification var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-signal-one { animation: actor-signal-one var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-signal-two { animation: actor-signal-two var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-signal-three { animation: actor-signal-three var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-awake { animation: actor-awake var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-awake-eyes { animation: actor-awake-eyes var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait.dot-kalle[data-motion="playing"] .wrench { animation: actor-tool var(--actor-duration) var(--actor-ease) both; }
.actor-portrait.dot-kalle[data-motion="playing"] .arm.r { animation: dots-tool .8s var(--actor-ease) 3 .2s; }
.actor-portrait[data-motion="playing"] .actor-files { animation: actor-files var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-file-one { animation: actor-file-one var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-file-two { animation: actor-file-two var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-file-three { animation: actor-file-three var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-package { animation: actor-package var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-package-lid { animation: actor-package-lid var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-package-seal { animation: actor-package-seal var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait.dot-luma[data-motion="playing"] .lens { animation: actor-check var(--actor-duration) var(--actor-ease) both; }
.actor-portrait.dot-luma[data-motion="playing"] .eyes { animation: actor-look var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-check-one { animation: actor-check-one var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-check-two { animation: actor-check-two var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-check-three { animation: actor-check-three var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-test-result { animation: actor-result var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait.dot-human[data-motion="playing"] .human-head { animation: actor-nod var(--actor-duration) var(--actor-ease) both; }
.actor-portrait.dot-human[data-motion="playing"] .human-approval { animation: actor-approve var(--actor-duration) var(--actor-reveal-ease) both; }
.actor-portrait[data-motion="playing"] .actor-review-focus { animation: actor-review-focus var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-review-pointer { animation: actor-review-pointer var(--actor-duration) var(--actor-ease) both; }
.actor-portrait[data-motion="playing"] .actor-signature { animation: actor-signature var(--actor-duration) var(--actor-reveal-ease) both; }
@keyframes actor-write {
  0%, 15%, 35%, 55%, 75%, 100% { transform: rotate(25deg) translate(-14px, -10px); }
  25%, 45%, 65% { transform: rotate(35deg) translate(-18px, -7px); }
}
@keyframes actor-line { 0%, 15% { opacity: .15; } 35%, 100% { opacity: 1; } }
@keyframes actor-line-two { 0%, 35% { opacity: .15; } 55%, 100% { opacity: 1; } }
@keyframes actor-line-three { 0%, 55% { opacity: .15; } 75%, 100% { opacity: 1; } }
@keyframes actor-clock { 0%, 10% { transform: rotate(0); } 35%, 45% { transform: rotate(120deg); } 65%, 75% { transform: rotate(240deg); } 95%, 100% { transform: rotate(360deg); } }
@keyframes actor-look { 0%, 100% { transform: translate(0, 0); } 25%, 55% { transform: translate(3px, 2px); } 75% { transform: translate(-2px, 1px); } }
@keyframes actor-tool { 0%, 15%, 40%, 65%, 100% { transform: rotate(0); } 25%, 50%, 75% { transform: rotate(-18deg); } }
@keyframes actor-check { 0%, 10%, 100% { transform: translate(0, 0); } 25%, 35% { transform: translate(52px, -45px); } 50%, 58% { transform: translate(52px, -18px); } 72%, 80% { transform: translate(52px, 9px); } }
@keyframes actor-result { 0%, 80% { opacity: 0; transform: translateY(3px); } 94%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes actor-nod { 0%, 55%, 90%, 100% { transform: translateY(0); } 72%, 80% { transform: translateY(4px); } }
@keyframes actor-approve { 0%, 68% { opacity: 0; transform: translateY(6px) scale(.95); } 90%, 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes actor-brief { 0% { opacity: 0; transform: translateY(-10px); } 12%, 24% { opacity: 1; transform: translateY(0); } 36%, 100% { opacity: 0; transform: translateY(16px); } }
@keyframes actor-thinking { 0%, 12%, 64%, 100% { opacity: 0; } 22%, 50% { opacity: 1; } }
@keyframes actor-thought { 0%, 18%, 50%, 100% { transform: translateY(0); } 28%, 40% { transform: translateY(-3px); } }
@keyframes actor-thought-last { 0%, 28%, 58%, 100% { transform: translateY(0); } 38%, 48% { transform: translateY(-3px); } }
@keyframes actor-draft { 0%, 22% { opacity: 0; transform: translateY(8px) scale(.95); } 38%, 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes actor-draft-one { 0%, 32% { opacity: 0; transform: scaleX(.95); } 48%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes actor-draft-two { 0%, 46% { opacity: 0; transform: scaleX(.95); } 64%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes actor-draft-three { 0%, 62% { opacity: 0; transform: scaleX(.95); } 80%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes actor-incoming { 0% { opacity: 0; transform: translateY(-10px); } 22%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes actor-notification { 0%, 20% { opacity: 0; transform: translateY(-3px); } 32%, 48%, 100% { opacity: 1; transform: translateY(0); } 40% { opacity: .6; transform: translateY(-2px); } }
@keyframes actor-signal-one { 0%, 38% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes actor-signal-two { 0%, 46% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes actor-signal-three { 0%, 54% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes actor-awake { 0%, 55% { opacity: .35; transform: translateY(5px); } 75%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes actor-awake-eyes { 0%, 55% { opacity: .1; } 70%, 100% { opacity: 1; } }
@keyframes actor-files { 0%, 16%, 68%, 100% { opacity: 0; } 26%, 54% { opacity: 1; } }
@keyframes actor-file-one { 0%, 30% { transform: translate(0, 0); } 58%, 100% { transform: translate(23px, 28px); } }
@keyframes actor-file-two { 0%, 38% { transform: translate(0, 0); } 60%, 100% { transform: translate(1px, 28px); } }
@keyframes actor-file-three { 0%, 46% { transform: translate(0, 0); } 66%, 100% { transform: translate(-21px, 28px); } }
@keyframes actor-package { 0%, 44% { opacity: .45; transform: translateY(5px); } 70%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes actor-package-lid { 0%, 64% { transform: translateY(-9px); } 82%, 100% { transform: translateY(0); } }
@keyframes actor-package-seal { 0%, 78% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes actor-check-one { 0%, 28% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes actor-check-two { 0%, 52% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes actor-check-three { 0%, 74% { opacity: 0; } 84%, 100% { opacity: 1; } }
@keyframes actor-review-focus { 0%, 16% { opacity: 0; transform: translateY(0); } 22%, 34% { opacity: .35; transform: translateY(0); } 46%, 54% { opacity: .35; transform: translateY(16px); } 66%, 72% { opacity: .35; transform: translateY(32px); } 84%, 100% { opacity: 0; transform: translateY(32px); } }
@keyframes actor-review-pointer { 0%, 16% { opacity: 0; transform: translateY(0); } 22%, 34% { opacity: 1; transform: translateY(0); } 46%, 54% { opacity: 1; transform: translateY(16px); } 66%, 72% { opacity: 1; transform: translateY(32px); } 84%, 100% { opacity: 0; transform: translateY(32px); } }
@keyframes actor-signature { 0%, 70% { opacity: 0; } 88%, 100% { opacity: 1; } }
.actor-description { padding-top: 20px; border-top: 1px solid #c7d3bf; }
.actor-description h3 { margin: 0 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.actor-description > p { margin: 0; font-size: 14px; line-height: 1.7; }
.actor-description .actor-definition { margin-top: 16px; font-size: 12px; line-height: 1.6; color: #415b48; }
.actor-description .actor-example { margin-top: 16px; font-size: 12px; line-height: 1.6; }
.actor-example strong { font-weight: 600; color: #314f3d; }
.actors-workflow { margin-top: 48px; padding: 28px 32px; background: #edf1e6; border-radius: 16px; }
.actors-workflow h3 { margin: 0 0 24px; font-size: 20px; font-weight: 600; }
.actors-process-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-bottom: 28px; }
.actors-process-copy p { max-width: 65ch; margin: 0; font-size: 14px; line-height: 1.75; }
.actors-workflow h4 { margin: 0 0 24px; font-size: 15px; line-height: 1.5; font-weight: 600; }
.actors-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.actors-flow li { position: relative; min-width: 0; }
.actors-flow li + li::before { content: ''; position: absolute; left: -20px; top: 12px; width: 7px; height: 7px; border-top: 1px solid #6c8559; border-right: 1px solid #6c8559; transform: rotate(45deg); }
.actors-flow span { display: block; margin-bottom: 8px; font-size: 12px; color: #415b48; }
.actors-flow strong { display: block; font-size: 14px; line-height: 1.5; font-weight: 600; }
.actors-workflow > p { max-width: 78ch; font-size: 13px; line-height: 1.7; margin: 24px 0 0; }
.actors-note { margin: 24px 0 0; max-width: 80ch; font-size: 12px; color: #52644f; }
@media (max-width: 1000px) {
  .hero-bottom { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; }
  .dots-stage { padding-inline: 10px; }
  .actor-list { grid-template-columns: 1fr; gap: 0; }
  .actor-explanation { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; padding: 24px 0; border-top: 1px solid #d9e0d4; }
  .actor-portrait { align-items: center; gap: 12px; margin: 0; }
  .actor-description { padding: 0; border: 0; }
  .actor-description > p { max-width: 65ch; }
}
@media (max-width: 760px) {
  .hero-bottom { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .dots-scene { order: -1; width: 100%; max-width: 480px; }
  .dots-stage { padding: 46px 8px 20px; }
  .dot-art { max-width: 120px; }
  .dot-colleague strong { font-size: 12px; margin-top: 8px; }
  .dot-colleague > span { font-size: 11px; }
  .dots-scene figcaption { margin-top: 12px; }
  .actors-section { padding: 36px 0 44px; }
  .actors-heading { grid-template-columns: 1fr; gap: 20px; }
  .actors-heading > p { font-size: 15px; }
  .actor-list { margin-top: 28px; }
  .actor-explanation { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .actor-portrait { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 16px; }
  .actor-portrait > span { font-size: 12px; }
  .actor-description h3 { font-size: 21px; }
  .actors-workflow { margin-top: 20px; padding: 24px; }
  .actors-process-copy { grid-template-columns: 1fr; gap: 16px; }
  .actors-flow { grid-template-columns: 1fr; gap: 24px; }
  .actors-flow li + li::before { left: 3px; top: -16px; transform: rotate(135deg); }
  .actors-flow span { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dots-scene *, .actor-portrait * { animation: none !important; }
}