/* Product areas, package examples and animation-to-catalogue navigation. */
.effect-program-path { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; margin: 0 0 20px; }
.effect-program-path > span { flex-basis: 100%; color: #d0dfdf; font-size: 15px; }
.effect-program-path a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; font-size: 15px; line-height: 1.55; text-decoration: underline; text-underline-offset: 5px; }
.position-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.position-scene { min-width: 0; scroll-margin-top: 104px; }
.position-scene figure { margin: 0 0 22px; }
.position-scene img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; }
.position-scene figcaption { margin-top: 14px; color: var(--gold); font-size: 14px; font-weight: 600; }
.position-scene h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.3; text-wrap: balance; }
.position-scene p { color: var(--muted); font-size: 15px; line-height: 1.75; }
.position-scene .position-targets { color: var(--ink); font-weight: 600; }
.position-scene .text-link { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 6px 0; font-size: 15px; line-height: 1.6; }
.position-scene-origin { margin: 22px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
#positions { scroll-margin-top: 104px; }
.program-motion-explainer { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 36px 50px; align-items: center; margin-top: 42px; padding-top: 36px; border-top: 1px solid var(--line); }
.program-motion-explainer h3 { margin: 0 0 16px; font-size: 27px; line-height: 1.3; }
.program-motion-explainer p:not(.eyebrow) { color: var(--muted); font-size: 16px; line-height: 1.75; }
.program-motion-explainer .procedure-video-frame { width: 100%; margin: 0; }
.package-choice-note { max-width: 900px; margin: 24px 0 34px; padding-left: 22px; border-left: 2px solid #83b9ac; scroll-margin-top: 104px; }
.package-choice-note h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.3; }
.package-choice-note p { color: var(--muted); font-size: 16px; line-height: 1.75; }
.package-choice-context { color: var(--muted); font-size: 15px; line-height: 1.75; }
.package-task-list { margin: 24px 0; }
.package-example-details > summary { min-height: 44px; line-height: 1.6; }
.package-example-details[open] > summary { padding-bottom: 8px; }
.package-task { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); scroll-margin-top: 104px; }
.package-task dt { color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.4; }
.package-task dd { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.package-task .package-task-position { color: #075b61; font-size: 13px; font-weight: 600; line-height: 1.6; }
.package-task a { display: inline-block; padding-block: 7px; text-underline-offset: 4px; }
.anatomy-scenario-note { margin: 0 0 16px; color: var(--anatomy-muted); font-size: 14px; line-height: 1.7; }
.anatomy-scenario-note a { display: inline-block; padding-block: 6px; }
.anatomy-package-choice { box-sizing: border-box; width: min(100%, 1160px); margin: 30px auto 0; padding: 28px 24px 0; border-top: 1px solid var(--anatomy-line); }
.anatomy-package-choice h2 { margin: 0 0 14px; color: var(--anatomy-ink); font-size: 25px; line-height: 1.3; }
.anatomy-package-choice p { color: var(--anatomy-muted); font-size: 15px; line-height: 1.7; }
.anatomy-page .anatomy-package-choice .text-link { display: inline-block; min-height: 44px; padding-block: 8px; color: var(--anatomy-ink); background: transparent; border-color: var(--anatomy-line); line-height: 1.6; text-underline-offset: 4px; }
.anatomy-page .anatomy-package-choice .text-link:hover { color: #fff; background: rgba(112, 222, 230, .08); border-color: #4ad1d9; }
.anatomy-package-choice .eyebrow { color: #e2c58d; }
.effect-program-path a:focus-visible { outline-color: #f1cb90; }
@media (max-width: 980px) and (min-width: 781px) {
  .position-scenes { gap: 22px; }
  .position-scene h3 { font-size: 21px; }
  .program-motion-explainer { gap: 30px; }
}
@media (max-width: 780px) {
  .position-scenes { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .position-scene { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
  .position-scene figure { margin: 0; }
  .position-scene h3 { font-size: 21px; }
  .position-scene p { font-size: 14px; line-height: 1.7; }
  .position-scene .text-link { font-size: 14px; }
  .program-motion-explainer { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 32px; }
  .program-motion-explainer h3 { font-size: 24px; }
  .package-task, .package-choice-note, .position-scene, #positions { scroll-margin-top: 90px; }
  .anatomy-package-choice { margin-top: 24px; }
}
@media (max-width: 480px) {
  .position-scene { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .position-scene figcaption { margin-top: 10px; }
  .position-scene h3 { font-size: 23px; }
  .position-scene p { font-size: 15px; }
  .position-scene .text-link { font-size: 15px; }
}
@media print {
  .effect-program-path, .anatomy-package-choice { display: none; }
  .position-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5mm; }
  .position-scene { display: block; break-inside: avoid; }
  .position-scene h3 { font-size: 12pt; }
  .position-scene p { font-size: 10pt; }
}